From 0b0af6f4cd9c9fd236a0aefdafb39e5bad7b8094 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Tue, 27 Dec 2022 17:07:58 -0800
Subject: [PATCH] Move TopHeader to Header

This is a remnant of an old design where there was a BottomHeader as well
---
 components/Header/index.scss    |  29 ++---
 components/Header/index.tsx     | 186 ++++++++++++++++++++++++++++++--
 components/TopHeader/index.scss |   0
 components/TopHeader/index.tsx  | 180 -------------------------------
 4 files changed, 186 insertions(+), 209 deletions(-)
 delete mode 100644 components/TopHeader/index.scss
 delete mode 100644 components/TopHeader/index.tsx

diff --git a/components/Header/index.scss b/components/Header/index.scss
index b80b650e..6599906d 100644
--- a/components/Header/index.scss
+++ b/components/Header/index.scss
@@ -1,23 +1,24 @@
-.Header {
+#Header {
   display: flex;
+  flex-direction: row;
   margin-bottom: $unit;
+  justify-content: space-between;
   width: 100%;
 
-  &.bottom {
-    position: sticky;
-    bottom: $unit * 2;
-  }
-
-  #right > div {
+  #Right > div {
     display: flex;
-    gap: 8px;
+    gap: $unit;
   }
 
-  .dropdown {
+  #DropdownWrapper {
     display: inline-block;
-    position: relative;
     padding-bottom: $unit;
 
+    &:hover .Menu,
+    .Menu.open {
+      display: block;
+    }
+
     &:hover {
       padding-right: $unit-4x;
 
@@ -25,17 +26,9 @@
         background: var(--button-bg-hover);
         color: var(--button-text-hover);
       }
-
-      .Menu {
-        display: block;
-      }
     }
   }
 
-  .push {
-    margin-left: auto;
-  }
-
   @include breakpoint(phone) {
     .Button .Text {
       display: none;
diff --git a/components/Header/index.tsx b/components/Header/index.tsx
index 16ec9bea..ad34982e 100644
--- a/components/Header/index.tsx
+++ b/components/Header/index.tsx
@@ -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'
 
-interface Props {
-  position: 'top' | 'bottom'
-  left: JSX.Element
-  right: JSX.Element
-}
+const Header = () => {
+  // Localization
+  const { t } = useTranslation('common')
+
+  // 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 (
-    <nav className={`Header ${props.position}`}>
-      <div id="left">{props.left}</div>
-      <div className="push" />
-      <div id="right">{props.right}</div>
+    <nav id="Header">
+      <div id="Left">{leftNav()}</div>
+      <div id="Right">{rightNav()}</div>
     </nav>
   )
 }
diff --git a/components/TopHeader/index.scss b/components/TopHeader/index.scss
deleted file mode 100644
index e69de29b..00000000
diff --git a/components/TopHeader/index.tsx b/components/TopHeader/index.tsx
deleted file mode 100644
index 72087f56..00000000
--- a/components/TopHeader/index.tsx
+++ /dev/null
@@ -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