Improve directory site (#583)

* searching when user stops typeing

* hide horizontal scrollbar and alway show vertical scrollbar

* response  message 'not found'

directory/src/App.js

@@ -1,6 +1,8 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
+
 import './App.css';
+
 import Entypo from '../../glyphmaps/Entypo.json';
 import EvilIcons from '../../glyphmaps/EvilIcons.json';
 import Feather from '../../glyphmaps/Feather.json';
@@ -9,8 +11,8 @@ import Foundation from '../../glyphmaps/Foundation.json';
 import Ionicons from '../../glyphmaps/Ionicons.json';
 import MaterialCommunityIcons from '../../glyphmaps/MaterialCommunityIcons.json';
 import MaterialIcons from '../../glyphmaps/MaterialIcons.json';
-import SimpleLineIcons from '../../glyphmaps/SimpleLineIcons.json';
 import Octicons from '../../glyphmaps/Octicons.json';
+import SimpleLineIcons from '../../glyphmaps/SimpleLineIcons.json';
 import Zocial from '../../glyphmaps/Zocial.json';
 
 const IconFamilies = {
@@ -27,6 +29,8 @@ const IconFamilies = {
   Zocial,
 };
 
+const WAITING_INTERVAL = 300;
+
 class Icon extends PureComponent {
   static propTypes = {
     family: PropTypes.string.isRequired,
@@ -55,11 +59,29 @@ const HeaderBar = (props) => {
 };
 
 class SearchBar extends PureComponent {
+  timer = null;
+
+  state = {
+    keyword: ''
+  };
+
   handleSubmit = (e) => {
     e.preventDefault();
     this.props.onSubmit(this.inputRef.value);
   };
 
+  handleChange = (e) => {
+    e.preventDefault();
+    clearInterval(this.timer);
+
+    this.setState({ keyword: this.inputRef.value });
+
+    this.timer = setTimeout(
+      () => this.props.onSubmit(this.state.keyword),
+      WAITING_INTERVAL
+    );
+  };
+
   render() {
     return (
       <div className="Search-Container">
@@ -68,9 +90,11 @@ class SearchBar extends PureComponent {
             <Icon family="FontAwesome" name="search" className="Search-Icon" />
             <input
               ref={ref => this.inputRef = ref}
+              onChange={this.handleChange}
               placeholder="Search for an icon"
               type="text"
-              className="Search-Input" />
+              className="Search-Input"
+            />
           </form>
         </div>
       </div>
@@ -142,13 +166,22 @@ class App extends PureComponent {
     );
   }
 
+  renderNotFound () {
+    return (
+      <div className="Result-Row">
+        <h2 className="Result-Title">Icon not found.</h2>
+      </div>
+    );
+  }
+
   render() {
     return (
       <div className="App">
         <HeaderBar />
         <SearchBar onSubmit={this.handleSubmit} />
         <div className="Container">
           {this.state.matches.map(this.renderMatch)}
+          {this.state.matches.length === 0 && this.renderNotFound()}
         </div>
       </div>
     );

directory/src/index.css

@@ -2,4 +2,6 @@ body {
   margin: 0;
   padding: 0;
   font-family: sans-serif;
+  overflow-x: hidden;
+  overflow-y: scroll;
 }