really bad first passing working DebugUpdate

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

+import React from "react";
+import * as Yup from "yup";
+import { Formik, Field, Form, ErrorMessage } from "formik";
+import { GetCSRFToken } from "../../Utils";
+
+const DebugUpdateYup = Yup.object().shape({
+  destination: Yup.string()
+    .url()
+    .max(1000, "Too Long!"),
+  oldshort: Yup.string()
+    .required("Required")
+    .max(20, "Too Long!"),
+  newshort: Yup.string()
+    .required("Required")
+    .max(20, "Too Long!")
+  // expires: Yup.date()
+  //   .nullable()
+  //   .min(new Date(new Date().getTime() + 24 * 60 * 60 * 1000))
+});
+
+const DebugUpdate = () => (
+  <div>
+    <Formik
+      initialValues={{
+        oldshort: "",
+        newshort: "",
+        newdestination: "",
+        expires: null
+      }}
+      validationSchema={DebugUpdateYup}
+      onSubmit={(
+        { newshort, oldshort, expires, destination },
+        { setSubmitting }
+      ) => {
+        const updateURL = "/api/golinks/" + oldshort + "/";
+        const payload = {
+          short: newshort,
+          destination: destination,
+          expires: expires
+        };
+        fetch(updateURL, {
+          method: "put",
+          headers: {
+            "Content-Type": "application/json",
+            "X-CSRFToken": GetCSRFToken()
+          },
+          body: JSON.stringify(payload)
+        })
+          .then(response => console.log(response))
+          .then(setSubmitting(false));
+      }}
+      render={({ isSubmitting }) => (
+        <Form>
+          {"Old Short: "}
+          <Field name="oldshort" />
+          <ErrorMessage name="oldshort" />
+
+          {"New Destination: "}
+          <Field name="destination" placeholder="https://longwebsitelink.com" />
+          <ErrorMessage name="destination" component="div" />
+
+          {"New Short: "}
+          <Field name="newshort" />
+          <ErrorMessage name="newshort" />
+
+          {"New Expires: "}
+          <Field type="select" name="expires" placeholder="leave blank" />
+          <ErrorMessage name="expires" />
+          <button type="submit" disabled={isSubmitting}>
+            Submit
+          </button>
+        </Form>
+      )}
+    />
+  </div>
+);
+export default DebugUpdate;

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

@@ -2,5 +2,6 @@ import AuthButton from "./AuthButton";
 import DebugRead from "./DebugRead";
 import DebugCreate from "./DebugCreate";
 import DebugDelete from "./DebugDelete";
+import DebugUpdate from "./DebugUpdate";
 
-export { AuthButton, DebugRead, DebugCreate, DebugDelete };
+export { AuthButton, DebugRead, DebugCreate, DebugDelete, DebugUpdate };

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

 import React from "react";
-import { PageTemplate, DebugRead, DebugCreate, DebugDelete } from "Components";
+import {
+  PageTemplate,
+  DebugRead,
+  DebugCreate,
+  DebugDelete,
+  DebugUpdate
+} from "Components";
 
 class DebugCRUD extends React.Component {
   constructor(props) {
@@ -20,6 +26,8 @@ class DebugCRUD extends React.Component {
           <DebugRead />
 
           <h3>Update</h3>
+          <DebugUpdate />
+
           <h3>Delete</h3>
           <DebugDelete />
         </div>

go/go_ahead/src/Components/index.js

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