Add empty states

* Default and empty state for `SearchModal`
* Empty state for grid when shortcode is not in use

src/components/SearchModal/SearchModal.css

@@ -25,5 +25,21 @@
 
 .SearchModal #results_container {
     margin: 0;
+    max-height: 320px;
     padding: 0 12px 12px 12px;
+}
+
+.SearchModal #NoResults {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    flex-grow: 1;
+}
+
+.SearchModal #NoResults h2 {
+    color: #ccc;
+    font-size: 18px;
+    font-weight: 500;
+    margin-top: -32px;
 }

src/components/SearchModal/SearchModal.tsx

@@ -80,21 +80,42 @@ class SearchModal extends React.Component<Props, State> {
 
     renderSearchResults = () => {
         const { results } = this.state
+        console.log(results)    
+        return (
+            <ul id="results_container">
+                { results.map( (result: Weapon) => {
+                    return <WeaponResult key={result.id} data={result} onClick={() => { this.sendData(result) }} />
+                })}
+            </ul>
+        )
+    }
 
-        if (results.length) {
-            return (
-                <ul id="results_container">
-                    { results.map( (result: Weapon) => {
-                        return <WeaponResult key={result.id} data={result} onClick={() => { this.sendData(result) }} />
-                    })}
-                </ul>
-            )
+    renderEmptyState = () => {
+        let string = ''
+
+        if (this.state.query === '') {
+            string = 'No weapons'
+        } else {
+            string = `No results found for '${this.state.query}'`
         }
+
+        return (
+            <div id="NoResults">
+                <h2>{string}</h2>
+            </div>
+        )
     }
 
     render() {
         const { query, loading } = this.state
 
+        let content: JSX.Element
+        if (Object.entries(this.state.results).length == 0) {
+            content = this.renderEmptyState()
+        } else {
+            content = this.renderSearchResults()
+        }
+
         return (
             createPortal(
                 <div>
@@ -115,8 +136,7 @@ class SearchModal extends React.Component<Props, State> {
                             </label>
                         </div>
 
-                        { this.renderSearchResults() }
-                        
+                        {content}
                     </Modal>
                     <Overlay onClick={this.props.close} />
                 </div>,

src/components/WeaponGrid/WeaponGrid.css

@@ -25,4 +25,16 @@
 
 #grid_weapons > li {
     list-style: none;
+}
+
+#NotFound {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 40px;
+}
+
+#NotFound h2 {
+    color: #444;
+    font-weight: 500;
 }

src/components/WeaponGrid/WeaponGrid.tsx

@@ -34,27 +34,19 @@ const WeaponGrid = (props: Props) => {
         if (props.shortcode) {
             fetchGrid(props.shortcode)
         } else {
-            // There is no need to fetch a weapon
+            setIsValid(true)
         }
     }, [])
 
     function fetchGrid(shortcode: string) {
         return api.endpoints.parties.getOne({ id: shortcode })
             .then(response => {
-                const grid = response.data.party.grid
-
-                let weapons: GridArray = {}
-                grid.forEach((gridWeapon: GridWeapon) => {
-                    if (gridWeapon.mainhand) {
-                        setMainhand(gridWeapon.weapon)
-                    } 
-                    
-                    else if (!gridWeapon.mainhand && gridWeapon.position != null) {
-                        weapons[gridWeapon.position] = gridWeapon.weapon
-                    }
-                })
-
-                setWeapons(weapons)
+                setupGrid(response)
+            })
+            .catch(error => {
+                if (error.response.status == 404) {
+                    gridNotFound()
+                }
             })
     }