Cleaned up formatting, Enhanced SPA functionality. Enabled redux-dev-tools

.gitignore

@@ -1 +1,2 @@
-node_modules
+node_modules
+.idea

components/Container.js

@@ -5,15 +5,15 @@ import Player from './Player';
 
 const Container = (data) => (
     <div>
-      <h2>{(data.personaname || data.match_id) + " "}
-      <small>{ "asdf" }</small>
-      </h2>
-      <pre>{JSON.stringify(data, null, 2)}</pre>
+        <h2>{(data.personaname || data.match_id) + " "}
+            <small>{ "asdf" }</small>
+        </h2>
+        <pre>{JSON.stringify(data, null, 2)}</pre>
     </div>
 );
 
 function mapStateToProps(data) {
-  return data.content;
+    return data.content;
 }
 
 export default connect(mapStateToProps)(Container);

components/Home.js

@@ -2,11 +2,11 @@ import React from 'react';
 import { connect } from 'react-redux';
 
 const Home = (data) => (
-      <div>This is a home page!</div>
+    <div>This is a home page!</div>
 );
 
 function mapStateToProps(data) {
-  return data.content;
+  return {content: data.content};
 }
 
 export default connect(mapStateToProps)(Home);

components/Match.js

@@ -1,9 +1,10 @@
 import React from 'react';
 import
 {
-  connect
+    connect
 }
