Refactor DebugCreate + Abstract out functionality

- whee reusability

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

+import React from "react";
+import * as Yup from "yup";
+import { Formik, Field, Form, ErrorMessage } from "formik";
+import { GetCSRFToken } from "../../Utils";
+
+const DebugCreateYup = 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(new Date().getTime() + 24 * 60 * 60 * 1000))
+});
+
+const DebugCreate = () => (
+  <div>
+    <Formik
+      initialValues={{ destination: "", short: "", expires: null }}
+      validationSchema={DebugCreateYup}
+      onSubmit={(values, { setSubmitting }) => {
+        fetch("/api/golinks/", {
+          method: "post",
+          headers: {
+            "Content-Type": "application/json",
+            "X-CSRFToken": GetCSRFToken()
+          },
+          body: JSON.stringify(values)
+        }).then(response => console.log(response));
+      }}
+      render={({ isSubmitting }) => (
+        <Form>
+          {"Destination: "}
+          <Field name="destination" placeholder="https://longwebsitelink.com" />
+          <ErrorMessage name="destination" component="div" />
+          {"Short: "}
+          <Field name="short" />
+          <ErrorMessage name="short" />
+          {"Expires: "}
+          <Field type="select" name="expires" placeholder="leave blank" />
+          <ErrorMessage name="expires" />
+          <button type="submit" disabled={isSubmitting}>
+            Submit
+          </button>
+        </Form>
+      )}
+    />
+  </div>
+);
+
+export default DebugCreate;

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

 import AuthButton from "./AuthButton";
 import DebugRead from "./DebugRead";
+import DebugCreate from "./DebugCreate";
 
-export { AuthButton, DebugRead };
+export { AuthButton, DebugRead, DebugCreate };

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, DebugRead } from "Components";
-
-const DebugCreate = 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(new Date().getTime() + 24 * 60 * 60 * 1000))
-});
+import { PageTemplate, DebugRead, DebugCreate } from "Components";
 
 class DebugCRUD extends React.Component {
   constructor(props) {
@@ -21,22 +7,6 @@ class DebugCRUD extends React.Component {
     this.state = {};
   }
 
-  getCookie(name) {
-    var cookieValue = null;
-    if (document.cookie && document.cookie != "") {
-      var cookies = document.cookie.split(";");
-      for (var i = 0; i < cookies.length; i++) {
-        var cookie = cookies[i].trim();
-        // Does this cookie string begin with the name we want?
-        if (cookie.substring(0, name.length + 1) == name + "=") {
-          cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
-          break;
-        }
-      }
-    }
-    return cookieValue;
-  }
-
   render() {
     return (
       <PageTemplate>
@@ -44,36 +14,7 @@ class DebugCRUD extends React.Component {
           <h1>Debug CRUD Page</h1>
 
           <h3>Create</h3>
-          <Formik
-            initialValues={{ destination: "", short: "", expires: null }}
-            validationSchema={DebugCreate}
-            onSubmit={(values, { setSubmitting }) => {
-              fetch("/api/golinks/", {
-                method: "post",
-                headers: {
-                  "Content-Type": "application/json",
-                  "X-CSRFToken": this.getCookie("csrftoken")
-                },
-                body: JSON.stringify(values)
-              }).then(response => console.log(response));
-            }}
-            render={({ isSubmitting }) => (
-              <Form>
-                <Field
-                  name="destination"
-                  placeholder="https://longwebsitelink.com"
-                />{" "}
-                <ErrorMessage name="destination" component="div" />
-                <Field name="short" />
-                <ErrorMessage name="short" />
-                <Field type="select" name="expires" />
-                <ErrorMessage name="expires" />
-                <button type="submit" disabled={isSubmitting}>
-                  Submit
-                </button>
-              </Form>
-            )}
-          />
+          <DebugCreate />
 
           <h3>Read</h3>
           <DebugRead />

go/go_ahead/src/Components/index.js

-import { AuthButton, DebugRead } from "./Molecules";
+import { AuthButton, DebugRead, DebugCreate } from "./Molecules";
 import { NavBar } from "./Organisms";
 import { HomePage, AboutPage, DhaynesPage, DebugCRUD } from "./Pages";
 import { PageTemplate } from "./Templates";
@@ -7,6 +7,7 @@ export {
   //Molecules
   AuthButton,
   DebugRead,
+  DebugCreate,
   //Organisms
   NavBar,
   //Pages

go/go_ahead/src/Utils/GetCSRFToken.js

+const GetCSRFToken = () => {
+  var cookieValue = null;
+  var name = "csrftoken";
+  if (document.cookie && document.cookie != "") {
+    var cookies = document.cookie.split(";");
+    for (var i = 0; i < cookies.length; i++) {
+      var cookie = cookies[i].trim();
+      // Does this cookie string begin with the name we want?
+      if (cookie.substring(0, name.length + 1) == name + "=") {
+        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
+        break;
+      }
+    }
+  }
+  return cookieValue;
+};
+
+export default GetCSRFToken;

go/go_ahead/src/Utils/index.js

 import Routes from "./Routes";
 import GetAllGoLinks from "./GetAllGoLinks";
+import GetCSRFToken from "./GetCSRFToken";
 
-export { Routes, GetAllGoLinks };
+export { Routes, GetAllGoLinks, GetCSRFToken };