add task solution

src/App.tsx

@@ -1,16 +1,24 @@
 import './App.scss';
+import { useState } from 'react';
 import { MoviesList } from './components/MoviesList';
 import { NewMovie } from './components/NewMovie';
 import moviesFromServer from './api/movies.json';
+import { Movie } from './types/Movie';
 
 export const App = () => {
+  const [movies, setMovies] = useState<Movie[]>(moviesFromServer);
+
+  const handleAddMovie = (newMovie: Movie) => {
+    setMovies([...movies, newMovie]);
+  };
+
   return (
     <div className="page">
       <div className="page-content">
-        <MoviesList movies={moviesFromServer} />
+        <MoviesList movies={movies} />
       </div>
       <div className="sidebar">
-        <NewMovie /* onAdd={(movie) => {}} */ />
+        <NewMovie onAdd={handleAddMovie} />
       </div>
     </div>
   );

src/components/NewMovie/NewMovie.tsx

@@ -1,45 +1,137 @@
-import { useState } from 'react';
+import React, { useState } from 'react';
 import { TextField } from '../TextField';
+import { Movie } from '../../types/Movie';
 
-export const NewMovie = () => {
-  // Increase the count after successful form submission
-  // to reset touched status of all the `Field`s
-  const [count] = useState(0);
+interface NewMovieProps {
+  onAdd: (formData: Movie) => void;
+}
+
+export const NewMovie: React.FC<NewMovieProps> = ({ onAdd }) => {
+  const [formData, setFormData] = useState({
+    titles: '',
+    description: '',
+    imgUrl: '',
+    imdbUrl: '',
+    imdbId: '',
+  });
+
+  const [errors, setErrors] = useState({
+    titles: false,
+    description: false,
+    imgUrl: false,
+    imdbUrl: false,
+    imdbId: false,
+  });
+
+  const handleBlur = (name: keyof typeof formData) => {
+    if (name === 'titles' || name === 'imgUrl' || name === 'imdbUrl'
+    || name === 'imdbId') {
+      setErrors((prevErrors) => ({
+        ...prevErrors,
+        [name]: formData[name].trim() === '',
+      }));
+    }
+  };
+
+  const handleInputChange = (name: keyof typeof formData, value: string) => {
+    setFormData((prevData) => ({
+      ...prevData,
+      [name]: value,
+    }));
+  };
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    const hasErrors = Object.keys(errors).some((name) => {
+      if (name === 'titles' || name === 'imgUrl' || name === 'imdbUrl'
+      || name === 'imdbId') {
+        return formData[name].trim() === '';
+      }
+
+      return false;
+    });
+
+    if (hasErrors) {
+      return;
+    }
+
+    const newMovie: Movie = {
+      title: formData.titles,
+      description: formData.description,
+      imgUrl: formData.imgUrl,
+      imdbUrl: formData.imdbUrl,
+      imdbId: formData.imdbId,
+    };
+
+    onAdd(newMovie);
+
+    setFormData({
+      titles: '',
+      description: '',
+      imgUrl: '',
+      imdbUrl: '',
+      imdbId: '',
+    });
+
+    setErrors({
+      titles: false,
+      description: false,
+      imgUrl: false,
+      imdbUrl: false,
+      imdbId: false,
+    });
+  };
 
   return (
-    <form className="NewMovie" key={count}>
+    <form className="NewMovie" onSubmit={handleSubmit}>
       <h2 className="title">Add a movie</h2>
 
       <TextField
-        name="title"
+        name="titles"
         label="Title"
-        value=""
-        onChange={() => {}}
+        value={formData.titles}
+        onChange={(value) => handleInputChange('titles', value)}
+        onBlur={() => handleBlur('titles')}
+        error={errors.titles}
+        data-cy="movie-title"
         required
       />
 
       <TextField
         name="description"
         label="Description"
-        value=""
+        value={formData.description}
+        onChange={(value) => handleInputChange('description', value)}
+        error={errors.description}
+        required
       />
 
       <TextField
         name="imgUrl"
         label="Image URL"
-        value=""
+        value={formData.imgUrl}
+        onChange={(value) => handleInputChange('imgUrl', value)}
+        error={errors.imgUrl}
+        required
       />
 
       <TextField
         name="imdbUrl"
         label="Imdb URL"
-        value=""
+        value={formData.imdbUrl}
+        onChange={(value) => handleInputChange('imdbUrl', value)}
+        error={errors.imdbUrl}
+        required
       />
 
       <TextField
         name="imdbId"
         label="Imdb ID"
-        value=""
+        value={formData.imdbId}
+        onChange={(value) => handleInputChange('imdbId', value)}
+        error={errors.imdbId}
+        required
       />
 
       <div className="field is-grouped">

src/components/TextField/TextField.tsx

@@ -8,6 +8,8 @@ type Props = {
   placeholder?: string,
   required?: boolean,
   onChange?: (newValue: string) => void,
+  onBlur?: () => void,
+  error: boolean;
 };
 
 function getRandomDigits() {
@@ -19,15 +21,15 @@ function getRandomDigits() {
 export const TextField: React.FC<Props> = ({
   name,
   value,
+  error,
   label = name,
   placeholder = `Enter ${label}`,
   required = false,
   onChange = () => {},
+  onBlur = () => {},
 }) => {
-  // generage a unique id once on component load
   const [id] = useState(() => `${name}-${getRandomDigits()}`);
 
-  // To show errors only if the field was touched (onBlur)
   const [touched, setTouched] = useState(false);
   const hasError = touched && required && !value;
 
@@ -43,12 +45,15 @@ export const TextField: React.FC<Props> = ({
           id={id}
           data-cy={`movie-${name}`}
           className={classNames('input', {
-            'is-danger': hasError,
+            'is-danger': hasError || error,
           })}
           placeholder={placeholder}
           value={value}
-          onChange={event => onChange(event.target.value)}
-          onBlur={() => setTouched(true)}
+          onChange={(event) => onChange(event.target.value)}
+          onBlur={() => {
+            setTouched(true);
+            onBlur();
+          }}
         />
       </div>