Lift SearchModal out of CharacterUnit

components/CharacterGrid/index.tsx

@@ -1,5 +1,8 @@
 import React, { useState } from 'react'
+import { useModal as useModal } from '~utils/useModal'
+
 import CharacterUnit from '~components/CharacterUnit'
+import SearchModal from '~components/SearchModal'
 
 import './index.scss'
 
@@ -19,12 +22,31 @@ interface Props {
 }
 
 const CharacterGrid = (props: Props) => {
+    const { open, openModal, closeModal } = useModal()
+    const [searchPosition, setSearchPosition] = useState(0)
+
     const numCharacters: number = 5
 
+    function isCharacter(object: Character | Weapon | Summon): object is Character {
+        // There aren't really any unique fields here
+        return (object as Character).gender !== undefined
+    }
+
+    function openSearchModal(position: number) {
+        setSearchPosition(position)
+        openModal()
+    }
+
     function receiveCharacter(character: Character, position: number) {
         props.onSelect(GridType.Character, character, position)
     }
 
+    function sendData(object: Character | Weapon | Summon, position: number) {
+        if (isCharacter(object)) {
+            receiveCharacter(object, position)
+        }
+    }
+
     return (
         <div className="CharacterGrid">
             <ul id="grid_characters">
@@ -33,8 +55,8 @@ const CharacterGrid = (props: Props) => {
                         return (
                             <li key={`grid_unit_${i}`} >
                                 <CharacterUnit 
+                                    onClick={() => { openSearchModal(i) }}
                                     editable={props.editable}
-                                    onReceiveData={receiveCharacter} 
                                     position={i} 
                                     character={props.grid[i]}
                                 />
@@ -42,6 +64,16 @@ const CharacterGrid = (props: Props) => {
                         )
                     })
                 }
+                {open ? (
+                <SearchModal 
+                    grid={props.grid}
+                    close={closeModal}
+                    send={sendData}
+                    fromPosition={searchPosition}
+                    object="characters"
+                    placeholderText="Search for a character..."
+                />
+            ) : null}
             </ul>
         </div>
     )

components/CharacterUnit/index.tsx

@@ -1,8 +1,6 @@
 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 PlusIcon from '~public/icons/plus.svg'
@@ -10,7 +8,7 @@ import PlusIcon from '~public/icons/plus.svg'
 import './index.scss'
 
 interface Props {
-    onReceiveData: (character: Character, position: number) => void
+    onClick: () => void
     character: Character | undefined
     position: number
     editable: boolean
@@ -18,9 +16,6 @@ interface Props {
 
 const CharacterUnit = (props: Props) => {
     const [imageUrl, setImageUrl] = useState('')
-    const { open, openModal, closeModal } = useModal()
-
-    const openModalIfEditable = (props.editable) ? openModal : () => {}
 
     const classes = classnames({
         CharacterUnit: true,
@@ -40,27 +35,16 @@ const CharacterUnit = (props: Props) => {
         
         if (props.character) {
             const character = props.character!
-            imgSrc = `/images/chara-main/${character.granblue_id}.jpg`
+            imgSrc = `/images/chara-main/${character.granblue_id}_01.jpg`
         }
 
         setImageUrl(imgSrc)
     }
 
-    function sendData(object: Character | Weapon | Summon, position: number) {
-        if (isCharacter(object)) {
-            props.onReceiveData(object, position)
-        }
-    }
-
-    function isCharacter(object: Character | Weapon | Summon): object is Character {
-        // There aren't really any unique fields here
-        return (object as Character).gender !== undefined
-    }
-
     return (
         <div>
-            <div className={classes} onClick={openModalIfEditable}>
+            <div className={classes}>
-                <div className="CharacterImage">
+                <div className="CharacterImage" onClick={props.onClick}>
                     <img alt={character?.name.en} className="grid_image" src={imageUrl} />
                     { (props.editable) ? <span className='icon'><PlusIcon /></span> : '' }
                 </div>
@@ -71,15 +55,6 @@ const CharacterUnit = (props: Props) => {
                 />
                 <h3 className="CharacterName">{character?.name.en}</h3>
             </div>
-            {open ? (
-                <SearchModal 
-                    close={closeModal}
-                    send={sendData}
-                    fromPosition={props.position}
-                    object="characters"
-                    placeholderText="Search for a character..."
-                />
-            ) : null}
         </div>
     )
 }

components/SearchModal/index.tsx

@@ -15,6 +15,7 @@ import PlusIcon from '~public/icons/plus.svg'
 interface Props {
     close: () => void
     send: (object: Character | Weapon | Summon, position: number) => any
+    grid: GridArray<Character|Weapon|Summon>
     placeholderText: string
     fromPosition: number
     object: 'weapons' | 'characters' | 'summons'