From 74e6a1d20f9e955ca5a09ea0926534f8c9b7a351 Mon Sep 17 00:00:00 2001
From: "Planoetscher Daniel (Student Com20)"
<daniel.planoetscher@stud-inf.unibz.it>
Date: Thu, 20 May 2021 23:09:50 +0200
Subject: [PATCH] changes for avatar
---
.../src/components/forms/UserForm/index.tsx | 28 +++++++++++++++----
client/src/pages/Settings/index.tsx | 10 +++++--
client/src/pages/Tasks/TaskStart/index.tsx | 1 -
3 files changed, 31 insertions(+), 8 deletions(-)
diff --git a/client/src/components/forms/UserForm/index.tsx b/client/src/components/forms/UserForm/index.tsx
index 898c178..69eadca 100644
--- a/client/src/components/forms/UserForm/index.tsx
+++ b/client/src/components/forms/UserForm/index.tsx
@@ -5,7 +5,7 @@ import TextInput from 'components/ui/TextInput';
import Button from 'components/ui/Button';
interface Props {
- onSubmit?: (name?: string, email?: string,) => void;
+ onSubmit?: (name?: string, email?: string, avatar?: File) => void;
user: User
}
@@ -21,15 +21,29 @@ function validateEmail(email?: string): string | null {
}
}
+function validateAvatar(avatar?: File): string | null {
+ const validTypes = ['image/jpg', 'image/png', 'image/gif']
+ if (avatar) {
+ if (validTypes.find((type) => type === avatar.type)) {
+ return null;
+ } else {
+ return 'Only files from type jpg, png or gif are allowed'
+ }
+ } else {
+ return null;
+ }
+}
+
export default function UserForm({ user, onSubmit }: Props) {
const [name, setName] = useState(user.realname);
const [email, setEmail] = useState(user.email);
+ const [avatar, setAvatar] = useState<File>();
const handleSubmit = useCallback(async (e: FormEvent) => {
e.preventDefault();
- if (validateEmail(email) === null) {
- onSubmit?.(name, email);
+ if (validateEmail(email) === null || validateAvatar(avatar) === null) {
+ onSubmit?.(name, email, avatar);
}
- }, [onSubmit, name, email]);
+ }, [onSubmit, name, email, avatar]);
return (
<form onSubmit={handleSubmit} className="user-form">
<div className="fields">
@@ -49,7 +63,11 @@ export default function UserForm({ user, onSubmit }: Props) {
<div className="avatar-upload">
<div className="label">Avatar</div>
<label htmlFor="avatar" className="avatar-field">
- <input type="file" id="avatar" name="avatar" />
+ <input type="file" id="avatar" name="avatar" onChange={(e) => {
+ if (e.target.files && e.target.files.length > 0) {
+ setAvatar(e.target.files[0])
+ }
+ }} />
</label>
</div>
</div>
diff --git a/client/src/pages/Settings/index.tsx b/client/src/pages/Settings/index.tsx
index 3097213..204a830 100644
--- a/client/src/pages/Settings/index.tsx
+++ b/client/src/pages/Settings/index.tsx
@@ -1,6 +1,6 @@
import './settings.scss';
import { useCallback, useEffect, useState } from 'react';
-import { getCurrentUser, updateUser, User } from 'adapters/user';
+import { getCurrentUser, updateUser, updateUserImage, User } from 'adapters/user';
import LoadingScreen from 'components/ui/LoadingScreen';
import UserForm from 'components/forms/UserForm';
import { useHistory } from 'react-router';
@@ -14,12 +14,18 @@ export default function Settings() {
}, []);
- const handleSubmit = useCallback(async (name?: string, email?: string) => {
+ const handleSubmit = useCallback(async (name?: string, email?: string, avatar?: File) => {
try {
if (user && updateUser({realname: name, email })) {
+ if(avatar) {
+ console.log(avatar);
+ updateUserImage(avatar);
+ }
history.push('/tasks');
}
} catch (e) {
+ console.log(e);
+
}
}, [history, user]);
diff --git a/client/src/pages/Tasks/TaskStart/index.tsx b/client/src/pages/Tasks/TaskStart/index.tsx
index 9489f19..ee07faa 100644
--- a/client/src/pages/Tasks/TaskStart/index.tsx
+++ b/client/src/pages/Tasks/TaskStart/index.tsx
@@ -1,7 +1,6 @@
import './task-start.scss';
import Tag from 'components/ui/Tag';
import DetailGrid from 'components/layout/DetailGrid';
-import ButtonLink from 'components/navigation/ButtonLink';
import { useHistory, useParams } from 'react-router';
import { useEffect, useState } from 'react';
import { getTask, StatusColors, Task } from 'adapters/task';
--
GitLab