Different approach to getting locale cookie

components/HeaderMenu/index.tsx

@@ -3,7 +3,7 @@ import { useRouter } from 'next/router'
 import { useTranslation } from 'next-i18next'
 import { setCookie } from 'cookies-next'
 import classNames from 'classnames'
-import retrieveCookies from '~utils/retrieveCookies'
+import { retrieveCookies, retrieveLocaleCookies } from '~utils/retrieveCookies'
 
 import Link from 'next/link'
 import * as Switch from '@radix-ui/react-switch'
@@ -29,6 +29,7 @@ const HeaderMenu = (props: Props) => {
   // Setup
   const router = useRouter()
   const data: GranblueCookie | undefined = retrieveCookies()
+  const localeData = retrieveLocaleCookies()
   const { t } = useTranslation('common')
 
   // Refs
@@ -59,9 +60,8 @@ const HeaderMenu = (props: Props) => {
   const [checked, setChecked] = useState(false)
 
   useEffect(() => {
-    const locale = data?.locale
+    setChecked(localeData === 'ja' ? true : false)
-    setChecked(locale === 'ja' ? true : false)
+  }, [localeData])
-  }, [data?.locale])
 
   function handleCheckedChange(value: boolean) {
     const language = value ? 'ja' : 'en'

utils/retrieveCookies.tsx

@@ -1,25 +1,32 @@
 import { getCookies } from 'cookies-next'
 import { NextApiRequest, NextApiResponse } from 'next'
 
-export default function retrieveCookies(
+export function retrieveCookies(
   req?: NextApiRequest,
   res?: NextApiResponse
 ): GranblueCookie | undefined {
   const cookies = getCookies({ req, res })
+  if (!cookies) return undefined
+
   const {
     account: accountData,
     user: userData,
     NEXT_LOCALE: localeData,
   } = cookies
+  if (!accountData || !userData) return undefined
 
-  if ((!accountData || !userData) && localeData)
+  const account = JSON.parse(decodeURIComponent(accountData)) ?? undefined
-    return { account: undefined, user: undefined, locale: localeData }
+  const user = JSON.parse(decodeURIComponent(userData)) ?? undefined
+  const locale = localeData as string
 
-  if (accountData && userData) {
+  return { account, user, locale }
-    const account = JSON.parse(decodeURIComponent(accountData)) ?? undefined
+}
-    const user = JSON.parse(decodeURIComponent(userData)) ?? undefined
+
-    const locale = localeData as string
+export function retrieveLocaleCookies(
-
+  req?: NextApiRequest,
-    return { account, user, locale }
+  res?: NextApiResponse
-  }
+) {
+  const cookies = getCookies({ req, res })
+  const { NEXT_LOCALE: localeData } = cookies
+  return localeData as string
 }