SoundWave/imports/ui/App.jsx

import React, { Component, PropTypes } from 'react';
import { Meteor } from 'meteor/meteor';
import { createContainer } from 'meteor/react-meteor-data';
import { Converted } from '../api/links';
import { YouTubeSearch, YouTubeVideoInfo } from './YouTubeAPI';
import Video from './Video';
import AppLayout from './AppLayout';
_ = lodash;

class App extends Component {
	constructor(props) {
		super(props);
		this.state = { result: [], links: [], value: '' };
		this.timeout = undefined;
		this.options = [
			{
				type: 'MP3',
				handler: (video) => window.open('/mp3/'+ video.id),
				handlerAll: () => window.open(`/mp3/batch/${this.batchLinks()}`)
			},
			{
				type: 'MP4',
				handler: (video) => window.open('/mp4/'+ video.id),
				handlerAll: () => window.open(`/mp4/batch/${this.batchLinks()}`)
			},
		];
		_.each(['inputChange', 'selectResult', 'removeLink'], f => this[f] = this[f].bind(this));
	}

	batchLinks() {
		return _.map(this.state.links, 'id').join(',');
	}

	inputChange(text) {
		clearTimeout(this.timeout);
		this.setState({ value: text }, () => this.timeout = setTimeout(this.search.bind(this), 100));
	}

	removeLink(link) {
		if (_.some(this.state.links, e => e.id === link.id))
			this.setState({ links: _.reject(this.state.links, e => e.id === link.id) });
	}

	selectResult(video) {
		if (_.every(this.state.links, e => e.id !== video.id)) {
			if (_.some(this.props.converted, e => e.id === video.id && e.audio && e.video))
				video.converted = _.find(this.props.converted, e => e.id === video.id)._id;
			else
				Meteor.call('links.add', {video, type: 'audio'}, (err, res) => {
					if (err)
						console.error(err);
					else
						video.converted = _.find(this.props.converted, e => e.id === video.id)._id;
				});
			this.setState({links: [...this.state.links, video]});
		}
		this.setState({ value: '', result: [] });
	}

	search() {
		if (!this.state.value)
			this.setState({ result: [] });
		else
			YouTubeSearch(this.state.value)
				.then(e => e.items.map(e => new Video(e)))
				.then(e => { this.setState({ result: e }); return e; })
				.then(e => YouTubeVideoInfo(_.map(e, 'id').join(','))
					.then(r => _.each(e, (elem, i) => elem.update(r.items[i].statistics, r.items[i].contentDetails.duration)))
					.then(() => this.setState({ result: e }))
				);
	}

	render() {
		return <AppLayout
			links={this.state.links} linkRemove={this.removeLink} linkHandlers={this.options}
			inputChange={this.inputChange} inputValue={this.state.value}
			resultSelect={this.selectResult} results={this.state.result}
			optionsHandler={this.options} converted={this.props.converted}
		/>;
	}
}

App.propTypes = { converted: PropTypes.array.isRequired };

export default createContainer(() => {
	Meteor.subscribe('links');
	return { converted: Converted.find({}).fetch(), };
}, App);