Determine editable at Party level, pass down to grids

components/CharacterGrid/index.tsx

@@ -23,6 +23,7 @@ import './index.scss'
 // Props
 interface Props {
   new: boolean
+  editable: boolean
   characters?: GridCharacter[]
   createParty: (details?: DetailsObject) => Promise<Party>
   pushHistory?: (path: string) => void
@@ -75,17 +76,6 @@ const CharacterGrid = (props: Props) => {
       [key: number]: number | undefined
     }>({})
 
-  // Set the editable flag only on first load
-  useEffect(() => {
-    // If user is logged in and matches
-    if (
-      (accountData && party.user && accountData.userId === party.user.id) ||
-      props.new
-    )
-      appState.party.editable = true
-    else appState.party.editable = false
-  }, [props.new, accountData, party])
-
   useEffect(() => {
     setJob(appState.party.job)
     setJobSkills(appState.party.jobSkills)
@@ -115,7 +105,7 @@ const CharacterGrid = (props: Props) => {
           .catch((error) => console.error(error))
       })
     } else {
-      if (party.editable)
+      if (props.editable)
         saveCharacter(party.id, character, position)
           .then((response) => handleCharacterResponse(response.data))
           .catch((error) => {
@@ -232,7 +222,7 @@ const CharacterGrid = (props: Props) => {
   }
 
   function saveJobSkill(skill: JobSkill, position: number) {
-    if (party.id && appState.party.editable) {
+    if (party.id && props.editable) {
       const positionedKey = `skill${position}_id`
 
       let skillObject: {
@@ -522,7 +512,7 @@ const CharacterGrid = (props: Props) => {
           job={job}
           jobSkills={jobSkills}
           jobAccessory={jobAccessory}
-          editable={party.editable}
+          editable={props.editable}
           saveJob={saveJob}
           saveSkill={saveJobSkill}
           saveAccessory={saveAccessory}
@@ -541,7 +531,7 @@ const CharacterGrid = (props: Props) => {
               <li key={`grid_unit_${i}`}>
                 <CharacterUnit
                   gridCharacter={grid.characters[i]}
-                  editable={party.editable}
+                  editable={props.editable}
                   position={i}
                   updateObject={receiveCharacterFromSearch}
                   updateUncap={initiateUncapUpdate}

components/Party/index.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react'
 import { useRouter } from 'next/router'
 import { useSnapshot } from 'valtio'
 import clonedeep from 'lodash.clonedeep'
+import ls from 'local-storage'
 
 import PartySegmentedControl from '~components/PartySegmentedControl'
 import PartyDetails from '~components/PartyDetails'
@@ -16,6 +17,8 @@ import { retrieveCookies } from '~utils/retrieveCookies'
 import type { DetailsObject } from '~types'
 
 import './index.scss'
+import { accountCookie } from '~utils/userToken'
+import { getCookie } from 'cookies-next'
 
 // Props
 interface Props {
@@ -36,6 +39,7 @@ const Party = (props: Props) => {
 
   // Set up states
   const { party } = useSnapshot(appState)
+  const [editable, setEditable] = useState(false)
   const [currentTab, setCurrentTab] = useState<GridType>(GridType.Weapon)
 
   // Retrieve cookies
@@ -48,6 +52,36 @@ const Party = (props: Props) => {
     if (props.team) storeParty(props.team)
   }, [])
 
+  // Set editable on first load
+  useEffect(() => {
+    // Get cookie
+    const cookie = getCookie('account')
+    const accountData: AccountCookie = cookie
+      ? JSON.parse(cookie as string)
+      : null
+
+    let editable = false
+
+    if (props.new) editable = true
+
+    if (accountData && props.team && !props.new) {
+      if (accountData.token) {
+        // Authenticated
+        if (props.team.user && accountData.userId === props.team.user.id) {
+          editable = true
+        }
+      } else {
+        // Not authenticated
+        if (!props.team.user && accountData.userId === props.team.local_id) {
+          editable = true
+        }
+      }
+    }
+
+    appState.party.editable = editable
+    setEditable(editable)
+  })
+
   // Set selected tab from props
   useEffect(() => {
     setCurrentTab(props.selectedTab)
@@ -267,6 +301,7 @@ const Party = (props: Props) => {
   const weaponGrid = (
     <WeaponGrid
       new={props.new || false}
+      editable={editable}
       weapons={props.team?.weapons}
       createParty={createParty}
       pushHistory={props.pushHistory}
@@ -276,6 +311,7 @@ const Party = (props: Props) => {
   const summonGrid = (
     <SummonGrid
       new={props.new || false}
+      editable={editable}
       summons={props.team?.summons}
       createParty={createParty}
       pushHistory={props.pushHistory}
@@ -285,6 +321,7 @@ const Party = (props: Props) => {
   const characterGrid = (
     <CharacterGrid
       new={props.new || false}
+      editable={editable}
       characters={props.team?.characters}
       createParty={createParty}
       pushHistory={props.pushHistory}

components/SummonGrid/index.tsx

@@ -21,6 +21,7 @@ import './index.scss'
 // Props
 interface Props {
   new: boolean
+  editable: boolean
   summons?: GridSummon[]
   createParty: (details?: DetailsObject) => Promise<Party>
   pushHistory?: (path: string) => void
@@ -55,17 +56,6 @@ const SummonGrid = (props: Props) => {
       [key: number]: number
     }>({})
 
-  // Set the editable flag only on first load
-  useEffect(() => {
-    // If user is logged in and matches
-    if (
-      (accountData && party.user && accountData.userId === party.user.id) ||
-      props.new
-    )
-      appState.party.editable = true
-    else appState.party.editable = false
-  }, [props.new, accountData, party])
-
   // Initialize an array of current uncap values for each summon
   useEffect(() => {
     let initialPreviousUncapValues: { [key: number]: number } = {}
@@ -100,7 +90,7 @@ const SummonGrid = (props: Props) => {
         )
       })
     } else {
-      if (party.editable)
+      if (props.editable)
         saveSummon(party.id, summon, position)
           .then((response) => handleSummonResponse(response.data))
           .catch((error) => {
@@ -401,7 +391,7 @@ const SummonGrid = (props: Props) => {
       <div className="Label">{t('summons.main')}</div>
       <SummonUnit
         gridSummon={grid.summons.mainSummon}
-        editable={party.editable}
+        editable={props.editable}
         key="grid_main_summon"
         position={-1}
         unitType={0}
@@ -418,7 +408,7 @@ const SummonGrid = (props: Props) => {
       <div className="Label Friend">{t('summons.friend')}</div>
       <SummonUnit
         gridSummon={grid.summons.friendSummon}
-        editable={party.editable}
+        editable={props.editable}
         key="grid_friend_summon"
         position={6}
         unitType={2}
@@ -439,7 +429,7 @@ const SummonGrid = (props: Props) => {
             <li key={`grid_unit_${i}`}>
               <SummonUnit
                 gridSummon={grid.summons.allSummons[i]}
-                editable={party.editable}
+                editable={props.editable}
                 position={i}
                 unitType={1}
                 removeSummon={removeSummon}
@@ -457,7 +447,7 @@ const SummonGrid = (props: Props) => {
   const subAuraSummonElement = (
     <ExtraSummons
       grid={grid.summons.allSummons}
-      editable={party.editable}
+      editable={props.editable}
       exists={false}
       offset={numSummons}
       removeSummon={removeSummon}

components/WeaponGrid/index.tsx

@@ -23,6 +23,7 @@ import './index.scss'
 // Props
 interface Props {
   new: boolean
+  editable: boolean
   weapons?: GridWeapon[]
   createParty: (details: DetailsObject) => Promise<Party>
   pushHistory?: (path: string) => void
@@ -60,17 +61,6 @@ const WeaponGrid = (props: Props) => {
     [key: number]: number
   }>({})
 
-  // Set the editable flag only on first load
-  useEffect(() => {
-    // If user is logged in and matches
-    if (
-      (accountData && party.user && accountData.userId === party.user.id) ||
-      props.new
-    )
-      appState.party.editable = true
-    else appState.party.editable = false
-  }, [props.new, accountData, party])
-
   // Initialize an array of current uncap values for each weapon
   useEffect(() => {
     let initialPreviousUncapValues: { [key: number]: number } = {}
@@ -99,7 +89,7 @@ const WeaponGrid = (props: Props) => {
         })
       })
     } else {
-      if (party.editable)
+      if (props.editable)
         saveWeapon(party.id, weapon, position)
           .then((response) => {
             if (response) handleWeaponResponse(response.data)
@@ -337,7 +327,7 @@ const WeaponGrid = (props: Props) => {
   const mainhandElement = (
     <WeaponUnit
       gridWeapon={appState.grid.weapons.mainWeapon}
-      editable={party.editable}
+      editable={props.editable}
       key="grid_mainhand"
       position={-1}
       unitType={0}
@@ -352,7 +342,7 @@ const WeaponGrid = (props: Props) => {
       <li key={`grid_unit_${i}`}>
         <WeaponUnit
           gridWeapon={appState.grid.weapons.allWeapons[i]}
-          editable={party.editable}
+          editable={props.editable}
           position={i}
           unitType={1}
           removeWeapon={removeWeapon}
@@ -366,7 +356,7 @@ const WeaponGrid = (props: Props) => {
   const extraGridElement = (
     <ExtraWeapons
       grid={appState.grid.weapons.allWeapons}
-      editable={party.editable}
+      editable={props.editable}
       offset={numWeapons}
       removeWeapon={removeWeapon}
       updateObject={receiveWeaponFromSearch}