From d737310b2c1fe1353f906543d7a163613f14675e Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Sun, 25 Dec 2022 16:14:35 -0800
Subject: [PATCH] Update LoginModal and SignupModal

And adds a new changeLanguage util
---
 components/LoginModal/index.tsx  | 33 +++++++++++++++++---------------
 components/SignupModal/index.tsx | 27 +++++++++++++++++---------
 utils/changeLanguage.tsx         | 11 +++++++++++
 3 files changed, 47 insertions(+), 24 deletions(-)
 create mode 100644 utils/changeLanguage.tsx

diff --git a/components/LoginModal/index.tsx b/components/LoginModal/index.tsx
index e15c9008..4dfdb42c 100644
--- a/components/LoginModal/index.tsx
+++ b/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 = {
-      picture: user.avatar.picture,
-      element: user.avatar.element,
-      language: user.language,
-      gender: user.gender,
-    }
-
-    setCookie('user', cookieObj, { path: '/' })
+    // Set user data in the user cookie
+    setCookie(
+      'user',
+      {
+        picture: user.avatar.picture,
+        element: user.avatar.element,
+        language: user.language,
+        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({
diff --git a/components/SignupModal/index.tsx b/components/SignupModal/index.tsx
index 44d29b59..4db64904 100644
--- a/components/SignupModal/index.tsx
+++ b/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 = {
-      picture: user.avatar.picture,
-      element: user.avatar.element,
-      language: user.language,
-      gender: user.gender,
-    }
-
-    // TODO: Set language
-    setCookie('user', cookieObj, { path: '/' })
+    // Set user data in the user cookie
+    setCookie(
+      'user',
+      {
+        picture: user.avatar.picture,
+        element: user.avatar.element,
+        language: user.language,
+        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...')
     accountState.account.authorized = true
+
     setOpen(false)
   }
 
diff --git a/utils/changeLanguage.tsx b/utils/changeLanguage.tsx
new file mode 100644
index 00000000..8c2d24e4
--- /dev/null
+++ b/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 })
+  }
+}