Fix unauth party creation

There was a bug where unauth users could not add more than one item to a grid before it went read-only. This fixes that bug and ensures that permissions are set properly so no one can edit other people's grids.

components/CharacterGrid/index.tsx

@@ -15,6 +15,7 @@ import './index.scss'
 
 // Props
 interface Props {
+    new: boolean
     slug?: string
     createParty: () => Promise<AxiosResponse<any, any>>
     pushHistory?: (path: string) => void
@@ -38,6 +39,7 @@ const CharacterGrid = (props: Props) => {
     const [slug, setSlug] = useState()
     const [found, setFound] = useState(false)
     const [loading, setLoading] = useState(true)
+    const [firstLoadComplete, setFirstLoadComplete] = useState(false)
 
     // Create a temporary state to store previous character uncap values
     const [previousUncapValues, setPreviousUncapValues] = useState<{[key: number]: number}>({})
@@ -49,6 +51,19 @@ const CharacterGrid = (props: Props) => {
         else appState.party.editable = true
     }, [slug, props.slug])
 
+    // Set the editable flag only on first load
+    useEffect(() => {        
+        if (!loading && !firstLoadComplete) {
+            // If user is logged in and matches
+            if ((cookies.user && party.user && cookies.user.user_id === party.user.id) || props.new)
+                appState.party.editable = true
+            else            
+                appState.party.editable = false
+
+            setFirstLoadComplete(true)
+        }
+    }, [props.new, cookies, party, loading, firstLoadComplete])
+
     // Initialize an array of current uncap values for each characters
     useEffect(() => {
         let initialPreviousUncapValues: {[key: number]: number} = {}
@@ -66,15 +81,6 @@ const CharacterGrid = (props: Props) => {
     function processResult(response: AxiosResponse) {
         // Store the response
         const party: Party = response.data.party
-            
-        // Get the party user and logged in user, if possible, to compare
-        const partyUser = (party.user) ? party.user.id : undefined
-        const loggedInUser = (cookies.user) ? cookies.user.user_id : ''
-
-        if (partyUser != undefined && loggedInUser != undefined && partyUser === loggedInUser)
-            appState.party.editable = true
-        else
-            appState.party.editable = false
         
         // Store the important party and state-keeping values
         appState.party.id = party.id

components/Party/index.tsx

@@ -18,11 +18,12 @@ import { AxiosResponse } from 'axios'
 
 // Props
 interface Props {
+    new?: boolean
     slug?: string
     pushHistory?: (path: string) => void
 }
 
-const Party = (props: Props) => {
+const Party = (props: Props) => {    
     // Cookies
     const [cookies] = useCookies(['user'])
     const headers = useMemo(() => {
@@ -134,11 +135,7 @@ const Party = (props: Props) => {
 
     useEffect(() => {
         const shortcode = (props.slug) ? props.slug : undefined
-
+        if (shortcode) fetchDetails(shortcode)
-        if (shortcode)
-            fetchDetails(shortcode)
-        else
-            appState.party.editable = true
     }, [props.slug, fetchDetails])
 
     // Render: JSX components
@@ -152,6 +149,7 @@ const Party = (props: Props) => {
 
     const weaponGrid = (
         <WeaponGrid 
+            new={props.new || false}
             slug={props.slug}
             createParty={createParty}
             pushHistory={props.pushHistory}
@@ -160,6 +158,7 @@ const Party = (props: Props) => {
 
     const summonGrid = (
         <SummonGrid 
+            new={props.new || false}
             slug={props.slug}
             createParty={createParty}
             pushHistory={props.pushHistory}
@@ -168,6 +167,7 @@ const Party = (props: Props) => {
 
     const characterGrid = (
         <CharacterGrid
+            new={props.new || false}
             slug={props.slug}
             createParty={createParty}
             pushHistory={props.pushHistory}

components/SummonGrid/index.tsx

@@ -16,6 +16,7 @@ import './index.scss'
 
 // Props
 interface Props {
+    new: boolean
     slug?: string
     createParty: () => Promise<AxiosResponse<any, any>>
     pushHistory?: (path: string) => void
@@ -39,6 +40,7 @@ const SummonGrid = (props: Props) => {
     const [slug, setSlug] = useState()
     const [found, setFound] = useState(false)
     const [loading, setLoading] = useState(true)
+    const [firstLoadComplete, setFirstLoadComplete] = useState(false)
 
     // Create a temporary state to store previous weapon uncap value
     const [previousUncapValues, setPreviousUncapValues] = useState<{[key: number]: number}>({})
@@ -50,6 +52,19 @@ const SummonGrid = (props: Props) => {
         else appState.party.editable = true
     }, [slug, props.slug])
 
+    // Set the editable flag only on first load
+    useEffect(() => {        
+        if (!loading && !firstLoadComplete) {
+            // If user is logged in and matches
+            if ((cookies.user && party.user && cookies.user.user_id === party.user.id) || props.new)
+                appState.party.editable = true
+            else            
+                appState.party.editable = false
+
+            setFirstLoadComplete(true)
+        }
+    }, [props.new, cookies, party, loading, firstLoadComplete])
+
     // Initialize an array of current uncap values for each summon
     useEffect(() => {
         let initialPreviousUncapValues: {[key: number]: number} = {}
@@ -76,15 +91,6 @@ const SummonGrid = (props: Props) => {
     function processResult(response: AxiosResponse) {
         // Store the response
         const party: Party = response.data.party
-            
-        // Get the party user and logged in user, if possible, to compare
-        const partyUser = (party.user) ? party.user.id : undefined
-        const loggedInUser = (cookies.user) ? cookies.user.user_id : ''
-
-        if (partyUser != undefined && loggedInUser != undefined && partyUser === loggedInUser)
-            appState.party.editable = true
-        else
-            appState.party.editable = false
         
         // Store the important party and state-keeping values
         appState.party.id = party.id

components/WeaponGrid/index.tsx

@@ -16,6 +16,7 @@ import './index.scss'
 
 // Props
 interface Props {
+    new: boolean
     slug?: string
     createParty: (extra: boolean) => Promise<AxiosResponse<any, any>>
     pushHistory?: (path: string) => void
@@ -39,6 +40,7 @@ const WeaponGrid = (props: Props) => {
     const [slug, setSlug] = useState()
     const [found, setFound] = useState(false)
     const [loading, setLoading] = useState(true)
+    const [firstLoadComplete, setFirstLoadComplete] = useState(false)
 
     // Create a temporary state to store previous weapon uncap values
     const [previousUncapValues, setPreviousUncapValues] = useState<{[key: number]: number}>({})
@@ -50,6 +52,19 @@ const WeaponGrid = (props: Props) => {
         else appState.party.editable = true
     }, [slug, props.slug])
 
+    // Set the editable flag only on first load
+    useEffect(() => {        
+        if (!loading && !firstLoadComplete) {
+            // If user is logged in and matches
+            if ((cookies.user && party.user && cookies.user.user_id === party.user.id) || props.new)
+                appState.party.editable = true
+            else            
+                appState.party.editable = false
+
+            setFirstLoadComplete(true)
+        }
+    }, [props.new, cookies, party, loading, firstLoadComplete])
+
     // Initialize an array of current uncap values for each weapon
     useEffect(() => {
         let initialPreviousUncapValues: {[key: number]: number} = {}
@@ -72,15 +87,6 @@ const WeaponGrid = (props: Props) => {
     function processResult(response: AxiosResponse) {
         // Store the response
         const party: Party = response.data.party
-
-        // Get the party user and logged in user, if possible, to compare
-        const partyUser = (party.user) ? party.user.id : undefined
-        const loggedInUser = (cookies.user) ? cookies.user.user_id : ''
-
-        if (partyUser != undefined && loggedInUser != undefined && partyUser === loggedInUser)
-            appState.party.editable = true
-        else
-            appState.party.editable = false
         
         // Store the important party and state-keeping values
         appState.party.id = party.id

pages/new/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import Party from '~components/Party'
 
-const NewRoute: React.FC = () => {
+const NewRoute = () => {
     function callback(path: string) {
         // This is scuffed, how do we do this natively?
         window.history.replaceState(null, `Grid Tool`, `${path}`)
@@ -9,7 +9,7 @@ const NewRoute: React.FC = () => {
 
     return (
         <div id="Content">
-            <Party pushHistory={callback} />
+            <Party new={true} pushHistory={callback} />
         </div>
     )
 }