(Hotfix) (Temporary) nuclear option for raid population (#339)

* Another attempt to fix RaidCombobox loading

* Final nuclear option of getting raids to populate

No matter what I do, raids won't populate from state specifically in production. I will have to investigate this more, but for now we are going with the nuclear option of passing raids down from the context object we get from SSR through all components into RaidCombobox

components/filters/FilterBar/index.tsx

@@ -22,6 +22,7 @@ interface Props {
   scrolled: boolean
   element?: number
   raid?: string
+  raidGroups: RaidGroup[]
   recency?: number
   onFilter: (filters: FilterSet) => void
   onAdvancedFilter: (filters: FilterSet) => void
@@ -147,6 +148,7 @@ const FilterBar = (props: Props) => {
           <RaidCombobox
             currentRaid={currentRaid}
             showAllRaidsOption={true}
+            raidGroups={props.raidGroups}
             minimal={true}
             size="small"
             onChange={raidSelectChanged}

components/party/EditPartyModal/index.tsx

@@ -33,12 +33,14 @@ import styles from './index.module.scss'
 interface Props extends DialogProps {
   open: boolean
   party?: Party
+  raidGroups: RaidGroup[]
   onOpenChange?: (open: boolean) => void
   updateParty: (details: DetailsObject) => Promise<any>
 }
 
 const EditPartyModal = ({
   open,
+  raidGroups,
   updateParty,
   onOpenChange,
   ...props
@@ -425,6 +427,7 @@ const EditPartyModal = ({
     <RaidCombobox
       showAllRaidsOption={false}
       currentRaid={raid}
+      raidGroups={raidGroups}
       onChange={receiveRaid}
     />
   )

components/party/Party/index.tsx

@@ -28,6 +28,7 @@ interface Props {
   new?: boolean
   team?: Party
   selectedTab: GridType
+  raidGroups: RaidGroup[]
   handleTabChanged: (value: string) => void
   pushHistory?: (path: string) => void
 }
@@ -440,6 +441,7 @@ const Party = (props: Props) => {
         party={props.team}
         new={props.new || false}
         editable={props.new ? true : party.editable}
+        raidGroups={props.raidGroups}
         deleteCallback={deleteTeam}
         remixCallback={remixTeam}
         updateCallback={updateDetails}
@@ -453,6 +455,7 @@ const Party = (props: Props) => {
         party={props.team}
         new={props.new || false}
         editable={party.editable}
+        raidGroups={props.raidGroups}
         remixCallback={remixTeam}
         updateCallback={updateDetails}
       />

components/party/PartyFooter/index.tsx

@@ -33,6 +33,7 @@ interface Props {
   party?: Party
   new: boolean
   editable: boolean
+  raidGroups: RaidGroup[]
   remixCallback: () => void
   updateCallback: (details: DetailsObject) => Promise<any>
 }
@@ -225,6 +226,7 @@ const PartyFooter = (props: Props) => {
             <EditPartyModal
               open={detailsOpen}
               party={props.party}
+              raidGroups={props.raidGroups}
               onOpenChange={handleDetailsOpenChange}
               updateParty={props.updateCallback}
             >

components/party/PartyHeader/index.tsx

@@ -33,6 +33,7 @@ interface Props {
   party?: Party
   new: boolean
   editable: boolean
+  raidGroups: RaidGroup[]
   deleteCallback: () => void
   remixCallback: () => void
   updateCallback: (details: DetailsObject) => Promise<any>
@@ -383,6 +384,7 @@ const PartyHeader = (props: Props) => {
               <EditPartyModal
                 open={detailsOpen}
                 party={props.party}
+                raidGroups={props.raidGroups}
                 onOpenChange={handleDetailsOpenChange}
                 updateParty={props.updateCallback}
               >

components/raids/RaidCombobox/index.tsx

@@ -1,4 +1,4 @@
-import { createRef, useCallback, useEffect, useState, useRef } from 'react'
+import { createRef, useCallback, useEffect, useState } from 'react'
 import { useRouter } from 'next/router'
 import { useTranslation } from 'react-i18next'
 import classNames from 'classnames'
@@ -10,20 +10,6 @@ import Segment from '~components/common/Segment'
 import RaidItem from '~components/raids/RaidItem'
 import Tooltip from '~components/common/Tooltip'
 
-import api from '~utils/api'
-import { appState } from '~utils/appState'
-
-interface Props {
-  showAllRaidsOption: boolean
-  currentRaid?: Raid
-  defaultRaid?: Raid
-  minimal?: boolean
-  tabIndex?: number
-  size?: 'small' | 'medium' | 'large'
-  onChange?: (raid?: Raid) => void
-  onBlur?: (event: React.ChangeEvent<HTMLSelectElement>) => void
-}
-
 import Button from '~components/common/Button'
 import ArrowIcon from '~public/icons/Arrow.svg'
 import CrossIcon from '~public/icons/Cross.svg'
@@ -67,6 +53,18 @@ const allRaidsOption: Raid = {
   element: 0,
 }
 
+interface Props {
+  showAllRaidsOption: boolean
+  currentRaid?: Raid
+  defaultRaid?: Raid
+  raidGroups: RaidGroup[]
+  minimal?: boolean
+  tabIndex?: number
+  size?: 'small' | 'medium' | 'large'
+  onChange?: (raid?: Raid) => void
+  onBlur?: (event: React.ChangeEvent<HTMLSelectElement>) => void
+}
+
 const RaidCombobox = (props: Props) => {
   // Set up router for locale
   const router = useRouter()
@@ -114,12 +112,13 @@ const RaidCombobox = (props: Props) => {
   useEffect(() => {
     const sections: [RaidGroup[], RaidGroup[], RaidGroup[]] = [[], [], []]
 
-    appState.raidGroups.forEach((group) => {
+
+    props.raidGroups.forEach((group) => {
       if (group.section > 0) sections[group.section - 1].push(group)
     })
 
-    if (appState.raidGroups[0]) {
-      setFarmingRaid(appState.raidGroups[0].raids[0])
+    if (props.raidGroups[0]) {
+      setFarmingRaid(props.raidGroups[0].raids[0])
     }
 
     setSections(sections)
@@ -521,13 +520,6 @@ const RaidCombobox = (props: Props) => {
   // ----------------------------------------------
   // Methods: Utility
   // ----------------------------------------------
-  function slugToRaid(slug: string) {
-    return appState.raidGroups
-      .filter((group) => group.section > 0)
-      .flatMap((group) => group.raids)
-      .find((raid) => raid.slug === slug)
-  }
-
   const linkClass = classNames({
     wind: currentRaid && currentRaid.element == 1,
     fire: currentRaid && currentRaid.element == 2,

pages/[username].tsx

@@ -278,6 +278,7 @@ const ProfileRoute: React.FC<Props> = ({
           scrolled={scrolled}
           element={element}
           raid={raid}
+          raidGroups={context.raidGroups}
           recency={recency}
         >
           <UserInfo user={context.user!} />

pages/new/index.tsx

@@ -150,6 +150,7 @@ const NewRoute: React.FC<Props> = ({
           new={true}
           pushHistory={callback}
           selectedTab={selectedTab}
+          raidGroups={context.raidGroups}
           handleTabChanged={handleTabChange}
         />
       </React.Fragment>

pages/p/[party].tsx

@@ -128,6 +128,7 @@ const PartyRoute: React.FC<Props> = ({
         <Party
           team={context.party}
           selectedTab={selectedTab}
+          raidGroups={context.raidGroups}
           handleTabChanged={handleTabChange}
         />
       </React.Fragment>

pages/saved.tsx

@@ -318,6 +318,7 @@ const SavedRoute: React.FC<Props> = ({
           scrolled={scrolled}
           element={element}
           raid={raid}
+          raidGroups={context.raidGroups}
           recency={recency}
         >
           <h1>{t('saved.title')}</h1>

pages/teams.tsx

@@ -329,6 +329,7 @@ const TeamsRoute: React.FC<Props> = ({
           scrolled={scrolled}
           element={element}
           raid={raid}
+          raidGroups={context.raidGroups}
           recency={recency}
         >
           <h1>{t('teams.title')}</h1>