From a820e5ad5f689d4777bee1a18741c33ff37d2e31 Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Tue, 4 Jul 2023 01:53:51 -0700 Subject: [PATCH] (Hotfix) Fixes some minor bugs (#337) * Properly set and call raidGroups from state Does this fix our bug? We'll find out! * Fix EditPartyModal confirmation on new teams EditPartyModal was popping a confirmation alert on teams that had no data in them when exiting details * Add themed placeholder colors for raids We don't have images for a lot of the new raid images. Here, we create themed placeholder colors and use those instead of images. The images can't react to the users theme as easily, so this is a better solution for now. * Fix RaidCombobox not switching to raid's section The RaidCombobox should always open to the section that contains the current raid, or the middle section if there is no raid selected. There was some spaghetti code, but this should fix it. --- components/party/EditPartyModal/index.tsx | 19 ++++++++++++--- components/raids/RaidCombobox/index.tsx | 24 +++--------------- components/raids/RaidItem/index.module.scss | 12 +++++++++ components/raids/RaidItem/index.tsx | 27 ++++++++++++++++++++- pages/[username].tsx | 6 ++--- pages/new/index.tsx | 2 +- pages/saved.tsx | 6 ++--- styles/themes.scss | 8 ++++++ styles/variables.scss | 7 ++++++ 9 files changed, 77 insertions(+), 34 deletions(-) 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;