Move TopHeader to Header
This is a remnant of an old design where there was a BottomHeader as well
This commit is contained in:
parent
adf7f42fc0
commit
0b0af6f4cd
4 changed files with 186 additions and 209 deletions
|
|
@ -1,23 +1,24 @@
|
||||||
.Header {
|
#Header {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
margin-bottom: $unit;
|
margin-bottom: $unit;
|
||||||
|
justify-content: space-between;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
&.bottom {
|
#Right > div {
|
||||||
position: sticky;
|
|
||||||
bottom: $unit * 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
#right > div {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 8px;
|
gap: $unit;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dropdown {
|
#DropdownWrapper {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
position: relative;
|
|
||||||
padding-bottom: $unit;
|
padding-bottom: $unit;
|
||||||
|
|
||||||
|
&:hover .Menu,
|
||||||
|
.Menu.open {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
padding-right: $unit-4x;
|
padding-right: $unit-4x;
|
||||||
|
|
||||||
|
|
@ -25,17 +26,9 @@
|
||||||
background: var(--button-bg-hover);
|
background: var(--button-bg-hover);
|
||||||
color: var(--button-text-hover);
|
color: var(--button-text-hover);
|
||||||
}
|
}
|
||||||
|
|
||||||
.Menu {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.push {
|
|
||||||
margin-left: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include breakpoint(phone) {
|
@include breakpoint(phone) {
|
||||||
.Button .Text {
|
.Button .Text {
|
||||||
display: none;
|
display: none;
|
||||||
|
|
|
||||||
|
|
@ -1,19 +1,183 @@
|
||||||
import React from 'react'
|
import React, { useState } from 'react'
|
||||||
|
import { useSnapshot } from 'valtio'
|
||||||
|
import { deleteCookie } from 'cookies-next'
|
||||||
|
import { useRouter } from 'next/router'
|
||||||
|
import { useTranslation } from 'next-i18next'
|
||||||
|
|
||||||
|
import clonedeep from 'lodash.clonedeep'
|
||||||
|
|
||||||
|
import api from '~utils/api'
|
||||||
|
import { accountState, initialAccountState } from '~utils/accountState'
|
||||||
|
import { appState, initialAppState } from '~utils/appState'
|
||||||
|
|
||||||
|
import Button from '~components/Button'
|
||||||
|
import HeaderMenu from '~components/HeaderMenu'
|
||||||
|
|
||||||
|
import AddIcon from '~public/icons/Add.svg'
|
||||||
|
import LinkIcon from '~public/icons/Link.svg'
|
||||||
|
import MenuIcon from '~public/icons/Menu.svg'
|
||||||
|
import SaveIcon from '~public/icons/Save.svg'
|
||||||
|
import classNames from 'classnames'
|
||||||
|
|
||||||
import './index.scss'
|
import './index.scss'
|
||||||
|
|
||||||
interface Props {
|
const Header = () => {
|
||||||
position: 'top' | 'bottom'
|
// Localization
|
||||||
left: JSX.Element
|
const { t } = useTranslation('common')
|
||||||
right: JSX.Element
|
|
||||||
}
|
// Router
|
||||||
|
const router = useRouter()
|
||||||
|
|
||||||
|
// State management
|
||||||
|
|
||||||
|
// Snapshots
|
||||||
|
const { account } = useSnapshot(accountState)
|
||||||
|
const { party } = useSnapshot(appState)
|
||||||
|
|
||||||
|
function onClickOutsideMenu() {
|
||||||
|
setOpen(!open)
|
||||||
|
}
|
||||||
|
|
||||||
|
function copyToClipboard() {
|
||||||
|
const el = document.createElement('input')
|
||||||
|
el.value = window.location.href
|
||||||
|
el.id = 'url-input'
|
||||||
|
document.body.appendChild(el)
|
||||||
|
|
||||||
|
el.select()
|
||||||
|
document.execCommand('copy')
|
||||||
|
el.remove()
|
||||||
|
}
|
||||||
|
|
||||||
|
function newParty() {
|
||||||
|
// Push the root URL
|
||||||
|
router.push('/')
|
||||||
|
|
||||||
|
// Clean state
|
||||||
|
const resetState = clonedeep(initialAppState)
|
||||||
|
Object.keys(resetState).forEach((key) => {
|
||||||
|
appState[key] = resetState[key]
|
||||||
|
})
|
||||||
|
|
||||||
|
// Set party to be editable
|
||||||
|
appState.party.editable = true
|
||||||
|
}
|
||||||
|
|
||||||
|
function logout() {
|
||||||
|
deleteCookie('account')
|
||||||
|
deleteCookie('user')
|
||||||
|
|
||||||
|
// 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
|
||||||
|
|
||||||
|
router.push('/')
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
|
||||||
|
function toggleFavorite() {
|
||||||
|
if (party.favorited) unsaveFavorite()
|
||||||
|
else saveFavorite()
|
||||||
|
}
|
||||||
|
|
||||||
|
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')
|
||||||
|
}
|
||||||
|
|
||||||
|
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 copyButton = () => {
|
||||||
|
if (router.route === '/p/[party]')
|
||||||
|
return (
|
||||||
|
<Button
|
||||||
|
accessoryIcon={<LinkIcon className="stroke" />}
|
||||||
|
blended={true}
|
||||||
|
text={t('buttons.copy')}
|
||||||
|
onClick={copyToClipboard}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const leftNav = () => {
|
||||||
|
return (
|
||||||
|
<div id="DropdownWrapper">
|
||||||
|
<Button
|
||||||
|
accessoryIcon={<MenuIcon />}
|
||||||
|
className={classNames({ Active: open })}
|
||||||
|
blended={true}
|
||||||
|
text={t('buttons.menu')}
|
||||||
|
onClick={menuButtonClicked}
|
||||||
|
/>
|
||||||
|
<HeaderMenu
|
||||||
|
authenticated={account.authorized}
|
||||||
|
username={account.user?.username}
|
||||||
|
onClickOutside={onClickOutsideMenu}
|
||||||
|
logout={logout}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const saveButton = () => {
|
||||||
|
if (party.favorited)
|
||||||
|
return (
|
||||||
|
<Button
|
||||||
|
accessoryIcon={<SaveIcon />}
|
||||||
|
blended={true}
|
||||||
|
text="Saved"
|
||||||
|
onClick={toggleFavorite}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
else
|
||||||
|
return (
|
||||||
|
<Button
|
||||||
|
accessoryIcon={<SaveIcon />}
|
||||||
|
blended={true}
|
||||||
|
text="Save"
|
||||||
|
onClick={toggleFavorite}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const rightNav = () => {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
{router.route === '/p/[party]' &&
|
||||||
|
account.user &&
|
||||||
|
(!party.user || party.user.id !== account.user.id)
|
||||||
|
? saveButton()
|
||||||
|
: ''}
|
||||||
|
|
||||||
|
{copyButton()}
|
||||||
|
|
||||||
|
<Button
|
||||||
|
accessoryIcon={<AddIcon className="Add" />}
|
||||||
|
blended={true}
|
||||||
|
text={t('buttons.new')}
|
||||||
|
onClick={newParty}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
const Header = (props: Props) => {
|
|
||||||
return (
|
return (
|
||||||
<nav className={`Header ${props.position}`}>
|
<nav id="Header">
|
||||||
<div id="left">{props.left}</div>
|
<div id="Left">{leftNav()}</div>
|
||||||
<div className="push" />
|
<div id="Right">{rightNav()}</div>
|
||||||
<div id="right">{props.right}</div>
|
|
||||||
</nav>
|
</nav>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,180 +0,0 @@
|
||||||
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 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 AddIcon from '~public/icons/Add.svg'
|
|
||||||
import LinkIcon from '~public/icons/Link.svg'
|
|
||||||
import MenuIcon from '~public/icons/Menu.svg'
|
|
||||||
import SaveIcon from '~public/icons/Save.svg'
|
|
||||||
|
|
||||||
const TopHeader = () => {
|
|
||||||
const { t } = useTranslation('common')
|
|
||||||
|
|
||||||
// Cookies
|
|
||||||
const accountCookie = getCookie('account')
|
|
||||||
const userCookie = getCookie('user')
|
|
||||||
|
|
||||||
const headers = {}
|
|
||||||
// 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')
|
|
||||||
el.value = window.location.href
|
|
||||||
el.id = 'url-input'
|
|
||||||
document.body.appendChild(el)
|
|
||||||
|
|
||||||
el.select()
|
|
||||||
document.execCommand('copy')
|
|
||||||
el.remove()
|
|
||||||
}
|
|
||||||
|
|
||||||
function newParty() {
|
|
||||||
// Push the root URL
|
|
||||||
router.push('/')
|
|
||||||
|
|
||||||
// Clean state
|
|
||||||
const resetState = clonedeep(initialAppState)
|
|
||||||
Object.keys(resetState).forEach((key) => {
|
|
||||||
appState[key] = resetState[key]
|
|
||||||
})
|
|
||||||
|
|
||||||
// Set party to be editable
|
|
||||||
appState.party.editable = true
|
|
||||||
}
|
|
||||||
|
|
||||||
function logout() {
|
|
||||||
deleteCookie('account')
|
|
||||||
deleteCookie('user')
|
|
||||||
|
|
||||||
// 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
|
|
||||||
|
|
||||||
router.push('/')
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
|
|
||||||
function toggleFavorite() {
|
|
||||||
if (party.favorited) unsaveFavorite()
|
|
||||||
else saveFavorite()
|
|
||||||
}
|
|
||||||
|
|
||||||
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')
|
|
||||||
}
|
|
||||||
|
|
||||||
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 copyButton = () => {
|
|
||||||
if (router.route === '/p/[party]')
|
|
||||||
return (
|
|
||||||
<Button
|
|
||||||
accessoryIcon={<LinkIcon className="stroke" />}
|
|
||||||
blended={true}
|
|
||||||
text={t('buttons.copy')}
|
|
||||||
onClick={copyToClipboard}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
const leftNav = () => {
|
|
||||||
return (
|
|
||||||
<div className="dropdown">
|
|
||||||
<Button
|
|
||||||
accessoryIcon={<MenuIcon />}
|
|
||||||
blended={true}
|
|
||||||
text={t('buttons.menu')}
|
|
||||||
/>
|
|
||||||
{account.user ? (
|
|
||||||
<HeaderMenu
|
|
||||||
authenticated={account.authorized}
|
|
||||||
username={account.user.username}
|
|
||||||
logout={logout}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<HeaderMenu authenticated={account.authorized} />
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
const saveButton = () => {
|
|
||||||
if (party.favorited)
|
|
||||||
return (
|
|
||||||
<Button
|
|
||||||
accessoryIcon={<SaveIcon />}
|
|
||||||
blended={true}
|
|
||||||
text="Saved"
|
|
||||||
onClick={toggleFavorite}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
else
|
|
||||||
return (
|
|
||||||
<Button
|
|
||||||
accessoryIcon={<SaveIcon />}
|
|
||||||
blended={true}
|
|
||||||
text="Save"
|
|
||||||
onClick={toggleFavorite}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
const rightNav = () => {
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
{router.route === '/p/[party]' &&
|
|
||||||
account.user &&
|
|
||||||
(!party.user || party.user.id !== account.user.id)
|
|
||||||
? saveButton()
|
|
||||||
: ''}
|
|
||||||
|
|
||||||
{copyButton()}
|
|
||||||
|
|
||||||
<Button
|
|
||||||
accessoryIcon={<AddIcon className="Add" />}
|
|
||||||
blended={true}
|
|
||||||
text={t('buttons.new')}
|
|
||||||
onClick={newParty}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
return <Header position="top" left={leftNav()} right={rightNav()} />
|
|
||||||
}
|
|
||||||
|
|
||||||
export default TopHeader
|
|
||||||
Loading…
Reference in a new issue