Update cookie usage in TopHeader and HeaderMenu

components/HeaderMenu/index.tsx

@@ -1,42 +1,50 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useState } from "react"
-import { useCookies } from 'react-cookie'
+import { getCookie, setCookie } from "cookies-next"
-import Router, { useRouter } from 'next/router'
+import { useRouter } from "next/router"
-import { useTranslation } from 'next-i18next'
+import { useTranslation } from "next-i18next"
 
-import Link from 'next/link'
+import Link from "next/link"
-import * as Switch from '@radix-ui/react-switch'
+import * as Switch from "@radix-ui/react-switch"
 
-import AboutModal from '~components/AboutModal'
+import AboutModal from "~components/AboutModal"
-import AccountModal from '~components/AccountModal'
+import AccountModal from "~components/AccountModal"
-import LoginModal from '~components/LoginModal'
+import LoginModal from "~components/LoginModal"
-import SignupModal from '~components/SignupModal'
+import SignupModal from "~components/SignupModal"
 
-import './index.scss'
+import "./index.scss"
 
 interface Props {
-    authenticated: boolean,
+  authenticated: boolean
-    username?: string,
+  username?: string
   logout?: () => void
 }
 
 const HeaderMenu = (props: Props) => {
   const router = useRouter()
-    const { t } = useTranslation('common')
+  const { t } = useTranslation("common")
 
-    const [accountCookies] = useCookies(['account'])
+  const accountCookie = getCookie("account")
-    const [userCookies] = useCookies(['user'])
+  const accountData: AccountCookie = accountCookie
-    const [cookies, setCookies] = useCookies()
+    ? JSON.parse(accountCookie as string)
+    : null
+
+  const userCookie = getCookie("user")
+  const userData: UserCookie = userCookie
+    ? JSON.parse(userCookie as string)
+    : null
+
+  const localeCookie = getCookie("NEXT_LOCALE")
 
   const [checked, setChecked] = useState(false)
 
   useEffect(() => {
-        const locale = cookies['NEXT_LOCALE']
+    const locale = localeCookie
-        setChecked((locale === 'ja') ? true : false)
+    setChecked(locale === "ja" ? true : false)
-    }, [cookies])
+  }, [localeCookie])
 
   function handleCheckedChange(value: boolean) {
-        const language = (value) ? 'ja' : 'en'
+    const language = value ? "ja" : "en"
-        setCookies('NEXT_LOCALE', language, { path: '/'})
+    setCookie("NEXT_LOCALE", language, { path: "/" })
     router.push(router.asPath, undefined, { locale: language })
   }
 
