From 84b0934e0a5c1cdab0081b1c7d6d89bcc3612fe1 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Mon, 14 Sep 2020 18:29:40 -0700
Subject: [PATCH] Add Search modal to weapon cells

---
 .../WeaponGridMainhand/WeaponGridMainhand.tsx | 27 ++++++++++++++----
 .../WeaponGridUnit/WeaponGridUnit.tsx         | 28 +++++++++++++++----
 2 files changed, 43 insertions(+), 12 deletions(-)

diff --git a/src/components/WeaponGridMainhand/WeaponGridMainhand.tsx b/src/components/WeaponGridMainhand/WeaponGridMainhand.tsx
index d79dd8b7..2694a830 100644
--- a/src/components/WeaponGridMainhand/WeaponGridMainhand.tsx
+++ b/src/components/WeaponGridMainhand/WeaponGridMainhand.tsx
@@ -1,12 +1,27 @@
 import React from 'react'
 import './WeaponGridMainhand.css'
 
-import Plus from '../../assets/plus.svg'
+import SearchModal from '../SearchModal/SearchModal'
+import { useModal as useModal } from '../../useModal'
 
-const WeaponGridUnit = () => (
-    <div className="WeaponGridMainhand">
-        <span className='icon'><Plus /></span>
-    </div>
-)
+import Plus from '../../../assets/plus.svg'
+
+function WeaponGridUnit() {
+    const { open, openModal, closeModal } = useModal()
+
+    return (
+        <div>
+            <div className="WeaponGridMainhand" onClick={openModal}>
+                <span className='icon'><Plus /></span>
+            </div>
+            {open ? (
+                <SearchModal 
+                    close={closeModal}
+                    placeholderText="Search for a weapon..."
+                />
+            ) : null}
+        </div>
+    )
+}
 
 export default WeaponGridUnit
\ No newline at end of file
diff --git a/src/components/WeaponGridUnit/WeaponGridUnit.tsx b/src/components/WeaponGridUnit/WeaponGridUnit.tsx
index bca7cf52..535c3623 100644
--- a/src/components/WeaponGridUnit/WeaponGridUnit.tsx
+++ b/src/components/WeaponGridUnit/WeaponGridUnit.tsx
@@ -1,12 +1,28 @@
 import React from 'react'
+
 import './WeaponGridUnit.css'
 
-import Plus from '../../assets/plus.svg'
+import SearchModal from '../SearchModal/SearchModal'
+import { useModal as useModal } from '../../useModal'
 
-const WeaponGridUnit = () => (
-    <div className="WeaponGridUnit">
-        <span className='icon'><Plus /></span>
-    </div>
-)
+import Plus from '../../../assets/plus.svg'
+
+function WeaponGridUnit() {
+    const { open, openModal, closeModal } = useModal()
+
+    return (
+        <div>
+            <div className="WeaponGridUnit" onClick={openModal}>
+                <span className='icon'><Plus /></span>
+            </div>
+            {open ? (
+                <SearchModal 
+                    close={closeModal}
+                    placeholderText="Search for a weapon..."
+                />
+            ) : null}
+        </div>
+    )
+}
 
 export default WeaponGridUnit
\ No newline at end of file