Get logged in language switching working

This commit is contained in:
Justin Edmund 2022-03-05 13:32:03 -08:00
parent d79a13dc8a
commit 497c309bd1
2 changed files with 18 additions and 12 deletions

View file

@ -24,12 +24,11 @@ const AccountModal = () => {
const locale = (router.locale && ['en', 'ja'].includes(router.locale)) ? router.locale : 'en' const locale = (router.locale && ['en', 'ja'].includes(router.locale)) ? router.locale : 'en'
// Cookies // Cookies
const [accountCookies] = useCookies(['account']) const [cookies, setCookies] = useCookies()
const [userCookies, setUserCookies] = useCookies(['user'])
const headers = (accountCookies.account != null) ? { const headers = (cookies.account != null) ? {
headers: { headers: {
'Authorization': `Bearer ${accountCookies.account.access_token}` 'Authorization': `Bearer ${cookies.account.access_token}`
} }
} : {} } : {}
@ -45,9 +44,10 @@ const AccountModal = () => {
const privateSelect = React.createRef<HTMLInputElement>() const privateSelect = React.createRef<HTMLInputElement>()
useEffect(() => { useEffect(() => {
if (userCookies.user) setPicture(userCookies.user.picture) console.log(cookies.user)
if (userCookies.user) setLanguage(userCookies.user.language) if (cookies.user) setPicture(cookies.user.picture)
}, [userCookies]) if (cookies.user) setLanguage(cookies.user.language)
}, [cookies])
const pictureOptions = ( const pictureOptions = (
pictureData.sort((a, b) => (a.name.en > b.name.en) ? 1 : -1).map((item, i) => { 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 => { .then(response => {
const user = response.data.user const user = response.data.user
@ -93,9 +93,8 @@ const AccountModal = () => {
language: user.language, language: user.language,
} }
setUserCookies('user', cookieObj, { path: '/'}) setCookies('user', cookieObj, { path: '/'})
accountState.account.language = user.language
accountState.account.user = { accountState.account.user = {
id: user.id, id: user.id,
username: user.username, username: user.username,
@ -104,9 +103,17 @@ const AccountModal = () => {
} }
setOpen(false) 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) { function openChange(open: boolean) {
setOpen(open) setOpen(open)
} }
@ -158,7 +165,7 @@ const AccountModal = () => {
<select name="language" onChange={handleLanguageChange} value={language} ref={languageSelect}> <select name="language" onChange={handleLanguageChange} value={language} ref={languageSelect}>
<option key="en" value="en">{t('modals.settings.language.english')}</option> <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> </select>
</div> </div>
<div className="field"> <div className="field">

View file

@ -40,7 +40,6 @@ const HeaderMenu = (props: Props) => {
const language = (value) ? 'ja' : 'en' const language = (value) ? 'ja' : 'en'
setCookies('NEXT_LOCALE', language, { path: '/'}) setCookies('NEXT_LOCALE', language, { path: '/'})
router.push(router.asPath, undefined, { locale: language }) router.push(router.asPath, undefined, { locale: language })
// router.reload()
} }
function authItems() { function authItems() {