Merge pull request #13 from jedmund/fix-editable-issues

Fix editable issues

components/CharacterGrid/index.tsx

@@ -71,9 +71,10 @@ const CharacterGrid = (props: Props) => {
         const partyUser = (party.user_id) ? party.user_id : undefined
         const loggedInUser = (cookies.user) ? cookies.user.user_id : ''
 
-        if (partyUser != undefined && loggedInUser != undefined && partyUser === loggedInUser) {
+        if (partyUser != undefined && loggedInUser != undefined && partyUser === loggedInUser)
-            party.editable = true
+            appState.party.editable = true
-        }
+        else
+            appState.party.editable = false
         
         // Store the important party and state-keeping values
         appState.party.id = party.id
@@ -120,9 +121,10 @@ const CharacterGrid = (props: Props) => {
                         .catch(error => console.error(error))
                 })
         } else {
-            saveCharacter(party.id, character, position)
+            if (party.editable)
-                .then(response => storeGridCharacter(response.data.grid_character))
+                saveCharacter(party.id, character, position)
-                .catch(error => console.error(error))
+                    .then(response => storeGridCharacter(response.data.grid_character))
+                    .catch(error => console.error(error))
         }
     }
 

components/CharacterUnit/index.tsx

@@ -6,6 +6,7 @@ import UncapIndicator from '~components/UncapIndicator'
 import PlusIcon from '~public/icons/Add.svg'
 
 import './index.scss'
