Commit 7600acb2 authored by David Haynes's avatar David Haynes 🙆

Refactor DebugCreate + Abstract out functionality

- whee reusability
parent 35506d49
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;
import AuthButton from "./AuthButton";
import DebugRead from "./DebugRead";
import DebugCreate from "./DebugCreate";
export { AuthButton, DebugRead };
export { AuthButton, DebugRead, DebugCreate };
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 />
......
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
......
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;
import Routes from "./Routes";
import GetAllGoLinks from "./GetAllGoLinks";
import GetCSRFToken from "./GetCSRFToken";
export { Routes, GetAllGoLinks };
export { Routes, GetAllGoLinks, GetCSRFToken };
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment