Finish

src/components/App/index.tsx

@@ -4,10 +4,10 @@ import './index.css'
 
 import Header from '~components/Header'
 
-import New from '~routes/New'
+import NewRoute from '~routes/NewRoute'
-import Party from '~routes/Party'
+import PartyRoute from '~routes/PartyRoute'
-import Parties from '~routes/Parties'
+import PartiesRoute from '~routes/PartiesRoute'
-import Profile from '~routes/Profile'
+import ProfileRoute from '~routes/ProfileRoute'
 
 
 const App = () => {
@@ -17,10 +17,10 @@ const App = () => {
     return (   
         <div>
             <Header navigate={route} />
-            <Route exact path='/' component={New} />
+            <Route exact path='/' component={NewRoute} />
-            <Route exact path='/parties/' component={Parties} />
+            <Route exact path='/parties/' component={PartiesRoute} />
-            <Route path='/p/:hash' component={Party} />
+            <Route path='/p/:hash' component={PartyRoute} />
-            <Route exact path='/:username' component={Profile} />
+            <Route exact path='/:username' component={ProfileRoute} />
         </div>
     )
 }

src/components/HeaderMenu/index.tsx

@@ -7,7 +7,7 @@ import SignupModal from '~components/SignupModal'
 import { useModal as useSignupModal } from '~utils/useModal'
 import { useModal as useLoginModal } from '~utils/useModal'
 import { Link, Route } from 'react-router-dom'
-import Profile from '~routes/Profile'
+import Profile from '~routes/ProfileRoute'
 
 
 interface Props {

src/components/Party/index.tsx

@@ -21,9 +21,14 @@ export enum GridType {
 import './index.css'
 
 interface Props {
+    mainWeapon?: Weapon
+    mainSummon?: Summon
+    friendSummon?: Summon
+    weapons?: GridArray<Weapon>
+    summons?: GridArray<Summon>
     editable: boolean
     exists: boolean
-    pushHistory: (path: string) => void
+    pushHistory?: (path: string) => void
 }
 
 const Party = (props: Props) => {
@@ -43,6 +48,14 @@ const Party = (props: Props) => {
     const [mainSummon, setMainSummon] = useState<Summon>()
     const [friendSummon, setFriendSummon] = useState<Summon>()
 
+    useEffect(() => {
+        setMainWeapon(props.mainWeapon)
+        setMainSummon(props.mainSummon)
+        setFriendSummon(props.friendSummon)
+        setWeapons(props.weapons || {})
+        setSummons(props.summons || {})
+    }, [props.mainWeapon, props.mainSummon, props.friendSummon, props.weapons, props.summons])
+
     const weaponGrid = (
         <WeaponGrid 
             userId={cookies.user ? cookies.user.userId : ''} 
@@ -72,28 +85,23 @@ const Party = (props: Props) => {
         <CharacterGrid
             editable={props.editable}
             exists={props.exists}
-            onSelect={saveCharacter}
+            onSelect={itemSelected}
         />
     )
 
-    const [currentGrid, setCurrentGrid] = useState<JSX.Element>(weaponGrid)
     const [currentTab, setCurrentTab] = useState<GridType>(GridType.Weapon)
-
     const [partyId, setPartyId] = useState('')
 
     function segmentClicked(event: React.ChangeEvent<HTMLInputElement>) {
         switch(event.target.value) {
             case 'characters':
                 setCurrentTab(GridType.Character)
-                setCurrentGrid(characterGrid)
                 break
             case 'weapons':
                 setCurrentTab(GridType.Weapon)
-                setCurrentGrid(weaponGrid)
                 break
             case 'summons':
                 setCurrentTab(GridType.Summon)
-                setCurrentGrid(summonGrid)
                 break
             default: 
                 break
@@ -115,10 +123,10 @@ const Party = (props: Props) => {
                 })
                 .then(partyId => {
                     setPartyId(partyId)
-                    save(partyId, type, item, position)
+                    saveItem(partyId, type, item, position)
                 })
         } else {
-            save(partyId, type, item, position)
+            saveItem(partyId, type, item, position)
         }
     }
 
@@ -132,7 +140,7 @@ const Party = (props: Props) => {
         return await api.endpoints.parties.create(body, headers)
     }
 
-    function save(partyId: string, type: GridType, item: Character | Weapon | Summon, position: number) {
+    function saveItem(partyId: string, type: GridType, item: Character | Weapon | Summon, position: number) {
         switch(type) {
             case GridType.Class:
                 saveClass()
@@ -157,6 +165,7 @@ const Party = (props: Props) => {
         }
     }
     
+    // Weapons
     function storeWeapon(weapon: Weapon, position: number) {
         if (position == -1) {
             setMainWeapon(weapon)
@@ -179,6 +188,7 @@ const Party = (props: Props) => {
         }, headers)
     }
 
+    // Summons
     function storeSummon(summon: Summon, position: number) {
         if (position == -1) {
             setMainSummon(summon)
@@ -204,10 +214,12 @@ const Party = (props: Props) => {
         }, headers)
     }
 
+    // Character
     function saveCharacter(character: Character, position: number, party: string) {
         // TODO: Implement this
     }
 
+    // Class
     function saveClass() {
         // TODO: Implement this
     }
@@ -219,7 +231,18 @@ const Party = (props: Props) => {
                 onClick={segmentClicked}
             />
             
-            {currentGrid}
+            {
+                (() => {
+                    switch(currentTab) {
+                        case GridType.Character:
+                            return characterGrid
+                        case GridType.Weapon:
+                            return weaponGrid
+                        case GridType.Summon:
+                            return summonGrid
+                    }
+                })()
+            }
         </div>
     )
 }

src/components/PartySegmentedControl/index.tsx

@@ -16,6 +16,7 @@ interface Props {
 }
 
 const PartySegmentedControl = (props: Props) => {
+
     return (
         <div>
             <SegmentedControl>
@@ -29,21 +30,21 @@ const PartySegmentedControl = (props: Props) => {
                 <Segment 
                     groupName="grid"
                     name="characters"
-                    selected={props.selectedTab === GridType.Character}
+                    selected={props.selectedTab == GridType.Character}
                     onClick={props.onClick}
                 >Characters</Segment>
 
                 <Segment 
                     groupName="grid"
                     name="weapons"
-                    selected={props.selectedTab === GridType.Weapon}
+                    selected={props.selectedTab == GridType.Weapon}
                     onClick={props.onClick}
                 >Weapons</Segment>
 
                 <Segment 
                     groupName="grid"
                     name="summons"
-                    selected={props.selectedTab === GridType.Summon}
+                    selected={props.selectedTab == GridType.Summon}
                     onClick={props.onClick}
                 >Summons</Segment>
             </SegmentedControl>

src/routes/NewRoute/index.tsx

@@ -6,7 +6,7 @@ import Party from '~components/Party'
 interface Props {}
 interface NewProps extends RouteComponentProps<Props> {}
 
-const New: React.FC<NewProps> = () => {
+const NewRoute: React.FC<NewProps> = () => {
     function callback(path: string) {
         // This is scuffed, how do we do this natively?
         window.history.replaceState(null, `Grid Tool`, `${path}`)
@@ -23,4 +23,4 @@ const New: React.FC<NewProps> = () => {
     )
 }
 
-export default New
+export default NewRoute

src/routes/PartiesRoute/index.tsx

@@ -4,7 +4,7 @@ interface State {
     parties: {id: string, hash: string}[]
 }
 
-class Parties extends React.Component {
+class PartiesRoute extends React.Component {
     state: State
     
     constructor(props) {
@@ -36,4 +36,4 @@ class Parties extends React.Component {
     }
 }
 
-export default Parties
+export default PartiesRoute

src/routes/PartyRoute/index.tsx

@@ -3,10 +3,7 @@ import { withCookies, useCookies } from 'react-cookie'
 import { RouteComponentProps, withRouter } from 'react-router-dom'
 import api from '~utils/api'
 
-import PartySegmentedControl from '~components/PartySegmentedControl'
+import Party from '~components/Party'
-import WeaponGrid from '~components/WeaponGrid'
-import SummonGrid from '~components/SummonGrid'
-import CharacterGrid from '~components/CharacterGrid'
 import Button from '~components/Button'
 
 interface Props {
@@ -15,7 +12,7 @@ interface Props {
 
 interface PartyProps extends RouteComponentProps<Props> {}
 
-const Party: React.FC<PartyProps> = ({ match }) => {
+const PartyRoute: React.FC<PartyProps> = ({ match }) => {
     const [found, setFound] = useState(false)
     const [loading, setLoading] = useState(true)
     const [editable, setEditable] = useState(false)
@@ -28,9 +25,7 @@ const Party: React.FC<PartyProps> = ({ match }) => {
     const [friendSummon, setFriendSummon] = useState<Summon>()
 
     const [partyId, setPartyId] = useState('')
-    const [cookies, setCookie] = useCookies(['userId'])
+    const [cookies, setCookie] = useCookies(['user'])
-    const [selectedTab, setSelectedTab] = useState('weapons')
-    const [tab, setTab] = useState<JSX.Element>()
     const shortcode = match.params.hash || ''
 
     useEffect(() => {
@@ -84,68 +79,18 @@ const Party: React.FC<PartyProps> = ({ match }) => {
             })
     }
 
-    function segmentClicked(event: React.ChangeEvent<HTMLInputElement>) {
-        setSelectedTab(event.target.value)
-
-        switch(event.target.value) {
-            case 'weapons':
-                setTab((
-                    <WeaponGrid
-                        userId={cookies.user ? cookies.user.user_id : ''}
-                        partyId={partyId}
-                        mainhand={mainWeapon}
-                        grid={weapons}
-                        editable={editable}
-                        exists={true}
-                        found={found}
-                    />
-                ))
-                break
-            case 'summons':
-                setTab((
-                    <SummonGrid 
-                        userId={cookies.user ? cookies.user.user_id : ''}
-                        partyId={partyId}
-                        main={mainSummon}
-                        friend={friendSummon}
-                        grid={summons}
-                        editable={editable}
-                        exists={true}
-                        found={found}
-                    />
-                ))
-                break
-            case 'characters':
-                setTab((
-                    <CharacterGrid
-                        editable={true}
-                    />
-                ))
-                break
-            default: 
-                break
-        }
-    }
-
     function render() {
         return (
             <div id="Content">
-                <PartySegmentedControl
+                <Party
-                    selectedTab={selectedTab}
+                    mainWeapon={mainWeapon}
-                    onClick={segmentClicked}
+                    mainSummon={mainSummon}
+                    friendSummon={friendSummon}
+                    weapons={weapons}
+                    summons={summons}
+                    editable={editable}
+                    exists={found}
                 />
-
-                {tab || (
-                    <WeaponGrid 
-                        userId={cookies.user ? cookies.user.user_id : ''}
-                        partyId={partyId}
-                        mainhand={mainWeapon}
-                        grid={weapons}
-                        editable={editable}
-                        exists={true}
-                        found={found} 
-                    />
-                )}
             </div>
         )
     }
@@ -171,6 +116,6 @@ const Party: React.FC<PartyProps> = ({ match }) => {
 export default 
     withCookies(
         withRouter(
-            Party
+            PartyRoute
         )
     )

src/routes/ProfileRoute/index.tsx

@@ -25,7 +25,7 @@ interface Party {
 
 interface ProfileProps extends RouteComponentProps<Props> {}
 
-const Profile: React.FC<ProfileProps> = ({ history, match }) => {
+const ProfileRoute: React.FC<ProfileProps> = ({ history, match }) => {
     const [cookies, setCookie] = useCookies(['user'])
 
     const [found, setFound] = useState(false)
@@ -128,6 +128,6 @@ const Profile: React.FC<ProfileProps> = ({ history, match }) => {
 export default 
     withCookies(
         withRouter(
-            Profile
+            ProfileRoute
         )
     )