Get relevant syntax from list by user interaction

Since we have a long list of syntaxes, we need to simplify the search
for the needed one. Now the list is filtered according to the value
entered by the user. In case result list is empty 'No results found'
message will be displayed.

Author: AinuraAliieva

src/components/Syntaxes.jsx

@@ -2,14 +2,15 @@ import React from 'react';
 import { Scrollbars } from 'react-custom-scrollbars';
 import { connect } from 'react-redux';
 
-import Input from './common/Input';
+import regExpEscape from './../helpers';
 import * as actions from '../actions';
 
-class Syntaxes extends React.Component {
+class Syntaxes extends React.PureComponent {
   constructor(props) {
     super(props);
     this.state = { activeIndex: -1 };
     this.onClickHandler = this.onClickHandler.bind(this);
+    this.onSyntaxSearch = this.onSyntaxSearch.bind(this);
   }
 
   componentDidMount() {
@@ -24,30 +25,51 @@ class Syntaxes extends React.Component {
     this.props.onClick(syntax);
   }
 
-  render() {
+  onSyntaxSearch(e) {
+    this.setState({ searchSyntax: e.target.value.trim() });
+  }
+
+  getSyntaxes() {
+    let { syntaxes } = this.props;
+
+    if (this.state.searchSyntax) {
+      syntaxes = this.filterSyntaxes(regExpEscape(this.state.searchSyntax));
+    }
+
+    return syntaxes.map((syntax, index) => {
+      const active = this.state.activeIndex === index ? 'active' : '';
+      return (
+        <li
+          className={`new-snippet-lang-item ${active}`}
+          data-syntax={syntax}
+          data-index={index}
+          key={syntax}
+        >
+          {syntax}
+        </li>
+      );
+    });
+  }
+
+  filterSyntaxes(searchSyntax) {
     const { syntaxes } = this.props;
+    const regExp = new RegExp(searchSyntax, 'gi');
+    return syntaxes.filter(syntax => syntax.match(regExp));
+  }
+
+  render() {
+    const syntaxes = this.getSyntaxes();
 
     return (
       [
         <div className="new-snippet-lang-header" key="Syntax input">
-          <Input placeholder="Type to search..." />
+          <input className="input" placeholder="Type to search..." onChange={this.onSyntaxSearch} />
         </div>,
         <div className="new-snippet-lang-list-wrapper" key="Syntax list">
+          {syntaxes.size ? null : <div className="new-snippet-lang-empty">No results found</div>}
           <Scrollbars>
             <ul className="new-snippet-lang-list" onClick={this.onClickHandler} role="presentation">
-              {syntaxes.map((syntax, index) => {
-                const active = this.state.activeIndex === index ? 'active' : '';
-                return (
-                  <li
-                    className={`new-snippet-lang-item ${active}`}
-                    data-syntax={syntax}
-                    data-index={index}
-                    key={syntax}
-                  >
-                    {syntax}
-                  </li>
-                  );
-                })}
+              {syntaxes}
             </ul>
           </Scrollbars>
         </div>,

src/helpers/index.js

@@ -0,0 +1,3 @@
+const regExpEscape = string => string.replace(/[-[\]{}()*+?.,\\^$|]/g, '\\$&');
+
+export default regExpEscape;

src/styles/NewSnippet.styl

@@ -70,6 +70,11 @@ lang-bar-width = 230px
       height: 100%
       &-wrapper
         flex: 1
+    &-empty
+      padding: 13px 15px
+      font-size: 14px
+      font-weight: 300
+      color: text-grey
     &-item
       font-size: 14px
       padding: 13px 15px