Refactor Header and add logout confirmation

components/Header/index.tsx

@@ -9,6 +9,7 @@ import Link from 'next/link'
 import { accountState, initialAccountState } from '~utils/accountState'
 import { appState, initialAppState } from '~utils/appState'
 
+import Alert from '~components/common/Alert'
 import {
   DropdownMenu,
   DropdownMenuTrigger,
@@ -41,6 +42,7 @@ const Header = () => {
     router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en'
 
   // State management
+  const [alertOpen, setAlertOpen] = useState(false)
   const [loginModalOpen, setLoginModalOpen] = useState(false)
   const [signupModalOpen, setSignupModalOpen] = useState(false)
   const [settingsModalOpen, setSettingsModalOpen] = useState(false)
@@ -109,12 +111,11 @@ const Header = () => {
     router.push('/new', undefined, { shallow: true })
   }
 
+  // Methods: Rendering
   const profileImage = () => {
-    let image
-
     const user = accountState.account.user
     if (accountState.account.authorized && user) {
-      image = (
+      return (
         <img
           alt={user.username}
           className={`profile ${user.avatar.element}`}
@@ -124,7 +125,7 @@ const Header = () => {
         />
       )
     } else {
-      image = (
+      return (
         <img
           alt={t('no_user')}
           className={`profile anonymous`}
@@ -134,13 +135,10 @@ const Header = () => {
         />
       )
     }
-
-    return image
   }
 
   // Rendering: Buttons
-  const newButton = () => {
-    return (
+  const newButton = (
     <Tooltip content={t('tooltips.new')}>
       <Button
         leftAccessoryIcon={<PlusIcon />}
@@ -151,93 +149,47 @@ const Header = () => {
       />
     </Tooltip>
   )
-  }
 
   // Rendering: Modals
-  const settingsModal = () => {
-    const user = accountState.account.user
+  const logoutConfirmationAlert = (
+    <Alert
+      message={t('alert.confirm_logout')}
+      open={alertOpen}
+      primaryActionText="Log out"
+      primaryAction={logout}
+      cancelActionText="Nevermind"
+      cancelAction={() => setAlertOpen(false)}
+    />
+  )
 
-    if (user) {
-      return (
+  const settingsModal = (
+    <>
+      {accountState.account.user && (
         <AccountModal
           open={settingsModalOpen}
-          username={user.username}
-          picture={user.avatar.picture}
-          gender={user.gender}
-          language={user.language}
-          theme={user.theme}
+          username={accountState.account.user.username}
+          picture={accountState.account.user.avatar.picture}
+          gender={accountState.account.user.gender}
+          language={accountState.account.user.language}
+          theme={accountState.account.user.theme}
           onOpenChange={setSettingsModalOpen}
         />
+      )}
+    </>
   )
-    }
-  }
 
-  const loginModal = () => {
-    return <LoginModal open={loginModalOpen} onOpenChange={setLoginModalOpen} />
-  }
+  const loginModal = (
+    <LoginModal open={loginModalOpen} onOpenChange={setLoginModalOpen} />
+  )
 
-  const signupModal = () => {
-    return (
+  const signupModal = (
     <SignupModal open={signupModalOpen} onOpenChange={setSignupModalOpen} />
   )
-  }
 
   // Rendering: Compositing
-  const left = () => {
-    return (
-      <section>
-        <div className={styles.dropdownWrapper}>
-          <DropdownMenu
-            open={leftMenuOpen}
-            onOpenChange={handleLeftMenuOpenChange}
-          >
-            <DropdownMenuTrigger asChild>
-              <Button
-                active={leftMenuOpen}
-                blended={true}
-                leftAccessoryIcon={<MenuIcon />}
-                onClick={handleLeftMenuButtonClicked}
-              />
-            </DropdownMenuTrigger>
-            <DropdownMenuContent className="Left">
-              {leftMenuItems()}
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </div>
-      </section>
-    )
-  }
-
-  const right = () => {
-    return (
-      <section>
-        {newButton()}
-        <DropdownMenu
-          open={rightMenuOpen}
-          onOpenChange={handleRightMenuOpenChange}
-        >
-          <DropdownMenuTrigger asChild>
-            <Button
-              className={classNames({ Active: rightMenuOpen })}
-              leftAccessoryIcon={profileImage()}
-              rightAccessoryIcon={<ChevronIcon />}
-              rightAccessoryClassName="Arrow"
-              onClick={handleRightMenuButtonClicked}
-              blended={true}
-            />
-          </DropdownMenuTrigger>
-          <DropdownMenuContent className="Right">
-            {rightMenuItems()}
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </section>
-    )
-  }
-
-  const leftMenuItems = () => {
-    return (
+  const authorizedLeftItems = (
     <>
-        {accountState.account.authorized && accountState.account.user ? (
+      {accountState.account.user && (
         <>
           <DropdownMenuGroup>
             <DropdownMenuItem onClick={closeLeftMenu}>
@@ -253,9 +205,15 @@ const Header = () => {
             </DropdownMenuItem>
           </DropdownMenuGroup>
         </>
-        ) : (
-          ''
       )}
+    </>
+  )
+  const leftMenuItems = (
+    <>
+      {accountState.account.authorized &&
+        accountState.account.user &&
+        authorizedLeftItems}
+
       <DropdownMenuGroup>
         <DropdownMenuItem onClick={closeLeftMenu}>
           <Link href="/teams">{t('menu.teams')}</Link>
@@ -298,21 +256,43 @@ const Header = () => {
       </DropdownMenuGroup>
     </>
   )
-  }
 
-  const rightMenuItems = () => {
-    let items
+  const left = (
+    <section>
+      <div className={styles.dropdownWrapper}>
+        <DropdownMenu
+          open={leftMenuOpen}
+          onOpenChange={handleLeftMenuOpenChange}
+        >
+          <DropdownMenuTrigger asChild>
+            <Button
+              active={leftMenuOpen}
+              blended={true}
+              leftAccessoryIcon={<MenuIcon />}
+              onClick={handleLeftMenuButtonClicked}
+            />
+          </DropdownMenuTrigger>
+          <DropdownMenuContent className="Left">
+            {leftMenuItems}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    </section>
+  )
 
-    const account = accountState.account
-    if (account.authorized && account.user) {
-      items = (
+  const authorizedRightItems = (
+    <>
+      {accountState.account.user && (
         <>
           <DropdownMenuGroup>
             <DropdownMenuLabel>
-              {account.user ? `@${account.user.username}` : t('no_user')}
+              {`@${accountState.account.user.username}`}
             </DropdownMenuLabel>
             <DropdownMenuItem onClick={closeRightMenu}>
-              <Link href={`/${account.user.username}` || ''} passHref>
+              <Link
+                href={`/${accountState.account.user.username}` || ''}
+                passHref
+              >
                 <span>{t('menu.profile')}</span>
               </Link>
             </DropdownMenuItem>
@@ -325,14 +305,19 @@ const Header = () => {
             >
               <span>{t('menu.settings')}</span>
             </DropdownMenuItem>
-            <DropdownMenuItem onClick={logout}>
+            <DropdownMenuItem
+              onClick={() => setAlertOpen(true)}
+              destructive={true}
+            >
               <span>{t('menu.logout')}</span>
             </DropdownMenuItem>
           </DropdownMenuGroup>
         </>
+      )}
+    </>
   )
-    } else {
-      items = (
+
+  const unauthorizedRightItems = (
     <>
       <DropdownMenuGroup>
         <DropdownMenuItem className="language">
@@ -356,18 +341,47 @@ const Header = () => {
       </DropdownMenuGroup>
     </>
   )
-    }
 
-    return items
-  }
+  const rightMenuItems = (
+    <>
+      {accountState.account.authorized && accountState.account.user
+        ? authorizedRightItems
+        : unauthorizedRightItems}
+    </>
+  )
+
+  const right = (
+    <section>
+      {newButton}
+      <DropdownMenu
+        open={rightMenuOpen}
+        onOpenChange={handleRightMenuOpenChange}
+      >
+        <DropdownMenuTrigger asChild>
+          <Button
+            className={classNames({ Active: rightMenuOpen })}
+            leftAccessoryIcon={profileImage()}
+            rightAccessoryIcon={<ChevronIcon />}
+            rightAccessoryClassName="Arrow"
+            onClick={handleRightMenuButtonClicked}
+            blended={true}
+          />
+        </DropdownMenuTrigger>
+        <DropdownMenuContent className="Right">
+          {rightMenuItems}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </section>
+  )
 
   return (
     <nav className={styles.header}>
-      {left()}
-      {right()}
-      {settingsModal()}
-      {loginModal()}
-      {signupModal()}
+      {left}
+      {right}
+      {logoutConfirmationAlert}
+      {settingsModal}
+      {loginModal}
+      {signupModal}
     </nav>
   )
 }

public/locales/en/common.json

@@ -11,6 +11,7 @@
     "manadiver": "manatura"
   },
   "alert": {
+    "confirm_logout": "Are you sure you want to log out?",
     "unsaved_changes": {
       "party": "You will lose all changes to your party <strong>{objectName}</strong> if you continue.<br/><br/>Are you sure you want to continue without saving?",
       "object": "You will lose all changes to <strong>{objectName}</strong> if you continue.<br/><br/>Are you sure you want to continue without saving?"

public/locales/ja/common.json

@@ -11,6 +11,7 @@
     "manadiver": "マナベリ"
   },
   "alert": {
+    "confirm_logout": "ログアウトしますか",
     "unsaved_changes_party": "<strong>「{objectName}」</strong>という編成の変更は保存していません。<br/><br/>変更を保存せずに続けますか？",
     "unsaved_changes_object": "<strong>「{objectName}」</strong>の変更は保存していません。<br/><br/>変更を保存せずに続けますか？",
     "incompatible_weapon": "Additional Weaponsに装備できない武器を入れました。"