Merge pull request #1 from jedmund/refactor-grid

Refactored to support multiple types of grids

.gitignore

@@ -44,8 +44,8 @@ dist/
 
 # Source images
 # Instructions will be provided to download these from the game
-src/images/grid
-src/images/mainhand
+src/images/weapon*
+src/images/summon*
 
 # Typescript v1 declaration files
 typings/

src/components/App/index.css

@@ -26,7 +26,7 @@ h1 {
     display: flex;
     flex-direction: column;
     gap: 24px;
-    margin-top: 96px;
+    margin-top: 24px;
 }
 
 #NotFound {

src/components/App/index.tsx

@@ -4,10 +4,10 @@ import './index.css'
 
 import Header from '~components/Header'
 
-import New from '~routes/New'
-import Party from '~routes/Party'
-import Parties from '~routes/Parties'
-import Profile from '~routes/Profile'
+import NewRoute from '~routes/NewRoute'
+import PartyRoute from '~routes/PartyRoute'
+import PartiesRoute from '~routes/PartiesRoute'
+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='/parties/' component={Parties} />
-            <Route path='/p/:hash' component={Party} />
-            <Route exact path='/:username' component={Profile} />
+            <Route exact path='/' component={NewRoute} />
+            <Route exact path='/parties/' component={PartiesRoute} />
+            <Route path='/p/:hash' component={PartyRoute} />
+            <Route exact path='/:username' component={ProfileRoute} />
         </div>
     )
 }

src/components/CharacterGrid/index.tsx

@@ -3,14 +3,23 @@ import CharacterUnit from '~components/CharacterUnit'
 
 import './index.css'
 
