add task solution #2111
add task solution #2111
Conversation
src/components/NewMovie/NewMovie.tsx
Outdated
| movie: { | ||
| title: string, | ||
| description: string, | ||
| imgUrl: string, | ||
| imdbUrl: string, | ||
| imdbId: string, | ||
| } |
There was a problem hiding this comment.
You create type State and can use it as type for movie. Actually we already have the same type in 'types' folder, so you may use it instead of creating you own.
src/components/NewMovie/NewMovie.tsx
Outdated
| disabled={!title | ||
| || !urlValidator(imgUrl) | ||
| || !urlValidator(imdbUrl) | ||
| || !imdbId} |
| @@ -23,6 +24,7 @@ export const TextField: React.FC<Props> = ({ | |||
| placeholder = `Enter ${label}`, | |||
| required = false, | |||
| onChange = () => {}, | |||
| checkUrl = undefined, | |||
There was a problem hiding this comment.
please don't write undefined as a default value
you have already done this by adding ? here:
checkUrl?: (urlString: string) => boolean,
src/components/NewMovie/NewMovie.tsx
Outdated
| movie: { | ||
| title: string, | ||
| description: string, | ||
| imgUrl: string, | ||
| imdbUrl: string, | ||
| imdbId: string, | ||
| } |
src/components/NewMovie/NewMovie.tsx
Outdated
| setDescription(''); | ||
| setImgUrl(''); | ||
| setImdbUrl(''); | ||
| setImdbId(''); |
There was a problem hiding this comment.
you can create a reset function for this
src/components/NewMovie/NewMovie.tsx
Outdated
| imdbUrl: string, | ||
| imdbId: string, | ||
| } | ||
| ) => void |
There was a problem hiding this comment.
If you don't understand what Oleksandr meant, then look at this
onAdd: (movie: Movie) => void
you already have Movie type
dont write
onAdd: (
movie: {
title: string,
description: string,
imgUrl: string,
imdbUrl: string,
imdbId: string,
}
There was a problem hiding this comment.
i fixed only in App. here I scroll and missed it))
src/components/NewMovie/NewMovie.tsx
Outdated
| const [imdbId, setImdbId] = useState(''); | ||
|
|
||
| const urlValidator = (urlString: string): boolean => { | ||
| // eslint-disable-next-line max-len |
There was a problem hiding this comment.
put this function inside utils folder
src/components/NewMovie/NewMovie.tsx
Outdated
| = !title | ||
| || !urlValidator(imgUrl) | ||
| || !urlValidator(imdbUrl) | ||
| || !imdbId; |
| @@ -55,6 +57,8 @@ export const TextField: React.FC<Props> = ({ | |||
| {hasError && ( | |||
| <p className="help is-danger">{`${label} is required`}</p> | |||
| )} | |||
|
|
|||
| {((touched && value) && (checkUrl && !checkUrl(value))) && (<p className="help is-danger">{`${label} incorrect URL`}</p>)} | |||
There was a problem hiding this comment.
You can write this condition in constant ( too long )
DEMO LINK