Wrapup

main.js

// Grab the react and react-dom pkgs -->
import React from 'react';
import ReactDOM from 'react-dom';

// Grab Router, Route and browserHistory from react-router ->
import { Router, Route, IndexRoute, browserHistory } from 'react-router';

// Grab Navigation, signin and resource components -->
import Navigation from '../components/navigation';
import SignIn from '../components/signin';
import Resource from '../components/resource';
import RequireAuth from '../components/require_auth';

// Write an App Component -->
const App = (props) => {
  return (
    <div>
      <Navigation />
      { props.children }
    </div>
  );
};

// Start Routes -->
const routes = (
  <Router history={browserHistory}>
    <Route path="/" component={App}>
      <Route path="/signin" component={SignIn} />
      <Route path="/resource" component={RequireAuth(Resource)} />
    </Route>
  </Router>
);

// Render the App Component to the app class
// Use Meteor.startup (Makes sure the Meteor app starts up before you try rendering to the DOM)
Meteor.startup(() => {
  ReactDOM.render(routes, document.querySelector('.app'));
});

signin.js

import React from 'react';
import { browserHistory } from 'react-router';

export default() => {
  const onSiginIn = (event) => {
    event.preventDefault();

    localStorage.setItem('auth', true);
    browserHistory.push('/resource');
  }

  return(
    <div className="signin container">
      <p>Click the SignIn button to continue...</p>
      <button className="btn btn-success" onClick={onSiginIn.bind(this)}>
        Sign In
      </button>
    </div>
  );
};