@@ -46,32 +54,32 @@ const HeaderMenu = (props: Props) => {
         <ul className="Menu auth">
           <div className="MenuGroup">
             <li className="MenuItem profile">
-                            <Link href={`/${accountCookies.account.username}` || ''} passHref>
+              <Link href={`/${accountData.username}` || ""} passHref>
                 <div>
-                                    <span>{accountCookies.account.username}</span>
+                  <span>{accountData.username}</span>
                   <img
-                                        alt={userCookies.user.picture}
+                    alt={userData.picture}
-                                        className={`profile ${userCookies.user.element}`}
+                    className={`profile ${userData.element}`}
-                                        srcSet={`/profile/${userCookies.user.picture}.png,
+                    srcSet={`/profile/${userData.picture}.png, 
-                                                /profile/${userCookies.user.picture}@2x.png 2x`}
+                      /profile/${userData.picture}@2x.png 2x`}
-                                        src={`/profile/${userCookies.user.picture}.png`} 
+                    src={`/profile/${userData.picture}.png`}
                   />
                 </div>
               </Link>
             </li>
             <li className="MenuItem">
-                            <Link href={`/saved` || ''}>{t('menu.saved')}</Link>
+              <Link href={`/saved` || ""}>{t("menu.saved")}</Link>
             </li>
           </div>
           <div className="MenuGroup">
             <li className="MenuItem">
-                            <Link href='/teams'>{t('menu.teams')}</Link>
+              <Link href="/teams">{t("menu.teams")}</Link>
             </li>
 
             <li className="MenuItem disabled">
               <div>
-                                <span>{t('menu.guides')}</span>
+                <span>{t("menu.guides")}</span>
-                                <i className="tag">{t('coming_soon')}</i>
+                <i className="tag">{t("coming_soon")}</i>
               </div>
             </li>
           </div>
@@ -79,7 +87,7 @@ const HeaderMenu = (props: Props) => {
             <AboutModal />
             <AccountModal />
             <li className="MenuItem" onClick={props.logout}>
-                            <span>{t('menu.logout')}</span>
+              <span>{t("menu.logout")}</span>
             </li>
           </div>
         </ul>
@@ -92,8 +100,12 @@ const HeaderMenu = (props: Props) => {
       <ul className="Menu unauth">
         <div className="MenuGroup">
           <li className="MenuItem language">
-                        <span>{t('menu.language')}</span>
+            <span>{t("menu.language")}</span>
-                        <Switch.Root className="Switch" onCheckedChange={handleCheckedChange} checked={checked}>
+            <Switch.Root
+              className="Switch"
+              onCheckedChange={handleCheckedChange}
+              checked={checked}
+            >
               <Switch.Thumb className="Thumb" />
               <span className="left">JP</span>
               <span className="right">EN</span>
@@ -102,13 +114,13 @@ const HeaderMenu = (props: Props) => {
         </div>
         <div className="MenuGroup">
           <li className="MenuItem">
-                        <Link href='/teams'>{t('menu.teams')}</Link>
+            <Link href="/teams">{t("menu.teams")}</Link>
           </li>
 
           <li className="MenuItem disabled">
             <div>
-                            <span>{t('menu.guides')}</span>
+              <span>{t("menu.guides")}</span>
-                            <i className="tag">{t('coming_soon')}</i>
+              <i className="tag">{t("coming_soon")}</i>
             </div>
           </li>
         </div>
@@ -123,7 +135,7 @@ const HeaderMenu = (props: Props) => {
     )
   }
 
-    return (props.authenticated) ? authItems() : unauthItems()
+  return props.authenticated ? authItems() : unauthItems()
 }
 
 export default HeaderMenu

components/TopHeader/index.tsx

@@ -1,48 +1,51 @@
-import React, { useEffect } from 'react'
+import React from "react"
-import { useSnapshot } from 'valtio'
+import { useSnapshot } from "valtio"
-import { useCookies } from 'react-cookie'
+import { getCookie, deleteCookie } from "cookies-next"
-import { useRouter } from 'next/router'
+import { useRouter } from "next/router"
-import { useTranslation } from 'next-i18next'
+import { useTranslation } from "next-i18next"
 
-import clonedeep from 'lodash.clonedeep'
+import clonedeep from "lodash.clonedeep"
 
-import api from '~utils/api'
+import api from "~utils/api"
-import { accountState, initialAccountState } from '~utils/accountState'
+import { accountState, initialAccountState } from "~utils/accountState"
-import { appState, initialAppState } from '~utils/appState'
+import { appState, initialAppState } from "~utils/appState"
 
-import Header from '~components/Header'
+import Header from "~components/Header"
-import Button from '~components/Button'
+import Button from "~components/Button"
-import HeaderMenu from '~components/HeaderMenu'
+import HeaderMenu from "~components/HeaderMenu"
 
 const TopHeader = () => {
-    const { t } = useTranslation('common')
+  const { t } = useTranslation("common")
 
   // Cookies
-    const [accountCookies, setAccountCookie, removeAccountCookie] = useCookies(['account'])
+  const accountCookie = getCookie("account")
-    const [userCookies, setUserCookies, removeUserCookie] = useCookies(['user'])
+  const userCookie = getCookie("user")
 
-    const headers = (accountCookies.account != null) ? {
+  const headers = {}
-        'Authorization': `Bearer ${accountCookies.account.access_token}`
+  //   accountCookies.account != null
-    } : {}
+  //     ? {
+  //         Authorization: `Bearer ${accountCookies.account.access_token}`,
+  //       }
+  //     : {}
 
   const { account } = useSnapshot(accountState)
   const { party } = useSnapshot(appState)
   const router = useRouter()
 
   function copyToClipboard() {
-        const el = document.createElement('input')
+    const el = document.createElement("input")
     el.value = window.location.href
-        el.id = 'url-input'
+    el.id = "url-input"
     document.body.appendChild(el)
 
     el.select()
-        document.execCommand('copy')
+    document.execCommand("copy")
     el.remove()
   }
 
   function newParty() {
     // Push the root URL
-        router.push('/')
+    router.push("/")
 
     // Clean state
     const resetState = clonedeep(initialAppState)
@@ -55,93 +58,97 @@ const TopHeader = () => {
   }
 
   function logout() {
-        removeAccountCookie('account')
+    deleteCookie("account")
-        removeUserCookie('user')
+    deleteCookie("user")
 
     // Clean state
     const resetState = clonedeep(initialAccountState)
     Object.keys(resetState).forEach((key) => {
-            if (key !== 'language')
+      if (key !== "language") accountState[key] = resetState[key]
-                accountState[key] = resetState[key]
     })
 
-        if (router.route != '/new')
+    if (router.route != "/new") appState.party.editable = false
-            appState.party.editable = false
 
-        router.push('/')
+    router.push("/")
     return false
   }
 
   function toggleFavorite() {
-        if (party.favorited)
+    if (party.favorited) unsaveFavorite()
-            unsaveFavorite()
+    else saveFavorite()
-        else
-            saveFavorite()
   }
 
   function saveFavorite() {
     if (party.id)
-            api.saveTeam({ id: party.id, params: headers })
+      api.saveTeam({ id: party.id, params: headers }).then((response) => {
-                .then((response) => {
+        if (response.status == 201) appState.party.favorited = true
-                    if (response.status == 201)
-                        appState.party.favorited = true
       })
-        else
+    else console.error("Failed to save team: No party ID")
-            console.error("Failed to save team: No party ID")
   }
 
   function unsaveFavorite() {
     if (party.id)
-            api.unsaveTeam({ id: party.id, params: headers })
+      api.unsaveTeam({ id: party.id, params: headers }).then((response) => {
-                .then((response) => {
+        if (response.status == 200) appState.party.favorited = false
-                    if (response.status == 200)
-                        appState.party.favorited = false
       })
-        else
+    else console.error("Failed to unsave team: No party ID")
-            console.error("Failed to unsave team: No party ID")
   }
 
   const leftNav = () => {
     return (
       <div className="dropdown">
-                <Button icon="menu">{t('buttons.menu')}</Button>
+        <Button icon="menu">{t("buttons.menu")}</Button>
-                { (account.user) ? 
+        {account.user ? (
-                    <HeaderMenu authenticated={account.authorized} username={account.user.username} logout={logout} /> :
+          <HeaderMenu
+            authenticated={account.authorized}
+            username={account.user.username}
+            logout={logout}
+          />
+        ) : (
           <HeaderMenu authenticated={account.authorized} />
-                }
+        )}
       </div>
     )
   }
 
   const saveButton = () => {
     if (party.favorited)
-            return (<Button icon="save" active={true} onClick={toggleFavorite}>Saved</Button>)
+      return (
+        <Button icon="save" active={true} onClick={toggleFavorite}>
+          Saved
+        </Button>
+      )
     else
-            return (<Button icon="save" onClick={toggleFavorite}>Save</Button>)
+      return (
+        <Button icon="save" onClick={toggleFavorite}>
+          Save
+        </Button>
+      )
   }
 
   const rightNav = () => {
     return (
       <div>
-                { (router.route === '/p/[party]' && account.user && (!party.user || party.user.id !== account.user.id)) ? 
+        {router.route === "/p/[party]" &&
-                    saveButton() : ''
+        account.user &&
-                }
+        (!party.user || party.user.id !== account.user.id)
-                { (router.route === '/p/[party]') ? 
+          ? saveButton()
-                    <Button icon="link" onClick={copyToClipboard}>{t('buttons.copy')}</Button> : ''
+          : ""}
-                }
+        {router.route === "/p/[party]" ? (
-                <Button icon="new" onClick={newParty}>{t('buttons.new')}</Button>
+          <Button icon="link" onClick={copyToClipboard}>
+            {t("buttons.copy")}
+          </Button>
+        ) : (
+          ""
+        )}
+        <Button icon="new" onClick={newParty}>
+          {t("buttons.new")}
+        </Button>
       </div>
     )
   }
 
-            
+  return <Header position="top" left={leftNav()} right={rightNav()} />
-    return (
-        <Header 
-            position="top"
-            left={ leftNav() }
-            right={ rightNav() }
-        />
-    )
 }
 
 export default TopHeader