Implement retrieveCookie

retrieveCookie fetches and parses cookies. This util should help us further reduce places where we're extracting and parsing with cookies in the business logic

components/HeaderMenu/index.tsx

@@ -1,7 +1,9 @@
 import React, { useEffect, useState } from 'react'
-import { getCookie, setCookie } from 'cookies-next'
 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 Link from 'next/link'
 import * as Switch from '@radix-ui/react-switch'
@@ -14,7 +16,6 @@ import LoginModal from '~components/LoginModal'
 import SignupModal from '~components/SignupModal'
 
 import './index.scss'
-import { accountState } from '~utils/accountState'
 
 interface Props {
   authenticated: boolean
@@ -25,22 +26,14 @@ interface Props {
 }
 
 const HeaderMenu = (props: Props) => {
+  // Setup
   const router = useRouter()
+  const data: GranblueCookie | undefined = retrieveCookies()
   const { t } = useTranslation('common')
 
-  const accountCookie = getCookie('account')
-  const accountData: AccountCookie = accountCookie
-    ? JSON.parse(accountCookie as string)
-    : null
   // Refs
   const ref: React.RefObject<HTMLDivElement> = React.createRef()
 
-  const userCookie = getCookie('user')
-  const userData: UserCookie = userCookie
-    ? JSON.parse(userCookie as string)
-    : null
-
-  const localeCookie = getCookie('NEXT_LOCALE')
   useEffect(() => {
     const handleClickOutside = (event: Event) => {
       if (
@@ -61,9 +54,9 @@ const HeaderMenu = (props: Props) => {
   const [checked, setChecked] = useState(false)
 
   useEffect(() => {
-    const locale = localeCookie
+    const locale = data?.locale
     setChecked(locale === 'ja' ? true : false)
-  }, [localeCookie])
+  }, [data?.locale])
 
   function handleCheckedChange(value: boolean) {
     const language = value ? 'ja' : 'en'

types/GranblueCookie.d.ts

@@ -0,0 +1,5 @@
+interface GranblueCookie {
+  account: AccountCookie
+  user: UserCookie
+  locale: string
+}

utils/retrieveCookies.tsx

@@ -0,0 +1,23 @@
+import { getCookies } from 'cookies-next'
+import { NextApiRequest, NextApiResponse } from 'next'
+
+export default 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
+
+  const account = JSON.parse(decodeURIComponent(accountData)) ?? undefined
+  const user = JSON.parse(decodeURIComponent(userData)) ?? undefined
+  const locale = localeData as string
+
+  return { account, user, locale }
+}