Pass down GridWeapon instead of Weapon

Previously, we stripped the Weapon out of the GridWeapon for simplicity. However, now that we need to display and manipulate data on the GridWeapon (unique data), we need to pass that down instead.

components/ExtraWeapons/index.tsx

@@ -13,12 +13,13 @@ export enum GridType {
 
 // Props
 interface Props {
-    grid: GridArray<Weapon>
+    grid: GridArray<GridWeapon>
     editable: boolean
     exists: boolean
     found?: boolean
     offset: number
     onClick: (position: number) => void
+    updateUncap: (id: string, uncap: number) => void
 }
 
 const ExtraWeapons = (props: Props) => {
@@ -34,10 +35,10 @@ const ExtraWeapons = (props: Props) => {
                             <li key={`grid_unit_${i}`} >
                                 <WeaponUnit 
                                     editable={props.editable}
-                                    onClick={() => { props.onClick(props.offset + i)}} 
                                     position={props.offset + i} 
                                     unitType={1}
-                                    weapon={props.grid[props.offset + i]}
+                                    gridWeapon={props.grid[props.offset + i]}
+                                    onClick={() => { props.onClick(props.offset + i)}} 
                                 />
                             </li>
                         )

components/Party/index.tsx

@@ -23,11 +23,11 @@ import './index.scss'
 
 interface Props {
     partyId?: string
-    mainWeapon?: Weapon
+    mainWeapon?: GridWeapon
     mainSummon?: Summon
     friendSummon?: Summon
     characters?: GridArray<Character>
-    weapons?: GridArray<Weapon>
+    weapons?: GridArray<GridWeapon>
     summons?: GridArray<Summon>
     extra: boolean
     editable: boolean
@@ -46,10 +46,10 @@ const Party = (props: Props) => {
 
     // Grid data
     const [characters, setCharacters] = useState<GridArray<Character>>({})
-    const [weapons, setWeapons] = useState<GridArray<Weapon>>({})
+    const [weapons, setWeapons] = useState<GridArray<GridWeapon>>({})
     const [summons, setSummons] = useState<GridArray<Summon>>({})
 
-    const [mainWeapon, setMainWeapon] = useState<Weapon>()
+    const [mainWeapon, setMainWeapon] = useState<GridWeapon>()
     const [mainSummon, setMainSummon] = useState<Summon>()
     const [friendSummon, setFriendSummon] = useState<Summon>()
 
@@ -178,8 +178,8 @@ const Party = (props: Props) => {
             case GridType.Weapon:
                 const weapon = item as Weapon
                 saveWeapon(weapon, position, partyId)
-                    .then(() => {
+                    .then((response) => {
-                        storeWeapon(weapon, position)
+                        storeWeapon(response.data.grid_weapon)
                     })
                 break
             case GridType.Summon:
@@ -193,24 +193,32 @@ const Party = (props: Props) => {
     }
     
     // Weapons
-    function storeWeapon(weapon: Weapon, position: number) {
+    function storeWeapon(weapon: GridWeapon) {
-        if (position == -1) {
+        if (weapon.position == -1) {
             setMainWeapon(weapon)
         } else {
             // Store the grid unit weapon at the correct position
             let newWeapons = Object.assign({}, weapons)
-            newWeapons[position] = weapon
+            newWeapons[weapon.position!] = weapon
             setWeapons(newWeapons)
         }
     }
 
     async function saveWeapon(weapon: Weapon, position: number, party: string) {
-        await api.endpoints.weapons.create({
+        let uncapLevel = 3
+
+        if (weapon.uncap.ulb)
+            uncapLevel = 5
+        else if (weapon.uncap.flb)
+            uncapLevel = 4
+
+        return await api.endpoints.weapons.create({
             'weapon': {
                 'party_id': party,
                 'weapon_id': weapon.id,
                 'position': position,
-                'mainhand': (position == -1)
+                'mainhand': (position == -1),
+                'uncap_level': uncapLevel
             }
         }, headers)
     }

components/UncapIndicator/index.tsx

@@ -10,30 +10,39 @@ interface Props {
     uncapLevel: number
     flb: boolean
     ulb?: boolean
+    updateUncap: (uncap: number) => void
 }
 
 const UncapIndicator = (props: Props) => {
-    let numStars
-
     const [uncap, setUncap] = useState(props.uncapLevel)
 
-    if (props.type === 'character') {
+    const numStars = setNumStars()
-        if (props.flb) {
+
-            numStars = 5
+    function setNumStars() {
+        let numStars
+        
+        if (props.type === 'character') {
+            if (props.flb) {
+                numStars = 5
+            } else {
+                numStars = 4
+            }
         } else {
-            numStars = 4
+            if (props.ulb) {
-        }
+                numStars = 5
-    } else {
+            } else if (props.flb) {
-        if (props.ulb) {
+                numStars = 4
-            numStars = 5
+            } else {
-        } else if (props.flb) {
+                numStars = 3
-            numStars = 4
+            }
-        } else {
-            numStars = 3
         }
+
+        return numStars
     }
 
     function toggleStar(index: number, empty: boolean) {
+        console.log("Toggling star!")
+
         if (empty)
             setUncap(index + 1)
         else

components/WeaponGrid/index.tsx

@@ -19,8 +19,8 @@ export enum GridType {
 interface Props {
     userId?: string
     partyId?: string
-    mainhand?: Weapon | undefined
+    mainhand?: GridWeapon | undefined
-    grid: GridArray<Weapon>
+    grid: GridArray<GridWeapon>
     extra: boolean
     editable: boolean
     exists: boolean
@@ -33,6 +33,7 @@ const WeaponGrid = (props: Props) => {
     const [searchPosition, setSearchPosition] = useState(0)
 
     const numWeapons: number = 9
+    const searchGrid: GridArray<Weapon> = Object.values(props.grid).map((o) => o.weapon)
 
     const extraGrid = (
         <ExtraWeapons 
@@ -67,12 +68,12 @@ const WeaponGrid = (props: Props) => {
         <div id="weapon_grids">
             <div id="WeaponGrid">
                 <WeaponUnit 
-                    onClick={() => { openSearchModal(-1) }}
                     editable={props.editable}
                     key="grid_mainhand"
                     position={-1} 
                     unitType={0}
-                    weapon={props.mainhand}
+                    gridWeapon={props.mainhand}
+                    onClick={() => { openSearchModal(-1) }}
                 />
 
                 <ul id="grid_weapons">
@@ -81,11 +82,11 @@ const WeaponGrid = (props: Props) => {
                             return (
                                 <li key={`grid_unit_${i}`} >
                                     <WeaponUnit 
-                                        onClick={() => { openSearchModal(i) }}
                                         editable={props.editable}
                                         position={i} 
                                         unitType={1}
-                                        weapon={props.grid[i]}
+                                        gridWeapon={props.grid[i]}
+                                        onClick={() => { openSearchModal(i) }}
                                     />
                                 </li>
                             )
@@ -102,7 +103,7 @@ const WeaponGrid = (props: Props) => {
 
             {open ? (
                 <SearchModal 
-                    grid={props.grid}
+                    grid={searchGrid}
                     close={closeModal}
                     send={sendData}
                     fromPosition={searchPosition}

components/WeaponUnit/index.tsx

@@ -10,7 +10,7 @@ import './index.scss'
 
 interface Props {
     onClick: () => void
-    weapon: Weapon | undefined
+    gridWeapon: GridWeapon | undefined
     position: number
     editable: boolean
     unitType: 0 | 1
@@ -24,10 +24,10 @@ const WeaponUnit = (props: Props) => {
         'mainhand': props.unitType == 0,
         'grid': props.unitType == 1,
         'editable': props.editable,
-        'filled': (props.weapon !== undefined)
+        'filled': (props.gridWeapon !== undefined)
     })
 
-    const weapon = props.weapon
+    const weapon = props.gridWeapon?.weapon
 
     useEffect(() => {
         generateImageUrl()
@@ -35,8 +35,8 @@ const WeaponUnit = (props: Props) => {
 
     function generateImageUrl() {
         let imgSrc = ""
-        if (props.weapon) {
+        if (props.gridWeapon) {
-            const weapon = props.weapon!
+            const weapon = props.gridWeapon.weapon!
     
             if (props.unitType == 0)
                 imgSrc = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/weapon-main/${weapon.granblue_id}.jpg`
@@ -59,7 +59,7 @@ const WeaponUnit = (props: Props) => {
                     type="weapon"
                     ulb={weapon?.uncap.ulb || false} 
                     flb={weapon?.uncap.flb || false}
-                    uncapLevel={weapon?.uncap_level!}
+                    uncapLevel={props.gridWeapon?.uncap_level!}
                 />
             </div>
         </div>

pages/p/[party].tsx

@@ -23,10 +23,10 @@ const PartyRoute: React.FC = () => {
     const [editable, setEditable] = useState(false)
 
     const [characters, setCharacters] = useState<GridArray<Character>>({})
-    const [weapons, setWeapons] = useState<GridArray<Weapon>>({})
+    const [weapons, setWeapons] = useState<GridArray<GridWeapon>>({})
     const [summons, setSummons] = useState<GridArray<Summon>>({})
 
-    const [mainWeapon, setMainWeapon] = useState<Weapon>()
+    const [mainWeapon, setMainWeapon] = useState<GridWeapon>()
     const [mainSummon, setMainSummon] = useState<Summon>()
     const [friendSummon, setFriendSummon] = useState<Summon>()
 
@@ -84,16 +84,13 @@ const PartyRoute: React.FC = () => {
         }
 
         function populateWeapons(list: [GridWeapon]) {
-            let weapons: GridArray<Weapon> = {}
+            let weapons: GridArray<GridWeapon> = {}
 
             list.forEach((object: GridWeapon) => {
-                const weapon = object.weapon
-                weapon.uncap_level = object.uncapLevel
-
                 if (object.mainhand)
-                    setMainWeapon(weapon)
+                    setMainWeapon(object)
                 else if (!object.mainhand && object.position != null)
-                    weapons[object.position] = weapon
+                    weapons[object.position] = object
             })
 
             return weapons