From 3160d06630da14aee520d8c00b23189b933a8fe5 Mon Sep 17 00:00:00 2001
From: AsyaDev <142207257+AsyaDev14@users.noreply.github.com>
Date: Thu, 5 Dec 2024 20:50:54 +0200
Subject: [PATCH 1/3] task solution

---
 src/App.tsx                            | 14 +++-
 src/components/NewMovie/NewMovie.tsx   | 98 +++++++++++++++++++++++---
 src/components/TextField/TextField.tsx | 31 ++++----
 3 files changed, 118 insertions(+), 25 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 34be670b0..38528efe6 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -2,15 +2,25 @@ import './App.scss';
 import { MoviesList } from './components/MoviesList';
 import { NewMovie } from './components/NewMovie';
 import moviesFromServer from './api/movies.json';
+import { useState } from 'react';
+import { Movie } from './types/Movie';
 
 export const App = () => {
+
+  const [movies, setMovies] = useState<Movie[]>(moviesFromServer);
+
+  // const test = (movie:Movie) => {
+  //   setMovies((prev: Movie[]):Movie[] => [...prev, movie]);
+  // };
+
   return (
     <div className="page">
       <div className="page-content">
-        <MoviesList movies={moviesFromServer} />
+        <MoviesList movies={movies} />
       </div>
       <div className="sidebar">
-        <NewMovie /* onAdd={(movie) => {}} */ />
+        {/* <NewMovie setMovies={setMovies} /> */}
+        <NewMovie onAdd={(movie:Movie):void => setMovies([...movies, movie])} />
       </div>
     </div>
   );
diff --git a/src/components/NewMovie/NewMovie.tsx b/src/components/NewMovie/NewMovie.tsx
index 85bace9dd..e0e031322 100644
--- a/src/components/NewMovie/NewMovie.tsx
+++ b/src/components/NewMovie/NewMovie.tsx
@@ -1,34 +1,112 @@
-import { useState } from 'react';
+import { FC, useState } from 'react';
 import { TextField } from '../TextField';
+import { Movie } from '../../types/Movie';
 
-export const NewMovie = () => {
+type Props = {
+  onAdd: (movie: Movie) => void;
+};
+
+export const NewMovie: FC<Props> = props => {
+  const { onAdd } = props;
   // Increase the count after successful form submission
   // to reset touched status of all the `Field`s
-  const [count] = useState(0);
+
+  // const [count] = useState<number>(0);
+  const [formKey, setFormKey] = useState<number>(0);
+
+  const [titleValue, setTitleValue] = useState<string>('');
+  const [descriptionValue, setDescriptionValue] = useState<string>('');
+  const [imgUrlValue, setImgUrlValue] = useState<string>('');
+  const [imdbUrlValue, setImdbUrlValue] = useState<string>('');
+  const [imdbIdValue, setImdbIdValue] = useState<string>('');
+
+  const handleSubmit = (event: React.FormEvent<HTMLFormElement>): void => {
+    event.preventDefault();
+
+    const newFilm: Movie = {
+      title: titleValue.trim(),
+      description: descriptionValue.trim(),
+      imgUrl: imgUrlValue.trim(),
+      imdbUrl: imdbUrlValue.trim(),
+      imdbId: imdbIdValue.trim(),
+    };
+
+    // setMovies((prev: Movie[]):Movie[] => [...prev, newFilm]);
+    onAdd(newFilm);
+
+    setTitleValue('');
+    setDescriptionValue('');
+    setImgUrlValue('');
+    setImdbUrlValue('');
+    setImdbIdValue('');
+
+    // form refresh
+    setFormKey(prev => prev + 1);
+  };
+
+  // check validation
+  const isFormValid =
+    titleValue.trim() &&
+    imgUrlValue.trim() &&
+    imdbUrlValue.trim() &&
+    imdbIdValue.trim();
 
   return (
-    <form className="NewMovie" key={count}>
+    <form
+      className="NewMovie"
+      key={formKey}
+      onSubmit={(event: React.FormEvent<HTMLFormElement>): void =>
+        handleSubmit(event)
+      }
+    >
       <h2 className="title">Add a movie</h2>
 
       <TextField
         name="title"
         label="Title"
-        value=""
-        onChange={() => {}}
+        value={titleValue}
+        onChange={setTitleValue}
         required
       />
 
-      <TextField name="description" label="Description" value="" />
+      <TextField
+        name="description"
+        label="Description"
+        value={descriptionValue}
+        onChange={setDescriptionValue}
+      />
 
-      <TextField name="imgUrl" label="Image URL" value="" />
+      <TextField
+        name="imgUrl"
+        label="Image URL"
+        value={imgUrlValue}
+        onChange={setImgUrlValue}
+        required
+      />
 
-      <TextField name="imdbUrl" label="Imdb URL" value="" />
+      <TextField
+        name="imdbUrl"
+        label="Imdb URL"
+        value={imdbUrlValue}
+        onChange={setImdbUrlValue}
+        required
+      />
 
-      <TextField name="imdbId" label="Imdb ID" value="" />
+      <TextField
+        name="imdbId"
+        label="Imdb ID"
+        value={imdbIdValue}
+        onChange={setImdbIdValue}
+        required
+      />
 
       <div className="field is-grouped">
         <div className="control">
           <button
+            // disabled={
+            //   !titleValue && !imgUrlValue && !imdbUrlValue && !imdbIdValue
+            // }
+            disabled={!isFormValid}
             type="submit"
             data-cy="submit-button"
             className="button is-link"
diff --git a/src/components/TextField/TextField.tsx b/src/components/TextField/TextField.tsx
index e24856c4b..7469687d1 100644
--- a/src/components/TextField/TextField.tsx
+++ b/src/components/TextField/TextField.tsx
@@ -10,23 +10,24 @@ type Props = {
   onChange?: (newValue: string) => void;
 };
 
-function getRandomDigits() {
+function getRandomDigits(): string {
   return Math.random().toFixed(16).slice(2);
 }
 
-export const TextField: React.FC<Props> = ({
-  name,
-  value,
-  label = name,
-  placeholder = `Enter ${label}`,
-  required = false,
-  onChange = () => {},
-}) => {
+export const TextField: React.FC<Props> = props => {
+  const {
+    name,
+    value,
+    label = name,
+    placeholder = `Enter ${label}`,
+    required = false,
+    onChange,
+  } = props;
   // generate a unique id once on component load
-  const [id] = useState(() => `${name}-${getRandomDigits()}`);
+  const [id] = useState<string>(() => `${name}-${getRandomDigits()}`);
 
   // To show errors only if the field was touched (onBlur)
-  const [touched, setTouched] = useState(false);
+  const [touched, setTouched] = useState<boolean>(false);
   const hasError = touched && required && !value;
 
   return (
@@ -45,8 +46,12 @@ export const TextField: React.FC<Props> = ({
           })}
           placeholder={placeholder}
           value={value}
-          onChange={event => onChange(event.target.value)}
-          onBlur={() => setTouched(true)}
+          onChange={(event: React.ChangeEvent<HTMLInputElement>): void => {
+            if (onChange) {
+              onChange(event.target.value);
+            }
+          }}
+          onBlur={(): void => setTouched(true)}
         />
       </div>
 

From 9cb50273d9d506ff45e5d246c947d588fa802402 Mon Sep 17 00:00:00 2001
From: AsyaDev <142207257+AsyaDev14@users.noreply.github.com>
Date: Mon, 9 Dec 2024 13:47:28 +0200
Subject: [PATCH 2/3]  fix, change props

---
 src/App.tsx                            | 10 ++--
 src/components/NewMovie/NewMovie.tsx   | 74 +++++++++-----------------
 src/components/TextField/TextField.tsx |  6 +--
 src/helpers/form.ts                    | 67 +++++++++++++++++++++++
 4 files changed, 98 insertions(+), 59 deletions(-)
 create mode 100644 src/helpers/form.ts

diff --git a/src/App.tsx b/src/App.tsx
index 38528efe6..3d90f8ab6 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -6,21 +6,17 @@ import { useState } from 'react';
 import { Movie } from './types/Movie';
 
 export const App = () => {
-
   const [movies, setMovies] = useState<Movie[]>(moviesFromServer);
 
-  // const test = (movie:Movie) => {
-  //   setMovies((prev: Movie[]):Movie[] => [...prev, movie]);
-  // };
-
   return (
     <div className="page">
       <div className="page-content">
         <MoviesList movies={movies} />
       </div>
       <div className="sidebar">
-        {/* <NewMovie setMovies={setMovies} /> */}
-        <NewMovie onAdd={(movie:Movie):void => setMovies([...movies, movie])} />
+        <NewMovie
+          onAdd={(movie: Movie): void => setMovies([...movies, movie])}
+        />
       </div>
     </div>
   );
diff --git a/src/components/NewMovie/NewMovie.tsx b/src/components/NewMovie/NewMovie.tsx
index e0e031322..8b3c13dd9 100644
--- a/src/components/NewMovie/NewMovie.tsx
+++ b/src/components/NewMovie/NewMovie.tsx
@@ -1,6 +1,7 @@
 import { FC, useState } from 'react';
 import { TextField } from '../TextField';
 import { Movie } from '../../types/Movie';
+import { getFormInputs } from '../../helpers/form';
 
 type Props = {
   onAdd: (movie: Movie) => void;
@@ -8,10 +9,7 @@ type Props = {
 
 export const NewMovie: FC<Props> = props => {
   const { onAdd } = props;
-  // Increase the count after successful form submission
-  // to reset touched status of all the `Field`s
 
-  // const [count] = useState<number>(0);
   const [formKey, setFormKey] = useState<number>(0);
 
   const [titleValue, setTitleValue] = useState<string>('');
@@ -31,7 +29,6 @@ export const NewMovie: FC<Props> = props => {
       imdbId: imdbIdValue.trim(),
     };
 
-    // setMovies((prev: Movie[]):Movie[] => [...prev, newFilm]);
     onAdd(newFilm);
 
     setTitleValue('');
@@ -40,17 +37,28 @@ export const NewMovie: FC<Props> = props => {
     setImdbUrlValue('');
     setImdbIdValue('');
 
-    // form refresh
     setFormKey(prev => prev + 1);
   };
 
-  // check validation
   const isFormValid =
     titleValue.trim() &&
     imgUrlValue.trim() &&
     imdbUrlValue.trim() &&
     imdbIdValue.trim();
 
+  const formInputs = getFormInputs({
+    titleValue,
+    setTitleValue,
+    descriptionValue,
+    setDescriptionValue,
+    imgUrlValue,
+    setImgUrlValue,
+    imdbUrlValue,
+    setImdbUrlValue,
+    imdbIdValue,
+    setImdbIdValue,
+  });
+
   return (
     <form
       className="NewMovie"
@@ -60,52 +68,22 @@ export const NewMovie: FC<Props> = props => {
       }
     >
       <h2 className="title">Add a movie</h2>
-
-      <TextField
-        name="title"
-        label="Title"
-        value={titleValue}
-        onChange={setTitleValue}
-        required
-      />
-
-      <TextField
-        name="description"
-        label="Description"
-        value={descriptionValue}
-        onChange={setDescriptionValue}
-      />
-
-      <TextField
-        name="imgUrl"
-        label="Image URL"
-        value={imgUrlValue}
-        onChange={setImgUrlValue}
-        required
-      />
-
-      <TextField
-        name="imdbUrl"
-        label="Imdb URL"
-        value={imdbUrlValue}
-        onChange={setImdbUrlValue}
-        required
-      />
-
-      <TextField
-        name="imdbId"
-        label="Imdb ID"
-        value={imdbIdValue}
-        onChange={setImdbIdValue}
-        required
-      />
+      {formInputs.map(item => {
+        return (
+          <TextField
+            key={item.name}
+            name={item.name}
+            label={item.label}
+            value={item.value}
+            onChange={item.onChange}
+            required={item.required}
+          />
+        );
+      })}
 
       <div className="field is-grouped">
         <div className="control">
           <button
-            // disabled={
-            //   !titleValue && !imgUrlValue && !imdbUrlValue && !imdbIdValue
-            // }
             disabled={!isFormValid}
             type="submit"
             data-cy="submit-button"
diff --git a/src/components/TextField/TextField.tsx b/src/components/TextField/TextField.tsx
index 7469687d1..8f75bcefa 100644
--- a/src/components/TextField/TextField.tsx
+++ b/src/components/TextField/TextField.tsx
@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import React, { useState } from 'react';
 
-type Props = {
+export type Props = {
   name: string;
   value: string;
   label?: string;
@@ -23,10 +23,8 @@ export const TextField: React.FC<Props> = props => {
     required = false,
     onChange,
   } = props;
-  // generate a unique id once on component load
-  const [id] = useState<string>(() => `${name}-${getRandomDigits()}`);
 
-  // To show errors only if the field was touched (onBlur)
+  const [id] = useState<string>(() => `${name}-${getRandomDigits()}`);
   const [touched, setTouched] = useState<boolean>(false);
   const hasError = touched && required && !value;
 
diff --git a/src/helpers/form.ts b/src/helpers/form.ts
new file mode 100644
index 000000000..039bea62e
--- /dev/null
+++ b/src/helpers/form.ts
@@ -0,0 +1,67 @@
+import { Props } from '../components/TextField/TextField';
+
+interface FormInputsProps {
+  titleValue: string;
+  setTitleValue: (value: string) => void;
+  descriptionValue: string;
+  setDescriptionValue: (value: string) => void;
+  imgUrlValue: string;
+  setImgUrlValue: (value: string) => void;
+  imdbUrlValue: string;
+  setImdbUrlValue: (value: string) => void;
+  imdbIdValue: string;
+  setImdbIdValue: (value: string) => void;
+}
+
+export const getFormInputs = (props: FormInputsProps): Props[] => {
+  const {
+    titleValue,
+    setTitleValue,
+    descriptionValue,
+    setDescriptionValue,
+    imgUrlValue,
+    setImgUrlValue,
+    imdbUrlValue,
+    setImdbUrlValue,
+    imdbIdValue,
+    setImdbIdValue,
+  } = props;
+
+  return [
+    {
+      name: 'title',
+      label: 'Title',
+      value: titleValue,
+      onChange: setTitleValue,
+      required: true,
+    },
+    {
+      name: 'description',
+      label: 'Description',
+      value: descriptionValue,
+      onChange: setDescriptionValue,
+      required: true,
+    },
+    {
+      name: 'imgUrl',
+      label: 'Image URL',
+      value: imgUrlValue,
+      onChange: setImgUrlValue,
+      required: true,
+    },
+    {
+      name: 'imdbUrl',
+      label: 'Imdb URL',
+      value: imdbUrlValue,
+      onChange: setImdbUrlValue,
+      required: true,
+    },
+    {
+      name: 'imdbId',
+      label: 'Imdb ID',
+      value: imdbIdValue,
+      onChange: setImdbIdValue,
+      required: true,
+    },
+  ];
+};

From 7f2d8211e7d783768b94ca90edd5d5803b731912 Mon Sep 17 00:00:00 2001
From: AsyaDev <142207257+AsyaDev14@users.noreply.github.com>
Date: Mon, 9 Dec 2024 22:03:26 +0200
Subject: [PATCH 3/3] delete comments, renaming, function fix

---
 src/App.tsx                          |  3 +-
 src/components/NewMovie/NewMovie.tsx | 65 +++++++++++++---------------
 src/helpers/form.ts                  | 60 ++++++++++++-------------
 3 files changed, 63 insertions(+), 65 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 3d90f8ab6..f9ff38c8e 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -7,6 +7,7 @@ import { Movie } from './types/Movie';
 
 export const App = () => {
   const [movies, setMovies] = useState<Movie[]>(moviesFromServer);
+  const handleAdd = (movie: Movie): void => setMovies((prevMovies) => [...prevMovies, movie]);;
 
   return (
     <div className="page">
@@ -15,7 +16,7 @@ export const App = () => {
       </div>
       <div className="sidebar">
         <NewMovie
-          onAdd={(movie: Movie): void => setMovies([...movies, movie])}
+          onAdd={handleAdd}
         />
       </div>
     </div>
diff --git a/src/components/NewMovie/NewMovie.tsx b/src/components/NewMovie/NewMovie.tsx
index 8b3c13dd9..7989a8bb0 100644
--- a/src/components/NewMovie/NewMovie.tsx
+++ b/src/components/NewMovie/NewMovie.tsx
@@ -7,56 +7,53 @@ type Props = {
   onAdd: (movie: Movie) => void;
 };
 
-export const NewMovie: FC<Props> = props => {
-  const { onAdd } = props;
-
+export const NewMovie: FC<Props> = ({ onAdd }) => {
   const [formKey, setFormKey] = useState<number>(0);
 
-  const [titleValue, setTitleValue] = useState<string>('');
-  const [descriptionValue, setDescriptionValue] = useState<string>('');
-  const [imgUrlValue, setImgUrlValue] = useState<string>('');
-  const [imdbUrlValue, setImdbUrlValue] = useState<string>('');
-  const [imdbIdValue, setImdbIdValue] = useState<string>('');
+  const [title, setTitle] = useState<string>('');
+  const [description, setDescription] = useState<string>('');
+  const [imgUrl, setImgUrl] = useState<string>('');
+  const [imdbUrl, setImdbUrl] = useState<string>('');
+  const [imdbId, setImdbId] = useState<string>('');
+
+  const resetFormFields = (): void => {
+    setTitle('');
+    setDescription('');
+    setImgUrl('');
+    setImdbUrl('');
+    setImdbId('');
+  };
 
   const handleSubmit = (event: React.FormEvent<HTMLFormElement>): void => {
     event.preventDefault();
 
     const newFilm: Movie = {
-      title: titleValue.trim(),
-      description: descriptionValue.trim(),
-      imgUrl: imgUrlValue.trim(),
-      imdbUrl: imdbUrlValue.trim(),
-      imdbId: imdbIdValue.trim(),
+      title: title.trim(),
+      description: description.trim(),
+      imgUrl: imgUrl.trim(),
+      imdbUrl: imdbUrl.trim(),
+      imdbId: imdbId.trim(),
     };
 
     onAdd(newFilm);
-
-    setTitleValue('');
-    setDescriptionValue('');
-    setImgUrlValue('');
-    setImdbUrlValue('');
-    setImdbIdValue('');
-
+    resetFormFields();
     setFormKey(prev => prev + 1);
   };
 
   const isFormValid =
-    titleValue.trim() &&
-    imgUrlValue.trim() &&
-    imdbUrlValue.trim() &&
-    imdbIdValue.trim();
+    title.trim() && imgUrl.trim() && imdbUrl.trim() && imdbId.trim();
 
   const formInputs = getFormInputs({
-    titleValue,
-    setTitleValue,
-    descriptionValue,
-    setDescriptionValue,
-    imgUrlValue,
-    setImgUrlValue,
-    imdbUrlValue,
-    setImdbUrlValue,
-    imdbIdValue,
-    setImdbIdValue,
+    title,
+    setTitle,
+    description,
+    setDescription,
+    imgUrl,
+    setImgUrl,
+    imdbUrl,
+    setImdbUrl,
+    imdbId,
+    setImdbId,
   });
 
   return (
diff --git a/src/helpers/form.ts b/src/helpers/form.ts
index 039bea62e..c0b98d573 100644
--- a/src/helpers/form.ts
+++ b/src/helpers/form.ts
@@ -1,66 +1,66 @@
 import { Props } from '../components/TextField/TextField';
 
 interface FormInputsProps {
-  titleValue: string;
-  setTitleValue: (value: string) => void;
-  descriptionValue: string;
-  setDescriptionValue: (value: string) => void;
-  imgUrlValue: string;
-  setImgUrlValue: (value: string) => void;
-  imdbUrlValue: string;
-  setImdbUrlValue: (value: string) => void;
-  imdbIdValue: string;
-  setImdbIdValue: (value: string) => void;
+  title: string;
+  setTitle: (value: string) => void;
+  description: string;
+  setDescription: (value: string) => void;
+  imgUrl: string;
+  setImgUrl: (value: string) => void;
+  imdbUrl: string;
+  setImdbUrl: (value: string) => void;
+  imdbId: string;
+  setImdbId: (value: string) => void;
 }
 
 export const getFormInputs = (props: FormInputsProps): Props[] => {
   const {
-    titleValue,
-    setTitleValue,
-    descriptionValue,
-    setDescriptionValue,
-    imgUrlValue,
-    setImgUrlValue,
-    imdbUrlValue,
-    setImdbUrlValue,
-    imdbIdValue,
-    setImdbIdValue,
+    title,
+    setTitle,
+    description,
+    setDescription,
+    imgUrl,
+    setImgUrl,
+    imdbUrl,
+    setImdbUrl,
+    imdbId,
+    setImdbId,
   } = props;
 
   return [
     {
       name: 'title',
       label: 'Title',
-      value: titleValue,
-      onChange: setTitleValue,
+      value: title,
+      onChange: setTitle,
       required: true,
     },
     {
       name: 'description',
       label: 'Description',
-      value: descriptionValue,
-      onChange: setDescriptionValue,
+      value: description,
+      onChange: setDescription,
       required: true,
     },
     {
       name: 'imgUrl',
       label: 'Image URL',
-      value: imgUrlValue,
-      onChange: setImgUrlValue,
+      value: imgUrl,
+      onChange: setImgUrl,
       required: true,
     },
     {
       name: 'imdbUrl',
       label: 'Imdb URL',
-      value: imdbUrlValue,
-      onChange: setImdbUrlValue,
+      value: imdbUrl,
+      onChange: setImdbUrl,
       required: true,
     },
     {
       name: 'imdbId',
       label: 'Imdb ID',
-      value: imdbIdValue,
-      onChange: setImdbIdValue,
+      value: imdbId,
+      onChange: setImdbId,
       required: true,
     },
   ];