Move SearchModal to WeaponGrid

components/ExtraWeapons/index.tsx

@@ -18,16 +18,12 @@ interface Props {
     exists: boolean
     found?: boolean
     offset: number
-    onSelect: (type: GridType, weapon: Weapon, position: number) => void
+    onClick: (position: number) => void
 }
 
 const ExtraWeapons = (props: Props) => {
     const numWeapons: number = 3
 
-    function receiveWeapon(weapon: Weapon, position: number) {
-        props.onSelect(GridType.Weapon, weapon, position)
-    }
-
     return (
         <div id="ExtraWeapons">
             <span>Additional<br />Weapons</span>
@@ -38,7 +34,7 @@ const ExtraWeapons = (props: Props) => {
                             <li key={`grid_unit_${i}`} >
                                 <WeaponUnit 
                                     editable={props.editable}
-                                    onReceiveData={receiveWeapon} 
+                                    onClick={() => { props.onClick(props.offset + i)}} 
                                     position={props.offset + i} 
                                     unitType={1}
                                     weapon={props.grid[props.offset + i]}

components/WeaponGrid/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 WeaponUnit from '~components/WeaponUnit'
 import ExtraWeapons from '~components/ExtraWeapons'
 
@@ -26,6 +29,9 @@ interface Props {
 }
 
 const WeaponGrid = (props: Props) => {
+    const { open, openModal, closeModal } = useModal()
+    const [searchPosition, setSearchPosition] = useState(0)
+
     const numWeapons: number = 9
 
     const extraGrid = (
@@ -34,7 +40,7 @@ const WeaponGrid = (props: Props) => {
             editable={props.editable} 
             exists={false}
             offset={numWeapons}
-            onSelect={props.onSelect}
+            onClick={openSearchModal}
         />
     )
 
@@ -42,13 +48,28 @@ const WeaponGrid = (props: Props) => {
         props.onSelect(GridType.Weapon, weapon, position)
     }
 
+    function sendData(object: Character | Weapon | Summon, position: number) {
+        if (isWeapon(object)) {
+            receiveWeapon(object, position)
+        }
+    }
+
+    function isWeapon(object: Character | Weapon | Summon): object is Weapon {
+        return (object as Weapon).proficiency !== undefined
+    }
+
+    function openSearchModal(position: number) {
+        setSearchPosition(position)
+        openModal()
+    }
+
     return (
         <div id="weapon_grids">
             <div id="WeaponGrid">
                 <WeaponUnit 
+                    onClick={() => { openSearchModal(0) }}
                     editable={props.editable}
                     key="grid_mainhand"
-                    onReceiveData={receiveWeapon} 
                     position={-1} 
                     unitType={0}
                     weapon={props.mainhand}
@@ -60,8 +81,8 @@ const WeaponGrid = (props: Props) => {
                             return (
                                 <li key={`grid_unit_${i}`} >
                                     <WeaponUnit 
+                                        onClick={() => { openSearchModal(i) }}
                                         editable={props.editable}
-                                        onReceiveData={receiveWeapon} 
                                         position={i} 
                                         unitType={1}
                                         weapon={props.grid[i]}
@@ -78,6 +99,17 @@ const WeaponGrid = (props: Props) => {
                     return extraGrid
                 }    
             })() }
+
+            {open ? (
+                <SearchModal 
+                    grid={props.grid}
+                    close={closeModal}
+                    send={sendData}
+                    fromPosition={searchPosition}
+                    object="weapons"
+                    placeholderText="Search for a weapon..."
+                />
+            ) : null}
         </div>
     )
 }

components/WeaponUnit/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: (weapon: Weapon, position: number) => void
+    onClick: () => void
     weapon: Weapon | undefined
     position: number
     editable: boolean
@@ -21,10 +19,6 @@ interface Props {
 const WeaponUnit = (props: Props) => {
     const [imageUrl, setImageUrl] = useState('')
 
-    const { open, openModal, closeModal } = useModal()
-
-    const openModalIfEditable = (props.editable) ? openModal : () => {}
-
     const classes = classnames({
         WeaponUnit: true,
         'mainhand': props.unitType == 0,
@@ -53,20 +47,10 @@ const WeaponUnit = (props: Props) => {
         setImageUrl(imgSrc)
     }
 
-    function sendData(object: Character | Weapon | Summon, position: number) {
-        if (isWeapon(object)) {
-            props.onReceiveData(object, position)
-        }
-    }
-
-    function isWeapon(object: Character | Weapon | Summon): object is Weapon {
-        return (object as Weapon).proficiency !== undefined
-    }
-
     return (
         <div>
-            <div className={classes} onClick={openModalIfEditable}>
+            <div className={classes}>
-                <div className="WeaponImage">
+                <div className="WeaponImage" onClick={props.onClick}>
                     <img alt={weapon?.name.en} className="grid_image" src={imageUrl} />
                     { (props.editable) ? <span className='icon'><PlusIcon /></span> : '' }
                 </div>
@@ -78,15 +62,6 @@ const WeaponUnit = (props: Props) => {
                 />
                 <h3 className="WeaponName">{weapon?.name.en}</h3>
             </div>
-            {open ? (
-                <SearchModal 
-                    close={closeModal}
-                    send={sendData}
-                    fromPosition={props.position}
-                    object="weapons"
-                    placeholderText="Search for a weapon..."
-                />
-            ) : null}
         </div>
     )
 }