+export enum GridType {
+    Class,
+    Character,
+    Weapon,
+    Summon
+}
+
 interface Props {
     editable: boolean
+    exists: boolean
+    onSelect: (type: GridType, character: Character, position: number) => void
 }
 
 const CharacterGrid = (props: Props) => {
     const numCharacters: number = 5
 
-    const [characters, setCharacters] = useState<GridArray>({})
+    const [characters, setCharacters] = useState<GridArray<Character>>({})
     const [partyId, setPartyId] = useState('')
 
     return (

src/components/GridRep/index.tsx

@@ -15,7 +15,7 @@ const GridRep = (props: Props) => {
     const numWeapons: number = 9
 
     const [mainhand, setMainhand] = useState<Weapon>()
-    const [weapons, setWeapons] = useState<GridArray>({})
+    const [weapons, setWeapons] = useState<GridArray<Weapon>>({})
 
     useEffect(() => {
         configure()

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

@@ -0,0 +1,250 @@
+import React, { useEffect, useState } from 'react'
+import { useCookies } from 'react-cookie'
+import api from '~utils/api'
+
+// UI Elements
+import PartySegmentedControl from '~components/PartySegmentedControl'
+
+// Grids
+import WeaponGrid from '~components/WeaponGrid'
+import SummonGrid from '~components/SummonGrid'
+import CharacterGrid from '~components/CharacterGrid'
+
+// GridType
+export enum GridType {
+    Class,
+    Character,
+    Weapon,
+    Summon
+}
+
+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
+}
+
+const Party = (props: Props) => {
+    const [cookies, setCookie] = useCookies(['user'])
+
+    const headers = (cookies.user) ? {
+        headers: {
+            'Authorization': `Bearer ${cookies.user.access_token}`
+        }
+    } : {}
+
+    // Grid data
+    const [weapons, setWeapons] = useState<GridArray<Weapon>>({})
+    const [summons, setSummons] = useState<GridArray<Summon>>({})
+
+    const [mainWeapon, setMainWeapon] = useState<Weapon>()
+    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 : ''} 
+            mainhand={mainWeapon}
+            grid={weapons}
+            editable={props.editable} 
+            exists={props.exists}
+            onSelect={itemSelected}
+            pushHistory={props.pushHistory} 
+        />
+    )
+
+    const summonGrid = (
+        <SummonGrid 
+            userId={cookies.user ? cookies.user.userId : ''} 
+            main={mainSummon}
+            friend={friendSummon}
+            grid={summons}
+            editable={props.editable} 
+            exists={props.exists} 
+            onSelect={itemSelected}
+            pushHistory={props.pushHistory} 
+        />
+    )
+
+    const characterGrid = (
+        <CharacterGrid
+            editable={props.editable}
+            exists={props.exists}
+            onSelect={itemSelected}
+        />
+    )
+
+    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)
+                break
+            case 'weapons':
+                setCurrentTab(GridType.Weapon)
+                break
+            case 'summons':
+                setCurrentTab(GridType.Summon)
+                break
+            default: 
+                break
+        }
+    }
+
+    function itemSelected(type: GridType, item: Character | Weapon | Summon, position: number) {
+        if (!partyId) {
+            createParty()
+                .then(response => {
+                    return response.data.party
+                })
+                .then(party => {
+                    if (props.pushHistory) {   
+                        props.pushHistory(`/p/${party.shortcode}`)
+                    }
+
+                    return party.id
+                })
+                .then(partyId => {
+                    setPartyId(partyId)
+                    saveItem(partyId, type, item, position)
+                })
+        } else {
+            saveItem(partyId, type, item, position)
+        }
+    }
+
+    async function createParty() {
+        const body = (cookies.user.userId === undefined) ? {} : {
+            party: {
+                user_id: cookies.user.userId
+            }
+        }
+
+        return await api.endpoints.parties.create(body, headers)
+    }
+
+    function saveItem(partyId: string, type: GridType, item: Character | Weapon | Summon, position: number) {
+        switch(type) {
+            case GridType.Class:
+                saveClass()
+                break
+            case GridType.Character:
+                saveCharacter(item as Character, position, partyId)
+                break
+            case GridType.Weapon:
+                const weapon = item as Weapon
+                saveWeapon(weapon, position, partyId)
+                    .then(() => {
+                        storeWeapon(weapon, position)
+                    })
+                break
+            case GridType.Summon:
+                const summon = item as Summon
+                saveSummon(summon, position, partyId)
+                    .then(() => {
+                        storeSummon(summon, position)
+                    })
+                break
+        }
+    }
+    
+    // Weapons
+    function storeWeapon(weapon: Weapon, position: number) {
+        if (position == -1) {
+            setMainWeapon(weapon)
+        } else {
+            // Store the grid unit weapon at the correct position
+            let newWeapons = Object.assign({}, weapons)
+            newWeapons[position] = weapon
+            setWeapons(newWeapons)
+        }
+    }
+
+    async function saveWeapon(weapon: Weapon, position: number, party: string) {
+        await api.endpoints.weapons.create({
+            'weapon': {
+                'party_id': party,
+                'weapon_id': weapon.id,
+                'position': position,
+                'mainhand': (position == -1)
+            }
+        }, headers)
+    }
+
+    // Summons
+    function storeSummon(summon: Summon, position: number) {
+        if (position == -1) {
+            setMainSummon(summon)
+        } else if (position == 4) {
+            setFriendSummon(summon)
+        } else {
+            // Store the grid unit summon at the correct position
+            let newSummons = Object.assign({}, summons)
+            newSummons[position] = summon
+            setSummons(newSummons)
+        }
+    }
+
+    async function saveSummon(summon: Summon, position: number, party: string) {
+        await api.endpoints.summons.create({
+            'summon': {
+                'party_id': party,
+                'summon_id': summon.id,
+                'position': position,
+                'main': (position == -1),
+                'friend': (position == 4)
+            }
+        }, headers)
+    }
+
+    // Character
+    function saveCharacter(character: Character, position: number, party: string) {
+        // TODO: Implement this
+    }
+
+    // Class
+    function saveClass() {
+        // TODO: Implement this
+    }
+
+    return (
+        <div>
+            <PartySegmentedControl
+                selectedTab={currentTab}
+                onClick={segmentClicked}
+            />
+            
+            {
+                (() => {
+                    switch(currentTab) {
+                        case GridType.Character:
+                            return characterGrid
+                        case GridType.Weapon:
+                            return weaponGrid
+                        case GridType.Summon:
+                            return summonGrid
+                    }
+                })()
+            }
+        </div>
+    )
+}
+
+export default Party

src/components/PartySegmentedControl/index.tsx

@@ -2,39 +2,49 @@ import React from 'react'
 import SegmentedControl from '~components/SegmentedControl'
 import Segment from '~components/Segment'
 
