Skip to content

Commit

Permalink
[FUEL-002] feat: form validation
Browse files Browse the repository at this point in the history
  • Loading branch information
@jhumeey
jhumeey committed Oct 23, 2021
1 parent 58220e7 commit f5f131b
Show file tree
Hide file tree
Showing 4 changed files with 80 additions and 29 deletions.
45 changes: 18 additions & 27 deletions components/modals/SuggestResourceModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,12 @@ import * as React from "react";
import { supabase } from "../../utils/supabase";
import { ToggleModalProps } from "../navbar/types";
import { Formik, Field, Form, ErrorMessage, FormikHelpers } from "formik";
import * as Yup from 'yup';
import { FormValues } from "./interface";
import { toast } from "react-toastify";
import { ResourceSchema } from "../../utils/yupValidation";



export default function ResourceModal(props: ToggleModalProps) {
const initialValues: FormValues = { name: "", link: "", tag: "" };
Expand Down Expand Up @@ -38,24 +42,14 @@ export default function ResourceModal(props: ToggleModalProps) {
</div>
<Formik
initialValues={initialValues}
// validate={(values) => {
// const errors: FormValues = { name: "", link: "", tag: "" };
// if (!values.name) {
// errors.name = "Required";
// } else if (!values.link) {
// errors.link = "Required";
// } else if (!values.tag) {
// errors.tag = "Required";
// }
// return errors;
// }}
validationSchema={ResourceSchema}
onSubmit={async (values: FormValues, { setSubmitting }:FormikHelpers<FormValues>) => {
await submitResource(values);
setSubmitting(false);
props.setShowModal(false);
}}
>
{({ isSubmitting }) => (
{({ isSubmitting, errors, touched }) => (
<Form className="p-5">
<div className="mb-6">
<label
Expand All @@ -70,11 +64,10 @@ export default function ResourceModal(props: ToggleModalProps) {
className="form-input mt-1 block w-full bg-black-brand-01 text-white rounded-lg p-2 "
placeholder="w3 schools"
/>
<ErrorMessage
name="name"
component="div"
className="text-red-500"
/>
{errors.name && touched.name ? (
<div className="text-red-700">{errors.name}</div>
) : null
}
</div>
<div className="mb-6">
<label
Expand All @@ -90,11 +83,10 @@ export default function ResourceModal(props: ToggleModalProps) {
className="form-input mt-1 block w-full bg-black-brand-01 text-white rounded-lg p-2 "
placeholder="https://www.smilebox.com"
/>
<ErrorMessage
name="link"
component="div"
className="text-red-500"
/>
{errors.link && touched.link ? (
<div className="text-red-700">{errors.link}</div>
) : null
}
</div>
<div className="mb-6">
<label
Expand All @@ -118,11 +110,10 @@ export default function ResourceModal(props: ToggleModalProps) {
<option value="docs">Docs</option>
<option value="playground">Playground</option>
</Field>
<ErrorMessage
name="tag"
component="div"
className="text-red-500"
/>
{errors.tag && touched.tag ? (
<div className="text-red-700">{errors.tag}</div>
) : null
}
</div>

<div className="mb-6 text-center">
Expand Down
3 changes: 2 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,8 @@
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-query": "^3.26.0",
"react-toastify": "^8.0.3"
"react-toastify": "^8.0.3",
"yup": "^0.32.11"
},
"devDependencies": {
"@types/node": "^12.12.21",
Expand Down
26 changes: 26 additions & 0 deletions utils/yupValidation.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import * as Yup from 'yup';
export const ResourceSchema = Yup.object().shape({

name: Yup.string()

.min(2, 'Too Short!')

.max(20, 'Too Long!')

.required('Required'),

link: Yup.string()

.min(2, 'Too Short!')

.max(50, 'Too Long!')

.matches(
/((https?):\/\/)?(www.)?[a-z0-9]+(\.[a-z]{2,}){1,3}(#?\/?[a-zA-Z0-9#]+)*\/?(\?[a-zA-Z0-9-_]+=[a-zA-Z0-9-%]+&?)?$/,
'Please enter a valid url!'
)
.required('Please enter a valid url!'),

tag: Yup.string().required('Required'),

});
35 changes: 34 additions & 1 deletion yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@
dependencies:
regenerator-runtime "^0.13.4"

"@babel/runtime@^7.12.5", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.7.2":
"@babel/runtime@^7.12.5", "@babel/runtime@^7.15.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.7.2":
version "7.15.4"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.15.4.tgz#fd17d16bfdf878e6dd02d19753a39fa8a8d9c84a"
integrity sha512-99catp6bHCaxr4sJ/DbTGgHS4+Rs2RVd2g7iOap6SLGPDknRK9ztKNsE/Fg6QhSeh1FGE5f6gHGQmvvn3I3xhw==
Expand Down Expand Up @@ -220,6 +220,11 @@
dependencies:
mini-svg-data-uri "^1.2.3"

"@types/lodash@^4.14.175":
version "4.14.176"
resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.176.tgz#641150fc1cda36fbfa329de603bbb175d7ee20c0"
integrity sha512-xZmuPTa3rlZoIbtDUyJKZQimJV3bxCmzMIO2c9Pz9afyDro6kr7R79GwcB6mRhuoPmV2p1Vb66WOJH7F886WKQ==

"@types/node@*":
version "16.10.2"
resolved "https://registry.yarnpkg.com/@types/node/-/node-16.10.2.tgz#5764ca9aa94470adb4e1185fe2e9f19458992b2e"
Expand Down Expand Up @@ -1790,6 +1795,11 @@ nano-time@1.0.0:
dependencies:
big-integer "^1.6.16"

nanoclone@^0.2.1:
version "0.2.1"
resolved "https://registry.yarnpkg.com/nanoclone/-/nanoclone-0.2.1.tgz#dd4090f8f1a110d26bb32c49ed2f5b9235209ed4"
integrity sha512-wynEP02LmIbLpcYw8uBKpcfF6dmg2vcpKqxeH5UcoKEYdExslsdUA4ugFauuaeYdTB76ez6gJW8XAZ6CgkXYxA==

nanocolors@^0.2.12, nanocolors@^0.2.2, nanocolors@^0.2.8:
version "0.2.12"
resolved "https://registry.yarnpkg.com/nanocolors/-/nanocolors-0.2.12.tgz#4d05932e70116078673ea4cc6699a1c56cc77777"
Expand Down Expand Up @@ -2212,6 +2222,11 @@ process@0.11.10, process@^0.11.10:
resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
integrity sha1-czIwDoQBYb2j5podHZGn1LwW8YI=

property-expr@^2.0.4:
version "2.0.4"
resolved "https://registry.yarnpkg.com/property-expr/-/property-expr-2.0.4.tgz#37b925478e58965031bb612ec5b3260f8241e910"
integrity sha512-sFPkHQjVKheDNnPvotjQmm3KD3uk1fWKUN7CrpdbwmUx3CrG3QiM8QpTSimvig5vTXmTvjz7+TDvXOI9+4rkcg==

public-encrypt@^4.0.0:
version "4.0.3"
resolved "https://registry.yarnpkg.com/public-encrypt/-/public-encrypt-4.0.3.tgz#4fcc9d77a07e48ba7527e7cbe0de33d0701331e0"
Expand Down Expand Up @@ -2779,6 +2794,11 @@ toidentifier@1.0.0:
resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.0.tgz#7e1be3470f1e77948bc43d94a3c8f4d7752ba553"
integrity sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw==

toposort@^2.0.2:
version "2.0.2"
resolved "https://registry.yarnpkg.com/toposort/-/toposort-2.0.2.tgz#ae21768175d1559d48bef35420b2f4962f09c330"
integrity sha1-riF2gXXRVZ1IvvNUILL0li8JwzA=

tr46@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/tr46/-/tr46-1.0.1.tgz#a8b13fd6bfd2489519674ccde55ba3693b706d09"
Expand Down Expand Up @@ -3005,3 +3025,16 @@ yocto-queue@^0.1.0:
version "0.1.0"
resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==

yup@^0.32.11:
version "0.32.11"
resolved "https://registry.yarnpkg.com/yup/-/yup-0.32.11.tgz#d67fb83eefa4698607982e63f7ca4c5ed3cf18c5"
integrity sha512-Z2Fe1bn+eLstG8DRR6FTavGD+MeAwyfmouhHsIUgaADz8jvFKbO/fXc2trJKZg+5EBjh4gGm3iU/t3onKlXHIg==
dependencies:
"@babel/runtime" "^7.15.4"
"@types/lodash" "^4.14.175"
lodash "^4.17.21"
lodash-es "^4.17.21"
nanoclone "^0.2.1"
property-expr "^2.0.4"
toposort "^2.0.2"

0 comments on commit f5f131b

Please sign in to comment.