Add search/filter to building list

src/containers/Buildings.js

@@ -1,9 +1,10 @@
 import React, { Component } from "react";
-import { Spinner } from "@blueprintjs/core";
+import { Spinner, NonIdealState } from "@blueprintjs/core";
 import Header from "./../components/Header";
 import Nav from "./../components/Nav";
 import { Link } from "react-router-dom";
 import { buildings } from "./../endpoints/buildings";
+import _ from "lodash";
 
 const style = {
   padding: "30px 50px"
@@ -15,10 +16,14 @@ class Buildings extends Component {
     this.state = {
       buildings: []
     };
+    this.search = this.search.bind(this);
   }
 
   componentDidMount() {
     buildings()
+      .then(buildings => {
+        return (this.fetchedBuildings = buildings);
+      })
       .then(buildings => {
         this.setState({ buildings });
       })
@@ -27,12 +32,23 @@ class Buildings extends Component {
       });
   }
 
+  search(event) {
+    const query = event.target.value;
+    const filteredBuilings = _.filter(
+      this.fetchedBuildings,
+      building =>
+        _.lowerCase(building.name).indexOf(_.lowerCase(query)) > -1 ||
+        _.lowerCase(building.location).indexOf(_.lowerCase(query)) > -1
+    );
+    this.setState({ buildings: filteredBuilings, query: query });
+  }
+
   renderNav() {
     return <Nav />;
   }
 
   render() {
-    const { buildings } = this.state;
+    const { buildings, query } = this.state;
 
     return (
       <div>
@@ -45,6 +61,8 @@ class Buildings extends Component {
                   type="text"
                   className="pt-input"
                   placeholder="Zoeken..."
+                  value={this.state.query}
+                  onChange={this.search}
                 />
               </div>
             </div>
@@ -71,6 +89,14 @@ class Buildings extends Component {
                 </Link>
               )
             : <Spinner />}
+
+          {!_.isEmpty(query) && buildings.length < 1
+            ? <NonIdealState
+                visual="search"
+                title="No search results"
+                description={`No results for: ${query}`}
+              />
+            : <div />}
         </div>
       </div>
     );