+import { omit } from 'lodash'
 
 interface Props {
     gridCharacter: GridCharacter | undefined
@@ -47,20 +48,27 @@ const CharacterUnit = (props: Props) => {
             props.updateUncap(props.gridCharacter.id, props.position, uncap)
     }
 
+    const image = (
+        <div className="CharacterImage">
+            <img alt={character?.name.en} className="grid_image" src={imageUrl} />
+            { (props.editable) ? <span className='icon'><PlusIcon /></span> : '' }
+        </div>
+    )
+
+    const editableImage = (
+        <SearchModal 
+            placeholderText="Search for a character..." 
+            fromPosition={props.position} 
+            object="characters"
+            send={props.updateObject}>
+                {image}
+        </SearchModal>
+    )
+
     return (
         <div>
             <div className={classes}>
-                <SearchModal 
+                { (props.editable) ? editableImage : image }
-                    placeholderText="Search for a character..." 
-                    fromPosition={props.position} 
-                    object="characters"
-                    send={props.updateObject}>
-                        <div className="CharacterImage">
-                            <img alt={character?.name.en} className="grid_image" src={imageUrl} />
-                            { (props.editable) ? <span className='icon'><PlusIcon /></span> : '' }
-                        </div>
-                </SearchModal>
-
                 { (gridCharacter && character) ? 
                     <UncapIndicator 
                         type="character"

components/SummonGrid/index.tsx

@@ -81,9 +81,10 @@ const SummonGrid = (props: Props) => {
         const partyUser = (party.user_id) ? party.user_id : undefined
         const loggedInUser = (cookies.user) ? cookies.user.user_id : ''
 
-        if (partyUser != undefined && loggedInUser != undefined && partyUser === loggedInUser) {
+        if (partyUser != undefined && loggedInUser != undefined && partyUser === loggedInUser.id)
             appState.party.editable = true
-        }
+        else
+            appState.party.editable = false
         
         // Store the important party and state-keeping values
         appState.party.id = party.id
@@ -134,8 +135,9 @@ const SummonGrid = (props: Props) => {
                         .then(response => storeGridSummon(response.data.grid_summon))
                 })
         } else {
-            saveSummon(party.id, summon, position)
+            if (party.editable)
-                .then(response => storeGridSummon(response.data.grid_summon))
+                saveSummon(party.id, summon, position)
+                    .then(response => storeGridSummon(response.data.grid_summon))
         }
     }
 

components/SummonUnit/index.tsx

@@ -55,32 +55,37 @@ const SummonUnit = (props: Props) => {
             props.updateUncap(props.gridSummon.id, props.position, uncap)
     }
 
-    return (
+    const image = (
-        <div>
+        <div className="SummonImage">
-            <div className={classes}>
+            <img alt={summon?.name.en} className="grid_image" src={imageUrl} />
-                <SearchModal 
+            { (props.editable) ? <span className='icon'><PlusIcon /></span> : '' }
-                    placeholderText="Search for a summon..." 
+        </div>
-                    fromPosition={props.position} 
+    )
-                    object="summons"
-                    send={props.updateObject}>
-                        <div className="SummonImage">
-                            <img alt={summon?.name.en} className="grid_image" src={imageUrl} />
-                            { (props.editable) ? <span className='icon'><PlusIcon /></span> : '' }
-                        </div>
-                </SearchModal>
 
-                { (gridSummon) ? 
+    const editableImage = (
-                    <UncapIndicator 
+        <SearchModal 
-                        type="summon"
+            placeholderText="Search for a summon..." 
-                        ulb={gridSummon.object.uncap.ulb || false}
+            fromPosition={props.position} 
-                        flb={gridSummon.object.uncap.flb || false}
+            object="summons"
-                        uncapLevel={gridSummon.uncap_level} 
+            send={props.updateObject}>
-                        updateUncap={passUncapData}
+                {image}
-                        special={false}               
+        </SearchModal>
-                    /> : '' 
+    )
-                }
+
-                <h3 className="SummonName">{summon?.name.en}</h3>
+    return (
-            </div>
+        <div className={classes}>
+            { (props.editable) ? editableImage : image }
+            { (gridSummon) ? 
+                <UncapIndicator 
+                    type="summon"
+                    ulb={gridSummon.object.uncap.ulb || false}
+                    flb={gridSummon.object.uncap.flb || false}
+                    uncapLevel={gridSummon.uncap_level} 
+                    updateUncap={passUncapData}
+                    special={false}               
+                /> : '' 
+            }
+            <h3 className="SummonName">{summon?.name.en}</h3>
         </div>
     )
 }

components/WeaponGrid/index.tsx

@@ -77,14 +77,16 @@ const WeaponGrid = (props: Props) => {
         const partyUser = (party.user_id) ? party.user_id : undefined
         const loggedInUser = (cookies.user) ? cookies.user.user_id : ''
 
-        if (partyUser != undefined && loggedInUser != undefined && partyUser === loggedInUser) {
+        if (partyUser != undefined && loggedInUser != undefined && partyUser === loggedInUser.id)
             appState.party.editable = true
-        }
+        else
+            appState.party.editable = false
         
         // Store the important party and state-keeping values
         appState.party.id = party.id
         appState.party.extra = party.is_extra
 
+
         setFound(true)
         setLoading(false)
 
@@ -133,8 +135,9 @@ const WeaponGrid = (props: Props) => {
                         .then(response => storeGridWeapon(response.data.grid_weapon))
                 })
         } else {
-            saveWeapon(party.id, weapon, position)
+            console.log(party.editable)
-                .then(response => storeGridWeapon(response.data.grid_weapon))
+                saveWeapon(party.id, weapon, position)
+                    .then(response => storeGridWeapon(response.data.grid_weapon))
         }
     }
 

components/WeaponUnit/index.tsx

@@ -53,20 +53,27 @@ const WeaponUnit = (props: Props) => {
             props.updateUncap(props.gridWeapon.id, props.position, uncap)
     }
 
+    const image = (
+        <div className="WeaponImage">
+            <img alt={weapon?.name.en} className="grid_image" src={imageUrl} />
+            { (props.editable) ? <span className='icon'><PlusIcon /></span> : '' }
+        </div>
+    )
+
+    const editableImage = (
+        <SearchModal 
+            placeholderText="Search for a weapon..." 
+            fromPosition={props.position} 
+            object="weapons"
+            send={props.updateObject}>
+                {image}
+        </SearchModal>
+    )
+
     return (
         <div>
             <div className={classes}>
-                <SearchModal 
+                { (props.editable) ? editableImage : image }
-                    placeholderText="Search for a weapon..." 
-                    fromPosition={props.position} 
-                    object="weapons"
-                    send={props.updateObject}>
-                        <div className="WeaponImage">
-                            <img alt={weapon?.name.en} className="grid_image" src={imageUrl} />
-                            { (props.editable) ? <span className='icon'><PlusIcon /></span> : '' }
-                        </div>
-                </SearchModal>
-
                 { (gridWeapon) ? 
                     <UncapIndicator 
                         type="weapon"