Remove Yup dependency and fix link validation
This commit is contained in:
parent
f7abaadef1
commit
890669741c
2 changed files with 25 additions and 13 deletions
|
@ -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",
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
Loading…
Reference in a new issue