Update cookie usage in TopHeader and HeaderMenu
This commit is contained in:
parent
0c1fc9c1a1
commit
19d8fa4d9b
2 changed files with 251 additions and 232 deletions
|
|
@ -1,129 +1,141 @@
|
||||||
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 {
|
interface Props {
|
||||||
authenticated: boolean,
|
authenticated: boolean
|
||||||
username?: string,
|
username?: string
|
||||||
logout?: () => void
|
logout?: () => void
|
||||||
}
|
}
|
||||||
|
|
||||||
const HeaderMenu = (props: Props) => {
|
const HeaderMenu = (props: Props) => {
|
||||||
const router = useRouter()
|
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 [checked, setChecked] = useState(false)
|
const userCookie = getCookie("user")
|
||||||
|
const userData: UserCookie = userCookie
|
||||||
|
? JSON.parse(userCookie as string)
|
||||||
|
: null
|
||||||
|
|
||||||
useEffect(() => {
|
const localeCookie = getCookie("NEXT_LOCALE")
|
||||||
const locale = cookies['NEXT_LOCALE']
|
|
||||||
setChecked((locale === 'ja') ? true : false)
|
|
||||||
}, [cookies])
|
|
||||||
|
|
||||||
function handleCheckedChange(value: boolean) {
|
const [checked, setChecked] = useState(false)
|
||||||
const language = (value) ? 'ja' : 'en'
|
|
||||||
setCookies('NEXT_LOCALE', language, { path: '/'})
|
|
||||||
router.push(router.asPath, undefined, { locale: language })
|
|
||||||
}
|
|
||||||
|
|
||||||
function authItems() {
|
useEffect(() => {
|
||||||
return (
|
const locale = localeCookie
|
||||||
<nav>
|
setChecked(locale === "ja" ? true : false)
|
||||||
<ul className="Menu auth">
|
}, [localeCookie])
|
||||||
<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>
|
|
||||||
|
|
||||||
<li className="MenuItem disabled">
|
function handleCheckedChange(value: boolean) {
|
||||||
<div>
|
const language = value ? "ja" : "en"
|
||||||
<span>{t('menu.guides')}</span>
|
setCookie("NEXT_LOCALE", language, { path: "/" })
|
||||||
<i className="tag">{t('coming_soon')}</i>
|
router.push(router.asPath, undefined, { locale: language })
|
||||||
</div>
|
}
|
||||||
</li>
|
|
||||||
</div>
|
|
||||||
<div className="MenuGroup">
|
|
||||||
<AboutModal />
|
|
||||||
<AccountModal />
|
|
||||||
<li className="MenuItem" onClick={props.logout}>
|
|
||||||
<span>{t('menu.logout')}</span>
|
|
||||||
</li>
|
|
||||||
</div>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function unauthItems() {
|
function authItems() {
|
||||||
return (
|
return (
|
||||||
<ul className="Menu unauth">
|
<nav>
|
||||||
<div className="MenuGroup">
|
<ul className="Menu auth">
|
||||||
<li className="MenuItem language">
|
<div className="MenuGroup">
|
||||||
<span>{t('menu.language')}</span>
|
<li className="MenuItem profile">
|
||||||
<Switch.Root className="Switch" onCheckedChange={handleCheckedChange} checked={checked}>
|
<Link href={`/${accountData.username}` || ""} passHref>
|
||||||
<Switch.Thumb className="Thumb" />
|
<div>
|
||||||
<span className="left">JP</span>
|
<span>{accountData.username}</span>
|
||||||
<span className="right">EN</span>
|
<img
|
||||||
</Switch.Root>
|
alt={userData.picture}
|
||||||
</li>
|
className={`profile ${userData.element}`}
|
||||||
|
srcSet={`/profile/${userData.picture}.png,
|
||||||
|
/profile/${userData.picture}@2x.png 2x`}
|
||||||
|
src={`/profile/${userData.picture}.png`}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="MenuGroup">
|
</Link>
|
||||||
<li className="MenuItem">
|
</li>
|
||||||
<Link href='/teams'>{t('menu.teams')}</Link>
|
<li className="MenuItem">
|
||||||
</li>
|
<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">
|
<li className="MenuItem disabled">
|
||||||
<div>
|
<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>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
</div>
|
</div>
|
||||||
<div className="MenuGroup">
|
<div className="MenuGroup">
|
||||||
<AboutModal />
|
<AboutModal />
|
||||||
</div>
|
<AccountModal />
|
||||||
<div className="MenuGroup">
|
<li className="MenuItem" onClick={props.logout}>
|
||||||
<LoginModal />
|
<span>{t("menu.logout")}</span>
|
||||||
<SignupModal />
|
</li>
|
||||||
</div>
|
</div>
|
||||||
</ul>
|
</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
|
||||||
|
|
@ -1,147 +1,154 @@
|
||||||
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 TopHeader = () => {
|
||||||
const { t } = useTranslation('common')
|
const { t } = useTranslation("common")
|
||||||
|
|
||||||
// Cookies
|
// 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 { account } = useSnapshot(accountState)
|
||||||
const { party } = useSnapshot(appState)
|
const { party } = useSnapshot(appState)
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
|
|
||||||
function copyToClipboard() {
|
function copyToClipboard() {
|
||||||
const el = document.createElement('input')
|
const el = document.createElement("input")
|
||||||
el.value = window.location.href
|
el.value = window.location.href
|
||||||
el.id = 'url-input'
|
el.id = "url-input"
|
||||||
document.body.appendChild(el)
|
document.body.appendChild(el)
|
||||||
|
|
||||||
el.select()
|
el.select()
|
||||||
document.execCommand('copy')
|
document.execCommand("copy")
|
||||||
el.remove()
|
el.remove()
|
||||||
}
|
}
|
||||||
|
|
||||||
function newParty() {
|
function newParty() {
|
||||||
// Push the root URL
|
// Push the root URL
|
||||||
router.push('/')
|
router.push("/")
|
||||||
|
|
||||||
// Clean state
|
// Clean state
|
||||||
const resetState = clonedeep(initialAppState)
|
const resetState = clonedeep(initialAppState)
|
||||||
Object.keys(resetState).forEach((key) => {
|
Object.keys(resetState).forEach((key) => {
|
||||||
appState[key] = resetState[key]
|
appState[key] = resetState[key]
|
||||||
})
|
})
|
||||||
|
|
||||||
// Set party to be editable
|
// Set party to be editable
|
||||||
appState.party.editable = true
|
appState.party.editable = true
|
||||||
}
|
}
|
||||||
|
|
||||||
function logout() {
|
function logout() {
|
||||||
removeAccountCookie('account')
|
deleteCookie("account")
|
||||||
removeUserCookie('user')
|
deleteCookie("user")
|
||||||
|
|
||||||
// Clean state
|
// Clean state
|
||||||
const resetState = clonedeep(initialAccountState)
|
const resetState = clonedeep(initialAccountState)
|
||||||
Object.keys(resetState).forEach((key) => {
|
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
|
return false
|
||||||
}
|
}
|
||||||
|
|
||||||
function toggleFavorite() {
|
function toggleFavorite() {
|
||||||
if (party.favorited)
|
if (party.favorited) unsaveFavorite()
|
||||||
unsaveFavorite()
|
else saveFavorite()
|
||||||
else
|
}
|
||||||
saveFavorite()
|
|
||||||
}
|
|
||||||
|
|
||||||
function saveFavorite() {
|
function saveFavorite() {
|
||||||
if (party.id)
|
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 console.error("Failed to save team: No party ID")
|
||||||
})
|
}
|
||||||
else
|
|
||||||
console.error("Failed to save team: No party ID")
|
|
||||||
}
|
|
||||||
|
|
||||||
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 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>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
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>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
|
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 leftNav = () => {
|
||||||
return (
|
return (
|
||||||
<Header
|
<div className="dropdown">
|
||||||
position="top"
|
<Button icon="menu">{t("buttons.menu")}</Button>
|
||||||
left={ leftNav() }
|
{account.user ? (
|
||||||
right={ rightNav() }
|
<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
|
||||||
Loading…
Reference in a new issue