From 7d023e013c7fe0362a14de2c84611f544de4c992 Mon Sep 17 00:00:00 2001
From: Krainova Anastasia <nastiakray01@gmail.com>
Date: Sat, 25 Jan 2025 12:46:22 +0200
Subject: [PATCH 1/2] add task solution

---
 src/components/NewMovie/NewMovie.tsx | 104 ++++++++++++++++++++++++---
 1 file changed, 95 insertions(+), 9 deletions(-)

diff --git a/src/components/NewMovie/NewMovie.tsx b/src/components/NewMovie/NewMovie.tsx
index 85bace9dd..f5ce17720 100644
--- a/src/components/NewMovie/NewMovie.tsx
+++ b/src/components/NewMovie/NewMovie.tsx
@@ -1,30 +1,113 @@
 import { useState } from 'react';
 import { TextField } from '../TextField';
+import { MoviesList } from '../MoviesList';
 
-export const NewMovie = () => {
+export interface Movie {
+  title: string;
+  description: string;
+  imgUrl: string;
+  imdbUrl: string;
+  imdbId: string;
+}
+
+interface NewMovieProps {
+  onAdd: (movie: Movie) => void;
+}
+
+export const NewMovie: React.FC<NewMovieProps> = ({ onAdd }) => {
   // Increase the count after successful form submission
   // to reset touched status of all the `Field`s
-  const [count] = useState(0);
+  const [count, setCount] = useState(0);
+
+  const [title, setTitle] = useState('');
+
+
+  const [description, setDescription] = useState('');
+
+  const [imgUrl, setImgUrl] = useState('');
+
+
+  const [imdbUrl, setImdbUrl] = useState('');
+
+
+  const [imdbId, setImdbId] = useState('');
+
+
+  const [movies, setMovies] = useState<Movie[]>([]);
+
+  const isFormValid =
+    title.trim() && imgUrl.trim() && imdbUrl.trim() && imdbId.trim();
+
+  const reset = () => {
+    setTitle('');
+    setImgUrl('');
+    setDescription('');
+    setImdbUrl('');
+    setImdbId('');
+  };
+
+  const handleAdd = (event: React.FormEvent) => {
+    event.preventDefault();
+
+
+    if (!isFormValid) {
+      return;
+    }
+
+    const newMovie: Movie = { title, imgUrl, imdbUrl, imdbId, description };
+
+    setMovies(prevMovies => [...prevMovies, newMovie]);
+
+    onAdd(newMovie);
+
+    reset();
+
+    setCount(prev => prev + 1);
+  };
 
   return (
-    <form className="NewMovie" key={count}>
+    <>
+     <form className="NewMovie" key={count} onSubmit={handleAdd}>
       <h2 className="title">Add a movie</h2>
 
       <TextField
         name="title"
         label="Title"
-        value=""
-        onChange={() => {}}
+        value={title}
+        onChange={setTitle}
         required
       />
 
-      <TextField name="description" label="Description" value="" />
+      <TextField
+        name="description"
+        label="Description"
+        onChange={setDescription}
+        value={description}
+      />
 
-      <TextField name="imgUrl" label="Image URL" value="" />
+      <TextField
+        name="imgUrl"
+        label="Image URL"
+        value={imgUrl}
+        onChange={setImgUrl}
+        required
+      />
 
-      <TextField name="imdbUrl" label="Imdb URL" value="" />
+      <TextField
+        name="imdbUrl"
+        label="Imdb URL"
+        value={imdbUrl}
+        onChange={setImdbUrl}
+        required
+      />
 
-      <TextField name="imdbId" label="Imdb ID" value="" />
+      <TextField
+        name="imdbId"
+        label="Imdb ID"
+        value={imdbId}
+        onChange={setImdbId}
+        required
+      />
 
       <div className="field is-grouped">
         <div className="control">
@@ -32,11 +115,14 @@ export const NewMovie = () => {
             type="submit"
             data-cy="submit-button"
             className="button is-link"
+            disabled={!isFormValid}
           >
             Add
           </button>
         </div>
       </div>
     </form>
+    <MoviesList movies={movies} />
+   </>
   );
 };

From 9f68135ad518a4a7fc86194349c0124c4b011aaf Mon Sep 17 00:00:00 2001
From: Krainova Anastasia <nastiakray01@gmail.com>
Date: Sat, 25 Jan 2025 13:09:50 +0200
Subject: [PATCH 2/2] add task solution

---
 src/components/NewMovie/NewMovie.tsx | 117 +++++++++++++--------------
 1 file changed, 56 insertions(+), 61 deletions(-)

diff --git a/src/components/NewMovie/NewMovie.tsx b/src/components/NewMovie/NewMovie.tsx
index f5ce17720..ce1a69a17 100644
--- a/src/components/NewMovie/NewMovie.tsx
+++ b/src/components/NewMovie/NewMovie.tsx
@@ -21,18 +21,14 @@ export const NewMovie: React.FC<NewMovieProps> = ({ onAdd }) => {
 
   const [title, setTitle] = useState('');
 
-
   const [description, setDescription] = useState('');
 
   const [imgUrl, setImgUrl] = useState('');
 
-
   const [imdbUrl, setImdbUrl] = useState('');
 
-
   const [imdbId, setImdbId] = useState('');
 
-
   const [movies, setMovies] = useState<Movie[]>([]);
 
   const isFormValid =
@@ -49,7 +45,6 @@ export const NewMovie: React.FC<NewMovieProps> = ({ onAdd }) => {
   const handleAdd = (event: React.FormEvent) => {
     event.preventDefault();
 
-
     if (!isFormValid) {
       return;
     }
@@ -67,62 +62,62 @@ export const NewMovie: React.FC<NewMovieProps> = ({ onAdd }) => {
 
   return (
     <>
-     <form className="NewMovie" key={count} onSubmit={handleAdd}>
-      <h2 className="title">Add a movie</h2>
-
-      <TextField
-        name="title"
-        label="Title"
-        value={title}
-        onChange={setTitle}
-        required
-      />
-
-      <TextField
-        name="description"
-        label="Description"
-        onChange={setDescription}
-        value={description}
-      />
-
-      <TextField
-        name="imgUrl"
-        label="Image URL"
-        value={imgUrl}
-        onChange={setImgUrl}
-        required
-      />
-
-      <TextField
-        name="imdbUrl"
-        label="Imdb URL"
-        value={imdbUrl}
-        onChange={setImdbUrl}
-        required
-      />
-
-      <TextField
-        name="imdbId"
-        label="Imdb ID"
-        value={imdbId}
-        onChange={setImdbId}
-        required
-      />
-
-      <div className="field is-grouped">
-        <div className="control">
-          <button
-            type="submit"
-            data-cy="submit-button"
-            className="button is-link"
-            disabled={!isFormValid}
-          >
-            Add
-          </button>
+      <form className="NewMovie" key={count} onSubmit={handleAdd}>
+        <h2 className="title">Add a movie</h2>
+
+        <TextField
+          name="title"
+          label="Title"
+          value={title}
+          onChange={(value: string) => setTitle(value)}
+          required
+        />
+
+        <TextField
+          name="description"
+          label="Description"
+          onChange={(value: string) => setDescription(value)}
+          value={description}
+        />
+
+        <TextField
+          name="imgUrl"
+          label="Image URL"
+          value={imgUrl}
+          onChange={(value: string) => setImgUrl(value)}
+          required
+        />
+
+        <TextField
+          name="imdbUrl"
+          label="Imdb URL"
+          value={imdbUrl}
+          onChange={(value: string) => setImdbUrl(value)}
+          required
+        />
+
+        <TextField
+          name="imdbId"
+          label="Imdb ID"
+          value={imdbId}
+          onChange={(value: string) => setImdbId(value)}
+          required
+        />
+
+        <div className="field is-grouped">
+          <div className="control">
+            <button
+              type="submit"
+              data-cy="submit-button"
+              className="button is-link"
+              disabled={!isFormValid}
+            >
+              Add
+            </button>
+          </div>
         </div>
-      </div>
-    </form>
-    <MoviesList movies={movies} />
-   </>
+      </form>
+      <MoviesList movies={movies} />
+    </>
   );
 };