app.jsx

import React from 'react';
import SearchForm from './SearchForm.jsx';
import Results from './Results.jsx';
import io from 'socket.io-client';

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {items: [], currentlyPlaying: ''};

    io().on('currently-playing', title => {
      console.log(title);
      this.state.currentlyPlaying = title || '';
    });
  }

  search(query) {
    if (!query) {
      this.setState({items: []});
    }

    $.get(`api/search/?q=${query}`).done(data => this.setState({items: data}));
  }

  playVideo(item) {
    $.post({
      url: `api/play/`,
      data: JSON.stringify({
        'ytId': item.ytId,
        'title': item.title
      }),
      'contentType': 'application/json'
    })
  }

  render() {
    return (
      <section className="webdesigntuts-workshop">
      <p>{this.state.currentlyPlaying}</p>
      <SearchForm search={this.search.bind(this)}/>
      <Results items={this.state.items} playVideo={this.playVideo.bind(this)}/>
      </section>
    )
  }
}