Update cookie usage in TopHeader and HeaderMenu

components/HeaderMenu/index.tsx

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

components/TopHeader/index.tsx

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