Scaffolding for NewGoLink form

- formik + yup validation piped into masonstrap

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

+import React from "react";
+import { Input, FormFeedback } from "reactstrap";
+
+/**
+ * https://codebrains.io/build-react-forms-validation-formik-reactstrap/
+ */
+const MasonstrappedFormInput = ({
+  field,
+  form: { touched, errors },
+  ...props
+}) => (
+  <div>
+    <Input
+      invalid={!!(touched[field.name] && errors[field.name])}
+      {...field}
+      {...props}
+    />
+    {touched[field.name] && errors[field.name] && (
+      <FormFeedback>{errors[field.name]}</FormFeedback>
+    )}
+  </div>
+);
+
+export default MasonstrappedFormInput;

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

 import * as Yup from "yup";
 
+var today = new Date();
+var tomorrow = new Date();
+tomorrow.setDate(today.getDate() + 1);
+
 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())
+  targetURL: Yup.string()
+    .required("You must supply a target URL!")
+    .url("Not a valid URL!")
+    .max(1000, "URL is too long!")
 });
 
 export default NewGoLinkValidator;

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 { Formik, Field, Form } from "formik";
 import { GetCSRFToken } from "../../Utils/GetCSRFToken";
 import { SingleDatePicker } from "react-dates";
+import moment from "moment";
+import { FormGroup, Button, Label, FormText } from "reactstrap";
+import MasonstrappedFormInput from "../Molecules/MasonstrappedFormInput";
 
 const NewGoLinkForm = props => {
   const [focused, setFocused] = useState(false);
+  var today = new Date();
+  var tomorrow = new Date();
+  tomorrow.setDate(today.getDate() + 1);
 
-  return <div />;
+  return (
+    <Formik
+      //
+      initialValues={{
+        // shortcode: "",
+        targetURL: ""
+        // willExpire: false,
+        // expires: moment(tomorrow)
+      }}
+      //
+      validationSchema={NewGoLinkValidator}
+      //
+      onSubmit={({ targetURL }, { setSubmitting }) => {
+        console.log("submitting..");
+        console.log(targetURL);
+        setSubmitting(false);
+      }}
+      //
+      render={({
+        values,
+        isSubmitting,
+        setFieldValue,
+        errors,
+        touched,
+        handleBlur,
+        handleChange
+      }) => (
+        <Form>
+          <FormGroup>
+            <Label for="targetURL">Target URL</Label>
+            <Field
+              name="targetURL"
+              type="text"
+              placeholder="https://longwebsitelink.com"
+              component={MasonstrappedFormInput}
+            />
+            <FormText>Example help text that remains unchanged.</FormText>
+          </FormGroup>
+
+          <Button type="submit" disabled={isSubmitting} outline color="primary">
+            Submit
+          </Button>
+        </Form>
+      )}
+    />
+  );
 };
 
 export default NewGoLinkForm;

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

@@ -5,7 +5,7 @@ import NewGolinkForm from "../Organisms/NewGoLinkForm";
 const NewGoLinkPage = props => {
   return (
     <AuthedPageTemplate>
-      <h2 className="mt-4">Create a new Go link</h2>
+      <h2 className="mt-4 font-weight-light">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.