Commit 6345f07a authored by David Haynes's avatar David Haynes 🙆

Scaffolding for NewGoLink form

- formik + yup validation piped into masonstrap
parent 17a510da
Pipeline #3879 failed with stage
in 1 minute and 23 seconds
import React from "react";
import { Input, FormFeedback } from "reactstrap";
/**
* https://codebrains.io/build-react-forms-validation-formik-reactstrap/
*/
const MasonstrappedFormInput = ({
field,
form: { touched, errors },
...props
}) => (
<div>
<Input
invalid={!!(touched[field.name] && errors[field.name])}
{...field}
{...props}
/>
{touched[field.name] && errors[field.name] && (
<FormFeedback>{errors[field.name]}</FormFeedback>
)}
</div>
);
export default MasonstrappedFormInput;
import * as Yup from "yup"; import * as Yup from "yup";
var today = new Date();
var tomorrow = new Date();
tomorrow.setDate(today.getDate() + 1);
const NewGoLinkValidator = Yup.object().shape({ const NewGoLinkValidator = Yup.object().shape({
destination: Yup.string() targetURL: Yup.string()
.url() .required("You must supply a target URL!")
.max(1000, "Too Long!"), .url("Not a valid URL!")
short: Yup.string() .max(1000, "URL is too long!")
.required("Required")
.max(20, "Too Long!"),
expires: Yup.date()
.nullable()
.min(new Date())
}); });
export default NewGoLinkValidator; export default NewGoLinkValidator;
import React, { useState } from "react"; import React, { useState } from "react";
import NewGoLinkValidator from "../Molecules/NewGoLinkValidator"; import NewGoLinkValidator from "../Molecules/NewGoLinkValidator";
import { Formik, Field, Form, ErrorMessage } from "formik"; import { Formik, Field, Form } from "formik";
import { GetCSRFToken } from "../../Utils/GetCSRFToken"; import { GetCSRFToken } from "../../Utils/GetCSRFToken";
import { SingleDatePicker } from "react-dates"; import { SingleDatePicker } from "react-dates";
import moment from "moment";
import { FormGroup, Button, Label, FormText } from "reactstrap";
import MasonstrappedFormInput from "../Molecules/MasonstrappedFormInput";
const NewGoLinkForm = props => { const NewGoLinkForm = props => {
const [focused, setFocused] = useState(false); const [focused, setFocused] = useState(false);
var today = new Date();
var tomorrow = new Date();
tomorrow.setDate(today.getDate() + 1);
return <div />; return (
<Formik
//
initialValues={{
// shortcode: "",
targetURL: ""
// willExpire: false,
// expires: moment(tomorrow)
}}
//
validationSchema={NewGoLinkValidator}
//
onSubmit={({ targetURL }, { setSubmitting }) => {
console.log("submitting..");
console.log(targetURL);
setSubmitting(false);
}}
//
render={({
values,
isSubmitting,
setFieldValue,
errors,
touched,
handleBlur,
handleChange
}) => (
<Form>
<FormGroup>
<Label for="targetURL">Target URL</Label>
<Field
name="targetURL"
type="text"
placeholder="https://longwebsitelink.com"
component={MasonstrappedFormInput}
/>
<FormText>Example help text that remains unchanged.</FormText>
</FormGroup>
<Button type="submit" disabled={isSubmitting} outline color="primary">
Submit
</Button>
</Form>
)}
/>
);
}; };
export default NewGoLinkForm; export default NewGoLinkForm;
...@@ -5,7 +5,7 @@ import NewGolinkForm from "../Organisms/NewGoLinkForm"; ...@@ -5,7 +5,7 @@ import NewGolinkForm from "../Organisms/NewGoLinkForm";
const NewGoLinkPage = props => { const NewGoLinkPage = props => {
return ( return (
<AuthedPageTemplate> <AuthedPageTemplate>
<h2 className="mt-4">Create a new Go link</h2> <h2 className="mt-4 font-weight-light">Create a new Go link</h2>
<p className="text-muted"> <p className="text-muted">
A Go link is composed of the original "target" URL, and the shortcode to A Go link is composed of the original "target" URL, and the shortcode to
be used in the Go link. be used in the Go link.
......
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