Updated to add navigation and documentation with syntax highlighting

Author: RyanAtPlanGrid

adding-new-infrastructure

@@ -7,6 +7,8 @@
     "history": "^4.7.2",
     "localStorage": "^1.0.4",
     "lodash": "^4.17.11",
+    "marked": "^0.6.1",
+    "prismjs": "^1.16.0",
     "react": "^16.8.4",
     "react-dom": "^16.8.4",
     "react-redux": "^6.0.1",

package-lock.json

@@ -4,7 +4,7 @@ import { Provider } from "react-redux";
 import createHistory from "history/createBrowserHistory";
 import "./index.css";
 import rootReducer from "./modules/rootReducer";
-import * as serviceWorker from './serviceWorker';
+import * as serviceWorker from "./serviceWorker";
 import { createStore } from "./modules/store";
 import app from "./modules/app";
 

package.json

@@ -1,7 +1,6 @@
 import React, { Component } from "react";
 import { connect } from "react-redux";
-import { Router, Route, Link } from "react-router-dom";
-// import { ConnectedRouter } from "react-router-redux";
+import { Router, Route } from "react-router-dom";
 import { OnUpdate } from "rrc";
 import userContext from "../../userContext";
 import home from "../../../screens/home";
@@ -11,16 +10,25 @@ import authenticated from "../../../screens/authenticated";
 import wizardExample from "../../../screens/wizardExample";
 import busyIndicator from "../../busyIndicator";
 import notificationPopup from "../../notificationPopup";
+import "./app.css";
+import navBar from "../../navBar";
 
-const { getUserContext } = userContext.selectors;
 const { BusyIndicator } = busyIndicator.components;
 const { Home } = home.components;
 const { SignIn } = signin.components;
 const { Protected } = protectedRoute.components;
 const { Authenticated } = authenticated.components;
 const { WizardExample } = wizardExample.components;
-const { isBusy } = busyIndicator.selectors;
 const { NotificationPopup } = notificationPopup.components;
+const {
+  selectors: { getUserContext }
+} = userContext;
+const {
+  selectors: { isBusy }
+} = busyIndicator;
+const {
+  components: { NavBar, MenuItem }
+} = navBar;
 
 class App extends Component {
   render() {
@@ -29,25 +37,13 @@ class App extends Component {
     return (
       <Router history={history}>
         <div>
-          <header>
-            <ul>
-              <li>
-                <Link to="/">Home</Link>
-              </li>
-              <li>
-                <Link to="/authenticated">Authenticated</Link>
-              </li>
-              <li>
-                <Link to="/protected">Protected</Link>
-              </li>
-              <li>
-                <Link to="/wizard-example">Wizard Example</Link>
-              </li>
-              <li>
-                <Link to="/sign-in">Sign In</Link>
-              </li>
-            </ul>
-          </header>
+          <NavBar>
+            <MenuItem to="/">Home</MenuItem>
+            <MenuItem to="/authenticated">Authenticated</MenuItem>
+            <MenuItem to="/protected">Protected</MenuItem>
+            <MenuItem to="/wizard-example">Wizard Example</MenuItem>
+            <MenuItem to="/sign-in">Sign In</MenuItem>
+          </NavBar>
           <div className="App-intro">
             <NotificationPopup />
             {isBusy ? (

src/index.js

@@ -0,0 +1,25 @@
+.app-button {
+    background-color: #4CAF50; /* Green */
+    border: none;
+    color: white;
+    padding: 16px 32px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+    margin: 4px 2px;
+    -webkit-transition-duration: 0.4s; /* Safari */
+    transition-duration: 0.4s;
+    cursor: pointer;
+    margin-bottom: 5px;
+}
+
+.app-button:hover {
+    background-color: white;
+    color: black;
+    border: 2px solid #4CAF50;
+}
+
+.active {
+    background-color: #4CAF50;
+}

src/modules/app/components/App.js

@@ -0,0 +1,12 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import { withRouter } from "react-router-dom";
+import classNames from "classnames";
+
+const MenuItem = withRouter(({ to, children, location }) => (
+  <li className={classNames({ active: to === location.pathname })}>
+    <Link to={to}>{children}</Link>
+  </li>
+));
+
+export default MenuItem;

src/modules/app/components/app.css

@@ -0,0 +1,10 @@
+import React from "react";
+import "./navBar.css";
+
+const NavBar = ({ children }) => (
+  <header>
+    <ul>{children}</ul>
+  </header>
+);
+
+export default NavBar;

src/modules/navBar/components/MenuItem.js

@@ -0,0 +1,7 @@
+import MenuItem from "./MenuItem";
+import NavBar from "./NavBar";
+
+export default {
+  MenuItem,
+  NavBar
+};

src/modules/navBar/components/NavBar.js

@@ -0,0 +1,23 @@
+header ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    background-color: #333;
+}
+
+header li {
+    float: left;
+}
+
+header li a {
+    display: block;
+    color: white;
+    text-align: center;
+    padding: 14px 16px;
+    text-decoration: none;
+}
+
+header li a:hover:not(.active) {
+    background-color: #111;
+}