diff --git a/components/TopHeader/index.tsx b/components/TopHeader/index.tsx index 99bd9a54..2893ff26 100644 --- a/components/TopHeader/index.tsx +++ b/components/TopHeader/index.tsx @@ -4,6 +4,7 @@ import { useRouter } from 'next/router' import clonedeep from 'lodash.clonedeep' import { useSnapshot } from 'valtio' +import api from '~utils/api' import { accountState } from '~utils/accountState' import { appState, initialAppState } from '~utils/appState' @@ -12,9 +13,14 @@ import Button from '~components/Button' import HeaderMenu from '~components/HeaderMenu' const TopHeader = () => { + // Cookies const [cookies, _, removeCookie] = useCookies(['user']) + const headers = (cookies.user != null) ? { + 'Authorization': `Bearer ${cookies.user.access_token}` + } : {} - const accountSnap = useSnapshot(accountState) + const { account } = useSnapshot(accountState) + const { party } = useSnapshot(appState) const router = useRouter() function copyToClipboard() { @@ -53,21 +59,52 @@ const TopHeader = () => { return false } + function toggleFavorite() { + if (party.favorited) + unsaveFavorite() + else + saveFavorite() + } + + function saveFavorite() { + if (party.id) + api.saveTeam({ id: party.id, params: headers }) + else + console.error("Failed to save team: No party ID") + } + + function unsaveFavorite() { + if (party.id) + api.unsaveTeam({ id: party.id, params: headers }) + else + console.error("Failed to unsave team: No party ID") + } + const leftNav = () => { return (
- { (accountSnap.account.user) ? - : - + { (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]') ? : '' }