Refactor Header and add logout confirmation
This commit is contained in:
parent
c6bdc376bf
commit
acbb10d458
3 changed files with 204 additions and 188 deletions
|
|
@ -9,6 +9,7 @@ import Link from 'next/link'
|
||||||
import { accountState, initialAccountState } from '~utils/accountState'
|
import { accountState, initialAccountState } from '~utils/accountState'
|
||||||
import { appState, initialAppState } from '~utils/appState'
|
import { appState, initialAppState } from '~utils/appState'
|
||||||
|
|
||||||
|
import Alert from '~components/common/Alert'
|
||||||
import {
|
import {
|
||||||
DropdownMenu,
|
DropdownMenu,
|
||||||
DropdownMenuTrigger,
|
DropdownMenuTrigger,
|
||||||
|
|
@ -41,6 +42,7 @@ const Header = () => {
|
||||||
router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en'
|
router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en'
|
||||||
|
|
||||||
// State management
|
// State management
|
||||||
|
const [alertOpen, setAlertOpen] = useState(false)
|
||||||
const [loginModalOpen, setLoginModalOpen] = useState(false)
|
const [loginModalOpen, setLoginModalOpen] = useState(false)
|
||||||
const [signupModalOpen, setSignupModalOpen] = useState(false)
|
const [signupModalOpen, setSignupModalOpen] = useState(false)
|
||||||
const [settingsModalOpen, setSettingsModalOpen] = useState(false)
|
const [settingsModalOpen, setSettingsModalOpen] = useState(false)
|
||||||
|
|
@ -109,12 +111,11 @@ const Header = () => {
|
||||||
router.push('/new', undefined, { shallow: true })
|
router.push('/new', undefined, { shallow: true })
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Methods: Rendering
|
||||||
const profileImage = () => {
|
const profileImage = () => {
|
||||||
let image
|
|
||||||
|
|
||||||
const user = accountState.account.user
|
const user = accountState.account.user
|
||||||
if (accountState.account.authorized && user) {
|
if (accountState.account.authorized && user) {
|
||||||
image = (
|
return (
|
||||||
<img
|
<img
|
||||||
alt={user.username}
|
alt={user.username}
|
||||||
className={`profile ${user.avatar.element}`}
|
className={`profile ${user.avatar.element}`}
|
||||||
|
|
@ -124,7 +125,7 @@ const Header = () => {
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
} else {
|
} else {
|
||||||
image = (
|
return (
|
||||||
<img
|
<img
|
||||||
alt={t('no_user')}
|
alt={t('no_user')}
|
||||||
className={`profile anonymous`}
|
className={`profile anonymous`}
|
||||||
|
|
@ -134,185 +135,164 @@ const Header = () => {
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
return image
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Rendering: Buttons
|
// Rendering: Buttons
|
||||||
const newButton = () => {
|
const newButton = (
|
||||||
return (
|
<Tooltip content={t('tooltips.new')}>
|
||||||
<Tooltip content={t('tooltips.new')}>
|
<Button
|
||||||
<Button
|
leftAccessoryIcon={<PlusIcon />}
|
||||||
leftAccessoryIcon={<PlusIcon />}
|
className="New"
|
||||||
className="New"
|
blended={true}
|
||||||
blended={true}
|
text={t('buttons.new')}
|
||||||
text={t('buttons.new')}
|
onClick={newTeam}
|
||||||
onClick={newTeam}
|
/>
|
||||||
/>
|
</Tooltip>
|
||||||
</Tooltip>
|
)
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
// Rendering: Modals
|
// Rendering: Modals
|
||||||
const settingsModal = () => {
|
const logoutConfirmationAlert = (
|
||||||
const user = accountState.account.user
|
<Alert
|
||||||
|
message={t('alert.confirm_logout')}
|
||||||
|
open={alertOpen}
|
||||||
|
primaryActionText="Log out"
|
||||||
|
primaryAction={logout}
|
||||||
|
cancelActionText="Nevermind"
|
||||||
|
cancelAction={() => setAlertOpen(false)}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
|
||||||
if (user) {
|
const settingsModal = (
|
||||||
return (
|
<>
|
||||||
|
{accountState.account.user && (
|
||||||
<AccountModal
|
<AccountModal
|
||||||
open={settingsModalOpen}
|
open={settingsModalOpen}
|
||||||
username={user.username}
|
username={accountState.account.user.username}
|
||||||
picture={user.avatar.picture}
|
picture={accountState.account.user.avatar.picture}
|
||||||
gender={user.gender}
|
gender={accountState.account.user.gender}
|
||||||
language={user.language}
|
language={accountState.account.user.language}
|
||||||
theme={user.theme}
|
theme={accountState.account.user.theme}
|
||||||
onOpenChange={setSettingsModalOpen}
|
onOpenChange={setSettingsModalOpen}
|
||||||
/>
|
/>
|
||||||
)
|
)}
|
||||||
}
|
</>
|
||||||
}
|
)
|
||||||
|
|
||||||
const loginModal = () => {
|
const loginModal = (
|
||||||
return <LoginModal open={loginModalOpen} onOpenChange={setLoginModalOpen} />
|
<LoginModal open={loginModalOpen} onOpenChange={setLoginModalOpen} />
|
||||||
}
|
)
|
||||||
|
|
||||||
const signupModal = () => {
|
const signupModal = (
|
||||||
return (
|
<SignupModal open={signupModalOpen} onOpenChange={setSignupModalOpen} />
|
||||||
<SignupModal open={signupModalOpen} onOpenChange={setSignupModalOpen} />
|
)
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
// Rendering: Compositing
|
// Rendering: Compositing
|
||||||
const left = () => {
|
const authorizedLeftItems = (
|
||||||
return (
|
<>
|
||||||
<section>
|
{accountState.account.user && (
|
||||||
<div className={styles.dropdownWrapper}>
|
<>
|
||||||
<DropdownMenu
|
<DropdownMenuGroup>
|
||||||
open={leftMenuOpen}
|
<DropdownMenuItem onClick={closeLeftMenu}>
|
||||||
onOpenChange={handleLeftMenuOpenChange}
|
<Link
|
||||||
>
|
href={`/${accountState.account.user.username}` || ''}
|
||||||
<DropdownMenuTrigger asChild>
|
passHref
|
||||||
<Button
|
>
|
||||||
active={leftMenuOpen}
|
<span>{t('menu.profile')}</span>
|
||||||
blended={true}
|
</Link>
|
||||||
leftAccessoryIcon={<MenuIcon />}
|
</DropdownMenuItem>
|
||||||
onClick={handleLeftMenuButtonClicked}
|
<DropdownMenuItem onClick={closeLeftMenu}>
|
||||||
/>
|
<Link href={`/saved` || ''}>{t('menu.saved')}</Link>
|
||||||
</DropdownMenuTrigger>
|
</DropdownMenuItem>
|
||||||
<DropdownMenuContent className="Left">
|
</DropdownMenuGroup>
|
||||||
{leftMenuItems()}
|
</>
|
||||||
</DropdownMenuContent>
|
)}
|
||||||
</DropdownMenu>
|
</>
|
||||||
</div>
|
)
|
||||||
</section>
|
const leftMenuItems = (
|
||||||
)
|
<>
|
||||||
}
|
{accountState.account.authorized &&
|
||||||
|
accountState.account.user &&
|
||||||
|
authorizedLeftItems}
|
||||||
|
|
||||||
const right = () => {
|
<DropdownMenuGroup>
|
||||||
return (
|
<DropdownMenuItem onClick={closeLeftMenu}>
|
||||||
<section>
|
<Link href="/teams">{t('menu.teams')}</Link>
|
||||||
{newButton()}
|
</DropdownMenuItem>
|
||||||
|
<DropdownMenuItem>
|
||||||
|
<div>
|
||||||
|
<span>{t('menu.guides')}</span>
|
||||||
|
<i className="tag">{t('coming_soon')}</i>
|
||||||
|
</div>
|
||||||
|
</DropdownMenuItem>
|
||||||
|
</DropdownMenuGroup>
|
||||||
|
<DropdownMenuGroup>
|
||||||
|
<DropdownMenuItem onClick={closeLeftMenu}>
|
||||||
|
<a
|
||||||
|
href={locale == 'ja' ? '/ja/about' : '/about'}
|
||||||
|
target="_blank"
|
||||||
|
rel="noreferrer"
|
||||||
|
>
|
||||||
|
{t('about.segmented_control.about')}
|
||||||
|
</a>
|
||||||
|
</DropdownMenuItem>
|
||||||
|
<DropdownMenuItem onClick={closeLeftMenu}>
|
||||||
|
<a
|
||||||
|
href={locale == 'ja' ? '/ja/updates' : '/updates'}
|
||||||
|
target="_blank"
|
||||||
|
rel="noreferrer"
|
||||||
|
>
|
||||||
|
{t('about.segmented_control.updates')}
|
||||||
|
</a>
|
||||||
|
</DropdownMenuItem>
|
||||||
|
<DropdownMenuItem onClick={closeLeftMenu}>
|
||||||
|
<a
|
||||||
|
href={locale == 'ja' ? '/ja/roadmap' : '/roadmap'}
|
||||||
|
target="_blank"
|
||||||
|
rel="noreferrer"
|
||||||
|
>
|
||||||
|
{t('about.segmented_control.roadmap')}
|
||||||
|
</a>
|
||||||
|
</DropdownMenuItem>
|
||||||
|
</DropdownMenuGroup>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
|
||||||
|
const left = (
|
||||||
|
<section>
|
||||||
|
<div className={styles.dropdownWrapper}>
|
||||||
<DropdownMenu
|
<DropdownMenu
|
||||||
open={rightMenuOpen}
|
open={leftMenuOpen}
|
||||||
onOpenChange={handleRightMenuOpenChange}
|
onOpenChange={handleLeftMenuOpenChange}
|
||||||
>
|
>
|
||||||
<DropdownMenuTrigger asChild>
|
<DropdownMenuTrigger asChild>
|
||||||
<Button
|
<Button
|
||||||
className={classNames({ Active: rightMenuOpen })}
|
active={leftMenuOpen}
|
||||||
leftAccessoryIcon={profileImage()}
|
|
||||||
rightAccessoryIcon={<ChevronIcon />}
|
|
||||||
rightAccessoryClassName="Arrow"
|
|
||||||
onClick={handleRightMenuButtonClicked}
|
|
||||||
blended={true}
|
blended={true}
|
||||||
|
leftAccessoryIcon={<MenuIcon />}
|
||||||
|
onClick={handleLeftMenuButtonClicked}
|
||||||
/>
|
/>
|
||||||
</DropdownMenuTrigger>
|
</DropdownMenuTrigger>
|
||||||
<DropdownMenuContent className="Right">
|
<DropdownMenuContent className="Left">
|
||||||
{rightMenuItems()}
|
{leftMenuItems}
|
||||||
</DropdownMenuContent>
|
</DropdownMenuContent>
|
||||||
</DropdownMenu>
|
</DropdownMenu>
|
||||||
</section>
|
</div>
|
||||||
)
|
</section>
|
||||||
}
|
)
|
||||||
|
|
||||||
const leftMenuItems = () => {
|
const authorizedRightItems = (
|
||||||
return (
|
<>
|
||||||
<>
|
{accountState.account.user && (
|
||||||
{accountState.account.authorized && accountState.account.user ? (
|
|
||||||
<>
|
|
||||||
<DropdownMenuGroup>
|
|
||||||
<DropdownMenuItem onClick={closeLeftMenu}>
|
|
||||||
<Link
|
|
||||||
href={`/${accountState.account.user.username}` || ''}
|
|
||||||
passHref
|
|
||||||
>
|
|
||||||
<span>{t('menu.profile')}</span>
|
|
||||||
</Link>
|
|
||||||
</DropdownMenuItem>
|
|
||||||
<DropdownMenuItem onClick={closeLeftMenu}>
|
|
||||||
<Link href={`/saved` || ''}>{t('menu.saved')}</Link>
|
|
||||||
</DropdownMenuItem>
|
|
||||||
</DropdownMenuGroup>
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
''
|
|
||||||
)}
|
|
||||||
<DropdownMenuGroup>
|
|
||||||
<DropdownMenuItem onClick={closeLeftMenu}>
|
|
||||||
<Link href="/teams">{t('menu.teams')}</Link>
|
|
||||||
</DropdownMenuItem>
|
|
||||||
<DropdownMenuItem>
|
|
||||||
<div>
|
|
||||||
<span>{t('menu.guides')}</span>
|
|
||||||
<i className="tag">{t('coming_soon')}</i>
|
|
||||||
</div>
|
|
||||||
</DropdownMenuItem>
|
|
||||||
</DropdownMenuGroup>
|
|
||||||
<DropdownMenuGroup>
|
|
||||||
<DropdownMenuItem onClick={closeLeftMenu}>
|
|
||||||
<a
|
|
||||||
href={locale == 'ja' ? '/ja/about' : '/about'}
|
|
||||||
target="_blank"
|
|
||||||
rel="noreferrer"
|
|
||||||
>
|
|
||||||
{t('about.segmented_control.about')}
|
|
||||||
</a>
|
|
||||||
</DropdownMenuItem>
|
|
||||||
<DropdownMenuItem onClick={closeLeftMenu}>
|
|
||||||
<a
|
|
||||||
href={locale == 'ja' ? '/ja/updates' : '/updates'}
|
|
||||||
target="_blank"
|
|
||||||
rel="noreferrer"
|
|
||||||
>
|
|
||||||
{t('about.segmented_control.updates')}
|
|
||||||
</a>
|
|
||||||
</DropdownMenuItem>
|
|
||||||
<DropdownMenuItem onClick={closeLeftMenu}>
|
|
||||||
<a
|
|
||||||
href={locale == 'ja' ? '/ja/roadmap' : '/roadmap'}
|
|
||||||
target="_blank"
|
|
||||||
rel="noreferrer"
|
|
||||||
>
|
|
||||||
{t('about.segmented_control.roadmap')}
|
|
||||||
</a>
|
|
||||||
</DropdownMenuItem>
|
|
||||||
</DropdownMenuGroup>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
const rightMenuItems = () => {
|
|
||||||
let items
|
|
||||||
|
|
||||||
const account = accountState.account
|
|
||||||
if (account.authorized && account.user) {
|
|
||||||
items = (
|
|
||||||
<>
|
<>
|
||||||
<DropdownMenuGroup>
|
<DropdownMenuGroup>
|
||||||
<DropdownMenuLabel>
|
<DropdownMenuLabel>
|
||||||
{account.user ? `@${account.user.username}` : t('no_user')}
|
{`@${accountState.account.user.username}`}
|
||||||
</DropdownMenuLabel>
|
</DropdownMenuLabel>
|
||||||
<DropdownMenuItem onClick={closeRightMenu}>
|
<DropdownMenuItem onClick={closeRightMenu}>
|
||||||
<Link href={`/${account.user.username}` || ''} passHref>
|
<Link
|
||||||
|
href={`/${accountState.account.user.username}` || ''}
|
||||||
|
passHref
|
||||||
|
>
|
||||||
<span>{t('menu.profile')}</span>
|
<span>{t('menu.profile')}</span>
|
||||||
</Link>
|
</Link>
|
||||||
</DropdownMenuItem>
|
</DropdownMenuItem>
|
||||||
|
|
@ -325,49 +305,83 @@ const Header = () => {
|
||||||
>
|
>
|
||||||
<span>{t('menu.settings')}</span>
|
<span>{t('menu.settings')}</span>
|
||||||
</DropdownMenuItem>
|
</DropdownMenuItem>
|
||||||
<DropdownMenuItem onClick={logout}>
|
<DropdownMenuItem
|
||||||
|
onClick={() => setAlertOpen(true)}
|
||||||
|
destructive={true}
|
||||||
|
>
|
||||||
<span>{t('menu.logout')}</span>
|
<span>{t('menu.logout')}</span>
|
||||||
</DropdownMenuItem>
|
</DropdownMenuItem>
|
||||||
</DropdownMenuGroup>
|
</DropdownMenuGroup>
|
||||||
</>
|
</>
|
||||||
)
|
)}
|
||||||
} else {
|
</>
|
||||||
items = (
|
)
|
||||||
<>
|
|
||||||
<DropdownMenuGroup>
|
|
||||||
<DropdownMenuItem className="language">
|
|
||||||
<span>{t('menu.language')}</span>
|
|
||||||
<LanguageSwitch />
|
|
||||||
</DropdownMenuItem>
|
|
||||||
</DropdownMenuGroup>
|
|
||||||
<DropdownMenuGroup className="MenuGroup">
|
|
||||||
<DropdownMenuItem
|
|
||||||
className="MenuItem"
|
|
||||||
onClick={() => setLoginModalOpen(true)}
|
|
||||||
>
|
|
||||||
<span>{t('menu.login')}</span>
|
|
||||||
</DropdownMenuItem>
|
|
||||||
<DropdownMenuItem
|
|
||||||
className="MenuItem"
|
|
||||||
onClick={() => setSignupModalOpen(true)}
|
|
||||||
>
|
|
||||||
<span>{t('menu.signup')}</span>
|
|
||||||
</DropdownMenuItem>
|
|
||||||
</DropdownMenuGroup>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
return items
|
const unauthorizedRightItems = (
|
||||||
}
|
<>
|
||||||
|
<DropdownMenuGroup>
|
||||||
|
<DropdownMenuItem className="language">
|
||||||
|
<span>{t('menu.language')}</span>
|
||||||
|
<LanguageSwitch />
|
||||||
|
</DropdownMenuItem>
|
||||||
|
</DropdownMenuGroup>
|
||||||
|
<DropdownMenuGroup className="MenuGroup">
|
||||||
|
<DropdownMenuItem
|
||||||
|
className="MenuItem"
|
||||||
|
onClick={() => setLoginModalOpen(true)}
|
||||||
|
>
|
||||||
|
<span>{t('menu.login')}</span>
|
||||||
|
</DropdownMenuItem>
|
||||||
|
<DropdownMenuItem
|
||||||
|
className="MenuItem"
|
||||||
|
onClick={() => setSignupModalOpen(true)}
|
||||||
|
>
|
||||||
|
<span>{t('menu.signup')}</span>
|
||||||
|
</DropdownMenuItem>
|
||||||
|
</DropdownMenuGroup>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
|
||||||
|
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 (
|
return (
|
||||||
<nav className={styles.header}>
|
<nav className={styles.header}>
|
||||||
{left()}
|
{left}
|
||||||
{right()}
|
{right}
|
||||||
{settingsModal()}
|
{logoutConfirmationAlert}
|
||||||
{loginModal()}
|
{settingsModal}
|
||||||
{signupModal()}
|
{loginModal}
|
||||||
|
{signupModal}
|
||||||
</nav>
|
</nav>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -11,6 +11,7 @@
|
||||||
"manadiver": "manatura"
|
"manadiver": "manatura"
|
||||||
},
|
},
|
||||||
"alert": {
|
"alert": {
|
||||||
|
"confirm_logout": "Are you sure you want to log out?",
|
||||||
"unsaved_changes": {
|
"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?",
|
"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?"
|
"object": "You will lose all changes to <strong>{objectName}</strong> if you continue.<br/><br/>Are you sure you want to continue without saving?"
|
||||||
|
|
|
||||||
|
|
@ -11,6 +11,7 @@
|
||||||
"manadiver": "マナベリ"
|
"manadiver": "マナベリ"
|
||||||
},
|
},
|
||||||
"alert": {
|
"alert": {
|
||||||
|
"confirm_logout": "ログアウトしますか",
|
||||||
"unsaved_changes_party": "<strong>「{objectName}」</strong>という編成の変更は保存していません。<br/><br/>変更を保存せずに続けますか？",
|
"unsaved_changes_party": "<strong>「{objectName}」</strong>という編成の変更は保存していません。<br/><br/>変更を保存せずに続けますか？",
|
||||||
"unsaved_changes_object": "<strong>「{objectName}」</strong>の変更は保存していません。<br/><br/>変更を保存せずに続けますか？",
|
"unsaved_changes_object": "<strong>「{objectName}」</strong>の変更は保存していません。<br/><br/>変更を保存せずに続けますか？",
|
||||||
"incompatible_weapon": "Additional Weaponsに装備できない武器を入れました。"
|
"incompatible_weapon": "Additional Weaponsに装備できない武器を入れました。"
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue