Remove Yup dependency and fix link validation

This commit is contained in:
Jorik Schellekens 2020-09-01 09:57:49 +02:00
parent f7abaadef1
commit 890669741c
2 changed files with 25 additions and 13 deletions

View file

@ -9,7 +9,7 @@
"react": "^16.13.1", "react": "^16.13.1",
"react-dom": "^16.13.1", "react-dom": "^16.13.1",
"react-scripts": "3.4.1", "react-scripts": "3.4.1",
"yup": "^0.29.1" "zod": "^1.10.3"
}, },
"scripts": { "scripts": {
"start": "react-scripts start", "start": "react-scripts start",

View file

@ -15,12 +15,15 @@ limitations under the License.
*/ */
import React, { useEffect, useRef } from 'react'; import React, { useEffect, useRef } from 'react';
import { Formik, Form } from 'formik';
import Tile from './Tile'; import Tile from './Tile';
import Button from './Button'; import Button from './Button';
import TextButton from './TextButton'; import TextButton from './TextButton';
import Input from './Input'; import Input from './Input';
import { Formik, Form } from 'formik';
import * as Yup from 'yup'; import { parseHash } from '../parser/parser';
import { LinkKind } from '../parser/types';
import './CreateLinkTile.scss'; import './CreateLinkTile.scss';
@ -28,6 +31,24 @@ interface ILinkNotCreatedTileProps {
setLink: React.Dispatch<React.SetStateAction<string>>; setLink: React.Dispatch<React.SetStateAction<string>>;
} }
interface FormValues {
identifier: string;
}
// Hacky use of types here
function validate(values: FormValues): Partial<FormValues> {
const errors: Partial<FormValues> = {};
const parse = parseHash(values.identifier);
if (parse.kind === LinkKind.ParseFailed) {
errors.identifier =
"That link doesn't look right. Double check the details.";
}
return errors;
}
const LinkNotCreatedTile: React.FC<ILinkNotCreatedTileProps> = ( const LinkNotCreatedTile: React.FC<ILinkNotCreatedTileProps> = (
props: ILinkNotCreatedTileProps props: ILinkNotCreatedTileProps
) => { ) => {
@ -41,15 +62,7 @@ const LinkNotCreatedTile: React.FC<ILinkNotCreatedTileProps> = (
initialValues={{ initialValues={{
identifier: '', identifier: '',
}} }}
validationSchema={Yup.object({ validate={validate}
identifier: Yup.string()
.test(
'is-identifier',
"That link doesn't look right. Double check the details.",
(link) => link
)
.required('Required'),
})}
onSubmit={(values): void => { onSubmit={(values): void => {
props.setLink( props.setLink(
document.location.protocol + document.location.protocol +
@ -109,7 +122,6 @@ const LinkCreatedTile: React.FC<ILinkCreatedTileProps> = (props) => {
const CreateLinkTile: React.FC = () => { const CreateLinkTile: React.FC = () => {
const [link, setLink] = React.useState(''); const [link, setLink] = React.useState('');
console.log(link);
if (!link) { if (!link) {
return <LinkNotCreatedTile setLink={setLink} />; return <LinkNotCreatedTile setLink={setLink} />;
} else { } else {