diff --git a/components/HeaderMenu/index.tsx b/components/HeaderMenu/index.tsx index 7fe750ba..622c8c2a 100644 --- a/components/HeaderMenu/index.tsx +++ b/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 ( - - ) - } + useEffect(() => { + const locale = localeCookie + setChecked(locale === "ja" ? true : false) + }, [localeCookie]) - function unauthItems() { - return ( - + + ) + } - return (props.authenticated) ? authItems() : unauthItems() + function unauthItems() { + return ( + + ) + } + + return props.authenticated ? authItems() : unauthItems() } -export default HeaderMenu \ No newline at end of file +export default HeaderMenu diff --git a/components/TopHeader/index.tsx b/components/TopHeader/index.tsx index c7915304..6fdaffe8 100644 --- a/components/TopHeader/index.tsx +++ b/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 ( -
- - { (account.user) ? - : - - } -
- ) - } + 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 () - else - return () - } + 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 ( -
- { (router.route === '/p/[party]' && account.user && (!party.user || party.user.id !== account.user.id)) ? - saveButton() : '' - } - { (router.route === '/p/[party]') ? - : '' - } - -
- ) - } - - + const leftNav = () => { return ( -
+
+ + {account.user ? ( + + ) : ( + + )} +
) + } + + const saveButton = () => { + if (party.favorited) + return ( + + ) + else + return ( + + ) + } + + const rightNav = () => { + return ( +
+ {router.route === "/p/[party]" && + account.user && + (!party.user || party.user.id !== account.user.id) + ? saveButton() + : ""} + {router.route === "/p/[party]" ? ( + + ) : ( + "" + )} + +
+ ) + } + + return
} -export default TopHeader \ No newline at end of file +export default TopHeader