Final cleanup, removing old methods and moving Context around

components/Party/index.tsx

@@ -23,15 +23,7 @@ enum GridType {
 
 // Props
 interface Props {
-    partyId?: string
+    slug?: string
-    mainWeapon?: GridWeapon
-    mainSummon?: GridSummon
-    friendSummon?: GridSummon
-    characters?: GridArray<GridCharacter>
-    weapons?: GridArray<GridWeapon>
-    summons?: GridArray<GridSummon>
-    extra: boolean
-    editable: boolean
     pushHistory?: (path: string) => void
 }
 
@@ -45,17 +37,13 @@ const Party = (props: Props) => {
     } : {}
 
     // Set up states
-    const [extra, setExtra] = useState<boolean>(false)
     const [currentTab, setCurrentTab] = useState<GridType>(GridType.Weapon)
     const [element, setElement] = useState<TeamElement>(TeamElement.Any)
-
+    const [editable, setEditable] = useState(false)
-    // Set states from props
+    const [hasExtra, setHasExtra] = useState(false)
-    useEffect(() => {
-        setExtra(props.extra || false)
-    }, [props])
 
     // Methods: Creating a new party
-    async function createParty() {
+    async function createParty(extra: boolean = false) {
         let body = {
             party: {
                 ...(cookies.user) && { user_id: cookies.user.user_id },
@@ -69,7 +57,7 @@ const Party = (props: Props) => {
     // Methods: Updating the party's extra flag
     // Note: This doesn't save to the server yet.
     function checkboxChanged(event: React.ChangeEvent<HTMLInputElement>) {
-        setExtra(event.target.checked)
+        setHasExtra(event.target.checked)
     }
 
     // Methods: Navigating with segmented control
@@ -95,8 +83,6 @@ const Party = (props: Props) => {
     // Render: JSX components
     const navigation = (
         <PartySegmentedControl
-            extra={extra}
-            editable={props.editable}
             selectedTab={currentTab}
             onClick={segmentClicked}
             onCheckboxChange={checkboxChanged}
@@ -105,11 +91,7 @@ const Party = (props: Props) => {
 
     const weaponGrid = (
         <WeaponGrid 
-            partyId={props.partyId}
+            slug={props.slug}
-            mainhand={props.mainWeapon}
-            weapons={props.weapons || {}}
-            extra={extra}
-            editable={props.editable}
             createParty={createParty}
             pushHistory={props.pushHistory}
         />
@@ -117,11 +99,7 @@ const Party = (props: Props) => {
 
     const summonGrid = (
         <SummonGrid 
-            partyId={props.partyId}
+            slug={props.slug}
-            mainSummon={props.mainSummon}
-            friendSummon={props.friendSummon}
-            summons={props.summons || {}}
-            editable={props.editable} 
             createParty={createParty}
             pushHistory={props.pushHistory}
         />
@@ -129,9 +107,7 @@ const Party = (props: Props) => {
 
     const characterGrid = (
         <CharacterGrid
-            partyId={props.partyId}
+            slug={props.slug}
-            characters={props.characters || {}}
-            editable={props.editable}
             createParty={createParty}
             pushHistory={props.pushHistory}
         />
@@ -150,7 +126,7 @@ const Party = (props: Props) => {
 
     return (
         <div>
-            <PartyContext.Provider value={{ element, setElement }}>
+            <PartyContext.Provider value={{ element, setElement, editable, setEditable, hasExtra, setHasExtra }}>
                 { navigation }
                 { currentGrid() }
             </PartyContext.Provider>

components/PartySegmentedControl/index.tsx

@@ -16,15 +16,13 @@ export enum GridType {
 }
 
 interface Props {
-    editable: boolean
-    extra: boolean
     selectedTab: GridType
     onClick: (event: React.ChangeEvent<HTMLInputElement>) => void
     onCheckboxChange: (event: React.ChangeEvent<HTMLInputElement>) => void
 }
 
 const PartySegmentedControl = (props: Props) => {
-    const { element } = useContext(PartyContext)
+    const { editable, element, hasExtra } = useContext(PartyContext)
 
     function getElement() {
         switch(element) {
@@ -42,8 +40,8 @@ const PartySegmentedControl = (props: Props) => {
             Extra
             <ToggleSwitch 
                 name="ExtraSwitch" 
-                editable={props.editable}
+                editable={editable}
-                checked={props.extra}
+                checked={hasExtra}
                 onChange={props.onCheckboxChange} 
             />
         </div>
@@ -82,7 +80,7 @@ const PartySegmentedControl = (props: Props) => {
 
             {
                 (() => {
-                    if (props.editable && props.selectedTab == GridType.Weapon) {
+                    if (editable && props.selectedTab == GridType.Weapon) {
                         return extraToggle
                     }
                 })()

components/WeaponGrid/index.tsx

@@ -19,7 +19,7 @@ import './index.scss'
 // Props
 interface Props {
     slug?: string
-    createParty: () => Promise<AxiosResponse<any, any>>
+    createParty: (extra: boolean) => Promise<AxiosResponse<any, any>>
     pushHistory?: (path: string) => void
 }
 
@@ -37,15 +37,15 @@ const WeaponGrid = (props: Props) => {
 
     // Set up state for party
     const [partyId, setPartyId] = useState('')
-    const [extra, setExtra] = useState<boolean>(false)
 
     // Set up state for view management
     const [found, setFound] = useState(false)
     const [loading, setLoading] = useState(true)
-    const [editable, setEditable] = useState(false)
-    const { setEditable: setEditableContext } = useContext(AppContext)
     
     // Set up the party context
+    const { setEditable: setAppEditable } = useContext(AppContext)
+    const { editable, setEditable } = useContext(PartyContext)
+    const { hasExtra, setHasExtra } = useContext(PartyContext)
     const { setElement } = useContext(PartyContext)
 
     // Set up states for Grid data
@@ -65,7 +65,7 @@ const WeaponGrid = (props: Props) => {
     // Fetch data from the server
     useEffect(() => {
         if (props.slug) fetchGrid(props.slug)
-    }, [])
+    }, [props.slug])
 
     // Initialize an array of current uncap values for each weapon
     useEffect(() => {
@@ -102,12 +102,12 @@ const WeaponGrid = (props: Props) => {
 
         if (partyUser != undefined && loggedInUser != undefined && partyUser === loggedInUser) {
             setEditable(true)
-            setEditableContext(true)
+            setAppEditable(true)
         }
         
         // Store the important party and state-keeping values
         setPartyId(party.id)
-        setExtra(party.is_extra)
+        setHasExtra(party.is_extra)
         setFound(true)
         setLoading(false)
 
@@ -152,7 +152,7 @@ const WeaponGrid = (props: Props) => {
         setElement(weapon.element)
 
         if (!partyId) {
-            props.createParty()
+            props.createParty(hasExtra)
                 .then(response => {
                     const party = response.data.party
                     setPartyId(party.id)
@@ -300,7 +300,7 @@ const WeaponGrid = (props: Props) => {
                 <ul className="grid_weapons">{ weaponGridElement }</ul>
             </div>
 
-            { (() => { return (extra) ? extraGridElement : '' })() }
+            { (() => { return (hasExtra) ? extraGridElement : '' })() }
 
             {open ? (
                 <SearchModal 

context/PartyContext.tsx

@@ -3,7 +3,11 @@ import { TeamElement } from '~utils/enums'
 
 const PartyContext = createContext({
     element: TeamElement.Any,
-    setElement: (element: TeamElement) => {}
+    setElement: (element: TeamElement) => {},
+    editable: false,
+    setEditable: (editable: boolean) => {},
+    hasExtra: false,
+    setHasExtra: (hasExtra: boolean) => {}
 })
 
 export default PartyContext

pages/p/[party].tsx

@@ -1,159 +1,34 @@
 import React, { useContext, useEffect, useState } from 'react'
-import { withCookies, useCookies } from 'react-cookie'
 import { useRouter } from 'next/router'
 
-import AppContext from '~context/AppContext'
-import api from '~utils/api'
-
 import Party from '~components/Party'
-import Button from '~components/Button'
-
-interface Props {
-    hash: string
-}
 
 const PartyRoute: React.FC = () => {
     const router = useRouter()
     const { party: slug } = router.query
 
-    const { setEditable: setEditableContext } = useContext(AppContext)
+    return (
+        <div id="Content">
+            <Party slug={slug as string} />
+        </div>
+    )
 
-    const [found, setFound] = useState(false)
+    // function renderNotFound() {
-    const [loading, setLoading] = useState(true)
+    //     return (
-    const [editable, setEditable] = useState(false)
+    //         <div id="NotFound">
+    //             <h2>There&apos;s no grid here.</h2>
+    //             <Button type="new">New grid</Button>
+    //         </div>
+    //     )
+    // }
 
-    const [characters, setCharacters] = useState<GridArray<GridCharacter>>({})
+    // if (!found && !loading) {
-    const [weapons, setWeapons] = useState<GridArray<GridWeapon>>({})
+    //     return renderNotFound()
-    const [summons, setSummons] = useState<GridArray<GridSummon>>({})
+    // } else if (found && !loading) {
-
+    //     return render()
-    const [mainWeapon, setMainWeapon] = useState<GridWeapon>()
+    // } else {
-    const [mainSummon, setMainSummon] = useState<GridSummon>()
+    //     return (<div />)
-    const [friendSummon, setFriendSummon] = useState<GridSummon>()
+    // }
-
-    const [partyId, setPartyId] = useState('')
-    const [extra, setExtra] = useState<boolean>(false)
-    const [cookies, _] = useCookies(['user'])
-
-    useEffect(() => {
-        async function fetchGrid(shortcode: string) {
-            return api.endpoints.parties.getOne({ id: shortcode })
-                .then(response => {
-                    const party = response.data.party
-                
-                    const partyUser = (party.user_id) ? party.user_id : undefined
-                    const loggedInUser = (cookies.user) ? cookies.user.user_id : ''
-    
-                    if (partyUser != undefined && loggedInUser != undefined && partyUser === loggedInUser) {
-                        setEditable(true)
-                        setEditableContext(true)
-                    }
-    
-                    const characters = populateCharacters(party.characters)
-                    const weapons = populateWeapons(party.weapons)
-                    const summons = populateSummons(party.summons)
-                    
-                    setExtra(response.data.party.is_extra)
-                    setFound(true)
-                    setLoading(false)
-                    setCharacters(characters)
-                    setWeapons(weapons)
-                    setSummons(summons)
-                    setPartyId(party.id)
-                })
-                .catch(error => {
-                    if (error.response != null) {
-                        if (error.response.status == 404) {
-                            setFound(false)
-                            setLoading(false)
-                        }
-                    } else {
-                        console.error(error)
-                    }
-                })
-        }
-
-        function populateCharacters(list: [GridCharacter]) {
-            let characters: GridArray<GridCharacter> = {}
-
-            list.forEach((object: GridCharacter) => {
-                if (object.position != null)
-                    characters[object.position] = object
-            })
-
-            return characters
-        }
-
-        function populateWeapons(list: [GridWeapon]) {
-            let weapons: GridArray<GridWeapon> = {}
-
-            list.forEach((object: GridWeapon) => {
-                if (object.mainhand)
-                    setMainWeapon(object)
-                else if (!object.mainhand && object.position != null)
-                    weapons[object.position] = object
-            })
-
-            return weapons
-        }
-
-        function populateSummons(list: [GridSummon]) {
-            let summons: GridArray<GridSummon> = {}
-
-            list.forEach((object: GridSummon) => {
-                if (object.main)
-                    setMainSummon(object)
-                else if (object.friend)
-                    setFriendSummon(object)
-                else if (!object.main && !object.friend && object.position != null)
-                    summons[object.position] = object
-            })
-
-            return summons
-        }
-
-        const shortcode: string = slug as string 
-        if (shortcode)
-            fetchGrid(shortcode)
-            
-    }, [slug, cookies.user, setEditableContext])
-
-    function render() {
-        return (
-            <div id="Content">
-                <Party
-                    partyId={partyId}
-                    mainWeapon={mainWeapon}
-                    mainSummon={mainSummon}
-                    friendSummon={friendSummon}
-                    characters={characters}
-                    weapons={weapons}
-                    summons={summons}
-                    editable={editable}
-                    extra={extra}
-                />
-            </div>
-        )
-    }
-
-    function renderNotFound() {
-        return (
-            <div id="NotFound">
-                <h2>There&apos;s no grid here.</h2>
-                <Button type="new">New grid</Button>
-            </div>
-        )
-    }
-
-    if (!found && !loading) {
-        return renderNotFound()
-    } else if (found && !loading) {
-        return render()
-    } else {
-        return (<div />)
-    }
 }
 
-export default 
+export default PartyRoute
-    withCookies(
-        PartyRoute
-    )