Refactor HomeLayout along new Meteor guidelines

There are still a few warnings, including a 404 warning about
missing templates coming from iron-router (see routes.js l. 46),
but many of these can be resolved piecemeal and shouldn't be
blockers for annotations and snapshot tests.

imports/startup/client/index.js

@@ -1,2 +1,6 @@
+import injectTapEventPlugin from 'react-tap-event-plugin';
+
+injectTapEventPlugin();
+
 import './routes.js';
 import './users.js';

imports/startup/client/routes.js

@@ -143,6 +143,8 @@ function onRouteLoad() {
 // Add onRouteLoad to FlowRouter.triggers.enter callbacks
 FlowRouter.triggers.enter([onRouteLoad]);
 
+// FIXME (pletcher): iron-router is showing errors
+// that it can't find masterLayout and notFound
 Router.configure({
 	layoutTemplate: 'masterLayout',
 	loadingTemplate: 'loading',

imports/ui/components/auth/LoginButtons/LoginButtons.jsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import baseTheme from 'material-ui/styles/baseThemes/lightBaseTheme';
 import getMuiTheme from 'material-ui/styles/getMuiTheme';
 
@@ -7,31 +9,22 @@ import Menu from 'material-ui/Menu';
 import MenuItem from 'material-ui/MenuItem';
 import Divider from 'material-ui/Divider';
 
-LoginButtons = React.createClass({
-
-	propTypes: {
-		showLoginModal: React.PropTypes.func,
-		showSignupModal: React.PropTypes.func,
-	},
+import { createContainer } from 'meteor/react-meteor-data';
+import PropTypes from 'prop-types';
 
-	mixins: [ReactMeteorData],
+class LoginButtons extends React.Component {
+	constructor(props) {
+		super(props);
 
-	getInitialState() {
-		return {
+		this.state = {
 			loginOptionOpen: false,
 			anchorEl: null,
-		};
-	},
+		}
+	}
 
 	getChildContext() {
 		return { muiTheme: getMuiTheme(baseTheme) };
-	},
-
-	getMeteorData() {
-		return {
-			user: Meteor.user(),
-		};
-	},
+	}
 
 	handleClick(event) {
 		// This prevents ghost click.
@@ -40,13 +33,13 @@ LoginButtons = React.createClass({
 			loginOptionOpen: true,
 			anchorEl: event.currentTarget,
 		});
-	},
+	}
 
 	handleRequestClose() {
 		this.setState({
 			loginOptionOpen: false,
 		});
-	},
+	}
 
 	render() {
 		const styles = {
@@ -59,17 +52,17 @@ LoginButtons = React.createClass({
 		};
 
 
-		if (this.data.user) {
+		if (this.props.user) {
 			// render logged in info
 
 			// make a user dispaly name from available user profile info
 			let userNiceName = '';
 
-			if ('profile' in this.data.user) {
-				const profile = this.data.user.profile;
+			if ('profile' in this.props.user) {
+				const profile = this.props.user.profile;
 				userNiceName = profile.firstName;
-			} else if ('emails' in this.data.user && this.data.user.emails.length > 0) {
-				userNiceName = this.data.user.emails[0].address;
+			} else if ('emails' in this.props.user && this.props.user.emails.length > 0) {
+				userNiceName = this.props.user.emails[0].address;
 			} else {
 				userNiceName = 'User';
 			}
@@ -120,8 +113,20 @@ LoginButtons = React.createClass({
 				/>
 			</div>
 		);
-	},
-});
+	}
+};
+
 LoginButtons.childContextTypes = {
-	muiTheme: React.PropTypes.object.isRequired,
+	muiTheme: PropTypes.object.isRequired,
 };
+
+LoginButtons.propTypes = {
+	showLoginModal: PropTypes.func,
+	showSignupModal: PropTypes.func,
+};
+
+export default LoginButtonsContainer = createContainer(props => {
+	return {
+		user: Meteor.user(),
+	};
+}, LoginButtons);

imports/ui/components/header/Header/Header.jsx

@@ -3,10 +3,12 @@ import React from 'react';
 import FlatButton from 'material-ui/FlatButton';
 import FontIcon from 'material-ui/FontIcon';
 import IconButton from 'material-ui/IconButton';
+import PropTypes from 'prop-types';
 import baseTheme from 'material-ui/styles/baseThemes/lightBaseTheme';
 import getMuiTheme from 'material-ui/styles/getMuiTheme';
 
-import PropTypes from 'prop-types';
+import LeftMenu from '/imports/ui/components/header/LeftMenu/LeftMenu.jsx';
+import LoginButtons from '/imports/ui/components/auth/LoginButtons/LoginButtons.jsx';
 
 export default class Header extends React.Component {
 	constructor(props) {

imports/ui/components/header/LeftMenu/LeftMenu.jsx

@@ -1,54 +1,38 @@
+import React from 'react';
+
 import MenuItem from 'material-ui/MenuItem';
 import Divider from 'material-ui/Divider';
 import Drawer from 'material-ui/Drawer';
 import baseTheme from 'material-ui/styles/baseThemes/lightBaseTheme';
+import { createContainer } from 'meteor/react-meteor-data';
 import getMuiTheme from 'material-ui/styles/getMuiTheme';
+import PropTypes from 'prop-types';
 
-LeftMenu = React.createClass({
-
-
-	propTypes: {
-		open: React.PropTypes.bool.isRequired,
-		closeLeftMenu: React.PropTypes.func.isRequired,
-	},
-
-	childContextTypes: {
-		muiTheme: React.PropTypes.object.isRequired,
-	},
-
-
-	mixins: [ReactMeteorData],
-
+class LeftMenu extends React.Component {
 	getChildContext() {
 		return { muiTheme: getMuiTheme(baseTheme) };
-	},
-
-	getMeteorData() {
-		return {
-			currentUser: Meteor.users.findOne({ _id: Meteor.userId() }),
-		};
-	},
+	}
 
 	scrollToAbout(e) {
 		$('html, body').animate({ scrollTop: $('#get-started').height() - 100 }, 300);
 
 		this.props.closeLeftMenu();
 		e.preventDefault();
-	},
+	}
 
 	render() {
-		const userIsLoggedIn = this.data.currentUser !== undefined;
+		const userIsLoggedIn = this.props.currentUser !== undefined;
 		let username = '';
 		let userIsAdmin = false;
 
 		if (userIsLoggedIn) {
-			if ('emails' in this.data.currentUser && this.data.currentUser.emails.length) {
-				username = this.data.currentUser.emails[0].address;
+			if ('emails' in this.props.currentUser && this.props.currentUser.emails.length) {
+				username = this.props.currentUser.emails[0].address;
 			}
-			if ('facebook' in this.data.currentUser) {
-				username = this.data.currentUser.services.facebook.first_name;
+			if ('facebook' in this.props.currentUser) {
+				username = this.props.currentUser.services.facebook.first_name;
 			}
-			userIsAdmin = Roles.userIsInRole(this.data.currentUser._id, ['admin']);
+			userIsAdmin = Roles.userIsInRole(this.props.currentUser._id, ['admin']);
 		}
 
 
@@ -147,5 +131,20 @@ LeftMenu = React.createClass({
 				</Drawer>
 			</div>
 		);
-	},
-});
+	}
+};
+
+LeftMenu.childContextTypes = {
+	muiTheme: PropTypes.object.isRequired,
+};
+
+LeftMenu.propTypes = {
+	open: PropTypes.bool.isRequired,
+	closeLeftMenu: PropTypes.func.isRequired,
+};
+
+export default LeftMenuContainer = createContainer(props => {
+	return {
+		currentUser: Meteor.users.findOne({ _id: Meteor.userId() }),
+	};
+}, LeftMenu);