bugfixes, other api connections

client/src/components/forms/UserForm/index.tsx

+import { User } from 'adapters/user';
+import { FormEvent, useCallback, useState } from 'react';
+import './user-form.scss';
+import TextInput from 'components/ui/TextInput';
+import Button from 'components/ui/Button';
+
+interface Props {
+    onSubmit?: (name?: string, email?: string,) => void;
+    user: User
+}
+
+function validateEmail(email?: string): string | null {
+    if (email && email.length > 0) {
+        if (email.match('^[^\\s]+@[^\\s]+$')) {
+            return null;
+        } else {
+            return 'Please enter a valid email or let this field blank.'
+        }
+    } else {
+        return null;
+    }
+}
+
+export default function UserForm({ user, onSubmit }: Props) {
+    const [name, setName] = useState(user.realname);
+    const [email, setEmail] = useState(user.email);
+    const handleSubmit = useCallback(async (e: FormEvent) => {
+        e.preventDefault();
+        if (validateEmail(email) === null) {
+            onSubmit?.(name, email);
+        }
+    }, [onSubmit, name, email]);
+    return (
+        <form onSubmit={handleSubmit} className="user-form">
+            <div className="fields">
+                <TextInput
+                    label="Real Name"
+                    name="name"
+                    onChange={setName}
+                    defaultText={name}
+                />
+                <TextInput
+                    label="Email address"
+                    name="name"
+                    validation={validateEmail}
+                    onChange={setEmail}
+                    defaultText={email}
+                />
+                <div className="avatar-upload">
+                    <div className="label">Avatar</div>
+                    <label htmlFor="avatar" className="avatar-field">
+                        <input type="file" id="avatar" name="avatar" />
+                    </label>
+                </div>
+            </div>
+            <Button type="submit" className="expanded">
+                Save
+            </Button>
+        </form >
+    )
+}
\ No newline at end of file

client/src/components/forms/UserForm/user-form.scss

+@use 'styles/settings.scss'as s;
+@use 'styles/mixins.scss'as mx;
+
+.user-form {
+    .fields {
+        display: flex;
+        flex-wrap: wrap;
+        margin: -10px;
+
+        @include mx.breakpoint(medium) {
+            margin: -10px;
+        }
+
+        &>* {
+            @include mx.breakpoint(medium) {
+                padding: 10px;
+            }
+        }
+    }
+
+    .input-element {
+        width: 50%;
+        margin-bottom: 20px;
+    }
+
+    .avatar-upload {
+        width: 100%;
+        position: relative;
+        .label {
+            position: absolute;
+            top: -2px;
+            left: 30px;
+            font-weight: s.$weight-bold;
+        }
+        .avatar-field {
+            cursor: pointer;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            border-radius: 25px;
+            width: 100%;
+            height: 80px;
+            margin-bottom: 20px;
+            background: s.$light;
+        }
+    }
+}
\ No newline at end of file

client/src/components/navigation/Sidebar/index.tsx

@@ -5,7 +5,10 @@ import { NavLink, useHistory } from 'react-router-dom';
 import { clearToken, isLoggedIn } from 'adapters/auth';
 import './sidebar.scss';
 import { useEffect, useState } from 'react';
-import { getCurrentUser, User } from 'adapters/user';
+import { getCurrentUser, getUser, getUserActivity, User } from 'adapters/user';
+import BarChart, { ChartItem } from 'components/graphs/BarChart';
+import { Activity } from 'adapters/util';
+import LoadingScreen from 'components/ui/LoadingScreen';
 
 interface Props {
     mobileShown: boolean;
@@ -14,11 +17,18 @@ interface Props {
 
 export default function Sidebar({ mobileShown, setMobileShown }: Props) {
     const [user, setUser] = useState<User>();
+    const [activity, setActivity] = useState<ChartItem[]>();
 
     useEffect(() => {
         if (isLoggedIn()) {
             getCurrentUser().then((user) => {
                 setUser(user);
+                getUserActivity().then((a) => {
+                    setActivity(a.map(item => ({
+                        label: item.day,
+                        value: item.time
+                    })));
+                });
             }).catch(() => { });
         }
     }, [])
@@ -60,10 +70,14 @@ export default function Sidebar({ mobileShown, setMobileShown }: Props) {
                     </button>
                 </nav>
             </div>
-            <div className="stats">
-                <LineGraph />
-                <div className="comment">You are doing well!</div>
-            </div>
+            {
+                activity ? (
+                    <div className="stats">
+                        <BarChart data={activity} />
+                        <div className="comment">You are doing well!</div>
+                    </div>
+                ) : <LoadingScreen />
+            }
         </aside>
     );
 }
\ No newline at end of file

client/src/components/navigation/Sidebar/sidebar.scss

@@ -136,9 +136,8 @@
         font-size: fn.toRem(14);
         font-weight: s.$weight-semi-bold;
 
-        .line-graph {
-            width: 100%;
-            margin-bottom: 10px;
+        .bar-chart-container {
+            background: transparent;
         }
     }
 }
\ No newline at end of file

client/src/pages/Settings/index.tsx

 import './settings.scss';
+import { useCallback, useEffect, useState } from 'react';
+import { getCurrentUser, updateUser, User } from 'adapters/user';
+import LoadingScreen from 'components/ui/LoadingScreen';
+import UserForm from 'components/forms/UserForm';
+import { useHistory } from 'react-router';
 
 export default function Settings() {
-    return (
-        <div className="settings-page">
-            <div className="content-container">
-                <h1 className="underlined">Settings</h1>
+    const [user, setUser] = useState<User>();
+    const history = useHistory();
+
+    useEffect(() => {
+        getCurrentUser().then((user) => setUser(user))
+    }, []);
+
+
+    const handleSubmit = useCallback(async (name?: string, email?: string) => {
+        try {
+            if (user && updateUser({realname: name, email })) {
+                history.push('/tasks');
+            }
+        } catch (e) {
+        }
+    }, [history, user]);
+
+    if (user) {
+        return (
+            <div className="settings-page">
+                <div className="content-container">
+                    <h1 className="underlined">Settings</h1>
+                    <UserForm user={user} onSubmit={handleSubmit} />
+                </div>
             </div>
-        </div>
-    )
+        )
+
+    }
+    return <LoadingScreen />
 }
\ No newline at end of file

client/src/pages/Teams/TeamsStats/index.tsx

@@ -19,12 +19,10 @@ export default function TeamsStats({ teamId }: Props) {
 
     useEffect(() => {
         getTeamActivity(teamId).then((a) => {
-            setActivity(a.map(item => {
-                return {
-                    label: item.day,
-                    value: item.time
-                }
-            }));
+            setActivity(a.map(item => ({
+                label: item.day,
+                value: item.time
+            })));
         });
         getTeamCompletion(teamId).then((comp) => {
             const allAmount = comp.sum ?? 1;

client/src/styles/settings.scss

@@ -4,7 +4,7 @@ $primary: var(--primary);
 $primary-dark: var(--primary-dark);
 $secondary: #7DEFFF;
 $red: #E51C4A;
-$light: #F1F1F1;
+$light: rgba(0, 0, 0, 0.025);
 $dark: #180923;
 
 $light-gray: #F8F8F8;