Commit e14d8cc3 authored by David Haynes's avatar David Haynes 🙆

Work began on async fetching information from the API -> Components

- We need to remove the authorization feature on the API given that now,
all logged in users have the ability to create Go links
parent e46be336
Pipeline #3563 passed with stage
in 1 minute and 9 seconds
...@@ -2,6 +2,7 @@ import React from "react"; ...@@ -2,6 +2,7 @@ import React from "react";
import { Formik, Field, Form, ErrorMessage } from "formik"; import { Formik, Field, Form, ErrorMessage } from "formik";
import * as Yup from "yup"; import * as Yup from "yup";
import { PageTemplate } from "Components"; import { PageTemplate } from "Components";
import { GetAllGoLinks } from "../../Utils";
const SignupSchema = Yup.object().shape({ const SignupSchema = Yup.object().shape({
password: Yup.string() password: Yup.string()
...@@ -12,104 +13,123 @@ const SignupSchema = Yup.object().shape({ ...@@ -12,104 +13,123 @@ const SignupSchema = Yup.object().shape({
.required("Required") .required("Required")
}); });
const DebugCRUD = () => ( class DebugCRUD extends React.Component {
<PageTemplate> constructor(props) {
<div> super(props);
<h1>Debug CRUD Page</h1> this.state = { AllGoLinks: "", error: null };
}
<h3>Create</h3> async componentDidMount() {
<Formik GetAllGoLinks(this.props.authToken)
initialValues={{ email: "", password: "" }} .then(data =>
validationSchema={SignupSchema} this.setState({
onSubmit={(values, { setSubmitting }) => { AllGoLinks: data
setTimeout(() => { })
console.log(JSON.stringify(values, null, 2)); )
setSubmitting(false); .catch(reason => this.setState({ error: reason }));
}, 400); }
}}
render={({ isSubmitting }) => (
<Form>
<Field type="email" name="email" placeholder="Email" />
<ErrorMessage name="email" component="div" />
<Field type="password" name="password" />
<ErrorMessage name="password" />
<button type="submit" disabled={isSubmitting}>
Submit
</button>
</Form>
)}
/>
<h3>Read</h3> render() {
<Formik return (
initialValues={{ email: "", password: "" }} <PageTemplate>
validationSchema={SignupSchema} <div>
onSubmit={(values, { setSubmitting }) => { <h1>Debug CRUD Page</h1>
setTimeout(() => {
console.log(JSON.stringify(values, null, 2));
setSubmitting(false);
}, 400);
}}
render={({ isSubmitting }) => (
<Form>
<Field type="email" name="email" placeholder="Email" />
<ErrorMessage name="email" component="div" />
<Field type="password" name="password" />
<ErrorMessage name="password" />
<button type="submit" disabled={isSubmitting}>
Submit
</button>
</Form>
)}
/>
<h3>Update</h3> <h3>Create</h3>
<Formik <Formik
initialValues={{ email: "", password: "" }} initialValues={{ email: "", password: "" }}
validationSchema={SignupSchema} validationSchema={SignupSchema}
onSubmit={(values, { setSubmitting }) => { onSubmit={(values, { setSubmitting }) => {
setTimeout(() => { setTimeout(() => {
console.log(JSON.stringify(values, null, 2)); console.log(JSON.stringify(values, null, 2));
setSubmitting(false); setSubmitting(false);
}, 400); }, 400);
}} }}
render={({ isSubmitting }) => ( render={({ isSubmitting }) => (
<Form> <Form>
<Field type="email" name="email" placeholder="Email" /> <Field type="email" name="email" placeholder="Email" />
<ErrorMessage name="email" component="div" /> <ErrorMessage name="email" component="div" />
<Field type="password" name="password" /> <Field type="password" name="password" />
<ErrorMessage name="password" /> <ErrorMessage name="password" />
<button type="submit" disabled={isSubmitting}> <button type="submit" disabled={isSubmitting}>
Submit Submit
</button> </button>
</Form> </Form>
)} )}
/> />
<h3>Delete</h3> <h3>Read</h3>
<Formik <Formik
initialValues={{ email: "", password: "" }} initialValues={{ email: "", password: "" }}
validationSchema={SignupSchema} validationSchema={SignupSchema}
onSubmit={(values, { setSubmitting }) => { onSubmit={(values, { setSubmitting }) => {
setTimeout(() => { setTimeout(() => {
console.log(JSON.stringify(values, null, 2)); console.log(JSON.stringify(values, null, 2));
setSubmitting(false); setSubmitting(false);
}, 400); }, 400);
}} }}
render={({ isSubmitting }) => ( render={({ isSubmitting }) => (
<Form> <Form>
<Field type="email" name="email" placeholder="Email" /> <Field type="email" name="email" placeholder="Email" />
<ErrorMessage name="email" component="div" /> <ErrorMessage name="email" component="div" />
<Field type="password" name="password" /> <Field type="password" name="password" />
<ErrorMessage name="password" /> <ErrorMessage name="password" />
<button type="submit" disabled={isSubmitting}> <button type="submit" disabled={isSubmitting}>
Submit Submit
</button> </button>
</Form> </Form>
)} )}
/> />
</div>
</PageTemplate> <h3>Update</h3>
); <Formik
initialValues={{ email: "", password: "" }}
validationSchema={SignupSchema}
onSubmit={(values, { setSubmitting }) => {
setTimeout(() => {
console.log(JSON.stringify(values, null, 2));
setSubmitting(false);
}, 400);
}}
render={({ isSubmitting }) => (
<Form>
<Field type="email" name="email" placeholder="Email" />
<ErrorMessage name="email" component="div" />
<Field type="password" name="password" />
<ErrorMessage name="password" />
<button type="submit" disabled={isSubmitting}>
Submit
</button>
</Form>
)}
/>
<h3>Delete</h3>
<Formik
initialValues={{ email: "", password: "" }}
validationSchema={SignupSchema}
onSubmit={(values, { setSubmitting }) => {
setTimeout(() => {
console.log(JSON.stringify(values, null, 2));
setSubmitting(false);
}, 400);
}}
render={({ isSubmitting }) => (
<Form>
<Field type="email" name="email" placeholder="Email" />
<ErrorMessage name="email" component="div" />
<Field type="password" name="password" />
<ErrorMessage name="password" />
<button type="submit" disabled={isSubmitting}>
Submit
</button>
</Form>
)}
/>
</div>
</PageTemplate>
);
}
}
export default DebugCRUD; export default DebugCRUD;
async function GetAllGoLinks(token) {
let response = await fetch("/auth/token");
let data = await response.json();
return data;
}
export default GetAllGoLinks;
import Routes from "./Routes"; import Routes from "./Routes";
import GetAllGoLinks from "./GetAllGoLinks";
export { Routes }; export { Routes, GetAllGoLinks };
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