(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

@@ -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 = ({
         <span>
           <Trans i18nKey="alerts.unsaved_changes.party">
             You will lose all changes to your party{' '}
-            <strong>{{ objectName: party.name }}</strong> if you continue.
+            <strong>
+              {{
+                objectName: name || capitalizeFirstLetter(t('untitled')),
+              }}
+            </strong>{' '}
+            if you continue.
             <br />
             <br />
             Are you sure you want to continue without saving?

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])
 

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 {

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<HTMLDivElement, PropsWithChildren<Props>>(
   function Item(
     {
@@ -69,7 +90,11 @@ const RaidItem = React.forwardRef<HTMLDivElement, PropsWithChildren<Props>>(
         onKeyDown={handleKeyDown}
         ref={forwardedRef}
       >
-        {icon && <img alt={icon.alt} src={icon.src} />}
+        {placeholderSlugs.includes(`${value}`) ? (
+          <div className={styles.placeholder} />
+        ) : (
+          icon && <img alt={icon.alt} src={icon.src} />
+        )}
         <span className={styles.text}>{children}</span>
         {selected && (
           <i className={styles.selected}>{t('combobox.selected')}</i>

pages/[username].tsx

@@ -187,10 +187,8 @@ const ProfileRoute: React.FC<Props> = ({
 
   // 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,

pages/new/index.tsx

@@ -109,7 +109,7 @@ const NewRoute: React.FC<Props> = ({
 
   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

pages/saved.tsx

@@ -190,10 +190,8 @@ const SavedRoute: React.FC<Props> = ({
 
   // 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,

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};

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;