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 Links from './Links';
import { YouTubeSearch, YouTubeVideoInfo } from './YouTubeAPI';
import Video from './Video';
import Input from "./Input";
import Results from "./Results";
import OptionsAll from "./OptionsAll";

class App extends Component {
	constructor(props) {
		super(props);
		this.state = { result: [], links: [], value: '' };
		this.options = [
			{ type: 'MP3', handler: (video) => window.open('/mp3/'+ video.id) },
			{ type: 'MP4', handler: (video) => window.open('/mp4/'+ video.id) },
		];
		this.optionsAll = [
			{ type: 'MP3', handler: () => window.open(`/mp3/batch/${this.batchLinks()}`) },
			{ type: 'MP4', handler: () => window.open(`/mp4/batch/${this.batchLinks()}`) },
		];
	}

	render() {
		return (
			<div className="container">
				<h1 className="logo">SoundWave</h1>
				<div className="box-container">
					<header>
						<Input value={this.state.value} change={this.inputChange.bind(this)} />
						<Results results={this.state.result} select={this.selectResult.bind(this)} />
					</header>
					<Links links={this.state.links} remove={this.removeLink.bind(this)} handlers={this.options}/>
					<OptionsAll count={this.state.links.length} handlers={this.optionsAll}
								links={this.state.links} converted={this.props.converted} />
				</div>
			</div>
		);
	}

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

	inputChange(text) {
		this.setState({ value: text }, this.search);
	}

	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)) {
				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 => e.forEach(i => YouTubeVideoInfo(i.id)
					.then(r => i.update(r.items[0].statistics, r.items[0].contentDetails.duration))
					.then(() => this.setState({ result: e }))
				));
		}
	}
}

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

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