Move SearchModal to SummonGrid

components/ExtraSummons/index.tsx

@@ -17,16 +17,12 @@ interface Props {
     exists: boolean
     found?: boolean
     offset: number
-    onSelect: (type: GridType, summon: Summon, position: number) => void
+    onClick: (position: number) => void
 }
 
 const ExtraSummons = (props: Props) => {
     const numSummons: number = 2
 
-    function receiveWeapon(summon: Summon, position: number) {
-        props.onSelect(GridType.Summon, summon, position)
-    }
-
     return (
         <div id="ExtraSummons">
             <span>Sub Aura Summons</span>
@@ -36,8 +32,8 @@ const ExtraSummons = (props: Props) => {
                         return (
                             <li key={`grid_unit_${i}`} >
                                 <SummonUnit 
-                                    editable={props.editable}
+                                    onClick={() => { props.onClick(props.offset + i) }}
-                                    onReceiveData={receiveWeapon} 
+                                    editable={props.editable} 
                                     position={props.offset + i} 
                                     unitType={1}
                                     summon={props.grid[props.offset + i]}

components/SummonGrid/index.tsx

@@ -1,4 +1,7 @@
-import React from 'react'
+import React, { useState } from 'react'
+import { useModal as useModal } from '~utils/useModal'
+
+import SearchModal from '~components/SearchModal'
 import ExtraSummons from '~components/ExtraSummons'
 import SummonUnit from '~components/SummonUnit'
 
@@ -26,21 +29,40 @@ interface Props {
 }
 
 const SummonGrid = (props: Props) => {
+    const { open, openModal, closeModal } = useModal()
+    const [searchPosition, setSearchPosition] = useState(0)
+
     const numSummons: number = 4
 
+    function openSearchModal(position: number) {
+        setSearchPosition(position)
+        openModal()
+    }
+
     function receiveSummon(summon: Summon, position: number) {
         props.onSelect(GridType.Summon, summon, position)
     }
 
+    function sendData(object: Character | Weapon | Summon, position: number) {
+        if (isSummon(object)) {
+            receiveSummon(object, position)
+        }
+    }
+
+    function isSummon(object: Character | Weapon | Summon): object is Summon {
+        // There aren't really any unique fields here
+        return (object as Summon).granblue_id !== undefined
+    }
+
     return (
         <div>
             <div className="SummonGrid">
                 <div className="LabeledUnit">
                     <div className="Label">Main Summon</div>
                     <SummonUnit
+                        onClick={() => { openSearchModal(0) }}
                         editable={props.editable}
                         key="grid_main_summon"
-                        onReceiveData={receiveSummon}
                         position={-1}
                         unitType={0}
                         summon={props.main}
@@ -50,9 +72,9 @@ const SummonGrid = (props: Props) => {
                 <div className="LabeledUnit">
                     <div className="Label">Friend Summon</div>
                     <SummonUnit
+                        onClick={() => { openSearchModal(6) }}
                         editable={props.editable}
                         key="grid_friend_summon"
-                        onReceiveData={receiveSummon}
                         position={6}
                         unitType={2}
                         summon={props.friend}
@@ -67,8 +89,8 @@ const SummonGrid = (props: Props) => {
                                 return (
                                     <li key={`grid_unit_${i}`} >
                                         <SummonUnit 
+                                            onClick={() => { openSearchModal(i) }}
                                             editable={props.editable}
-                                            onReceiveData={receiveSummon} 
                                             position={i} 
                                             unitType={1}
                                             summon={props.grid[i]}
@@ -82,12 +104,23 @@ const SummonGrid = (props: Props) => {
             </div>
             
             <ExtraSummons 
+                onClick={openSearchModal}
                 grid={props.grid} 
                 editable={props.editable} 
                 exists={false} 
                 offset={numSummons}
-                onSelect={props.onSelect} 
             />
+
+            {open ? (
+                <SearchModal 
+                    grid={props.grid}
+                    close={closeModal}
+                    send={sendData}
+                    fromPosition={searchPosition}
+                    object="summons"
+                    placeholderText="Search for a summon..."
+                />
+            ) : null}
         </div>
     )
 }

components/SummonUnit/index.tsx

@@ -1,9 +1,7 @@
 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'
@@ -11,7 +9,7 @@ import PlusIcon from '~public/icons/plus.svg'
 import './index.scss'
 
 interface Props {
-    onReceiveData: (summon: Summon, position: number) => void
+    onClick: () => void
     summon: Summon | undefined
     position: number
     editable: boolean
@@ -20,9 +18,6 @@ interface Props {
 
 const SummonUnit = (props: Props) => {
     const [imageUrl, setImageUrl] = useState('')
-    const { open, openModal, closeModal } = useModal()
-
-    const openModalIfEditable = (props.editable) ? openModal : () => {}
 
     const classes = classnames({
         SummonUnit: true,
@@ -54,21 +49,10 @@ const SummonUnit = (props: Props) => {
         setImageUrl(imgSrc)
     }
 
-    function sendData(object: Character | Weapon | Summon, position: number) {
-        if (isSummon(object)) {
-            props.onReceiveData(object, position)
-        }
-    }
-
-    function isSummon(object: Character | 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={classes}>
-                <div className="SummonImage">
+                <div className="SummonImage" onClick={props.onClick}>
                     <img alt={summon?.name.en} className="grid_image" src={imageUrl} />
                     { (props.editable) ? <span className='icon'><PlusIcon /></span> : '' }
                 </div>
@@ -80,15 +64,6 @@ 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>
     )
 }