From 497c309bd1f54fd21c6277c442ef18d21bd0ec2b Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Sat, 5 Mar 2022 13:32:03 -0800
Subject: [PATCH] Get logged in language switching working

---
 components/AccountModal/index.tsx | 29 ++++++++++++++++++-----------
 components/HeaderMenu/index.tsx   |  1 -
 2 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/components/AccountModal/index.tsx b/components/AccountModal/index.tsx
index 40321d96..d79a26fb 100644
--- a/components/AccountModal/index.tsx
+++ b/components/AccountModal/index.tsx
@@ -24,12 +24,11 @@ const AccountModal = () => {
     const locale = (router.locale && ['en', 'ja'].includes(router.locale)) ? router.locale : 'en'
 
     // Cookies
-    const [accountCookies] = useCookies(['account'])
-    const [userCookies, setUserCookies] = useCookies(['user'])
+    const [cookies, setCookies] = useCookies()
 
-    const headers = (accountCookies.account != null) ? {
+    const headers = (cookies.account != null) ? {
         headers: {
-            'Authorization': `Bearer ${accountCookies.account.access_token}`
+            'Authorization': `Bearer ${cookies.account.access_token}`
         }
     } : {}
     
@@ -45,9 +44,10 @@ const AccountModal = () => {
     const privateSelect = React.createRef<HTMLInputElement>()
 
     useEffect(() => {
-        if (userCookies.user) setPicture(userCookies.user.picture)
-        if (userCookies.user) setLanguage(userCookies.user.language)
-    }, [userCookies])
+        console.log(cookies.user)
+        if (cookies.user) setPicture(cookies.user.picture)
+        if (cookies.user) setLanguage(cookies.user.language)
+    }, [cookies])
 
     const pictureOptions = (
             pictureData.sort((a, b) => (a.name.en > b.name.en) ? 1 : -1).map((item, i) => {
@@ -83,7 +83,7 @@ const AccountModal = () => {
             }
         }
 
-        api.endpoints.users.update(accountCookies.account.user_id, object, headers)
+        api.endpoints.users.update(cookies.account.user_id, object, headers)
             .then(response => {
                 const user = response.data.user
 
@@ -93,9 +93,8 @@ const AccountModal = () => {
                     language: user.language,
                 }
         
-                setUserCookies('user', cookieObj, { path: '/'})
+                setCookies('user', cookieObj, { path: '/'})
 
-                accountState.account.language = user.language
                 accountState.account.user = {
                     id: user.id,
                     username: user.username,
@@ -104,9 +103,17 @@ const AccountModal = () => {
                 }
 
                 setOpen(false)
+                changeLanguage(user.language)
             })
     }
 
+    function changeLanguage(newLanguage: string) {
+        if (newLanguage !== router.locale) {
+            setCookies('NEXT_LOCALE', language, { path: '/'})
+            router.push(router.asPath, undefined, { locale: language })
+        }
+    }
+
     function openChange(open: boolean) {
         setOpen(open)
     }
@@ -158,7 +165,7 @@ const AccountModal = () => {
 
                             <select name="language" onChange={handleLanguageChange} value={language} ref={languageSelect}>
                                 <option key="en" value="en">{t('modals.settings.language.english')}</option>
-                                <option key="jp" value="jp">{t('modals.settings.language.japanese')}</option>
+                                <option key="jp" value="ja">{t('modals.settings.language.japanese')}</option>
                             </select>
                         </div>
                         <div className="field">
diff --git a/components/HeaderMenu/index.tsx b/components/HeaderMenu/index.tsx
index e6dcbae5..24b4ff78 100644
--- a/components/HeaderMenu/index.tsx
+++ b/components/HeaderMenu/index.tsx
@@ -40,7 +40,6 @@ const HeaderMenu = (props: Props) => {
         const language = (value) ? 'ja' : 'en'
         setCookies('NEXT_LOCALE', language, { path: '/'})
         router.push(router.asPath, undefined, { locale: language })
-        // router.reload()
     } 
 
     function authItems() {