diff --git a/src/App.tsx b/src/App.tsx index e34e61809..ddfd6e974 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -13,10 +13,10 @@ export type Movie = { }; export const App = () => { - const [movies, setMovie] = useState([...moviesFromServer]); + const [movies, setMovies] = useState([...moviesFromServer]); const onAdd = (movie: Movie) => { - setMovie(currentMovies => [...currentMovies, movie]); + setMovies(currentMovies => [...currentMovies, movie]); }; return ( diff --git a/src/components/NewMovie/NewMovie.tsx b/src/components/NewMovie/NewMovie.tsx index 32fb792a0..d0a11a4bb 100644 --- a/src/components/NewMovie/NewMovie.tsx +++ b/src/components/NewMovie/NewMovie.tsx @@ -40,7 +40,7 @@ export const NewMovie: React.FC = ({ onAdd }) => { name="title" label="Title" value={title} - onChange={setTitle} + onChange={value => setTitle(value)} required /> @@ -48,14 +48,14 @@ export const NewMovie: React.FC = ({ onAdd }) => { name="description" label="Description" value={descr} - onChange={setDescr} + onChange={value => setDescr(value)} /> setImg(value)} required /> @@ -63,7 +63,7 @@ export const NewMovie: React.FC = ({ onAdd }) => { name="imdbUrl" label="Imdb URL" value={url} - onChange={setUrl} + onChange={value => setUrl(value)} required /> @@ -71,7 +71,7 @@ export const NewMovie: React.FC = ({ onAdd }) => { name="imdbId" label="Imdb ID" value={id} - onChange={setId} + onChange={value => setId(value)} required /> diff --git a/src/components/TextField/TextField.tsx b/src/components/TextField/TextField.tsx index a77ff9fd9..e24856c4b 100644 --- a/src/components/TextField/TextField.tsx +++ b/src/components/TextField/TextField.tsx @@ -14,9 +14,6 @@ function getRandomDigits() { return Math.random().toFixed(16).slice(2); } -const pattern = - /^((([A-Za-z]{3,9}:(?:\/\/)?)(?:[-;:&=+$,\w]+@)?[A-Za-z0-9.-]+|(?:www\.|[-;:&=+$,\w]+@)[A-Za-z0-9.-]+)((?:\/[+~%/.\w-_]*)?\??(?:[-+=&;%@,.\w_]*)#?(?:[,.!/\\\w]*))?)$/; - export const TextField: React.FC = ({ name, value, @@ -31,7 +28,6 @@ export const TextField: React.FC = ({ // To show errors only if the field was touched (onBlur) const [touched, setTouched] = useState(false); const hasError = touched && required && !value; - const [validMessage, setValidMessage] = useState(''); return (
@@ -50,23 +46,11 @@ export const TextField: React.FC = ({ placeholder={placeholder} value={value} onChange={event => onChange(event.target.value)} - onBlur={() => { - setTouched(true); - if ( - (name === 'imgUrl' || name === 'imdbUrl') && - !pattern.test(value) - ) { - console.log(pattern.test(value)); - setValidMessage('Not valid URL'); - } else { - setValidMessage(''); - } - }} + onBlur={() => setTouched(true)} />
{hasError &&

{`${label} is required`}

} - {validMessage &&

{`Not valid URL`}

} ); };