diff --git a/components/common/DropdownMenuItem/index.module.scss b/components/common/DropdownMenuItem/index.module.scss index 2e5c064f..43faf32b 100644 --- a/components/common/DropdownMenuItem/index.module.scss +++ b/components/common/DropdownMenuItem/index.module.scss @@ -50,7 +50,7 @@ } } - & .destructive { + &.destructive { color: $error; &:hover { diff --git a/components/common/DropdownMenuItem/index.tsx b/components/common/DropdownMenuItem/index.tsx index 66d05ab9..ac906633 100644 --- a/components/common/DropdownMenuItem/index.tsx +++ b/components/common/DropdownMenuItem/index.tsx @@ -3,7 +3,13 @@ import classNames from 'classnames' import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu' import styles from './index.module.scss' -interface Props extends DropdownMenuPrimitive.DropdownMenuItemProps {} +interface Props extends DropdownMenuPrimitive.DropdownMenuItemProps { + destructive?: boolean +} + +const defaultProps = { + destructive: false, +} export const DropdownMenuItem = React.forwardRef( function dropdownMenuItem( @@ -13,6 +19,7 @@ export const DropdownMenuItem = React.forwardRef( const classes = classNames(props.className, { [styles.menuItem]: true, [styles.language]: props.className?.includes('language'), + [styles.destructive]: props.destructive, }) return ( @@ -27,4 +34,6 @@ export const DropdownMenuItem = React.forwardRef( } ) +DropdownMenuItem.defaultProps = defaultProps + export default DropdownMenuItem diff --git a/components/party/PartyDropdown/index.tsx b/components/party/PartyDropdown/index.tsx index bd0993f0..52a2a8ca 100644 --- a/components/party/PartyDropdown/index.tsx +++ b/components/party/PartyDropdown/index.tsx @@ -1,9 +1,8 @@ // Libraries -import React, { useEffect, useState } from 'react' +import React, { useState } from 'react' import { useRouter } from 'next/router' -import { subscribe, useSnapshot } from 'valtio' +import { useSnapshot } from 'valtio' import { useTranslation } from 'next-i18next' -import classNames from 'classnames' // Dependencies: Common import Button from '~components/common/Button' @@ -11,9 +10,9 @@ import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, - DropdownMenuGroup, - DropdownMenuItem, } from '~components/common/DropdownMenuContent' +import DropdownMenuGroup from '~components/common/DropdownMenuGroup' +import DropdownMenuItem from '~components/common/DropdownMenuItem' // Dependencies: Toasts import RemixedToast from '~components/toasts/RemixedToast' @@ -24,12 +23,7 @@ import DeleteTeamAlert from '~components/dialogs/DeleteTeamAlert' import RemixTeamAlert from '~components/dialogs/RemixTeamAlert' // Dependencies: Utils -import api from '~utils/api' -import { accountState } from '~utils/accountState' import { appState } from '~utils/appState' -import { getLocalId } from '~utils/localId' -import { retrieveLocaleCookies } from '~utils/retrieveCookies' -import { setEditKey, storeEditKey } from '~utils/userToken' // Dependencies: Icons import EllipsisIcon from '~public/icons/Ellipsis.svg' @@ -51,9 +45,6 @@ const PartyDropdown = ({ // Router const router = useRouter() - const locale = - router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en' - const localeData = retrieveLocaleCookies() const [open, setOpen] = useState(false) @@ -63,23 +54,9 @@ const PartyDropdown = ({ const [copyToastOpen, setCopyToastOpen] = useState(false) const [remixToastOpen, setRemixToastOpen] = useState(false) - const [name, setName] = useState('') - const [originalName, setOriginalName] = useState('') - // Snapshots - const { account } = useSnapshot(accountState) const { party: partySnapshot } = useSnapshot(appState) - // Subscribe to app state to listen for party name and - // unsubscribe when component is unmounted - const unsubscribe = subscribe(appState, () => { - const newName = - appState.party && appState.party.name ? appState.party.name : '' - setName(newName) - }) - - useEffect(() => () => unsubscribe(), []) - // Methods: Event handlers (Buttons) function handleButtonClicked() { setOpen(!open) @@ -145,39 +122,37 @@ const PartyDropdown = ({ remixTeamCallback() } - const editableItems = () => { - return ( - <> - - - Copy link to team - - - Remix team - - - - - Delete team - - - - ) - } + const items = ( + <> + + + {t('dropdown.party.copy')} + + + {t('dropdown.party.remix')} + + + + + {t('dropdown.party.delete')} + + + + ) return ( <> -
{renderUserBlock()} - {appState.party.raid ? linkedRaidBlock(appState.party.raid) : ''} - {party.created_at != '' ? ( + {appState.party.raid && linkedRaidBlock(appState.party.raid)} + {party.created_at != '' && ( - ) : ( - '' )}
@@ -414,11 +369,13 @@ const PartyHeader = (props: Props) => { text={t('buttons.show_info')} /> - + {!isNewParty && ( + + )} ) : (
diff --git a/public/locales/en/common.json b/public/locales/en/common.json index e5577927..44f340a9 100644 --- a/public/locales/en/common.json +++ b/public/locales/en/common.json @@ -58,6 +58,13 @@ "remove": "Remove from grid", "remove_job_skill": "Remove class skill" }, + "dropdown": { + "party": { + "copy": "Copy link to team", + "delete": "Delete team", + "remix": "Remix team" + } + }, "elements": { "null": "Null", "wind": "Wind", diff --git a/public/locales/ja/common.json b/public/locales/ja/common.json index 1545e6cf..a72d5dc2 100644 --- a/public/locales/ja/common.json +++ b/public/locales/ja/common.json @@ -58,6 +58,13 @@ "remove": "編成から削除", "remove_job_skill": "ジョブスキルを削除" }, + "dropdown": { + "party": { + "copy": "編成のリンクをコピー", + "delete": "編成を削除", + "remix": "編成をリミックス" + } + }, "elements": { "null": "無", "wind": "風",