Some good stuff

go/go_ahead/src/index.js → go/go_ahead/src/App.js

@@ -3,22 +3,18 @@ import ReactDOM from 'react-dom';
 import { HashRouter, Route, Link } from 'react-router-dom';
 import { Button } from 'reactstrap';
 
-import { HomePage, AboutPage, NavBar } from 'Components';
+import { HomePage, AboutPage, NavBar, PageTemplate } from 'Components';
+import { Routes } from 'Utils';
 
-const Dhaynes = () => <p>dhaynes</p>;
-
-const App = () => (
-    <div>
-        <NavBar />
-        <Route path="/" exact component={HomePage} />
-        <Route path="/dhaynes" component={Dhaynes} />
-        <Route path="/about" component={AboutPage} />
-    </div>
-);
+// const App = () => (
+//     <PageTemplate>
+//         <Routes />
+//     </PageTemplate>
+// );
 
 ReactDOM.render(
     <HashRouter>
-        <App />
+        <Routes />
     </HashRouter>,
     document.getElementById('root')
 );

go/go_ahead/src/Components/Organisms/NavBar.js

 import React from 'react';
-import {
-    Collapse,
-    Navbar,
-    NavbarToggler,
-    NavbarBrand,
-    Nav,
-    NavItem,
-    NavLink,
-    UncontrolledDropdown,
-    DropdownToggle,
-    DropdownMenu,
-    DropdownItem,
-} from 'reactstrap';
+import { Navbar, NavbarBrand, Nav, NavItem, NavLink } from 'reactstrap';
 
 export default class NavBar extends React.Component {
-    constructor(props) {
-        super(props);
-
-        this.toggle = this.toggle.bind(this);
-        this.state = {
-            isOpen: false,
-        };
-    }
-    toggle() {
-        this.setState({
-            isOpen: !this.state.isOpen,
-        });
-    }
     render() {
         return (
             <div>
-                <Navbar color="light" light expand="md">
-                    <NavbarBrand href="/">Go</NavbarBrand>
-                    <NavbarToggler onClick={this.toggle} />
-                    <Collapse isOpen={this.state.isOpen} navbar>
-                        <Nav className="ml-auto" navbar>
-                            <NavItem>
-                                <NavLink href="#/dhaynes">Dhaynes</NavLink>
-                            </NavItem>
-                            <NavItem>
-                                <NavLink href="#/about">About</NavLink>
-                            </NavItem>
-                        </Nav>
-                    </Collapse>
+                <Navbar color="dark" dark expand="md">
+                    <NavbarBrand href="#">Go</NavbarBrand>
+
+                    <Nav className="ml-auto" navbar>
+                        <NavItem>
+                            <NavLink href="#/dhaynes" active={this.props.page == 'dhaynes'}>
+                                Dhaynes
+                            </NavLink>
+                        </NavItem>
+                        <NavItem>
+                            <NavLink href="#/about" active={this.props.page == 'about'}>
+                                About
+                            </NavLink>
+                        </NavItem>
+                    </Nav>
                 </Navbar>
             </div>
         );

go/go_ahead/src/Components/Pages/AboutPage.js

 import React from 'react';
 
+import { PageTemplate } from 'Components';
+
 export default class AboutPage extends React.Component {
     state = {};
     render() {
         return (
-            <div>
+            <PageTemplate page={'about'}>
                 <p>About page</p>
-            </div>
+            </PageTemplate>
         );
     }
 }

go/go_ahead/src/Components/Pages/DhaynesPage.js

+import React from 'react';
+
+import { PageTemplate } from 'Components';
+
+export default class DhaynesPage extends React.Component {
+    state = {};
+    render() {
+        return (
+            <PageTemplate page={'dhaynes'}>
+                <h2>DAVID HAYNES</h2>
+            </PageTemplate>
+        );
+    }
+}

go/go_ahead/src/Components/Pages/HomePage.js

 import React from 'react';
 
+import { PageTemplate } from 'Components';
+
 export default class HomePage extends React.Component {
     state = {};
     render() {
         return (
-            <div>
+            <PageTemplate page={'home'}>
                 <p>Hello World! 1</p>
-            </div>
+            </PageTemplate>
         );
     }
 }

go/go_ahead/src/Components/Pages/index.js

 import HomePage from './HomePage';
 import AboutPage from './AboutPage';
+import DhaynesPage from './DhaynesPage';
 
-export { HomePage, AboutPage };
+export { HomePage, AboutPage, DhaynesPage };

go/go_ahead/src/Components/Templates/PageTemplate.js

@@ -5,8 +5,8 @@ import { NavBar } from 'Components';
 export default class PageTemplate extends React.Component {
     render() {
         return (
-            <div style={[styles.container, this.props.style]}>
-                <NavBar />
+            <div>
+                <NavBar page={this.props.page} />
                 <div>{this.props.children}</div>
             </div>
         );

go/go_ahead/src/Components/index.js

 import { PageTemplate } from './Templates';
-import { HomePage, AboutPage } from './Pages';
+import { HomePage, AboutPage, DhaynesPage } from './Pages';
 import { NavBar } from './Organisms';
 
 export {
@@ -8,6 +8,7 @@ export {
     //Pages
     HomePage,
     AboutPage,
+    DhaynesPage,
     //Organisms
     NavBar,
 };

go/go_ahead/src/Utils/Routes.js

+import React from 'react';
+import { Route } from 'react-router-dom';
+
+import { HomePage, AboutPage, DhaynesPage } from 'Components';
+
+const Routes = () => (
+    <div>
+        <Route path="/" exact component={HomePage} />
+        <Route path="/dhaynes" component={DhaynesPage} />
+        <Route path="/about" component={AboutPage} />
+    </div>
+);
+
+export default Routes;

go/go_ahead/src/Utils/index.js

+import Routes from './Routes';
+
+export { Routes };

package.json

@@ -2,15 +2,15 @@
     "name": "go",
     "version": "3.0",
     "description": "University-branded URL shortening",
-    "main": "index.js",
+    "main": "App.js",
     "repository": "git@git.gmu.edu:srct/go.git",
     "author": "Mason SRCT",
     "license": "Apache-2.0",
     "private": false,
     "scripts": {
         "start": "yarn dev",
-        "dev": "webpack --mode development ./go/go_ahead/src/index.js --output ./go/static/main.js --watch",
-        "build": "webpack --mode production ./project/frontend/src/index.js --output ./go/static/main.js"
+        "dev": "webpack --mode development ./go/go_ahead/src/App.js --output ./go/static/main.js --watch",
+        "build": "webpack --mode production ./project/frontend/src/App.js --output ./go/static/main.js"
     },
     "babel": {
         "presets": [

webpack.config.js

@@ -14,6 +14,7 @@ module.exports = {
         extensions: ['*', '.js', '.jsx'],
         alias: {
             Components: path.resolve(__dirname, './go/go_ahead/src/Components'),
+            Utils: path.resolve(__dirname, './go/go_ahead/src/Utils'),
         },
     },
 };