Scaffolding for "New Link"

- imitation is the sincerest form of flattery

go/go_ahead/src/Components/Molecules/NewGoLinkValidator.js

+import * as Yup from "yup";
+
+const NewGoLinkValidator = Yup.object().shape({
+  destination: Yup.string()
+    .url()
+    .max(1000, "Too Long!"),
+  short: Yup.string()
+    .required("Required")
+    .max(20, "Too Long!"),
+  expires: Yup.date()
+    .nullable()
+    .min(new Date())
+});
+
+export default NewGoLinkValidator;

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

@@ -34,8 +34,8 @@ const NavBar = props => {
         <Collapse isOpen={!collapsed} navbar>
           <Nav className="mx-auto" navbar>
             <NavItem>
-              <NavLink href="#/dhaynes" active={pathname == "/dhaynes"}>
-                Dhaynes
+              <NavLink href="#/new" active={pathname == "/new"}>
+                New Link
               </NavLink>
             </NavItem>
             <NavItem>

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

+import React, { useState } from "react";
+import NewGoLinkValidator from "../Molecules/NewGoLinkValidator";
+import { Formik, Field, Form, ErrorMessage } from "formik";
+import { GetCSRFToken } from "../../Utils/GetCSRFToken";
+import { SingleDatePicker } from "react-dates";
+
+const NewGoLinkForm = props => {
+  const [focused, setFocused] = useState(false);
+
+  return <div />;
+};
+
+export default NewGoLinkForm;

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

 import NavBar from "./NavBar";
+import NewGoLinkForm from "./NewGoLinkForm";
 
-export { NavBar };
+export { NavBar, NewGoLinkForm };

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

-import React from "react";
-
-import { PageTemplate } from "Components";
-
-const DhaynesPage = () => (
-  <PageTemplate>
-    <h2>DAVID HAYNES</h2>
-  </PageTemplate>
-);
-
-export default DhaynesPage;

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

+import React from "react";
+import AuthedPageTemplate from "../Templates/AuthedPageTemplate";
+import NewGolinkForm from "../Organisms/NewGoLinkForm";
+
+const NewGoLinkPage = props => {
+  return (
+    <AuthedPageTemplate>
+      <h2 className="mt-4">Create a new Go link</h2>
+      <p className="text-muted">
+        A Go link is composed of the original "target" URL, and the shortcode to
+        be used in the Go link.
+      </p>
+      <legend />
+      <NewGolinkForm />
+    </AuthedPageTemplate>
+  );
+};
+
+export default NewGoLinkPage;

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

 import HomePage from "./HomePage";
 import AboutPage from "./AboutPage";
-import DhaynesPage from "./DhaynesPage";
 import DebugCRUD from "./DebugCRUD";
+import NewGoLinkPage from "./NewGoLinkPage";
 
-export { HomePage, AboutPage, DhaynesPage, DebugCRUD };
+export { HomePage, AboutPage, DebugCRUD, NewGoLinkPage };

go/go_ahead/src/Components/index.js

@@ -5,8 +5,8 @@ import {
   DebugDelete,
   DebugUpdate
 } from "./Molecules";
-import { NavBar } from "./Organisms";
-import { HomePage, AboutPage, DhaynesPage, DebugCRUD } from "./Pages";
+import { NavBar, NewGoLinkForm } from "./Organisms";
+import { HomePage, AboutPage, DebugCRUD, NewGoLinkPage } from "./Pages";
 import { PageTemplate, AuthedPageTemplate } from "./Templates";
 
 export {
@@ -18,11 +18,12 @@ export {
   DebugUpdate,
   //Organisms
   NavBar,
+  NewGoLinkForm,
   //Pages
   HomePage,
   AboutPage,
-  DhaynesPage,
   DebugCRUD,
+  NewGoLinkPage,
   //Templates
   PageTemplate,
   AuthedPageTemplate

go/go_ahead/src/Utils/Routes.jsx

@@ -3,9 +3,9 @@ import { Route, withRouter, Switch } from "react-router-dom";
 import { NavBar } from "Components";
 
 const Home = lazy(() => import("../Components/Pages/HomePage"));
-const Dhaynes = lazy(() => import("../Components/Pages/DhaynesPage"));
 const About = lazy(() => import("../Components/Pages/AboutPage"));
 const DebugCRUD = lazy(() => import("../Components/Pages/DebugCRUD"));
+const NewGoLinkPage = lazy(() => import("../Components/Pages/NewGoLinkPage"));
 
 const NavBarWithRouter = withRouter(props => <NavBar {...props} />);
 
@@ -15,9 +15,9 @@ const Routes = () => (
     <Suspense fallback={<div>Loading...</div>}>
       <Switch>
         <Route path="/" exact component={Home} />
-        <Route path="/dhaynes" component={Dhaynes} />
         <Route path="/about" component={About} />
         <Route path="/debug" component={DebugCRUD} />
+        <Route path="/new" component={NewGoLinkPage} />
         <Route render={() => <div>404</div>} />
       </Switch>
     </Suspense>