Change how we handle modals

components/AccountModal/index.tsx

@@ -34,300 +34,306 @@ 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>(
-  // Localization
+  function AccountModal(props: Props, forwardedRef) {
-  const { t } = useTranslation('common')
+    // Localization
-  const router = useRouter()
+    const { t } = useTranslation('common')
-  const locale =
+    const router = useRouter()
-    router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en'
+    const locale =
+      router.locale && ['en', 'ja'].includes(router.locale)
+        ? router.locale
+        : 'en'
 
-  // useEffect only runs on the client, so now we can safely show the UI
+    // useEffect only runs on the client, so now we can safely show the UI
-  const [mounted, setMounted] = useState(false)
+    const [mounted, setMounted] = useState(false)
-  const { theme: appTheme, setTheme: setAppTheme } = useTheme()
+    const { theme: appTheme, setTheme: setAppTheme } = useTheme()
 
-  // Cookies
+    // Cookies
-  const accountCookie = getCookie('account')
+    const accountCookie = getCookie('account')
-  const userCookie = getCookie('user')
+    const userCookie = getCookie('user')
 
-  const cookieData = {
+    const cookieData = {
-    account: accountCookie ? JSON.parse(accountCookie as string) : undefined,
+      account: accountCookie ? JSON.parse(accountCookie as string) : undefined,
-    user: userCookie ? JSON.parse(userCookie as string) : undefined,
+      user: userCookie ? JSON.parse(userCookie as string) : undefined,
-  }
-
-  // UI State
-  const [open, setOpen] = useState(false)
-  const [selectOpenState, setSelectOpenState] = useState<StateVariables>({
-    picture: false,
-    gender: false,
-    language: false,
-    theme: false,
-  })
-
-  // Values
-  const [username, setUsername] = useState(props.username || '')
-  const [picture, setPicture] = useState(props.picture || '')
-  const [language, setLanguage] = useState(props.language || '')
-  const [gender, setGender] = useState(props.gender || 0)
-  const [theme, setTheme] = useState(props.theme || 'system')
-  // const [privateProfile, setPrivateProfile] = useState(false)
-
-  // Setup
-  const [pictureOpen, setPictureOpen] = useState(false)
-  const [genderOpen, setGenderOpen] = useState(false)
-  const [languageOpen, setLanguageOpen] = useState(false)
-  const [themeOpen, setThemeOpen] = useState(false)
-
-  // Refs
-  const headerRef = React.createRef<HTMLDivElement>()
-  const footerRef = React.createRef<HTMLDivElement>()
-
-  // UI management
-  function openChange(open: boolean) {
-    setOpen(open)
-  }
-
-  function openSelect(name: 'picture' | 'gender' | 'language' | 'theme') {
-    setPictureOpen(name === 'picture' ? !pictureOpen : false)
-    setGenderOpen(name === 'gender' ? !genderOpen : false)
-    setLanguageOpen(name === 'language' ? !languageOpen : false)
-    setThemeOpen(name === 'theme' ? !themeOpen : false)
-  }
-
-  // Event handlers
-  function handlePictureChange(value: string) {
-    setPicture(value)
-  }
-
-  function handleLanguageChange(value: string) {
-    setLanguage(value)
-  }
-
-  function handleGenderChange(value: string) {
-    setGender(parseInt(value))
-  }
-
-  function handleThemeChange(value: string) {
-    setTheme(value)
-    setAppTheme(value)
-  }
-
-  function onEscapeKeyDown(event: KeyboardEvent) {
-    if (pictureOpen || genderOpen || languageOpen || themeOpen) {
-      return event.preventDefault()
-    } else {
-      setOpen(false)
-    }
-  }
-
-  // API calls
-  function update(event: React.FormEvent<HTMLFormElement>) {
-    event.preventDefault()
-
-    const object = {
-      user: {
-        picture: picture,
-        element: pictureData.find((i) => i.filename === picture)?.element,
-        language: language,
-        gender: gender,
-        theme: theme,
-        // private: privateProfile,
-      },
     }
 
-    if (accountState.account.user) {
+    // UI State
-      api.endpoints.users
+    const [open, setOpen] = useState(false)
-        .update(accountState.account.user?.id, object)
+    const [selectOpenState, setSelectOpenState] = useState<StateVariables>({
-        .then((response) => {
+      picture: false,
-          const user = response.data
+      gender: false,
-
+      language: false,
-          const cookieObj = {
+      theme: false,
-            picture: user.avatar.picture,
-            element: user.avatar.element,
-            gender: user.gender,
-            language: user.language,
-            theme: user.theme,
-          }
-
-          const expiresAt = new Date()
-          expiresAt.setDate(expiresAt.getDate() + 60)
-          setCookie('user', cookieObj, { path: '/', expires: expiresAt })
-
-          accountState.account.user = {
-            id: user.id,
-            username: user.username,
-            picture: user.avatar.picture,
-            element: user.avatar.element,
-            language: user.language,
-            theme: user.theme,
-            gender: user.gender,
-          }
-
-          setOpen(false)
-          changeLanguage(router, user.language)
-        })
-    }
-  }
-
-  // Views
-  const pictureOptions = pictureData
-    .sort((a, b) => (a.name.en > b.name.en ? 1 : -1))
-    .map((item, i) => {
-      return (
-        <PictureSelectItem
-          key={`picture-${i}`}
-          element={item.element}
-          src={[
-            `/profile/${item.filename}.png`,
-            `/profile/${item.filename}@2x.png 2x`,
-          ]}
-          value={item.filename}
-        >
-          {item.name[locale]}
-        </PictureSelectItem>
-      )
     })
 
-  const pictureField = () => (
+    // Values
-    <SelectTableField
+    const [username, setUsername] = useState(props.username || '')
-      name="picture"
+    const [picture, setPicture] = useState(props.picture || '')
-      description={t('modals.settings.descriptions.picture')}
+    const [language, setLanguage] = useState(props.language || '')
-      className="Image"
+    const [gender, setGender] = useState(props.gender || 0)
-      label={t('modals.settings.labels.picture')}
+    const [theme, setTheme] = useState(props.theme || 'system')
-      open={pictureOpen}
+    // const [privateProfile, setPrivateProfile] = useState(false)
-      onOpenChange={() => openSelect('picture')}
-      onChange={handlePictureChange}
-      onClose={() => setPictureOpen(false)}
-      imageAlt={t('modals.settings.labels.image_alt')}
-      imageClass={pictureData.find((i) => i.filename === picture)?.element}
-      imageSrc={[`/profile/${picture}.png`, `/profile/${picture}@2x.png 2x`]}
-      value={picture}
-    >
-      {pictureOptions}
-    </SelectTableField>
-  )
 
-  const genderField = () => (
+    // Setup
-    <SelectTableField
+    const [pictureOpen, setPictureOpen] = useState(false)
-      name="gender"
+    const [genderOpen, setGenderOpen] = useState(false)
-      description={t('modals.settings.descriptions.gender')}
+    const [languageOpen, setLanguageOpen] = useState(false)
-      label={t('modals.settings.labels.gender')}
+    const [themeOpen, setThemeOpen] = useState(false)
-      open={genderOpen}
-      onOpenChange={() => openSelect('gender')}
-      onChange={handleGenderChange}
-      onClose={() => setGenderOpen(false)}
-      value={`${gender}`}
-    >
-      <SelectItem key="gran" value="0">
-        {t('modals.settings.gender.gran')}
-      </SelectItem>
-      <SelectItem key="djeeta" value="1">
-        {t('modals.settings.gender.djeeta')}
-      </SelectItem>
-    </SelectTableField>
-  )
 
-  const languageField = () => (
+    // Refs
-    <SelectTableField
+    const headerRef = React.createRef<HTMLDivElement>()
-      name="language"
+    const footerRef = React.createRef<HTMLDivElement>()
-      label={t('modals.settings.labels.language')}
-      open={languageOpen}
-      onOpenChange={() => openSelect('language')}
-      onChange={handleLanguageChange}
-      onClose={() => setLanguageOpen(false)}
-      value={language}
-    >
-      <SelectItem key="en" value="en">
-        {t('modals.settings.language.english')}
-      </SelectItem>
-      <SelectItem key="ja" value="ja">
-        {t('modals.settings.language.japanese')}
-      </SelectItem>
-    </SelectTableField>
-  )
 
-  const themeField = () => (
+    useEffect(() => {
-    <SelectTableField
+      setOpen(props.open)
-      name="theme"
+    }, [props.open])
-      label={t('modals.settings.labels.theme')}
-      open={themeOpen}
-      onOpenChange={() => openSelect('theme')}
-      onChange={handleThemeChange}
-      onClose={() => setThemeOpen(false)}
-      value={theme}
-    >
-      <SelectItem key="system" value="system">
-        {t('modals.settings.theme.system')}
-      </SelectItem>
-      <SelectItem key="light" value="light">
-        {t('modals.settings.theme.light')}
-      </SelectItem>
-      <SelectItem key="dark" value="dark">
-        {t('modals.settings.theme.dark')}
-      </SelectItem>
-    </SelectTableField>
-  )
 
-  useEffect(() => {
+    // UI management
-    setMounted(true)
+    function openChange(open: boolean) {
-  }, [])
+      if (props.onOpenChange) props.onOpenChange(open)
+      setOpen(open)
+    }
 
-  if (!mounted) {
+    function openSelect(name: 'picture' | 'gender' | 'language' | 'theme') {
-    return null
+      setPictureOpen(name === 'picture' ? !pictureOpen : false)
-  }
+      setGenderOpen(name === 'gender' ? !genderOpen : false)
+      setLanguageOpen(name === 'language' ? !languageOpen : false)
+      setThemeOpen(name === 'theme' ? !themeOpen : false)
+    }
 
-  return (
+    // Event handlers
-    <Dialog open={open} onOpenChange={openChange}>
+    function handlePictureChange(value: string) {
-      <DialogTrigger asChild>
+      setPicture(value)
-        <div className="MenuItem">
+    }
-          <span>{t('menu.settings')}</span>
+
-        </div>
+    function handleLanguageChange(value: string) {
-      </DialogTrigger>
+      setLanguage(value)
-      <DialogContent
+    }
-        className="Account"
+
-        headerref={headerRef}
+    function handleGenderChange(value: string) {
-        footerref={footerRef}
+      setGender(parseInt(value))
-        onOpenAutoFocus={(event: Event) => {}}
+    }
-        onEscapeKeyDown={onEscapeKeyDown}
+
+    function handleThemeChange(value: string) {
+      setTheme(value)
+      setAppTheme(value)
+    }
+
+    function onEscapeKeyDown(event: KeyboardEvent) {
+      if (pictureOpen || genderOpen || languageOpen || themeOpen) {
+        return event.preventDefault()
+      } else {
+        setOpen(false)
+      }
+    }
+
+    // API calls
+    function update(event: React.FormEvent<HTMLFormElement>) {
+      event.preventDefault()
+
+      const object = {
+        user: {
+          picture: picture,
+          element: pictureData.find((i) => i.filename === picture)?.element,
+          language: language,
+          gender: gender,
+          theme: theme,
+          // private: privateProfile,
+        },
+      }
+
+      if (accountState.account.user) {
+        api.endpoints.users
+          .update(accountState.account.user?.id, object)
+          .then((response) => {
+            const user = response.data
+
+            const cookieObj = {
+              picture: user.avatar.picture,
+              element: user.avatar.element,
+              gender: user.gender,
+              language: user.language,
+              theme: user.theme,
+            }
+
+            const expiresAt = new Date()
+            expiresAt.setDate(expiresAt.getDate() + 60)
+            setCookie('user', cookieObj, { path: '/', expires: expiresAt })
+
+            accountState.account.user = {
+              id: user.id,
+              username: user.username,
+              picture: user.avatar.picture,
+              element: user.avatar.element,
+              language: user.language,
+              theme: user.theme,
+              gender: user.gender,
+            }
+
+            setOpen(false)
+            changeLanguage(router, user.language)
+          })
+      }
+    }
+
+    // Views
+    const pictureOptions = pictureData
+      .sort((a, b) => (a.name.en > b.name.en ? 1 : -1))
+      .map((item, i) => {
+        return (
+          <PictureSelectItem
+            key={`picture-${i}`}
+            element={item.element}
+            src={[
+              `/profile/${item.filename}.png`,
+              `/profile/${item.filename}@2x.png 2x`,
+            ]}
+            value={item.filename}
+          >
+            {item.name[locale]}
+          </PictureSelectItem>
+        )
+      })
+
+    const pictureField = () => (
+      <SelectTableField
+        name="picture"
+        description={t('modals.settings.descriptions.picture')}
+        className="Image"
+        label={t('modals.settings.labels.picture')}
+        open={pictureOpen}
+        onOpenChange={() => openSelect('picture')}
+        onChange={handlePictureChange}
+        onClose={() => setPictureOpen(false)}
+        imageAlt={t('modals.settings.labels.image_alt')}
+        imageClass={pictureData.find((i) => i.filename === picture)?.element}
+        imageSrc={[`/profile/${picture}.png`, `/profile/${picture}@2x.png 2x`]}
+        value={picture}
       >
-        <div className="DialogHeader" ref={headerRef}>
+        {pictureOptions}
-          <div className="DialogTop">
+      </SelectTableField>
-            <DialogTitle className="SubTitle">
+    )
-              {t('modals.settings.title')}
-            </DialogTitle>
-            <DialogTitle className="DialogTitle">@{username}</DialogTitle>
-          </div>
-          <DialogClose className="DialogClose" asChild>
-            <span>
-              <CrossIcon />
-            </span>
-          </DialogClose>
-        </div>
 
-        <form onSubmit={update}>
+    const genderField = () => (
-          <div className="Fields">
+      <SelectTableField
-            {pictureField()}
+        name="gender"
-            {genderField()}
+        description={t('modals.settings.descriptions.gender')}
-            {languageField()}
+        label={t('modals.settings.labels.gender')}
-            {themeField()}
+        open={genderOpen}
+        onOpenChange={() => openSelect('gender')}
+        onChange={handleGenderChange}
+        onClose={() => setGenderOpen(false)}
+        value={`${gender}`}
+      >
+        <SelectItem key="gran" value="0">
+          {t('modals.settings.gender.gran')}
+        </SelectItem>
+        <SelectItem key="djeeta" value="1">
+          {t('modals.settings.gender.djeeta')}
+        </SelectItem>
+      </SelectTableField>
+    )
+
+    const languageField = () => (
+      <SelectTableField
+        name="language"
+        label={t('modals.settings.labels.language')}
+        open={languageOpen}
+        onOpenChange={() => openSelect('language')}
+        onChange={handleLanguageChange}
+        onClose={() => setLanguageOpen(false)}
+        value={language}
+      >
+        <SelectItem key="en" value="en">
+          {t('modals.settings.language.english')}
+        </SelectItem>
+        <SelectItem key="ja" value="ja">
+          {t('modals.settings.language.japanese')}
+        </SelectItem>
+      </SelectTableField>
+    )
+
+    const themeField = () => (
+      <SelectTableField
+        name="theme"
+        label={t('modals.settings.labels.theme')}
+        open={themeOpen}
+        onOpenChange={() => openSelect('theme')}
+        onChange={handleThemeChange}
+        onClose={() => setThemeOpen(false)}
+        value={theme}
+      >
+        <SelectItem key="system" value="system">
+          {t('modals.settings.theme.system')}
+        </SelectItem>
+        <SelectItem key="light" value="light">
+          {t('modals.settings.theme.light')}
+        </SelectItem>
+        <SelectItem key="dark" value="dark">
+          {t('modals.settings.theme.dark')}
+        </SelectItem>
+      </SelectTableField>
+    )
+
+    useEffect(() => {
+      setMounted(true)
+    }, [])
+
+    if (!mounted) {
+      return null
+    }
+
+    return (
+      <Dialog open={open} onOpenChange={openChange}>
+        <DialogContent
+          className="Account"
+          headerref={headerRef}
+          footerref={footerRef}
+          onOpenAutoFocus={(event: Event) => {}}
+          onEscapeKeyDown={onEscapeKeyDown}
+        >
+          <div className="DialogHeader" ref={headerRef}>
+            <div className="DialogTop">
+              <DialogTitle className="SubTitle">
+                {t('modals.settings.title')}
+              </DialogTitle>
+              <DialogTitle className="DialogTitle">@{username}</DialogTitle>
+            </div>
+            <DialogClose className="DialogClose" asChild>
+              <span>
+                <CrossIcon />
+              </span>
+            </DialogClose>
           </div>
-          <div className="DialogFooter" ref={footerRef}>
+
-            <Button
+          <form onSubmit={update}>
-              contained={true}
+            <div className="Fields">
-              text={t('modals.settings.buttons.confirm')}
+              {pictureField()}
-            />
+              {genderField()}
-          </div>
+              {languageField()}
-        </form>
+              {themeField()}
-      </DialogContent>
+            </div>
-    </Dialog>
+            <div className="DialogFooter" ref={footerRef}>
-  )
+              <Button
-}
+                contained={true}
+                text={t('modals.settings.buttons.confirm')}
+              />
+            </div>
+          </form>
+        </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}
+              onClick={() => setSettingsModalOpen(true)}
-              asChild
             >
-              <AccountModal
+              <span>{t('menu.settings')}</span>
-                username={account.user.username}
-                picture={account.user.picture}
-                gender={account.user.gender}
-                language={account.user.language}
-                theme={account.user.theme}
-              />
             </DropdownMenuItem>
             <DropdownMenuItem className="MenuItem" onClick={logout}>
               <span>{t('menu.logout')}</span>
@@ -405,8 +431,18 @@ const Header = () => {
           </DropdownMenuGroup>
           <DropdownMenuSeparator />
           <DropdownMenuGroup className="MenuGroup">
-            <LoginModal />
+            <DropdownMenuItem
-            <SignupModal />
+              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}