Fixed some bugs concerning the user settings

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

@@ -19,7 +19,7 @@ interface Props {
     user: User
 }
 
-const validTypes = ['image/jpg', 'image/png', 'image/gif', 'image/svg']
+const validTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/svg']
 
 function validateEmail(email?: string): string | null {
     if (email && email.length > 0) {

client/src/components/ui/Avatar/avatar.scss

@@ -6,11 +6,6 @@
     overflow: hidden;
 
     img {
-        width: 100%;
-        height: auto;
-    }
-
-    .standard-image {
         width: 100%;
         height: 100%;
         background: s.$secondary;

client/src/components/ui/Avatar/index.tsx

 
-import { useCallback, useState } from 'react';
-
 import { getUserImageUri, User } from 'adapters/user';
 
 import './avatar.scss';
@@ -10,27 +8,11 @@ interface Props {
 }
 
 export default function Avatar({ user }: Props) {
-    const [error, setError] = useState(false);
     const avatarSrc = user && getUserImageUri(user.id);
 
-    const onError = useCallback(() => {
-        setError(true);
-    }, [setError]);
-
     return (
         <div className="avatar">
-            {
-                !error && (
-                    <img src={avatarSrc} alt={user?.username} onError={onError} />
-                )
-            }
-            {
-                error && (
-                    <div className="standard-image">
-                        {user?.username && user.username.charAt(0)}
-                    </div>
-                )
-            }
+            <img src={avatarSrc} alt={user?.username.charAt(0) ?? "?"} />
         </div>
     )
 }

client/src/pages/Settings/index.tsx

@@ -2,6 +2,7 @@
 import { useHistory } from 'react-router';
 import { useCallback, useEffect, useState } from 'react';
 
+import { reload } from 'index';
 import { getCurrentUser, updateUser, updateUserImage, User } from 'adapters/user';
 
 import Callout from 'components/ui/Callout';
@@ -16,21 +17,21 @@ export default function Settings() {
     const history = useHistory();
 
     useEffect(() => {
-        getCurrentUser().then((user) => setUser(user))
+        getCurrentUser().then(setUser)
     }, []);
 
     const handleSubmit = useCallback(async (name?: string, email?: string, avatar?: File) => {
         try {
-            if (user && updateUser({ realname: name, email })) {
-                if (avatar) {
-                    updateUserImage(avatar);
-                }
-                history.push('/tasks');
-            }
+            await Promise.all([
+                updateUser({ realname: name, email: email }),
+                avatar && updateUserImage(avatar)
+            ])
+            history.push('/tasks');
+            reload();
         } catch (e) {
             setError('There was an issue with saving your settings. Please try again!')
         }
-    }, [history, user]);
+    }, [history]);
 
     return (
         user