+// GridType
+export enum GridType {
+    Class,
+    Character,
+    Weapon,
+    Summon
+}
+
 interface Props {
-    selectedTab: string
+    selectedTab: GridType
     onClick: (event: React.ChangeEvent<HTMLInputElement>) => void
 }
 
 const PartySegmentedControl = (props: Props) => {
+
     return (
         <div>
             <SegmentedControl>
-                <Segment
+                {/* <Segment
                     groupName="grid"
                     name="class"
-                    selected={props.selectedTab === 'class'}
+                    selected={props.selectedTab === GridType.Class}
                     onClick={props.onClick}
-                >Class</Segment>
+                >Class</Segment> */}
+
                 <Segment 
                     groupName="grid"
                     name="characters"
-                    selected={props.selectedTab === 'characters'}
+                    selected={props.selectedTab == GridType.Character}
                     onClick={props.onClick}
                 >Characters</Segment>
 
                 <Segment 
                     groupName="grid"
                     name="weapons"
-                    selected={props.selectedTab === 'weapons'}
+                    selected={props.selectedTab == GridType.Weapon}
                     onClick={props.onClick}
                 >Weapons</Segment>
 
                 <Segment 
                     groupName="grid"
                     name="summons"
-                    selected={props.selectedTab === 'summons'}
+                    selected={props.selectedTab == GridType.Summon}
                     onClick={props.onClick}
                 >Summons</Segment>
             </SegmentedControl>

src/components/SearchModal/index.tsx

@@ -5,14 +5,16 @@ import api from '~utils/api'
 import Modal from '~components/Modal'
 import Overlay from '~components/Overlay'
 import WeaponResult from '~components/WeaponResult'
+import SummonResult from '~components/SummonResult'
 
 import './index.css'
 
 interface Props {
     close: () => void
-    send: (weapon: Weapon, position: number) => any
+    send: (object: Weapon | Summon, position: number) => any
     placeholderText: string
     fromPosition: number
+    object: 'weapons' | 'characters' | 'summons'
 }
 
 interface State {
@@ -45,7 +47,7 @@ class SearchModal extends React.Component<Props, State> {
     }
 
     fetchResults = (query: string) => {
-        api.search(query)
+        api.search(this.props.object, query)
             .then((response) => {
                 const data = response.data
                 const totalResults = data.length
@@ -73,13 +75,27 @@ class SearchModal extends React.Component<Props, State> {
         }
     }
 
-    sendData = (result: Weapon) => {
+    sendData = (result: Weapon | Summon) => {
         this.props.send(result, this.props.fromPosition)
         this.props.close()
     }
 
     renderSearchResults = () => {
-        const { results } = this.state  
+        const { results } = this.state
+         
+        switch(this.props.object) {
+            case 'weapons':
+                return this.renderWeaponSearchResults(results)
+
+            case 'summons':
+                return this.renderSummonSearchResults(results)
+
+            case 'characters':
+                return (<div />) 
+        }
+    }
+
+    renderWeaponSearchResults = (results: { [key: string]: any }) => {
         return (
             <ul id="results_container">
                 { results.map( (result: Weapon) => {
@@ -89,11 +105,21 @@ class SearchModal extends React.Component<Props, State> {
         )
     }
 
+    renderSummonSearchResults = (results: { [key: string]: any }) => {
+        return (
+            <ul id="results_container">
+                { results.map( (result: Summon) => {
+                    return <SummonResult key={result.id} data={result} onClick={() => { this.sendData(result) }} />
+                })}
+            </ul>
+        )
+    }
+
     renderEmptyState = () => {
         let string = ''
 
         if (this.state.query === '') {
-            string = 'No weapons'
+            string = `No ${this.props.object}`
         } else {
             string = `No results found for '${this.state.query}'`
         }

src/components/SegmentedControl/index.css

@@ -1,6 +1,7 @@
 .SegmentedControlWrapper {
     display: flex;
     justify-content: center;
+    margin-bottom: 24px;
 }
 
 .SegmentedControl {

src/components/SummonGrid/index.tsx

@@ -1,29 +1,49 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
+import { useCookies } from 'react-cookie'
+import api from '~utils/api'
+
 import SummonUnit from '~components/SummonUnit'
 
 import './index.css'
 
+// GridType
+export enum GridType {
+    Class,
+    Character,
+    Weapon,
+    Summon
+}
+
+// Props
 interface Props {
+    userId?: string
+    partyId?: string
+    main?: Summon | undefined
+    friend?: Summon | undefined
+    grid: GridArray<Summon>
     editable: boolean
+    exists: boolean
+    found?: boolean
+    onSelect: (type: GridType, summon: Summon, position: number) => void
+    pushHistory?: (path: string) => void
 }
 
 const SummonGrid = (props: Props) => {
     const numSummons: number = 4
 
-    const [mainSummon, setMainSummon] = useState<Summon>()
-    const [friendSummon, setFriendSummon] = useState<Summon>()
-    const [summons, setSummons] = useState<GridArray>({})
-    const [partyId, setPartyId] = useState('')
+    function receiveSummon(summon: Summon, position: number) {
+        props.onSelect(GridType.Summon, summon, position)
+    }
 
     return (
         <div className="SummonGrid">
             <SummonUnit
                 editable={props.editable}
                 key="grid_main_summon"
-                onReceiveData={() => {}}
+                onReceiveData={receiveSummon}
                 position={-1}
                 unitType={0}
-                summon={mainSummon}
+                summon={props.main}
             />
 
             <ul id="grid_summons">
@@ -33,10 +53,10 @@ const SummonGrid = (props: Props) => {
                             <li key={`grid_unit_${i}`} >
                                 <SummonUnit 
                                     editable={props.editable}
-                                    onReceiveData={() => {}} 
+                                    onReceiveData={receiveSummon} 
                                     position={i} 
                                     unitType={1}
-                                    summon={summons[i]}
+                                    summon={props.grid[i]}
                                 />
                             </li>
                         )
@@ -47,10 +67,10 @@ const SummonGrid = (props: Props) => {
             <SummonUnit
                 editable={props.editable}
                 key="grid_friend_summon"
-                onReceiveData={() => {}}
-                position={-1}
+                onReceiveData={receiveSummon}
+                position={4}
                 unitType={2}
-                summon={friendSummon}
+                summon={props.friend}
             />
         </div>
     )

src/components/SummonResult/index.css

@@ -0,0 +1,48 @@
+.SummonResult {
+    -webkit-font-smoothing: antialiased;
+
+    border-radius: 6px;
+    display: flex;
+    font-family: -apple-system, "Helvetica Neue", "Lucida Grande";
+    gap: 8px;
+    padding: 12px;
+}
+
+.SummonResult img {
+    background: #e9e9e9;
+    border-radius: 6px;
+    display: inline-block;
+    height: 72px;
+    width: 120px;
+}
+
+.SummonResult h5 {
+    color: #555;
+    display: inline-block;
+    font-size: 18px;
+    font-weight: 500;
+    margin: 2px 4px 4px 0;
+}
+
+.SummonResult .WeaponLabelIcon {
+    margin-right: 4px;
+}
+
+.SummonResult .stars {
+    display: inline-block;
+    color: #FFA15E;
+    font-size: 21px;
+}
+
+.SummonResult .stars > span {
+    color: #65DAFF;
+}
+
+.SummonResult:hover {
+    background: #e9e9e9;
+    cursor: pointer;
+}
+
+.SummonResult:hover .image_placeholder {
+    background: #dadada;
+}

src/components/SummonResult/index.tsx

@@ -0,0 +1,41 @@
+import React from 'react'
+import WeaponLabelIcon from '~components/WeaponLabelIcon'
+
+import gridImages from '../../images/summon-grid/*.jpg'
+
+import './index.css'
+
+interface Props {
+    data: Summon
+    onClick: () => void
+}
+
+const Element = ['null', 'wind', 'fire', 'water', 'earth', 'dark', 'light']
+
+class SummonResult extends React.Component<Props> {
+    render() {
+        let imgSrc
+
+        const summon = this.props.data
+        if (process.env.NODE_ENV === 'development') {
+            imgSrc = gridImages[summon.granblue_id]
+        } else if (process.env.NODE_ENV === 'production') {
+            imgSrc = `${process.env.SIERO_IMG_URL}/summon-grid/${summon.granblue_id}.jpg`
+        }
+
+        return (
+            <li className="SummonResult" onClick={this.props.onClick}>
+                <img alt={summon.name.en} src={imgSrc} />
+                <div>
+                    <div>
+                        <h5>{summon.name.en}</h5>
+                        <div className="stars">⭑⭑⭑{(summon.uncap.flb) ? <span>⭑</span> : ''}{(summon.uncap.ulb) ? <span>⭑</span> : ''}</div>
+                    </div>
+                    <WeaponLabelIcon labelType={Element[summon.element]} />
+                </div>
+            </li>
+        )
+    }
+}
+
+export default SummonResult

src/components/SummonUnit/index.tsx

@@ -1,11 +1,16 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import classnames from 'classnames'
+import { useModal as useModal } from '~utils/useModal'
+
+import SearchModal from '~components/SearchModal'
 import UncapIndicator from '~components/UncapIndicator'
 
-import './index.css'
-
+import mainImages from '../../images/summon-main/*.jpg'
+import gridImages from '../../images/summon-grid/*.jpg'
 import Plus from '../../../assets/plus.svg'
 
+import './index.css'
+
 interface Props {
     onReceiveData: (summon: Summon, position: number) => void
     summon: Summon | undefined
@@ -15,8 +20,9 @@ interface Props {
 }
 
 const SummonUnit = (props: Props) => {
-    const numSummons: number = 4
-    const openModal = () => {}
+    const [imageUrl, setImageUrl] = useState('')
+    
+    const { open, openModal, closeModal } = useModal()
 
     const openModalIfEditable = (props.editable) ? openModal : () => {}
 
@@ -31,10 +37,53 @@ const SummonUnit = (props: Props) => {
 
     const summon = props.summon
 
+    useEffect(() => {
+        generateImageUrl()
+    })
+
+    function generateImageUrl() {
+        let imgSrc
+        if (props.summon) {
+            const summon = props.summon!
+    
+            // Generate the correct source for the weapon
+            if (process.env.NODE_ENV === 'development') {
+                if (props.unitType == 0 || props.unitType == 2)
+                    imgSrc = mainImages[summon.granblue_id]
+                else
+                    imgSrc = gridImages[summon.granblue_id]
+            } else if (process.env.NODE_ENV === 'production') {
+                if (props.unitType == 0 || props.unitType == 2)
+                    imgSrc = `${process.env.SIERO_IMG_URL}/summon-main/${summon.granblue_id}.jpg`
+                else
+                    imgSrc = `${process.env.SIERO_IMG_URL}/summon-grid/${summon.granblue_id}.jpg`
+            }
+        }
+        
+        setImageUrl(imgSrc)
+    }
+
+    function sendData(object: Weapon | Summon, position: number) {
+        if (isSummon(object)) {
+            props.onReceiveData(object, position)
+        }
+    }
+
+    function isSummon(object: Weapon | Summon): object is Summon {
+        // There aren't really any unique fields here
+        return (object as Summon).granblue_id !== undefined
+    }
+
     return (
         <div>
             <div className={classes} onClick={openModalIfEditable}>
                 <div className="SummonImage">
+                    { 
+                        (imageUrl != '') 
+                            ? <img className="grid_image" src={imageUrl} />
+                            : <img className="grid_image" />
+
+                    }
                     { (props.editable) ? <span className='icon'><Plus /></span> : '' }
                 </div>
                 <UncapIndicator 
@@ -44,6 +93,15 @@ const SummonUnit = (props: Props) => {
                 />
                 <h3 className="SummonName">{summon?.name.en}</h3>
             </div>
+            {open ? (
+                <SearchModal 
+                    close={closeModal}
+                    send={sendData}
+                    fromPosition={props.position}
+                    object="summons"
+                    placeholderText="Search for a summon..."
+                />
+            ) : null}
         </div>
     )
 }

src/components/WeaponGrid/index.tsx

@@ -3,109 +3,35 @@ import { useCookies } from 'react-cookie'
 import api from '~utils/api'
 
 import WeaponUnit from '~components/WeaponUnit'
-import Button from '~components/Button'
 
 import './index.css'
 
+// GridType
+export enum GridType {
+    Class,
+    Character,
+    Weapon,
+    Summon
+}
+
+// Props
 interface Props {
     userId?: string
     partyId?: string
     mainhand?: Weapon | undefined
-    grid?: GridArray
+    grid: GridArray<Weapon>
     editable: boolean
     exists: boolean
     found?: boolean
+    onSelect: (type: GridType, weapon: Weapon, position: number) => void
     pushHistory?: (path: string) => void
 }
 
-type GridArray = { [key: number]: Weapon }
-
 const WeaponGrid = (props: Props) => {
     const numWeapons: number = 9
 
-    const [mainhand, setMainhand] = useState<Weapon>()
-    const [weapons, setWeapons] = useState<GridArray>({})
-    const [partyId, setPartyId] = useState('')
-
-    const [cookies, setCookie] = useCookies(['user'])
-
-    useEffect(() => {
-        if (props.exists && props.found)
-            configure()
-    }, [props.mainhand, props.grid, props.partyId])
-
-    function configure() {
-        setMainhand(props.mainhand)
-        setWeapons(props.grid || {})
-        setPartyId(props.partyId || '')
-    }
-
-    function createParty() {
-        const headers = (cookies.user != null) ? {
-            headers: {
-                'Authorization': `Bearer ${cookies.user.access_token}`
-            }
-        } : {}
-
-        const body = (props.userId === undefined) ? {} : {
-            party: {
-                user_id: props.userId
-            }
-        }
-
-        return api.endpoints.parties.create(body, headers)
-    }
-
     function receiveWeapon(weapon: Weapon, position: number) {
-        const isMainhand = position == -1
-
-        if (isMainhand) {
-            setMainhand(weapon)
-        } else {
-            // Store the grid unit weapon at the correct position
-            let newWeapons = Object.assign({}, weapons)
-            newWeapons[position] = weapon
-            setWeapons(newWeapons)
-        }
-
-        if (partyId) {
-            saveWeapon(partyId, weapon, position)
-        } else {
-            createParty()
-                .then(response => {
-                    return response.data.party
-                })
-                .then(party => {
-                    if (props.pushHistory) {   
-                        props.pushHistory(`/p/${party.shortcode}`)
-                    }
-
-                    return party.id
-                })
-                .then(partyId => {
-                    saveWeapon(partyId, weapon, position)
-                    setPartyId(partyId)
-                })
-        }
-    }
-
-    function saveWeapon(pid: string, weapon: Weapon, position: number) {
-        const headers = (cookies.user != null) ? {
-            headers: {
-                'Authorization': `Bearer ${cookies.user.access_token}`
-            }
-        } : {}
-
-        const body = {
-            'weapon': {
-                'party_id': pid,
-                'weapon_id': weapon.id,
-                'position': position,
-                'mainhand': (position == -1)
-            }
-        }
-
-        api.endpoints.weapons.create(body, headers)
+        props.onSelect(GridType.Weapon, weapon, position)
     }
 
     return (
@@ -116,7 +42,7 @@ const WeaponGrid = (props: Props) => {
                 onReceiveData={receiveWeapon} 
                 position={-1} 
                 unitType={0}
-                weapon={mainhand}
+                weapon={props.mainhand}
             />
 
             <ul id="grid_weapons">
@@ -129,7 +55,7 @@ const WeaponGrid = (props: Props) => {
                                     onReceiveData={receiveWeapon} 
                                     position={i} 
                                     unitType={1}
-                                    weapon={weapons[i]}
+                                    weapon={props.grid[i]}
                                 />
                             </li>
                         )

src/components/WeaponResult/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import WeaponLabelIcon from '~components/WeaponLabelIcon'
 
-import gridImages from '../../images/grid/*.jpg'
+import gridImages from '../../images/weapon-grid/*.jpg'
 
 import './index.css'
 
@@ -21,7 +21,7 @@ class WeaponResult extends React.Component<Props> {
         if (process.env.NODE_ENV === 'development') {
             imgSrc = gridImages[weapon.granblue_id]
         } else if (process.env.NODE_ENV === 'production') {
-            imgSrc = `${process.env.SIERO_IMG_URL}/grid/${weapon.granblue_id}.jpg`
+            imgSrc = `${process.env.SIERO_IMG_URL}/weapon-grid/${weapon.granblue_id}.jpg`
         }
 
         return (

src/components/WeaponUnit/index.tsx

@@ -5,8 +5,8 @@ import { useModal as useModal } from '~utils/useModal'
 import SearchModal from '~components/SearchModal'
 import UncapIndicator from '~components/UncapIndicator'
 
-import mainhandImages from '../../images/mainhand/*.jpg'
-import gridImages from '../../images/grid/*.jpg'
+import mainImages from '../../images/weapon-main/*.jpg'
+import gridImages from '../../images/weapon-grid/*.jpg'
 import Plus from '../../../assets/plus.svg'
 
 import './index.css'
@@ -19,7 +19,7 @@ interface Props {
     unitType: 0 | 1
 }
 
-function WeaponUnit(props: Props) {
+const WeaponUnit = (props: Props) => {
     const [imageUrl, setImageUrl] = useState('')
 
     const { open, openModal, closeModal } = useModal()
@@ -48,20 +48,30 @@ function WeaponUnit(props: Props) {
             // Generate the correct source for the weapon
             if (process.env.NODE_ENV === 'development') {
                 if (props.unitType == 0)
-                    imgSrc = mainhandImages[weapon.granblue_id]
+                    imgSrc = mainImages[weapon.granblue_id]
                 else
                     imgSrc = gridImages[weapon.granblue_id]
             } else if (process.env.NODE_ENV === 'production') {
                 if (props.unitType == 0)
-                    imgSrc = `${process.env.SIERO_IMG_URL}/mainhand/${weapon.granblue_id}.jpg`
+                    imgSrc = `${process.env.SIERO_IMG_URL}/weapon-main/${weapon.granblue_id}.jpg`
                 else
-                    imgSrc = `${process.env.SIERO_IMG_URL}/grid/${weapon.granblue_id}.jpg`
+                    imgSrc = `${process.env.SIERO_IMG_URL}/weapon-grid/${weapon.granblue_id}.jpg`
             }
         }
         
         setImageUrl(imgSrc)
     }
 
+    function sendData(object: Weapon | Summon, position: number) {
+        if (isWeapon(object)) {
+            props.onReceiveData(object, position)
+        }
+    }
+
+    function isWeapon(object: Weapon | Summon): object is Weapon {
+        return (object as Weapon).proficiency !== undefined
+    }
+
     return (
         <div>
             <div className={classes} onClick={openModalIfEditable}>
@@ -84,8 +94,9 @@ function WeaponUnit(props: Props) {
             {open ? (
                 <SearchModal 
                     close={closeModal}
-                    send={props.onReceiveData}
+                    send={sendData}
                     fromPosition={props.position}
+                    object="weapons"
                     placeholderText="Search for a weapon..."
                 />
             ) : null}

src/routes/New/index.tsx

@@ -1,76 +0,0 @@
-import React, { useState } from 'react'
-import { RouteComponentProps } from 'react-router-dom'
-import { useCookies } from 'react-cookie'
-import WeaponGrid from '~components/WeaponGrid'
-import SegmentedControl from '~components/SegmentedControl'
-import Segment from '~components/Segment'
-import PartySegmentedControl from '~components/PartySegmentedControl'
-import SummonGrid from '~components/SummonGrid'
-import CharacterGrid from '~components/CharacterGrid'
-
-interface Props {}
-interface NewProps extends RouteComponentProps<Props> {}
-
-const New: React.FC<NewProps> = (props: NewProps) => {
-    const [cookies, setCookie] = useCookies(['user'])
-    const [selectedTab, setSelectedTab] = useState('weapons')
-    const [grid, setGrid] = useState<JSX.Element>(
-        <WeaponGrid 
-            userId={cookies.user ? cookies.user.user_id : ''} 
-            editable={true} 
-            exists={false} 
-            pushHistory={callback} 
-        />
-    )
-
-    function callback(path: string) {
-        // This is scuffed, how do we do this natively?
-        window.history.replaceState(null, `Grid Tool`, `${path}`)
-    }
-
-    function segmentClicked(event: React.ChangeEvent<HTMLInputElement>) {
-        setSelectedTab(event.target.value)
-
-        switch(event.target.value) {
-            case 'weapons':
-                setGrid((
-                    <WeaponGrid 
-                        userId={cookies.user ? cookies.user.user_id : ''} 
-                        editable={true} 
-                        exists={false} 
-                        pushHistory={callback} 
-                    />
-                ))
-                break
-            case 'summons':
-                setGrid((
-                    <SummonGrid 
-                        editable={true} 
-                    />
-                ))
-                break
-            case 'characters':
-                setGrid((
-                    <CharacterGrid
-                        editable={true}
-                    />
-                ))
-                break
-            default: 
-                break
-        }
-    }
-
-    return (
-        <div id="Content">
-            <PartySegmentedControl
-                selectedTab={selectedTab}
-                onClick={segmentClicked}
-            />
-            
-            {grid}
-        </div>
-    )
-}
-
-export default New

src/routes/NewRoute/index.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import { RouteComponentProps } from 'react-router-dom'
+
+import Party from '~components/Party'
+
+interface Props {}
+interface NewProps extends RouteComponentProps<Props> {}
+
+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}`)
+    }
+
+    return (
+        <div id="Content">
+            <Party
+                editable={true}
+                exists={false}
+                pushHistory={callback}
+            />
+        </div>
+    )
+}
+
+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,40 +3,29 @@ import { withCookies, useCookies } from 'react-cookie'
 import { RouteComponentProps, withRouter } from 'react-router-dom'
 import api from '~utils/api'
 
-import WeaponGrid from '~components/WeaponGrid'
+import Party from '~components/Party'
 import Button from '~components/Button'
 
 interface Props {
     hash: string
 }
 
-interface State {
-    found: boolean
-    editable: boolean
-    mainhand: Weapon,
-    grid: GridArray,
-    partyId: string
-}
-
 interface PartyProps extends RouteComponentProps<Props> {}
 
-type GridArray = { [key: number]: Weapon } 
-interface GridWeapon {
-    id: string
-    mainhand: boolean
-    position: number | null
-    weapon: Weapon
-}
-
-const Party: React.FC<PartyProps> = ({ match }, state: State) => {
+const PartyRoute: React.FC<PartyProps> = ({ match }) => {
     const [found, setFound] = useState(false)
     const [loading, setLoading] = useState(true)
     const [editable, setEditable] = useState(false)
-    const [grid, setGrid] = useState<GridArray>({})
-    const [mainhand, setMainhand] = useState<Weapon>()
-    const [partyId, setPartyId] = useState('')
-    const [cookies, setCookie] = useCookies(['userId'])
 
+    const [weapons, setWeapons] = useState<GridArray<Weapon>>({})
+    const [summons, setSummons] = useState<GridArray<Summon>>({})
+
+    const [mainWeapon, setMainWeapon] = useState<Weapon>()
+    const [mainSummon, setMainSummon] = useState<Summon>()
+    const [friendSummon, setFriendSummon] = useState<Summon>()
+
+    const [partyId, setPartyId] = useState('')
+    const [cookies, setCookie] = useCookies(['user'])
     const shortcode = match.params.hash || ''
 
     useEffect(() => {
@@ -54,17 +43,28 @@ const Party: React.FC<PartyProps> = ({ match }, state: State) => {
                 if (partyUser != undefined && loggedInUser != undefined && partyUser === loggedInUser)
                     setEditable(true)
 
-                let weapons: GridArray = {}
-                party.grid.forEach((gridWeapon: GridWeapon) => {
+                let weapons: GridArray<Weapon> = {}
+                let summons: GridArray<Summon> = {}
+                party.weapons.forEach((gridWeapon: GridWeapon) => {
                     if (gridWeapon.mainhand)
-                        setMainhand(gridWeapon.weapon)
+                        setMainWeapon(gridWeapon.weapon)
                     else if (!gridWeapon.mainhand && gridWeapon.position != null)
                         weapons[gridWeapon.position] = gridWeapon.weapon
                 })
 
+                party.summons.forEach((gridSummon: GridSummon) => {
+                    if (gridSummon.main)
+                        setMainSummon(gridSummon.summon)
+                    else if (gridSummon.friend)
+                        setFriendSummon(gridSummon.summon)
+                    else if (!gridSummon.main && !gridSummon.friend && gridSummon.position != null)
+                        summons[gridSummon.position] = gridSummon.summon
+                })
+
                 setFound(true)
                 setLoading(false)
-                setGrid(weapons)
+                setWeapons(weapons)
+                setSummons(summons)
                 setPartyId(party.id)
             })
             .catch(error => {
@@ -81,15 +81,15 @@ const Party: React.FC<PartyProps> = ({ match }, state: State) => {
 
     function render() {
         return (
-            <div>
-                <WeaponGrid
-                    userId={cookies.user ? cookies.user.user_id : ''}
-                    partyId={partyId}
-                    mainhand={mainhand}
-                    grid={grid}
+            <div id="Content">
+                <Party
+                    mainWeapon={mainWeapon}
+                    mainSummon={mainSummon}
+                    friendSummon={friendSummon}
+                    weapons={weapons}
+                    summons={summons}
                     editable={editable}
-                    exists={true}
-                    found={found}
+                    exists={found}
                 />
             </div>
         )
@@ -116,6 +116,6 @@ const Party: React.FC<PartyProps> = ({ match }, state: State) => {
 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
         )
     )

src/types/GridArray.d.ts

@@ -1 +1 @@
-type GridArray = { [key: number]: Weapon }
+type GridArray<T> = { [key: number]: T }

src/types/GridSummon.d.ts

@@ -0,0 +1,7 @@
+interface GridSummon {
+    id: string
+    main: boolean
+    friend: boolean
+    position: number | null
+    summon: Summon
+}

src/utils/api.tsx

@@ -49,9 +49,9 @@ class Api {
         return axios.post(`${process.env.SIERO_OAUTH_URL}/token` || 'http://127.0.0.1:3000/oauth/token', object)
     }
 
-    search(query: string) {
+    search(object: string, query: string) {
         const resourceUrl = `${this.url}/${name}`
-        return axios.get(`${resourceUrl}/search?query=${query}`)
+        return axios.get(`${resourceUrl}/search/${object}?query=${query}`)
     }
 
     check(resource: string, value: string) {
@@ -66,5 +66,6 @@ const api: Api = new Api({ url: process.env.SIERO_API_URL || 'http://127.0.0.1:3
 api.createEntity( { name: 'users' })
 api.createEntity( { name: 'parties' })
 api.createEntity( { name: 'weapons' })
+api.createEntity( { name: 'summons' })
 
 export default api