fix task react_movies-list-add-form

src/App.scss

@@ -1,6 +1,7 @@
 iframe {
   display: none;
 }
+
 .page {
   display: grid;
   grid-template: auto / 1fr 400px;

src/App.tsx

@@ -6,7 +6,7 @@ import moviesFromServer from './api/movies.json';
 import { Movie } from './types/Movie';
 
 export const App = () => {
-  const [movieList, setMovieList] = useState<Movie[]>([...moviesFromServer]);
+  const [movieList, setMovieList] = useState<Movie[]>(moviesFromServer);
 
   const handleAddMovie = (newMovie: Movie) => {
     setMovieList((prevMovies) => [...prevMovies, newMovie]);

src/components/NewMovie/NewMovie.tsx

@@ -25,12 +25,6 @@ export const NewMovie: React.FC<Props> = ({ onAdd }) => {
     imdbId: '',
   });
 
-  // const [title, setTitle] = useState('');
-  // const [description, setDescription] = useState('');
-  // const [imgUrl, setImgUrl] = useState('');
-  // const [imdbUrl, setimdbUrl] = useState('');
-  // const [imdbId, setImdbId] = useState('');
-
   const urlValidator = (urlString: string): boolean => {
     // eslint-disable-next-line max-len
     const pattern = /^((([A-Za-z]{3,9}:(?:\/\/)?)(?:[-;:&=+$,\w]+@)?[A-Za-z0-9.-]+|(?:www\.|[-;:&=+$,\w]+@)[A-Za-z0-9.-]+)((?:\/[+~%/.\w-_]*)?\??(?:[-+=&;%@,.\w_]*)#?(?:[,.!/\\\w]*))?)$/;
@@ -42,6 +36,10 @@ export const NewMovie: React.FC<Props> = ({ onAdd }) => {
     return true;
   };
 
+  const isDisabled = !newMovie.title.trim()
+  || !urlValidator(newMovie.imgUrl) || !urlValidator(newMovie.imdbUrl)
+  || !newMovie.imdbId.trim();
+
   function addMovie(event: React.FormEvent) {
     event.preventDefault();
 
@@ -82,36 +80,36 @@ export const NewMovie: React.FC<Props> = ({ onAdd }) => {
         name="title"
         label="Title"
         value={newMovie.title}
-        onChange={e => handleChange(e)}
+        onChange={handleChange}
         required
       />
 
       <TextField
         name="description"
         value={newMovie.description}
-        onChange={e => handleChange(e)}
+        onChange={handleChange}
       />
 
       <TextField
         name="imgUrl"
         value={newMovie.imgUrl}
-        onChange={e => handleChange(e)}
+        onChange={handleChange}
         checkUrl={urlValidator}
         required
       />
 
       <TextField
         name="imdbUrl"
         value={newMovie.imdbUrl}
-        onChange={e => handleChange(e)}
+        onChange={handleChange}
         checkUrl={urlValidator}
         required
       />
 
       <TextField
         name="imdbId"
         value={newMovie.imdbId}
-        onChange={e => handleChange(e)}
+        onChange={handleChange}
         required
       />
 
@@ -121,10 +119,7 @@ export const NewMovie: React.FC<Props> = ({ onAdd }) => {
             type="submit"
             data-cy="submit-button"
             className="button is-link"
-            disabled={!newMovie.title
-              || !urlValidator(newMovie.imgUrl)
-              || !urlValidator(newMovie.imdbUrl)
-              || !newMovie.imdbId}
+            disabled={isDisabled}
           >
             Add
           </button>

src/components/TextField/TextField.tsx

@@ -31,7 +31,7 @@ export const TextField: React.FC<Props> = ({
 
   // To show errors only if the field was touched (onBlur)
   const [touched, setTouched] = useState(false);
-  const hasError = touched && required && !value;
+  const hasError = touched && required && !value.trim();
 
   return (
     <div className="field">