add react router

.env

@@ -0,0 +1,3 @@
+MONGO_URL=mongodb://localhost:27017/p5js-web-editor
+PORT=8000
+SESSION_SECRET=dyR;Ihp9Y/<i=m9&FUBwV\)$";;G:5a-_G4>W@?r~k$JR$nw74=#_Cus[z{yBj`Mq:I8LpWE~g{;B,}t\p/`Wjevkb!$n}N];u`Om57NF^GK@z5qF{0L04)Mz6{Djk

README.md

@@ -19,6 +19,7 @@ As this project is currently being developed, there is only development mode.
 ##Dump of links I'm saving for reference
 
 * https://github.com/Hashnode/mern-starter
+* https://github.com/mxstbr/react-boilerplate
 * https://sass-guidelin.es/#the-7-1-pattern
 * https://github.com/petehunt/react-howto
 * https://github.com/gajus/react-css-modules

client/index.js

@@ -1,17 +1,19 @@
 import React from 'react'
 import { render } from 'react-dom'
 import { Provider } from 'react-redux'
+import { Router, browserHistory } from 'react-router'
 import configureStore from '../shared/redux/store/configureStore'
-import App from '../shared/containers/App/App'
+import routes from '../shared/routes'
 
 require('../styles/main.scss');
 
+const history = browserHistory
 const initialState = window.__INITIAL_STATE__
 const store = configureStore(initialState)
 
 render(
 	<Provider store={store}>
-		<App/>
+		<Router history={history} routes={routes} />
 	</Provider>,
 	document.getElementById('root')
 )

server/routes/session.routes.js

@@ -1,5 +1,6 @@
 import { Router } from 'express';
 import * as SessionController from '../controllers/session.controller';
+import passport from 'passport';
 const router = new Router();
 
 router.route('/login').get(SessionController.newSession);
@@ -7,3 +8,5 @@ router.route('/login').get(SessionController.newSession);
 router.route('/login').post(SessionController.createSession);
 
 router.route('/logout').get(SessionController.destroySession);
+
+//TODO add github authentication stuff

shared/containers/App.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { connect } from 'react-redux';
+
+class App extends React.Component {
+  constructor(props, context) {
+    super(props, context);
+  }
+
+  render() {
+    return (
+      <div className="app">
+        { this.props.children }
+      </div>
+    );
+  }
+}
+
+export default connect()(App);

shared/containers/IDEView/IDEView.jsx

@@ -1,19 +1,18 @@
-import React from 'react';
+import React from 'react'
 import Editor from '../../components/Editor/Editor'
 import PreviewFrame from '../../components/Preview/PreviewFrame'
-import Preview from '../../components/Preview/Preview'
 import Toolbar from '../../components/Toolbar/Toolbar'
 import Preferences from '../../components/Preferences/Preferences'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 import * as FileActions from '../../redux/actions'
 
-class App extends React.Component {
+class IDEView extends React.Component {
 	render() {
 		return (
-			<div className="app">
+			<div className="ide">
 				<Toolbar 
-					className="toolbar"
+					className="Toolbar"
 					isPlaying={this.props.ide.isPlaying}
 					startSketch={this.props.startSketch}
 					stopSketch={this.props.stopSketch}
@@ -37,7 +36,7 @@ class App extends React.Component {
 			    }
 			    isPlaying={this.props.ide.isPlaying}/>
 			</div>
-		);
+		)
 	}
 }
 
@@ -53,4 +52,4 @@ function mapDispatchToProps(dispatch) {
 	return bindActionCreators(FileActions, dispatch);
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(App);
+export default connect(mapStateToProps, mapDispatchToProps)(IDEView);

shared/routes.js

@@ -0,0 +1,12 @@
+import { Route, IndexRoute } from 'react-router'
+import React from 'react'
+import App from './containers/App'
+import IDEView from './containers/IDEView/IDEView'
+
+const routes = (
+	<Route path="/" component={App}>
+		<IndexRoute component={IDEView} />
+	</Route>
+);
+
+export default routes;

styles/base/_base.scss

@@ -6,7 +6,7 @@ html {
 	font-size: #{$base-font-size}px;
 }
 
-.root-app {
+.root-app, .app {
 	min-height: 100%;
 	height: 100%;
 }

styles/layout/_ide.scss

@@ -1,4 +1,4 @@
-.app {
+.ide {
 	display: flex;
 	flex-direction: row;
 	height: 100%;