NavBar fully operational without re-renders

- Also debug page populated with formsssssss

go/go_ahead/src/Components/Molecules/AuthButton.jsx

@@ -33,11 +33,11 @@ class AuthButton extends React.Component {
         <div>
           {is_auth ? (
             <Button color="info" href="/auth/logout">
-              Logout
+              Logout <i className="fas fa-sign-out-alt" />
             </Button>
           ) : (
             <Button color="info" href="/auth/login">
-              Login
+              Login <i className="fas fa-sign-in-alt" />
             </Button>
           )}
         </div>

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

@@ -9,6 +9,7 @@ import {
   NavbarToggler,
   Collapse
 } from "reactstrap";
+import { AuthButton } from "../";
 
 class NavBar extends React.Component {
   constructor(props) {
@@ -27,7 +28,7 @@ class NavBar extends React.Component {
   }
 
   render() {
-    const { page } = this.props;
+    const { pathname } = this.props.location;
     return (
       <Navbar dark color="dark" expand="md">
         <Container>
@@ -45,20 +46,21 @@ class NavBar extends React.Component {
           <Collapse isOpen={!this.state.collapsed} navbar>
             <Nav className="ml-auto" navbar>
               <NavItem>
-                <NavLink href="#/dhaynes" active={page == "dhaynes"}>
+                <NavLink href="#/dhaynes" active={pathname == "/dhaynes"}>
                   Dhaynes
                 </NavLink>
               </NavItem>
               <NavItem>
-                <NavLink href="#/about" active={page == "about"}>
+                <NavLink href="#/about" active={pathname == "/about"}>
                   About
                 </NavLink>
               </NavItem>
               <NavItem>
-                <NavLink href="#/debug" active={page == "debug"}>
+                <NavLink href="#/debug" active={pathname == "/debug"}>
                   Debug
                 </NavLink>
               </NavItem>
+              <AuthButton />
             </Nav>
           </Collapse>
         </Container>

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

@@ -6,7 +6,7 @@ import { PageTemplate } from "Components";
 const AboutPage = () => {
   document.title = "About";
   return (
-    <PageTemplate page={"about"}>
+    <PageTemplate>
       <p>About page</p>
       <Card className="shadow-lg p-3 mb-5 bg-white rounded">
         <CardBody>

go/go_ahead/src/Components/Pages/DebugCRUD.jsx

 import React from "react";
 import { Formik, Field, Form, ErrorMessage } from "formik";
 import * as Yup from "yup";
+import { PageTemplate } from "Components";
 
 const SignupSchema = Yup.object().shape({
   password: Yup.string()
@@ -12,9 +13,80 @@ const SignupSchema = Yup.object().shape({
 });
 
 const DebugCRUD = () => (
+  <PageTemplate>
     <div>
       <h1>Debug CRUD Page</h1>
-    <div>
+
+      <h3>Create</h3>
+      <Formik
+        initialValues={{ email: "", password: "" }}
+        validationSchema={SignupSchema}
+        onSubmit={(values, { setSubmitting }) => {
+          setTimeout(() => {
+            console.log(JSON.stringify(values, null, 2));
+            setSubmitting(false);
+          }, 400);
+        }}
+        render={({ isSubmitting }) => (
+          <Form>
+            <Field type="email" name="email" placeholder="Email" />
+            <ErrorMessage name="email" component="div" />
+            <Field type="password" name="password" />
+            <ErrorMessage name="password" />
+            <button type="submit" disabled={isSubmitting}>
+              Submit
+            </button>
+          </Form>
+        )}
+      />
+
+      <h3>Read</h3>
+      <Formik
+        initialValues={{ email: "", password: "" }}
+        validationSchema={SignupSchema}
+        onSubmit={(values, { setSubmitting }) => {
+          setTimeout(() => {
+            console.log(JSON.stringify(values, null, 2));
+            setSubmitting(false);
+          }, 400);
+        }}
+        render={({ isSubmitting }) => (
+          <Form>
+            <Field type="email" name="email" placeholder="Email" />
+            <ErrorMessage name="email" component="div" />
+            <Field type="password" name="password" />
+            <ErrorMessage name="password" />
+            <button type="submit" disabled={isSubmitting}>
+              Submit
+            </button>
+          </Form>
+        )}
+      />
+
+      <h3>Update</h3>
+      <Formik
+        initialValues={{ email: "", password: "" }}
+        validationSchema={SignupSchema}
+        onSubmit={(values, { setSubmitting }) => {
+          setTimeout(() => {
+            console.log(JSON.stringify(values, null, 2));
+            setSubmitting(false);
+          }, 400);
+        }}
+        render={({ isSubmitting }) => (
+          <Form>
+            <Field type="email" name="email" placeholder="Email" />
+            <ErrorMessage name="email" component="div" />
+            <Field type="password" name="password" />
+            <ErrorMessage name="password" />
+            <button type="submit" disabled={isSubmitting}>
+              Submit
+            </button>
+          </Form>
+        )}
+      />
+
+      <h3>Delete</h3>
       <Formik
         initialValues={{ email: "", password: "" }}
         validationSchema={SignupSchema}
@@ -37,7 +109,7 @@ const DebugCRUD = () => (
         )}
       />
     </div>
-  </div>
+  </PageTemplate>
 );
 
 export default DebugCRUD;

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

@@ -3,7 +3,7 @@ import React from "react";
 import { PageTemplate } from "Components";
 
 const DhaynesPage = () => (
-  <PageTemplate page={"dhaynes"}>
+  <PageTemplate>
     <h2>DAVID HAYNES</h2>
   </PageTemplate>
 );

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

 import React from "react";
-
-import { PageTemplate, AuthButton } from "Components";
+import { PageTemplate } from "Components";
 
 const HomePage = () => (
-  <PageTemplate page={"home"}>
-    <p>Hello World! 1</p>
-    <AuthButton />
+  <PageTemplate>
+    <p>Hello World!</p>
   </PageTemplate>
 );
 

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

 import React from "react";
-import { NavBar } from "Components";
 import { Container } from "reactstrap";
 
-const PageTemplate = props => (
-  <div>
-    <NavBar page={props.page} />
-    <Container>{props.children}</Container>
-  </div>
-);
+const PageTemplate = props => <Container>{props.children}</Container>;
 
 export default PageTemplate;

go/go_ahead/src/Utils/Routes.jsx

 import React from "react";
-import { Route } from "react-router-dom";
-import { HomePage, AboutPage, DhaynesPage, DebugCRUD } from "Components";
+import { Route, withRouter } from "react-router-dom";
+import {
+  HomePage,
+  AboutPage,
+  DhaynesPage,
+  DebugCRUD,
+  NavBar
+} from "Components";
+
+const NavBarWithRouter = withRouter(props => <NavBar {...props} />);
 
 const Routes = () => (
   <div>
+    <NavBarWithRouter />
     <Route path="/" exact component={HomePage} />
     <Route path="/dhaynes" component={DhaynesPage} />
     <Route path="/about" component={AboutPage} />