Add Character support

src/components/Party/index.tsx

@@ -24,6 +24,7 @@ interface Props {
     mainWeapon?: Weapon
     mainSummon?: Summon
     friendSummon?: Summon
+    characters?: GridArray<Character>
     weapons?: GridArray<Weapon>
     summons?: GridArray<Summon>
     editable: boolean
@@ -41,6 +42,7 @@ const Party = (props: Props) => {
     } : {}
 
     // Grid data
+    const [characters, setCharacters] = useState<GridArray<Character>>({})
     const [weapons, setWeapons] = useState<GridArray<Weapon>>({})
     const [summons, setSummons] = useState<GridArray<Summon>>({})
 
@@ -52,9 +54,10 @@ const Party = (props: Props) => {
         setMainWeapon(props.mainWeapon)
         setMainSummon(props.mainSummon)
         setFriendSummon(props.friendSummon)
+        setCharacters(props.characters || {})
         setWeapons(props.weapons || {})
         setSummons(props.summons || {})
-    }, [props.mainWeapon, props.mainSummon, props.friendSummon, props.weapons, props.summons])
+    }, [props.mainWeapon, props.mainSummon, props.friendSummon, props.characters, props.weapons, props.summons])
 
     const weaponGrid = (
         <WeaponGrid 
@@ -81,6 +84,8 @@ const Party = (props: Props) => {
 
     const characterGrid = (
         <CharacterGrid
+            userId={cookies.user ? cookies.user.userId : ''}
+            grid={characters}
             editable={props.editable}
             exists={props.exists}
             onSelect={itemSelected}
@@ -144,7 +149,11 @@ const Party = (props: Props) => {
                 saveClass()
                 break
             case GridType.Character:
-                saveCharacter(item as Character, position, partyId)
+                const character = item as Character
+                saveCharacter(character, position, partyId)
+                    .then(() => {
+                        storeCharacter(character, position)
+                    })
                 break
             case GridType.Weapon:
                 const weapon = item as Weapon
@@ -213,8 +222,21 @@ const Party = (props: Props) => {
     }
 
     // Character
-    function saveCharacter(character: Character, position: number, party: string) {
-        // TODO: Implement this
+    function storeCharacter(character: Character, position: number) {
+        // Store the grid unit character at the correct position
+        let newCharacters = Object.assign({}, characters)
+        newCharacters[position] = character
+        setCharacters(newCharacters)
+    }
+
+    async function saveCharacter(character: Character, position: number, party: string) {
+        await api.endpoints.characters.create({
+            'character': {
+                'party_id': party,
+                'character_id': character.id,
+                'position': position
+            }
+        }, headers)
     }
 
     // Class

src/components/SearchModal/index.tsx

@@ -4,6 +4,7 @@ import api from '~utils/api'
 
 import Modal from '~components/Modal'
 import Overlay from '~components/Overlay'
+import CharacterResult from '~components/CharacterResult'
 import WeaponResult from '~components/WeaponResult'
 import SummonResult from '~components/SummonResult'
 
@@ -11,7 +12,7 @@ import './index.css'
 
 interface Props {
     close: () => void
-    send: (object: Weapon | Summon, position: number) => any
+    send: (object: Character | Weapon | Summon, position: number) => any
     placeholderText: string
     fromPosition: number
     object: 'weapons' | 'characters' | 'summons'
@@ -75,7 +76,7 @@ class SearchModal extends React.Component<Props, State> {
         }
     }
 
-    sendData = (result: Weapon | Summon) => {
+    sendData = (result: Character | Weapon | Summon) => {
         this.props.send(result, this.props.fromPosition)
         this.props.close()
     }
@@ -91,7 +92,7 @@ class SearchModal extends React.Component<Props, State> {
                 return this.renderSummonSearchResults(results)
 
             case 'characters':
-                return (<div />) 
+                return this.renderCharacterSearchResults(results) 
         }
     }
 
@@ -115,6 +116,16 @@ class SearchModal extends React.Component<Props, State> {
         )
     }
 
+    renderCharacterSearchResults = (results: { [key: string]: any }) => {
+        return (
+            <ul id="results_container">
+                { results.map( (result: Character) => {
+                    return <CharacterResult key={result.id} data={result} onClick={() => { this.sendData(result) }} />
+                })}
+            </ul>
+        )
+    }
+
     renderEmptyState = () => {
         let string = ''
 

src/routes/PartyRoute/index.tsx

@@ -17,6 +17,7 @@ const PartyRoute: React.FC<PartyProps> = ({ match }) => {
     const [loading, setLoading] = useState(true)
     const [editable, setEditable] = useState(false)
 
+    const [characters, setCharacters] = useState<GridArray<Character>>({})
     const [weapons, setWeapons] = useState<GridArray<Weapon>>({})
     const [summons, setSummons] = useState<GridArray<Summon>>({})
 
@@ -43,8 +44,15 @@ const PartyRoute: React.FC<PartyProps> = ({ match }) => {
                 if (partyUser != undefined && loggedInUser != undefined && partyUser === loggedInUser)
                     setEditable(true)
 
+                let characters: GridArray<Character> = {}
                 let weapons: GridArray<Weapon> = {}
                 let summons: GridArray<Summon> = {}
+
+                party.characters.forEach((gridCharacter: GridCharacter) => {
+                    if (gridCharacter.position != null)
+                        characters[gridCharacter.position] = gridCharacter.character
+                })
+
                 party.weapons.forEach((gridWeapon: GridWeapon) => {
                     if (gridWeapon.mainhand)
                         setMainWeapon(gridWeapon.weapon)
@@ -63,6 +71,7 @@ const PartyRoute: React.FC<PartyProps> = ({ match }) => {
 
                 setFound(true)
                 setLoading(false)
+                setCharacters(characters)
                 setWeapons(weapons)
                 setSummons(summons)
                 setPartyId(party.id)
@@ -86,6 +95,7 @@ const PartyRoute: React.FC<PartyProps> = ({ match }) => {
                     mainWeapon={mainWeapon}
                     mainSummon={mainSummon}
                     friendSummon={friendSummon}
+                    characters={characters}
                     weapons={weapons}
                     summons={summons}
                     editable={editable}