Library.js

import React, { Component } from 'react';
import TemplateDetails from './TemplateDetails';
import cx from 'classnames';

class Library extends Component {
  constructor(props) {
    super(props);
    this.state = {
      templates: [],
      selectedTemplate: null,
      isDrawerExpanded: false,
      searchString: ''
    };

    this.url = '/api/templates';

    // See https://medium.com/@goatslacker/react-0-13-x-and-autobinding-b4906189425d
    this.esc = this.esc.bind(this);
  }

  componentDidMount() {
    // LibraryStore.addChangeListener(this.handleStoreChange);
    // ViewActionCreators.loadLibrary();

    document.addEventListener('keyup', this.esc);

    // TODO: Fix orientation bug
    // window.addEventListener('orientationchange')

    fetch(this.url, {
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      }
    }).then(res => res.json())
      .then(json => {
        this.setState({
          templates: json
        });
      })
      .catch(function (err) {
        console.log(err);
      });
  }

  componentWillUnmount() {
    document.removeEventListener('keyup', this.esc);
  }

  showTemplateInfo(selectedTemplate, e) {
    this.removeActiveStyleFromList();
    this.showDrawer(e);
    this.setState({
      selectedTemplate
    });
  }

  // Remove className=is-active: <li class="is-active"></li>
  removeActiveStyleFromList() {
    var previousSelected = document.querySelectorAll('.list-templates > li.is-active');
    Array.prototype.forEach.call(previousSelected, (el) => {
      el.classList.remove('is-active');
    });
  }

  showDrawer(e) {
    e.stopPropagation();
    e.target.classList.add('is-active');
    this.setState({ isDrawerExpanded: true });
  }

  hideDrawer() {
    this.removeActiveStyleFromList();
    this.setState({ isDrawerExpanded: false });
  }

  esc(e) {
    // Escape key = 27
    if (e.keyCode === 27) {
      this.hideDrawer();
    }
  }

  handleChange(e) {
    this.setState({searchString: e.target.value});
  }

  render() {
    var templates = this.state.templates.map((template, idx) => {
      return (
        <li key={idx}
            onTouchTap={this.showTemplateInfo.bind(this, template)}>
          {template.title}
        </li>
      );
    });

    var drawerStyle = cx('drawer', {
      expand: this.state.isDrawerExpanded
    });

    var searchString = this.state.searchString.trim().toLowerCase();

    if (searchString.length > 0) {
      templates = templates.filter(function (l){
        return l.title.toLowerCase().match(searchString);
      });
    }

    return (
      <div className="app-container" onTouchTap={this.hideDrawer.bind(this)}>
        <header className="nav-bar">
          <h1 className="nav-bar__title h2">Template Library</h1>
        </header>
        <main className="main-container">
          <div className="centered-container">
            <input className="search-input--single" type="search" placeholder="Search" value={this.state.searchString} onChange={this.handleChange.bind(this)} />
            <ul className="list list-templates">
              {templates}
            </ul>

            <div className={drawerStyle} onTouchTap={this.showDrawer.bind(this)}>
              { this.state.selectedTemplate && (<TemplateDetails data={this.state.selectedTemplate} />) }
            </div>
          </div>
        </main>
      </div>
    );
  }
}

export default Library;