DebugCreate.jsx 1.59 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
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)
David Haynes's avatar
David Haynes committed
31 32 33
        })
          .then(response => console.log(response))
          .then(setSubmitting(false));
34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55
      }}
      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;