SoundWave/imports/ui/App.jsx

import React, { Component, PropTypes } from 'react';
import ReactDOM from 'react-dom';
import { Meteor } from 'meteor/meteor';
import { createContainer } from 'meteor/react-meteor-data';
import { Links } from '../api/links.js';
import Link from './Link.jsx';
import AccountsUIWrapper from './AccountsUIWrapper.jsx';

// App component - represents the whole app
class App extends Component {
	constructor(props) {
		super(props);
		this.state = { };
	}

	renderLinks() {
		return this.props.links.map((link) => {
			return (
				<Link key={link._id} link={link} />
			)
		});
	}

	handleSubmit(event) {
		event.preventDefault();

		// Find the text field via the React ref
		const text = ReactDOM.findDOMNode(this.refs.textInput).value.trim();

		Meteor.call('links.insert', text);

		// Clear form
		ReactDOM.findDOMNode(this.refs.textInput).value = '';
	}

	render() {
		return (
			<div className="container">
				<h1 className="logo">SoundWave</h1>
				<div className="box-container">
					<header>
						<AccountsUIWrapper />
						<form className="new-link" onSubmit={this.handleSubmit.bind(this)}>
							<input type="text" ref="textInput" placeholder="Search a video" />
						</form>
					</header>
					<ul>{ this.renderLinks() }</ul>
				</div>
			</div>
		);
	}
}

App.propTypes = {
	links: PropTypes.array.isRequired,
	currentUser: PropTypes.object,
};

export default createContainer(() => {
	Meteor.subscribe('links');

	return {
		links: Links.find({}, {sort: {createdAt: -1}}).fetch(),
		currentUser: Meteor.user(),
	};
}, App);