Change how we handle modals

components/AccountModal/index.tsx

@@ -34,20 +34,25 @@ type StateVariables = {
 }
 
 interface Props {
+  open: boolean
   username?: string
   picture?: string
   gender?: number
   language?: string
   theme?: string
   private?: boolean
+  onOpenChange?: (open: boolean) => void
 }
 
-const AccountModal = (props: Props) => {
+const AccountModal = React.forwardRef<HTMLDivElement, Props>(
+  function AccountModal(props: Props, forwardedRef) {
     // Localization
     const { t } = useTranslation('common')
     const router = useRouter()
     const locale =
-    router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en'
+      router.locale && ['en', 'ja'].includes(router.locale)
+        ? router.locale
+        : 'en'
 
     // useEffect only runs on the client, so now we can safely show the UI
     const [mounted, setMounted] = useState(false)
@@ -89,8 +94,13 @@ const AccountModal = (props: Props) => {
     const headerRef = React.createRef<HTMLDivElement>()
     const footerRef = React.createRef<HTMLDivElement>()
 
+    useEffect(() => {
+      setOpen(props.open)
+    }, [props.open])
+
     // UI management
     function openChange(open: boolean) {
+      if (props.onOpenChange) props.onOpenChange(open)
       setOpen(open)
     }
 
@@ -285,11 +295,6 @@ const AccountModal = (props: Props) => {
 
     return (
       <Dialog open={open} onOpenChange={openChange}>
-      <DialogTrigger asChild>
-        <div className="MenuItem">
-          <span>{t('menu.settings')}</span>
-        </div>
-      </DialogTrigger>
         <DialogContent
           className="Account"
           headerref={headerRef}
@@ -328,6 +333,7 @@ const AccountModal = (props: Props) => {
         </DialogContent>
       </Dialog>
     )
-}
+  }
+)
 
 export default AccountModal

components/Header/index.tsx

@@ -5,22 +5,13 @@ import { useRouter } from 'next/router'
 import { useTranslation } from 'next-i18next'
 import classNames from 'classnames'
 import clonedeep from 'lodash.clonedeep'
+import Link from 'next/link'
 
 import api from '~utils/api'
 import { accountState, initialAccountState } from '~utils/accountState'
 import { appState, initialAppState } from '~utils/appState'
 import capitalizeFirstLetter from '~utils/capitalizeFirstLetter'
 
-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 ArrowIcon from '~public/icons/Arrow.svg'
-import SaveIcon from '~public/icons/Save.svg'
-
-import './index.scss'
 import {
   DropdownMenu,
   DropdownMenuTrigger,
@@ -29,11 +20,18 @@ import {
   DropdownMenuItem,
   DropdownMenuSeparator,
 } from '~components/DropdownMenuContent'
-import Link from 'next/link'
 import LoginModal from '~components/LoginModal'
 import SignupModal from '~components/SignupModal'
 import AccountModal from '~components/AccountModal'
 import Toast from '~components/Toast'
+import Button from '~components/Button'
+
+import LinkIcon from '~public/icons/Link.svg'
+import MenuIcon from '~public/icons/Menu.svg'
+import ArrowIcon from '~public/icons/Arrow.svg'
+import SaveIcon from '~public/icons/Save.svg'
+
+import './index.scss'
 
 const Header = () => {
   // Localization
@@ -44,6 +42,9 @@ const Header = () => {
 
   // State management
   const [copyToastOpen, setCopyToastOpen] = useState(false)
+  const [loginModalOpen, setLoginModalOpen] = useState(false)
+  const [signupModalOpen, setSignupModalOpen] = useState(false)
+  const [settingsModalOpen, setSettingsModalOpen] = useState(false)
   const [leftMenuOpen, setLeftMenuOpen] = useState(false)
   const [rightMenuOpen, setRightMenuOpen] = useState(false)
 
@@ -82,6 +83,10 @@ const Header = () => {
     setRightMenuOpen(false)
   }
 
+  function handleSettingsOpenChanged(open: boolean) {
+    setRightMenuOpen(false)
+  }
+
   function copyToClipboard() {
     const el = document.createElement('input')
     el.value = window.location.href
@@ -238,6 +243,34 @@ const Header = () => {
     )
   }
 
+  const settingsModal = () => {
+    const user = accountState.account.user
+
+    if (user) {
+      return (
+        <AccountModal
+          open={settingsModalOpen}
+          username={user.username}
+          picture={user.picture}
+          gender={user.gender}
+          language={user.language}
+          theme={user.theme}
+          onOpenChange={setSettingsModalOpen}
+        />
+      )
+    }
+  }
+
+  const loginModal = () => {
+    return <LoginModal open={loginModalOpen} onOpenChange={setLoginModalOpen} />
+  }
+
+  const signupModal = () => {
+    return (
+      <SignupModal open={signupModalOpen} onOpenChange={setSignupModalOpen} />
+    )
+  }
+
   const left = () => {
     return (
       <section>
@@ -374,16 +407,9 @@ const Header = () => {
           <DropdownMenuGroup className="MenuGroup">
             <DropdownMenuItem
               className="MenuItem"
-              onClick={closeRightMenu}
-              asChild
+              onClick={() => setSettingsModalOpen(true)}
             >
-              <AccountModal
-                username={account.user.username}
-                picture={account.user.picture}
-                gender={account.user.gender}
-                language={account.user.language}
-                theme={account.user.theme}
-              />
+              <span>{t('menu.settings')}</span>
             </DropdownMenuItem>
             <DropdownMenuItem className="MenuItem" onClick={logout}>
               <span>{t('menu.logout')}</span>
@@ -405,8 +431,18 @@ const Header = () => {
           </DropdownMenuGroup>
           <DropdownMenuSeparator />
           <DropdownMenuGroup className="MenuGroup">
-            <LoginModal />
-            <SignupModal />
+            <DropdownMenuItem
+              className="MenuItem"
+              onClick={() => setLoginModalOpen(true)}
+            >
+              <span>Log in</span>
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              className="MenuItem"
+              onClick={() => setSignupModalOpen(true)}
+            >
+              <span>Sign up</span>
+            </DropdownMenuItem>
           </DropdownMenuGroup>
         </>
       )
@@ -420,6 +456,9 @@ const Header = () => {
       {left()}
       {right()}
       {urlCopyToast()}
+      {settingsModal()}
+      {loginModal()}
+      {signupModal()}
     </nav>
   )
 }

components/LoginModal/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { setCookie } from 'cookies-next'
 import { useRouter } from 'next/router'
 import { useTranslation } from 'react-i18next'
@@ -26,7 +26,12 @@ interface ErrorMap {
 const emailRegex =
   /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
 
-const LoginModal = () => {
+interface Props {
+  open: boolean
+  onOpenChange?: (open: boolean) => void
+}
+
+const LoginModal = (props: Props) => {
   const router = useRouter()
   const { t } = useTranslation('common')
 
@@ -46,6 +51,10 @@ const LoginModal = () => {
   const footerRef: React.RefObject<HTMLDivElement> = React.createRef()
   const form: React.RefObject<HTMLInputElement>[] = [emailInput, passwordInput]
 
+  useEffect(() => {
+    setOpen(props.open)
+  }, [props.open])
+
   function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
     const { name, value } = event.target
     let newErrors = { ...errors }
@@ -185,6 +194,8 @@ const LoginModal = () => {
       email: '',
       password: '',
     })
+
+    if (props.onOpenChange) props.onOpenChange(open)
   }
 
   function onEscapeKeyDown(event: KeyboardEvent) {
@@ -198,11 +209,6 @@ const LoginModal = () => {
 
   return (
     <Dialog open={open} onOpenChange={openChange}>
-      <DialogTrigger asChild>
-        <div className="MenuItem">
-          <span>{t('menu.login')}</span>
-        </div>
-      </DialogTrigger>
       <DialogContent
         className="Login"
         footerref={footerRef}

components/SignupModal/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { setCookie } from 'cookies-next'
 import { useRouter } from 'next/router'
 import { useTranslation } from 'next-i18next'
@@ -15,7 +15,10 @@ import DialogContent from '~components/DialogContent'
 import CrossIcon from '~public/icons/Cross.svg'
 import './index.scss'
 
-interface Props {}
+interface Props {
+  open: boolean
+  onOpenChange?: (open: boolean) => void
+}
 
 interface ErrorMap {
   [index: string]: string
@@ -58,6 +61,10 @@ const SignupModal = (props: Props) => {
     passwordConfirmationInput,
   ]
 
+  useEffect(() => {
+    setOpen(props.open)
+  }, [props.open])
+
   function register(event: React.FormEvent) {
     event.preventDefault()
 
@@ -266,6 +273,8 @@ const SignupModal = (props: Props) => {
       password: '',
       passwordConfirmation: '',
     })
+
+    if (props.onOpenChange) props.onOpenChange(open)
   }
 
   function onEscapeKeyDown(event: KeyboardEvent) {
@@ -279,11 +288,6 @@ const SignupModal = (props: Props) => {
 
   return (
     <Dialog open={open} onOpenChange={openChange}>
-      <DialogTrigger asChild>
-        <div className="MenuItem">
-          <span>{t('menu.signup')}</span>
-        </div>
-      </DialogTrigger>
       <DialogContent
         className="Signup"
         footerref={footerRef}