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)
     }
 
+    const image = (
+        <div className="CharacterImage">
+            <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}>
+                {image}
+        </SearchModal>
+    )
+
     return (
         <div>
             <div className={classes}>
-                <SearchModal 
+                { (props.editable) ? editableImage : image }
-                    placeholderText="Search for a character..." 
-                    fromPosition={props.position} 
-                    object="characters"
-                    send={props.updateObject}>
-                        <div className="CharacterImage">
-                            <img alt={character?.name.en} className="grid_image" src={imageUrl} />
-                            { (props.editable) ? <span className='icon'><PlusIcon /></span> : '' }
-                        </div>
-                </SearchModal>
-
                 { (gridCharacter && character) ? 
                     <UncapIndicator 
                         type="character"

components/SummonUnit/index.tsx

@@ -55,32 +55,37 @@ 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} />
-                <SearchModal 
+            { (props.editable) ? <span className='icon'><PlusIcon /></span> : '' }
-                    placeholderText="Search for a summon..." 
+        </div>
-                    fromPosition={props.position} 
+    )
-                    object="summons"
-                    send={props.updateObject}>
-                        <div className="SummonImage">
-                            <img alt={summon?.name.en} className="grid_image" src={imageUrl} />
-                            { (props.editable) ? <span className='icon'><PlusIcon /></span> : '' }
-                        </div>
-                </SearchModal>
 
-                { (gridSummon) ? 
+    const editableImage = (
-                    <UncapIndicator 
+        <SearchModal 
-                        type="summon"
+            placeholderText="Search for a summon..." 
-                        ulb={gridSummon.object.uncap.ulb || false}
+            fromPosition={props.position} 
-                        flb={gridSummon.object.uncap.flb || false}
+            object="summons"
-                        uncapLevel={gridSummon.uncap_level} 
+            send={props.updateObject}>
-                        updateUncap={passUncapData}
+                {image}
-                        special={false}               
+        </SearchModal>
-                    /> : '' 
+    )
-                }
+
-                <h3 className="SummonName">{summon?.name.en}</h3>
+    return (
-            </div>
+        <div className={classes}>
+            { (props.editable) ? editableImage : image }
+            { (gridSummon) ? 
+                <UncapIndicator 
+                    type="summon"
+                    ulb={gridSummon.object.uncap.ulb || false}
+                    flb={gridSummon.object.uncap.flb || false}
+                    uncapLevel={gridSummon.uncap_level} 
+                    updateUncap={passUncapData}
+                    special={false}               
+                /> : '' 
+            }
+            <h3 className="SummonName">{summon?.name.en}</h3>
         </div>
     )
 }

components/WeaponUnit/index.tsx

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