text: import React from 'react';
  import ReactDOM, { render } from 'react-dom';
  
  var sold_book = [
      {
          title: 'На службе зла',
          bookImg: '/img/book/Career_of_Evil.jpg',
          price: '189900',
          available: false,
          description: 'Робин Эллакот получает таинственную посылку - отрезанную женскую ногу. Ее босс, ' +
          'частный детектив, Корморан Страйк подозревает сразу четырех человек из своего прошлого, ' +
          'каждый из которых может быть способен на такую изощренную жестокость. Пока полиция, сосредоточив ' +
          'свое внимание на одном из них, пытается раскрыть преступление, Корморан понимает, что это ложный ' +
          'след. Он берет дело в свои руки и погружается в темный и запутанный мир оставшихся трех ' +
          'подозреваемых. Но чем больше происходит ужасающих событий, тем меньше времени остается у ' +
          'детектива и его помощницы, чтобы разгадать загадку...'
      },
      {
          title: 'Сказки барда Бидля',
          bookImg: '/img/book/Skazki_barda_Bidlya.jpg',
          price: '110000',
          available: true,
          description: '\"Сказки барда Бидля\" неоднократно упоминаются в последней книге \"поттерианы\" ' +
          '- \"Гарри Поттер и Дары смерти\", и являются ключом к пониманию темных тайн магии. \"Сказки ' +
          'барда Бидля\", по легенде, с рунического языка на английский перевела Гермиона. Комментарии ' +
          'к сказкам сделал самый знаменитый волшебник современности - профессор Альбус Персиваль ' +
          'Вульфрик Брайан Думбльдор.'
      },
      {
          title: 'Фантастические твари и где они обитают',
          bookImg: '/img/book/Fantasticheskie_tvari_i_gde_oni_obitayut.jpg',
          price: '138000',
          available: false,
          description: '\«Фантастические твари и где они обитают\» - обязательный учебник в школе' +
          ' колдовства и ведьминских наук \«Хогварц\». Экземпляр, который вы держите в руках, ' +
          'принадлежал Гарри Поттеру, и он оставил в нем свои пометки.'
      },
      {
          title: 'Зов Кукушки',
          bookImg: '/img/book/Zov_Kukushki_m_Dzhoan__Rouling.jpg',
          price: '114300',
          available: true,
          description: 'Когда скандально известная топ-модель, упав с заснеженного балкона своего ' +
          'пентхауса, разбивается насмерть, все решают, что это самоубийство. Но брат девушки не ' +
          'может смириться с таким выводом и обращается к услугам частного сыщика по имени Корморан ' +
          'Страйк. Страйк прошел войну, пострадал физически и душевно; жизнь его несется под откос. ' +
          'Теперь он рассчитывает закрыть хотя бы финансовую брешь, однако расследование оборачивается ' +
          'коварной ловушкой. Углубляясь в запутанную историю юной звезды, Страйк приоткрывает тайную ' +
          'изнанку событий — и сам движется навстречу смертельной опасности. Захватывающий, ' +
          'отточенный сюжет разворачивается на фоне Лондона, от тихих улиц благопристойного ' +
          'Мэйфера до обшарпанных пабов Ист-Энда и круглосуточно бурлящего Сохо. ЗОВ КУКУШКИ — ' +
          'незаурядный и заслуженно популярный роман, в котором впервые появляется Корморан Страйк. ' +
          'Это также первое произведение Дж.К.Роулинг, созданное в детективном жанре и подписанное ' +
          'именем Роберта Гэлбрейта.'
      },
      {
          title: 'На службе зла',
          bookImg: '/img/book/Career_of_Evil.jpg',
          price: '189900',
          available: false,
          description: 'Робин Эллакот получает таинственную посылку - отрезанную женскую ногу. Ее босс, ' +
          'частный детектив, Корморан Страйк подозревает сразу четырех человек из своего прошлого, ' +
          'каждый из которых может быть способен на такую изощренную жестокость. Пока полиция, сосредоточив ' +
          'свое внимание на одном из них, пытается раскрыть преступление, Корморан понимает, что это ложный ' +
          'след. Он берет дело в свои руки и погружается в темный и запутанный мир оставшихся трех ' +
          'подозреваемых. Но чем больше происходит ужасающих событий, тем меньше времени остается у ' +
          'детектива и его помощницы, чтобы разгадать загадку...'
      },
      {
          title: 'Сказки барда Бидля',
          bookImg: '/img/book/Skazki_barda_Bidlya.jpg',
          price: '110000',
          available: true,
          description: '\"Сказки барда Бидля\" неоднократно упоминаются в последней книге \"поттерианы\" ' +
          '- \"Гарри Поттер и Дары смерти\", и являются ключом к пониманию темных тайн магии. \"Сказки ' +
          'барда Бидля\", по легенде, с рунического языка на английский перевела Гермиона. Комментарии ' +
          'к сказкам сделал самый знаменитый волшебник современности - профессор Альбус Персиваль ' +
          'Вульфрик Брайан Думбльдор.'
      },
      {
          title: 'Фантастические твари и где они обитают',
          bookImg: '/img/book/Fantasticheskie_tvari_i_gde_oni_obitayut.jpg',
          price: '138000',
          available: false,
          description: '\«Фантастические твари и где они обитают\» - обязательный учебник в школе' +
          ' колдовства и ведьминских наук \«Хогварц\». Экземпляр, который вы держите в руках, ' +
          'принадлежал Гарри Поттеру, и он оставил в нем свои пометки.'
      },
      {
          title: 'Зов Кукушки',
          bookImg: '/img/book/Zov_Kukushki_m_Dzhoan__Rouling.jpg',
          price: '114300',
          available: true,
          description: 'Когда скандально известная топ-модель, упав с заснеженного балкона своего ' +
          'пентхауса, разбивается насмерть, все решают, что это самоубийство. Но брат девушки не ' +
          'может смириться с таким выводом и обращается к услугам частного сыщика по имени Корморан ' +
          'Страйк. Страйк прошел войну, пострадал физически и душевно; жизнь его несется под откос. ' +
          'Теперь он рассчитывает закрыть хотя бы финансовую брешь, однако расследование оборачивается ' +
          'коварной ловушкой. Углубляясь в запутанную историю юной звезды, Страйк приоткрывает тайную ' +
          'изнанку событий — и сам движется навстречу смертельной опасности. Захватывающий, ' +
          'отточенный сюжет разворачивается на фоне Лондона, от тихих улиц благопристойного ' +
          'Мэйфера до обшарпанных пабов Ист-Энда и круглосуточно бурлящего Сохо. ЗОВ КУКУШКИ — ' +
          'незаурядный и заслуженно популярный роман, в котором впервые появляется Корморан Страйк. ' +
          'Это также первое произведение Дж.К.Роулинг, созданное в детективном жанре и подписанное ' +
          'именем Роберта Гэлбрейта.'
      }
  ];
  export default class Navbar extends React.Component {
      render() {
          return (
              <nav className="navbar navbar-default">
                  <div className="container-fluid">
                      <div className="navbar-header">
                          <button type="button" className="navbar-toggle collapsed" data-toggle="collapse"
                                  data-target="#bs-example-navbar-collapse-1">
                              <span className="sr-only">Toggle navigation</span>
                              <span className="icon-bar"></span>
                              <span className="icon-bar"></span>
                              <span className="icon-bar"></span>
                          </button>
                          <a className="navbar-brand" href="/"><img src="img/Joanne_Kathleen_Rowling.jpg"
                                                                    alt="Joanne Kathleen Rowling"/></a>
                      </div>
  
                      <div className="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                          <ul className="nav navbar-nav">
                              <li className="active">
                                  <a href="#">Магазин <span className="sr-only">(current) </span></a>
                              </li>
                              <li><a href="#">О авторе</a></li>
                              <li className="dropdown">
                                  <a href="#" className="dropdown-toggle" data-toggle="dropdown" role="button"
                                     aria-expanded="false">
                                      Доп. информация <span className="caret"></span></a>
                                  <ul className="dropdown-menu" role="menu">
                                      <li><a href="#">Action</a></li>
                                      <li><a href="#">Another action</a></li>
                                      <li><a href="#">Something else here</a></li>
                                      <li className="divider"></li>
                                      <li><a href="#">Separated link</a></li>
                                      <li className="divider"></li>
                                      <li><a href="#">One more separated link</a></li>
                                  </ul>
                              </li>
                          </ul>
                          <FilterInput filterUpdate={this.props.filterUpdate}/>
                          <ul className="nav navbar-nav navbar-right">
                              <li>
                                  <div className="fa-shopping-basket-wrap">
                                      <i className="fa fa-shopping-basket" aria-hidden="true"></i>
                                  </div>
                              </li>
                              <li>
                                  <a href="#">Войти</a></li>
                          </ul>
                      </div>
                  </div>
              </nav>
          )
      }
  };
  
  export default class FilterInput extends React.Component {
      constructor(props) {
          super(props);
      }
      filterTrigger() {
          this.props.filterUpdate(ReactDOM.findDOMNode(this.refs.filterInput).value);
      };
      render() {
          return (<form className="navbar-form navbar-left" role="search">
              <i className="fa fa-search" aria-hidden="true"></i>
              <input type='text'
                     className="form-control"
                     ref='filterInput'
                     placeholder="Поиск"
                     defaultValue=''
                     onChange={this.filterTrigger}/>
          </form>)
      }
  };
  
  export default class OneBook extends React.Component {
      static propTypes = {
          data: React.PropTypes.shape({
              title: React.PropTypes.string.isRequired,
              bookImg: React.PropTypes.string.isRequired,
              price: React.PropTypes.string.isRequired,
              available: React.PropTypes.bool.isRequired,
              description: React.PropTypes.string.isRequired
          })};
      static defaultProps = { initialVisible: false };
      state = { visible: this.props.initialVisible };
      readmoreClick (e) {
          e.preventDefault();
          (this.state.visible) ? this.setState({visible: false}) : this.setState({visible: true});
      };
      addRecycle (e) {
          e.preventDefault();
      };
      render () {
          var title = this.props.data.title,
              bookImg = this.props.data.bookImg,
              price = this.props.data.price,
              visible = this.state.visible,
              available = this.props.data.available,
              description = this.props.data.description;
  
          return (
              <div className='article' onClick={this.readmoreClick.bind(this)}>
                  <p className='book__title'>{title}: </p>
  
                  <p className='book_content'><img src={bookImg} alt={title} class="img-responsive"/></p>
  
                  <span >{price} руб.</span>
  
                  <div className={'news__big-text ' + (visible ? '' : 'none') }>
                      <p>{description}</p>
                      <span className={available ? 'label label-success':'label label-info'}>
                      {available ? 'В наличии' : 'Под заказ'}</span>
                      <button className='btn btn-primary'
                              onClick={this.addRecycle}>Купить
                      </button>
                  </div>
              </div>
          )
      }
  };
  
  export default class StoreBook extends React.Component {
      propTypes: {
          data: React.PropTypes.array.isRequired
      };
      render () {
  
          var input = this.props.filter.toLowerCase();
  
          var bookTemplate = this.props.data.map(function (item, index) {
  
              if (item.title.toLowerCase().indexOf(input) + 1 ||
                  item.description.toLowerCase().indexOf(input) + 1 || input == null) {
                  return (
                      <div key={index} className="child">
                          <OneBook data={item}/>
                      </div>
                  )
              } else {
                  return
              }
          });
          return (
              <div className="parent container">
                  {bookTemplate}
              </div>
          )
      }
  };
  
  export default class Footer extends React.Component {
      render () {
          return (
              <footer className="container">
                  <div className="footer-about">
                      © 2016 Romaniuk Dmitry
                  </div>
              </footer>
          )
      }
  };
  
  export default class App extends React.Component{
      static defaultProps = { initialFilterText: '' };
      state = { filterText: this.props.initialFilterText };
      stateUpdate(value) {this.setState({ filterText: value });
      };
      render () {
          return (
              <div className='app'>
                  <Navbar filterUpdate={this.stateUpdate}/>
                  <StoreBook data={this.props.data} filter={this.state.filterText}/>
                  {/*<h3>Новости</h3>
                   <Add />
                   <News data={my_news}/>*/}
                  <Footer />
              </div>
          );
      }
  };
  
  ReactDOM.render(
      <App data={sold_book}/>,
      document.getElementById('root')
  );