Disable rendering of search modal in read-only mode

components/CharacterUnit/index.tsx

@@ -6,6 +6,7 @@ import UncapIndicator from '~components/UncapIndicator'
 import PlusIcon from '~public/icons/Add.svg'
 
 import './index.scss'
+import { omit } from 'lodash'
 
 interface Props {
     gridCharacter: GridCharacter | undefined
@@ -47,20 +48,27 @@ const CharacterUnit = (props: Props) => {
             props.updateUncap(props.gridCharacter.id, props.position, uncap)
     }
 
-    return (
+    const image = (
-        <div>
+        <div className="CharacterImage">
-            <div className={classes}>
+            <img alt={character?.name.en} className="grid_image" src={imageUrl} />
+            { (props.editable) ? <span className='icon'><PlusIcon /></span> : '' }
+        </div>
+    )
+
+    const editableImage = (
         <SearchModal 
             placeholderText="Search for a character..." 
             fromPosition={props.position} 
             object="characters"
             send={props.updateObject}>
-                        <div className="CharacterImage">
+                {image}
-                            <img alt={character?.name.en} className="grid_image" src={imageUrl} />
-                            { (props.editable) ? <span className='icon'><PlusIcon /></span> : '' }
-                        </div>
         </SearchModal>
+    )
 
+    return (
+        <div>
+            <div className={classes}>
+                { (props.editable) ? editableImage : image }
                 { (gridCharacter && character) ? 
                     <UncapIndicator 
                         type="character"

components/SummonUnit/index.tsx

@@ -55,20 +55,26 @@ const SummonUnit = (props: Props) => {
             props.updateUncap(props.gridSummon.id, props.position, uncap)
     }
 
-    return (
+    const image = (
-        <div>
+        <div className="SummonImage">
-            <div className={classes}>
+            <img alt={summon?.name.en} className="grid_image" src={imageUrl} />
+            { (props.editable) ? <span className='icon'><PlusIcon /></span> : '' }
+        </div>
+    )
+
+    const editableImage = (
         <SearchModal 
             placeholderText="Search for a summon..." 
             fromPosition={props.position} 
             object="summons"
             send={props.updateObject}>
-                        <div className="SummonImage">
+                {image}
-                            <img alt={summon?.name.en} className="grid_image" src={imageUrl} />
-                            { (props.editable) ? <span className='icon'><PlusIcon /></span> : '' }
-                        </div>
         </SearchModal>
+    )
 
+    return (
+        <div className={classes}>
+            { (props.editable) ? editableImage : image }
             { (gridSummon) ? 
                 <UncapIndicator 
                     type="summon"
@@ -81,7 +87,6 @@ const SummonUnit = (props: Props) => {
             }
             <h3 className="SummonName">{summon?.name.en}</h3>
         </div>
-        </div>
     )
 }
 

components/WeaponUnit/index.tsx

@@ -53,20 +53,27 @@ const WeaponUnit = (props: Props) => {
             props.updateUncap(props.gridWeapon.id, props.position, uncap)
     }
 
-    return (
+    const image = (
-        <div>
+        <div className="WeaponImage">
-            <div className={classes}>
+            <img alt={weapon?.name.en} className="grid_image" src={imageUrl} />
+            { (props.editable) ? <span className='icon'><PlusIcon /></span> : '' }
+        </div>
+    )
+
+    const editableImage = (
         <SearchModal 
             placeholderText="Search for a weapon..." 
             fromPosition={props.position} 
             object="weapons"
             send={props.updateObject}>
-                        <div className="WeaponImage">
+                {image}
-                            <img alt={weapon?.name.en} className="grid_image" src={imageUrl} />
-                            { (props.editable) ? <span className='icon'><PlusIcon /></span> : '' }
-                        </div>
         </SearchModal>
+    )
 
+    return (
+        <div>
+            <div className={classes}>
+                { (props.editable) ? editableImage : image }
                 { (gridWeapon) ? 
                     <UncapIndicator 
                         type="weapon"