Update LoginModal and SignupModal

And adds a new changeLanguage util

components/LoginModal/index.tsx

@@ -16,6 +16,8 @@ import {
   DialogClose,
 } from '~components/Dialog'
 
+import changeLanguage from '~utils/changeLanguage'
+
 import CrossIcon from '~public/icons/Cross.svg'
 import './index.scss'
 
@@ -127,23 +129,31 @@ const LoginModal = (props: Props) => {
   }
 
   function storeUserInfo(response: AxiosResponse) {
+    // Extract the user
     const user = response.data
 
-    const cookieObj: UserCookie = {
+    // Set user data in the user cookie
-      picture: user.avatar.picture,
+    setCookie(
-      element: user.avatar.element,
+      'user',
-      language: user.language,
+      {
-      gender: user.gender,
+        picture: user.avatar.picture,
-    }
+        element: user.avatar.element,
-
+        language: user.language,
-    setCookie('user', cookieObj, { path: '/' })
+        gender: user.gender,
+        theme: user.theme,
+      },
+      { path: '/' }
+    )
 
+    // Set the user data in the account state
     accountState.account.user = {
       id: user.id,
       username: user.username,
       picture: user.avatar.picture,
       element: user.avatar.element,
       gender: user.gender,
+      language: user.language,
+      theme: user.theme,
     }
 
     console.log('Authorizing account...')
@@ -153,13 +163,6 @@ const LoginModal = (props: Props) => {
     changeLanguage(user.language)
   }
 
-  function changeLanguage(newLanguage: string) {
-    if (newLanguage !== router.locale) {
-      setCookie('NEXT_LOCALE', newLanguage, { path: '/' })
-      router.push(router.asPath, undefined, { locale: newLanguage })
-    }
-  }
-
   function openChange(open: boolean) {
     setOpen(open)
     setErrors({

components/SignupModal/index.tsx

@@ -102,27 +102,36 @@ const SignupModal = (props: Props) => {
   }
 
   function storeUserInfo(response: AxiosResponse) {
+    // Extract the user
     const user = response.data
 
-    const cookieObj: UserCookie = {
+    // Set user data in the user cookie
-      picture: user.avatar.picture,
+    setCookie(
-      element: user.avatar.element,
+      'user',
-      language: user.language,
+      {
-      gender: user.gender,
+        picture: user.avatar.picture,
-    }
+        element: user.avatar.element,
-
+        language: user.language,
-    // TODO: Set language
+        gender: user.gender,
-    setCookie('user', cookieObj, { path: '/' })
+        theme: user.theme,
+      },
+      { path: '/' }
+    )
 
+    // Set the user data in the account state
     accountState.account.user = {
       id: user.id,
       username: user.username,
       picture: user.avatar.picture,
       element: user.avatar.element,
       gender: user.gender,
+      language: user.language,
+      theme: user.theme,
     }
 
+    console.log('Authorizing account...')
     accountState.account.authorized = true
+
     setOpen(false)
   }
 

utils/changeLanguage.tsx

@@ -0,0 +1,11 @@
+import { setCookie } from 'cookies-next'
+import { useRouter } from 'next/router'
+
+export default function changeLanguage(newLanguage: string) {
+  const router = useRouter()
+
+  if (newLanguage !== router.locale) {
+    setCookie('NEXT_LOCALE', newLanguage, { path: '/' })
+    router.push(router.asPath, undefined, { locale: newLanguage })
+  }
+}