diff --git a/components/party/EditPartyModal/index.tsx b/components/party/EditPartyModal/index.tsx index cd2afe07..0b04c2a2 100644 --- a/components/party/EditPartyModal/index.tsx +++ b/components/party/EditPartyModal/index.tsx @@ -12,6 +12,7 @@ import DialogFooter from '~components/common/DialogFooter' import DialogContent from '~components/common/DialogContent' import Button from '~components/common/Button' import DurationInput from '~components/common/DurationInput' +import Input from '~components/common/Input' import InputTableField from '~components/common/InputTableField' import RaidCombobox from '~components/raids/RaidCombobox' import SegmentedControl from '~components/common/SegmentedControl' @@ -20,6 +21,7 @@ import SwitchTableField from '~components/common/SwitchTableField' import TableField from '~components/common/TableField' import Textarea from '~components/common/Textarea' +import capitalizeFirstLetter from '~utils/capitalizeFirstLetter' import type { DetailsObject } from 'types' import type { DialogProps } from '@radix-ui/react-dialog' @@ -27,7 +29,6 @@ import { appState } from '~utils/appState' import CheckIcon from '~public/icons/Check.svg' import styles from './index.module.scss' -import Input from '~components/common/Input' interface Props extends DialogProps { open: boolean @@ -286,8 +287,13 @@ const EditPartyModal = ({ // Methods: Modification checking function hasBeenModified() { - const nameChanged = name !== party.name - const descriptionChanged = description !== party.description + const nameChanged = + name !== party.name && !(name === '' && party.name === undefined) + + const descriptionChanged = + description !== party.description && + !(description === '' && party.description === undefined) + const raidChanged = raid !== party.raid const chargeAttackChanged = chargeAttack !== party.chargeAttack const fullAutoChanged = fullAuto !== party.fullAuto @@ -357,7 +363,12 @@ const EditPartyModal = ({ You will lose all changes to your party{' '} - {{ objectName: party.name }} if you continue. + + {{ + objectName: name || capitalizeFirstLetter(t('untitled')), + }} + {' '} + if you continue.

Are you sure you want to continue without saving? diff --git a/components/raids/RaidCombobox/index.tsx b/components/raids/RaidCombobox/index.tsx index 1142c8c5..3de4b900 100644 --- a/components/raids/RaidCombobox/index.tsx +++ b/components/raids/RaidCombobox/index.tsx @@ -115,29 +115,13 @@ const RaidCombobox = (props: Props) => { sortGroups(appState.raidGroups) }, []) - // Set current raid and section when the component mounts - useEffect(() => { - // if (appState.party.raid) { - // setCurrentRaid(appState.party.raid) - // if (appState.party.raid.group.section > 0) { - // setCurrentSection(appState.party.raid.group.section) - // } else { - // setCurrentSection(1) - // } - // } else if (props.showAllRaidsOption && !currentRaid) { - // setCurrentRaid(allRaidsOption) - // } - }, []) - - // Set current raid and section when the current raid changes + // Set current section when the current raid changes useEffect(() => { + console.log('Raid has changed') if (props.currentRaid) { - setCurrentRaid(props.currentRaid) - if (appState.party.raid && appState.party.raid.group.section > 0) - setCurrentSection(props.currentRaid.group.section) - else setCurrentSection(1) + setCurrentSection(props.currentRaid.group.section) } else { - setCurrentRaid(undefined) + setCurrentSection(1) } }, [props.currentRaid]) diff --git a/components/raids/RaidItem/index.module.scss b/components/raids/RaidItem/index.module.scss index d89484c5..e5cc7b6a 100644 --- a/components/raids/RaidItem/index.module.scss +++ b/components/raids/RaidItem/index.module.scss @@ -34,6 +34,14 @@ height: auto; } + .placeholder { + aspect-ratio: 10 / 7; + background-color: var(--placeholder-bound-bg); + border-radius: $item-corner-small; + width: $unit-10x; + height: auto; + } + &:hover { .extraIndicator { background: var(--extra-purple-secondary); @@ -44,6 +52,10 @@ background-color: var(--pill-bg-hover); color: var(--pill-text-hover); } + + .placeholder { + background-color: var(--placeholder-bound-bg-hover); + } } &.selected .extraIndicator { diff --git a/components/raids/RaidItem/index.tsx b/components/raids/RaidItem/index.tsx index d43f4266..3e79bc05 100644 --- a/components/raids/RaidItem/index.tsx +++ b/components/raids/RaidItem/index.tsx @@ -18,6 +18,27 @@ interface Props extends ComponentProps<'div'> { onArrowKeyPressed?: (direction: 'Up' | 'Down') => void onEscapeKeyPressed?: () => void } + +const placeholderSlugs = [ + 'all', + 'farming', + 'three-gauge', + 'five-gauge', + 'ex-plus', + 'nm90', + 'nm95', + 'nm100', + 'nm150', + 'nm200', + '1-star', + '2-star', + '3-star', + '4-star', + '5-star', + 'db95', + 'db135', + 'db175', +] const RaidItem = React.forwardRef>( function Item( { @@ -69,7 +90,11 @@ const RaidItem = React.forwardRef>( onKeyDown={handleKeyDown} ref={forwardedRef} > - {icon && {icon.alt}} + {placeholderSlugs.includes(`${value}`) ? ( +
+ ) : ( + icon && {icon.alt} + )} {children} {selected && ( {t('combobox.selected')} diff --git a/pages/[username].tsx b/pages/[username].tsx index 945f2b7f..0f39a677 100644 --- a/pages/[username].tsx +++ b/pages/[username].tsx @@ -187,10 +187,8 @@ const ProfileRoute: React.FC = ({ // Fetch all raids on mount, then find the raid in the URL if present useEffect(() => { - api.endpoints.raids.getAll().then((response) => { - const raids = appState.raidGroups.flatMap((group) => group.raids) - setRaids(raids) - }) + const raids = appState.raidGroups.flatMap((group) => group.raids) + setRaids(raids) }, [setRaids]) // When the element, raid or recency filter changes, diff --git a/pages/new/index.tsx b/pages/new/index.tsx index df040d76..b0ecbc0e 100644 --- a/pages/new/index.tsx +++ b/pages/new/index.tsx @@ -109,7 +109,7 @@ const NewRoute: React.FC = ({ useEffect(() => { if (context && context.jobs && context.jobSkills) { - appState.raids = context.raidGroups + appState.raidGroups = context.raidGroups appState.jobs = context.jobs appState.jobSkills = context.jobSkills appState.weaponKeys = context.weaponKeys diff --git a/pages/saved.tsx b/pages/saved.tsx index 84a064ac..4e1d8cc6 100644 --- a/pages/saved.tsx +++ b/pages/saved.tsx @@ -190,10 +190,8 @@ const SavedRoute: React.FC = ({ // Fetch all raids on mount, then find the raid in the URL if present useEffect(() => { - api.endpoints.raids.getAll().then((response) => { - const raids = appState.raidGroups.flatMap((group) => group.raids) - setRaids(raids) - }) + const raids = appState.raidGroups.flatMap((group) => group.raids) + setRaids(raids) }, [setRaids]) // When the element, raid or recency filter changes, diff --git a/styles/themes.scss b/styles/themes.scss index cf1441dc..4edee375 100644 --- a/styles/themes.scss +++ b/styles/themes.scss @@ -44,6 +44,10 @@ --menu-bg-item-hover: #{$menu--item--bg--light--hover}; --menu-text-hover: #{$menu--text--light--hover}; + // Light - Placeholders + --placeholder-bound-bg: #{$placeholder--bound--bg--light}; + --placeholder-bound-bg-hover: #{$placeholder--bound--bg--light--hover}; + // Light - Notices --notice-bg: #{$notice--bg--light}; --notice-text: #{$notice--text--light}; @@ -217,6 +221,10 @@ --menu-bg-item-hover: #{$menu--item--bg--dark--hover}; --menu-text-hover: #{$menu--text--dark--hover}; + // Dark - Placeholders + --placeholder-bound-bg: #{$placeholder--bound--bg--dark}; + --placeholder-bound-bg-hover: #{$placeholder--bound--bg--dark--hover}; + // Dark - Notices --notice-bg: #{$notice--bg--dark}; --notice-text: #{$notice--text--dark}; diff --git a/styles/variables.scss b/styles/variables.scss index 099e48b5..fa7f7242 100644 --- a/styles/variables.scss +++ b/styles/variables.scss @@ -196,6 +196,13 @@ $menu--item--bg--dark--hover: $grey-00; $menu--text--light--hover: $grey-100; $menu--text--dark--hover: $grey-15; +// Color Definitions: Placeholders +$placeholder--bound--bg--light: $grey-80; +$placeholder--bound--bg--dark: $grey-30; + +$placeholder--bound--bg--light--hover: $grey-75; +$placeholder--bound--bg--dark--hover: $grey-20; + // Color Definitions: Notices $notice--bg--light: $accent--yellow--100; $notice--bg--dark: $accent--yellow--00;