WIP checkpoint

abandoning this though

components/GridRep/index.tsx

@@ -9,6 +9,7 @@ import 'fix-date'
 import { accountState } from '~utils/accountState'
 import { formatTimeAgo } from '~utils/timeAgo'
 import { ElementMap } from '~utils/elements'
+import { mapToGridArray } from '~utils/mapToGridArray'
 
 import Button from '~components/common/Button'
 
@@ -73,9 +74,18 @@ const GridRep = (props: Props) => {
   })
 
   useEffect(() => {
+    if (props.weapons && props.weapons.mainWeapon) {
       setMainhand(props.weapons.mainWeapon?.object)
-    setWeapons(Object.values(props.weapons.allWeapons).map((w) => w?.object))
+    }
+
+    if (props.weapons && props.weapons.allWeapons) {
+      setWeapons(
+        mapToGridArray(
+          Object.values(props.weapons.allWeapons).map((w) => w?.object)
+        )
+      )
       setGrid(props.weapons.allWeapons)
+    }
   }, [props.weapons])
 
   function navigate() {
@@ -86,7 +96,7 @@ const GridRep = (props: Props) => {
     let url = ''
 
     if (mainhand) {
-      const weapon = props.weapons.mainWeapon
+      const weapon = props.weapons?.mainWeapon
 
       if (mainhand.element === ElementMap.null && weapon && weapon.element) {
         url = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/weapon-main/${mainhand.granblueId}_${weapon.element}.jpg`
@@ -190,7 +200,7 @@ const GridRep = (props: Props) => {
                 {` · ${t('party.details.labels.full_auto')}`}
               </span>
             )}
-            {props.raid && props.raid.group.extra && (
+            {props.raid && props.raid.group?.extra && (
               <span className={styles.extra}>{` · EX`}</span>
             )}
           </div>

components/character/CharacterGrid/index.tsx

@@ -20,6 +20,7 @@ import * as CharacterTransformer from '~transformers/CharacterTransformer'
 import * as GridCharacterTransformer from '~transformers/GridCharacterTransformer'
 
 import styles from './index.module.scss'
+import { use } from 'i18next'
 
 // Props
 interface Props {
@@ -77,16 +78,36 @@ const CharacterGrid = (props: Props) => {
       [key: number]: number | undefined
     }>({})
 
+  useEffect(() => {
+    console.log('loading chara grid')
+  }, [])
+
   useEffect(() => {
     setJob(appState.party.protagonist.job)
-    setJobSkills(appState.party.protagonist.skills)
+    setJobSkills(
-    setJobAccessory(appState.party.protagonist.accessory)
+      appState.party.protagonist.skills
-  }, [appState])
+        ? appState.party.protagonist.skills
+        : {
+            0: undefined,
+            1: undefined,
+            2: undefined,
+            3: undefined,
+          }
+    )
+    setJobAccessory(
+      appState.party.protagonist.accessory
+        ? appState.party.protagonist.accessory
+        : undefined
+    )
+  }, [])
 
   // Initialize an array of current uncap values for each characters
   useEffect(() => {
     let initialPreviousUncapValues: { [key: number]: number } = {}
-    Object.values(appState.party.grid.characters).map((o) => {
+    const values = appState.party.grid.characters
+      ? appState.party.grid.characters
+      : {}
+    Object.values(values).map((o) => {
       o ? (initialPreviousUncapValues[o.position] = o.uncapLevel) : 0
     })
     setPreviousUncapValues(initialPreviousUncapValues)
@@ -151,7 +172,11 @@ const CharacterGrid = (props: Props) => {
 
   function storeGridCharacter(data: any) {
     const gridCharacter = GridCharacterTransformer.toObject(data)
-    appState.party.grid.characters[gridCharacter.position] = gridCharacter
+
+    appState.party.grid.characters = {
+      ...appState.party.grid.characters,
+      [gridCharacter.position]: gridCharacter,
+    }
   }
 
   async function resolveConflict() {
@@ -169,7 +194,11 @@ const CharacterGrid = (props: Props) => {
 
           // Remove conflicting characters from state
           conflicts.forEach(
-            (c) => (appState.party.grid.characters[c.position] = null)
+            (c) =>
+              (appState.party.grid.characters = {
+                ...appState.party.grid.characters,
+                [c.position]: null,
+              })
           )
 
           // Reset conflict
@@ -191,7 +220,10 @@ const CharacterGrid = (props: Props) => {
   async function removeCharacter(id: string) {
     try {
       const response = await api.endpoints.grid_characters.destroy({ id: id })
-      appState.party.grid.characters[response.data.position] = null
+      appState.party.grid.characters = {
+        ...appState.party.grid.characters,
+        [response.data.position]: null,
+      }
     } catch (error) {
       console.error(error)
     }
@@ -383,10 +415,13 @@ const CharacterGrid = (props: Props) => {
     position: number,
     uncapLevel: number | undefined
   ) => {
-    const character = appState.party.grid.characters[position]
+    const character = appState.party.grid.characters?.[position]
     if (character && uncapLevel) {
       character.uncapLevel = uncapLevel
-      appState.party.grid.characters[position] = character
+      appState.party.grid.characters = {
+        ...appState.party.grid.characters,
+        [position]: character,
+      }
     }
   }
 
@@ -394,7 +429,7 @@ const CharacterGrid = (props: Props) => {
     // Save the current value in case of an unexpected result
     let newPreviousValues = { ...previousUncapValues }
 
-    if (party.grid.characters[position]) {
+    if (party.grid.characters && party.grid.characters[position]) {
       newPreviousValues[position] = party.grid.characters[position]?.uncapLevel
       setPreviousUncapValues(newPreviousValues)
     }
@@ -479,10 +514,13 @@ const CharacterGrid = (props: Props) => {
     position: number,
     stage: number | undefined
   ) => {
-    const character = appState.party.grid.characters[position]
+    const character = appState.party.grid.characters?.[position]
     if (character && stage !== undefined) {
       character.transcendenceStep = stage
-      appState.party.grid.characters[position] = character
+      appState.party.grid.characters = {
+        ...appState.party.grid.characters,
+        [position]: character,
+      }
     }
   }
 
@@ -490,7 +528,7 @@ const CharacterGrid = (props: Props) => {
     // Save the current value in case of an unexpected result
     let newPreviousValues = { ...previousUncapValues }
 
-    if (party.grid.characters[position]) {
+    if (party.grid.characters && party.grid.characters[position]) {
       newPreviousValues[position] = party.grid.characters[position]?.uncapLevel
       setPreviousTranscendenceStages(newPreviousValues)
     }
@@ -545,7 +583,9 @@ const CharacterGrid = (props: Props) => {
             return (
               <li key={`grid_unit_${i}`}>
                 <CharacterUnit
-                  gridCharacter={party.grid.characters[i]}
+                  gridCharacter={
+                    party.grid.characters ? party.grid.characters[i] : null
+                  }
                   editable={props.editable}
                   position={i}
                   updateObject={receiveCharacterFromSearch}

components/character/CharacterModal/index.tsx

@@ -22,6 +22,13 @@ const emptyExtendedMastery: ExtendedMastery = {
   strength: 0,
 }
 
+const emptyRingset: CharacterOverMastery = {
+  1: { ...emptyExtendedMastery, modifier: 1 },
+  2: { ...emptyExtendedMastery, modifier: 2 },
+  3: emptyExtendedMastery,
+  4: emptyExtendedMastery,
+}
+
 const MAX_AWAKENING_LEVEL = 9
 
 // Styles and icons
@@ -85,6 +92,15 @@ const CharacterModal = ({
   }, [modalOpen])
 
   useEffect(() => {
+    console.log('Setting up grid character')
+    console.log(gridCharacter)
+
+    if (gridCharacter.mastery.overMastery) {
+      setRings(gridCharacter.mastery.overMastery)
+    } else {
+      setRings(emptyRingset)
+    }
+
     if (gridCharacter.mastery.aetherialMastery) {
       setEarring({
         modifier: gridCharacter.mastery.aetherialMastery.modifier,
@@ -93,7 +109,11 @@ const CharacterModal = ({
     }
 
     setAwakening(gridCharacter.mastery.awakening.type)
-    setAwakeningLevel(gridCharacter.mastery.awakening.level)
+    setAwakeningLevel(
+      gridCharacter.mastery.awakening.level
+        ? gridCharacter.mastery.awakening.level
+        : 1
+    )
     setPerpetuity(gridCharacter.mastery.perpetuity)
   }, [gridCharacter])
 
@@ -149,14 +169,6 @@ const CharacterModal = ({
   }
 
   function ringsChanged() {
-    // Create an empty ExtendedMastery object
-    const emptyRingset: CharacterOverMastery = {
-      1: { ...emptyExtendedMastery, modifier: 1 },
-      2: { ...emptyExtendedMastery, modifier: 2 },
-      3: emptyExtendedMastery,
-      4: emptyExtendedMastery,
-    }
-
     // Check if the current ringset is empty on the current GridCharacter and our local state
     const isEmptyRingset =
       gridCharacter.mastery.overMastery === undefined &&
@@ -259,7 +271,11 @@ const CharacterModal = ({
 
     setRings(gridCharacter.mastery.overMastery || emptyExtendedMastery)
     setAwakening(gridCharacter.mastery.awakening.type)
-    setAwakeningLevel(gridCharacter.mastery.awakening.level)
+    setAwakeningLevel(
+      gridCharacter.mastery.awakening.level
+        ? gridCharacter.mastery.awakening.level
+        : 1
+    )
 
     setAlertOpen(false)
     setOpen(false)

components/mastery/RingSelect/index.tsx

@@ -19,11 +19,11 @@ const emptyRing: ExtendedMastery = {
 }
 
 interface Props {
-  gridCharacter: GridCharacter
+  rings: CharacterOverMastery
   sendValues: (overMastery: CharacterOverMastery) => void
 }
 
-const RingSelect = ({ gridCharacter, sendValues }: Props) => {
+const RingSelect = ({ rings: overMastery, sendValues }: Props) => {
   // Ring value states
   const [rings, setRings] = useState<CharacterOverMastery>({
     1: { ...emptyRing, modifier: 1 },
@@ -33,15 +33,13 @@ const RingSelect = ({ gridCharacter, sendValues }: Props) => {
   })
 
   useEffect(() => {
-    if (gridCharacter.mastery.overMastery) {
     setRings({
-        1: gridCharacter.mastery.overMastery[1],
+      1: overMastery[1],
-        2: gridCharacter.mastery.overMastery[2],
+      2: overMastery[2],
-        3: gridCharacter.mastery.overMastery[3],
+      3: overMastery[3],
-        4: gridCharacter.mastery.overMastery[4],
+      4: overMastery[4],
     })
-    }
+  }, [overMastery])
-  }, [gridCharacter])
 
   useEffect(() => {
     sendValues(rings)
@@ -80,6 +78,7 @@ const RingSelect = ({ gridCharacter, sendValues }: Props) => {
   function receiveRingValues(index: number, left: number, right: number) {
     // console.log(`Receiving values from ${index}: ${left} ${right}`)
     if (index == 1 || index == 2) {
+      console.log('1 or 2')
       setSyncedRingValues(index, right)
     } else if (index == 3 && left == 0) {
       setRings({
@@ -132,6 +131,7 @@ const RingSelect = ({ gridCharacter, sendValues }: Props) => {
       {[...Array(4)].map((e, i) => {
         const index = i + 1
         const ringStat = rings[index]
+        console.log(ringStat)
 
         return (
           <ExtendedMasterySelect
@@ -140,8 +140,8 @@ const RingSelect = ({ gridCharacter, sendValues }: Props) => {
             key={`ring-${index}`}
             dataSet={dataSet(index)}
             leftSelectDisabled={index === 1 || index === 2}
-            leftSelectValue={ringStat.modifier ? ringStat.modifier : 0}
+            leftSelectValue={ringStat?.modifier ? ringStat?.modifier : 0}
-            rightSelectValue={ringStat.strength ? ringStat.strength : 0}
+            rightSelectValue={ringStat?.strength ? ringStat?.strength : 0}
             sendValues={(left: number, right: number) => {
               receiveRingValues(index, left, right)
             }}

transformers/GridCharacterTransformer.tsx

@@ -12,7 +12,18 @@ export function toObject(data: any): GridCharacter {
     mastery: {
       overMastery: data.over_mastery
         ? data.over_mastery
-        : [null, null, null, null],
+        : [
+            {
+              modifier: 1,
+              strength: 0,
+            },
+            {
+              modifier: 2,
+              strength: 0,
+            },
+            null,
+            null,
+          ],
       aetherialMastery: data.aetherial_mastery ? data.aetherial_mastery : null,
       awakening: {
         type: Awakening.toObject(data.awakening.type),

transformers/GridTransformer.tsx

@@ -24,19 +24,19 @@ export function toObject(data: any): Grid {
 
   return {
     characters: data.characters
-      ? mapToGridArray(data.characters, GridCharacter.toObject)
+      ? mapToGridArrayWithTransformer(data.characters, GridCharacter.toObject)
       : null,
     summons: {
       mainSummon: mainSummon ? GridSummon.toObject(mainSummon) : null,
       friendSummon: friendSummon ? GridSummon.toObject(friendSummon) : null,
       allSummons: allSummons
-        ? mapToGridArray(allSummons, GridSummon.toObject)
+        ? mapToGridArrayWithTransformer(allSummons, GridSummon.toObject)
         : null,
     },
     weapons: {
       mainWeapon: mainWeapon ? GridWeapon.toObject(mainWeapon) : null,
       allWeapons: data.weapons
-        ? mapToGridArray(data.weapons, GridWeapon.toObject)
+        ? mapToGridArrayWithTransformer(data.weapons, GridWeapon.toObject)
         : null,
     },
   }
@@ -53,7 +53,7 @@ function removeItem<T>(arr: Array<T>, values: T[]): Array<T> {
   return arr
 }
 
-function mapToGridArray<T>(
+export function mapToGridArrayWithTransformer<T>(
   arr: any[],
   transformer: (data: any) => T
 ): GridArray<T> {

transformers/WeaponTransformer.tsx

@@ -35,9 +35,9 @@ export function toObject(data: any): Weapon {
     },
     ax: data.ax,
     axType: data.ax_type,
-    awakenings: data.awakenings.map((awakening: any) =>
+    awakenings: data.awakenings
-      Awakening.toObject(awakening)
+      ? data.awakenings.map((awakening: any) => Awakening.toObject(awakening))
-    ),
+      : null,
     maxAwakeningLevel: data.max_awakening_level,
   }
 }

utils/mapToGridArray.tsx

@@ -0,0 +1,6 @@
+export function mapToGridArray<T>(arr: any[]): GridArray<T> {
+  return arr.reduce(
+    (gridArray, item) => ({ ...gridArray, [item.position]: item }),
+    {} as GridArray<T>
+  )
+}