Update SignupModal to be in line with LoginModal updates

components/SignupModal/index.tsx

@@ -1,5 +1,6 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { useCookies } from 'react-cookie'
+import { AxiosResponse } from 'axios'
 
 import * as Dialog from '@radix-ui/react-dialog'
 
@@ -61,27 +62,51 @@ const SignupModal = (props: Props) => {
 
         if (formValid)
             api.endpoints.users.create(body)
-                .then((response) => {
+                .then(response => {
-                    // Set cookies
+                    storeCookieInfo(response)
-                    setCookies('user', response.data.user, { path: '/'})
+                    return response.data.user.user_id
-                    
+                })
-                    // Set states
+                .then(id => fetchUserInfo(id))
-                    accountState.account.authorized = true
+                .then(infoResponse => storeUserInfo(infoResponse))
-                    accountState.account.user = {
+    }
-                        id: response.data.user.id,
-                        username: response.data.user.username,
-                        picture: 'gran',
-                        element: 'water'
-                    }
 
-                    // Close the modal
+    function storeCookieInfo(response: AxiosResponse) {
-                    setOpen(false)
+        const user = response.data.user
-                }, (error) => {
+
-                    console.error(error)
+        const cookieObj = {
-                })
+            user_id: user.id,
-                .catch(error => {
+            username: user.username,
-                    console.error(error)
+            access_token: response.data.access_token
-                })
+        }
+
+        setCookies('account', cookieObj, { path: '/'})
+    }
+
+    function fetchUserInfo(id: string) {
+        return api.userInfo(id)
+    }
+
+    function storeUserInfo(response: AxiosResponse) {
+        const user = response.data.user
+
+        const cookieObj = {
+            picture: user.picture.picture,
+            element: user.picture.element,
+            language: user.language,
+        }
+
+        setCookies('user', cookieObj, { path: '/'})
+
+        accountState.account.language = user.language
+        accountState.account.user = {
+            id: user.id,
+            username: user.username,
+            picture: user.picture.picture,
+            element: user.picture.element
+        }
+
+        accountState.account.authorized = true
+        setOpen(false)
     }
 
     function handleNameChange(event: React.ChangeEvent<HTMLInputElement>) {
@@ -143,7 +168,6 @@ const SignupModal = (props: Props) => {
                 break
         }
 
-        setErrors(newErrors)
         setFormValid(validateForm(newErrors))
     }
 
@@ -176,7 +200,6 @@ const SignupModal = (props: Props) => {
                 break
         }
 
-        setErrors(newErrors)
         setFormValid(validateForm(newErrors))
     }