-from 'react-redux';
+    from 'react-redux';
+import { Link } from 'react-router';
 import * as Actions from '../actions/actions';
 class Match extends React.Component
 {
@@ -14,9 +15,9 @@ class Match extends React.Component
   componentDidMount()
   {
     this.props.dispatch(Actions.fetchData(Actions.MATCH,
-    {
-      match_id: this.props.params.match_id
-    }));
+        {
+          match_id: this.props.params.match_id
+        }));
   }
   render()
   {

components/NavBar.js

@@ -1,53 +1,60 @@
 import React from 'react';
-import
-{
-   connect
-}
-from 'react-redux';
-const NavBar = (props) => (<div style={{marginBottom:"0px"}} className="navbar">
-   <div className="navbar-header">
-      <a href="/" className="navbar-brand">
-         <strong className="theme-blue">YASP</strong>
+import { connect } from 'react-redux';
+
+import { Link } from 'react-router';
+
+const NavBar = (props) => {
+   var navLeft, navRight
+   if(props.isFetching)
+   {
+      navLeft = (<li><i className="fa fa-spinner fa-spin"></i></li>);
+      navRight = (<li><i className="fa fa-spinner fa-spin"></i></li>);
+   }
+   else
+   {
+      navLeft = Object.keys(props.data.navbar_pages).map(page =>
+          <li key={page}><Link to={'/'+page}>{props.data.navbar_pages[page].name}</Link></li>
+      );
+
+      if(props.data.user)
+      {
+         navRight = (
+             <span>
+               <li>
+                  <Link to={"/players/"+props.data.user.account_id}>Profile</Link>
+               </li>
+               <li>
+                  <a href="/logout">Logout</a>
+               </li>
+         </span>);
+      }
+      else
+      {
+         navRight = (<li><a href="/login">Login</a></li>);
+      }
+   }
+
+   return (<div style={{marginBottom:"0px"}} className="navbar">
+      <div className="navbar-header">
+         <a href="/" className="navbar-brand">
+            <strong className="theme-blue">YASP</strong>
+         </a>
          <a data-toggle="collapse" data-target=".navbar-collapse" className="navbar-toggle">
             <span className="icon-bar" />
             <span className="icon-bar" />
             <span className="icon-bar" />
          </a>
-      </a>
-   </div>
-   <div id="navbar" className="navbar-collapse collapse">
-      <ul className="nav navbar-nav">
-      {
-      props.isFetching ? 
-      <li><i className="fa fa-spinner fa-spin"></i></li>
-      : 
-      Object.keys(props.data.navbar_pages).map(page =>
-      <li><a href={'/'+page}>{props.data.navbar_pages[page].name}</a></li>
-      )
-      }
-      </ul>
-      <ul className="nav navbar-nav navbar-right">
-      {
-      props.isFetching ?
-      <li><i className="fa fa-spinner fa-spin"></i></li>
-      :
-      props.data.user ?
-         <span>
-         <li>
-         <a href={"/players/"+props.data.user.account_id}>Profile</a>
-         </li>
-         <li>
-            <a href="/logout">Logout</a>
-         </li>
-         </span>
-      :
-         <li>
-            <a href="/login">Login</a>
-         </li>      
-      }
-      </ul>
-   </div>
-</div>);
+      </div>
+      <div id="navbar" className="navbar-collapse collapse">
+         <ul className="nav navbar-nav">
+            {navLeft}
+         </ul>
+         <ul className="nav navbar-nav navbar-right">
+            {navRight}
+         </ul>
+      </div>
+   </div>)
+};
 
 function mapStateToProps(data)
 {

yaspv2.js

@@ -1,55 +1,38 @@
 import React from 'react';
-import
-{
-  render
-}
-from 'react-dom';
-import
-{
-  Provider
-}
-from 'react-redux';
+import { render } from 'react-dom';
+import { Provider } from 'react-redux';
 import App from './components/App';
 import Match from './components/Match';
 import Player from './components/Player';
 import Home from './components/Home';
-import
-{
-  createStore, applyMiddleware, combineReducers
-}
-from 'redux';
+import { createStore, applyMiddleware, combineReducers, compose } from 'redux';
 import reducers from './reducers/reducers';
 import * as Actions from './actions/actions';
 import thunkMiddleware from 'redux-thunk';
 import createLogger from 'redux-logger';
-import
-{
-  Router, Route, browserHistory, IndexRoute
-}
-from 'react-router';
-import
-{
-  syncHistoryWithStore, routerReducer
-}
-from 'react-router-redux';
+import { Router, Route, browserHistory, IndexRoute } from 'react-router';
+import { syncHistoryWithStore, routerReducer as routing } from 'react-router-redux';
+
 // Load CSS
 require('./node_modules/font-awesome/css/font-awesome.css');
 //require('./node_modules/dota2-minimap-hero-sprites/assets/stylesheets/dota2minimapheroes.css');
 //require('../../node_modules/bootstrap/dist/css/bootstrap.css');
 //require('../../node_modules/bootswatch/darkly/bootstrap.css');
 //require('../css/yasp.css');
+
 const loggerMiddleware = createLogger();
-var reducer = combineReducers(Object.assign(
-{},
-{
-  reducers: reducers,
-},
-{
-  routing: routerReducer,
-}));
-var store = createStore(reducer, applyMiddleware(thunkMiddleware, // lets us dispatch() functions
-  loggerMiddleware // neat middleware that logs actions
+var reducer = combineReducers(
+    {
+        reducers,
+        routing
+    });
+
+var store = createStore(reducer, compose(applyMiddleware(thunkMiddleware), // lets us dispatch() functions
+    applyMiddleware(loggerMiddleware), // neat middleware that logs actions
+    (window.devToolsExtension ? window.devToolsExtension() : () => {
+    }) //This enables the redux dev tools extension, or does nothing if not installed
 ));
+
 // Fetch metadata (used on all pages)
 store.dispatch(Actions.fetchData(Actions.METADATA));
 // Create an enhanced history that syncs navigation events with the store
@@ -59,20 +42,20 @@ let reactElement = document.getElementById('react');
 render(<Provider store={store}>
     { /* Tell the Router to use our enhanced history */ }
     <Router history={history}>
-      <Route path="/" component={App}>
-        <IndexRoute component={Home} />
-        <Route path="matches/:match_id" component={Match}>
-          <Route path=":info"/>
-        </Route>
-        <Route path="players/:account_id" component={Player}>
-          <Route path="/:info">
-            <Route path="/:subkey">
+        <Route path="/" component={App}>
+            <IndexRoute component={Home}/>
+            <Route path="matches/:match_id" component={Match}>
+                <Route path=":info"/>
+            </Route>
+            <Route path="players/:account_id" component={Player}>
+                <Route path="/:info">
+                    <Route path="/:subkey">
+                    </Route>
+                </Route>
             </Route>
-          </Route>
         </Route>
-      </Route>
     </Router>
-  </Provider>, reactElement);
+</Provider>, reactElement);
 /*
 <Route path="distributions" component={Distribution}/>
 <Route path="carry" component={Carry}/>