From e4919f09ba0127b96cc9b9cfbfa2741de173acb6 Mon Sep 17 00:00:00 2001
From: Olesia_Serban <olesiaserban@gmail.com>
Date: Tue, 28 Dec 2021 16:12:29 +0200
Subject: [PATCH 1/2] task-7: use formik

---
 package.json                       |   3 +-
 src/components/UpsertMovieModal.js | 103 +++++++++++++++++++----------
 2 files changed, 70 insertions(+), 36 deletions(-)

diff --git a/package.json b/package.json
index 082f1e6..8f2ebd0 100644
--- a/package.json
+++ b/package.json
@@ -14,12 +14,11 @@
   "author": "Olesia Serban",
   "license": "ISC",
   "dependencies": {
-    "@fortawesome/react-fontawesome": "^0.1.16",
     "axios": "^0.24.0",
     "font-awesome": "^4.7.0",
+    "formik": "^2.2.9",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-hook-form": "^7.21.0",
     "react-redux": "^7.2.6",
     "redux": "^4.1.2",
     "redux-thunk": "^2.4.1"
diff --git a/src/components/UpsertMovieModal.js b/src/components/UpsertMovieModal.js
index 24beb60..3639736 100644
--- a/src/components/UpsertMovieModal.js
+++ b/src/components/UpsertMovieModal.js
@@ -1,10 +1,10 @@
 import "./UpsertMovieModal.css";
 import React from "react";
-import { useForm } from "react-hook-form";
 import GenresRepo from "../services/GenreRepo";
 import { useDispatch } from "react-redux";
 import { bindActionCreators } from "redux";
 import { actionCreators } from "../store";
+import { useFormik } from "formik";
 
 
 export default function UpsertMovieModal({header, movie, handleCloseModal}){
@@ -14,18 +14,27 @@ export default function UpsertMovieModal({header, movie, handleCloseModal}){
     const genreRepo = new GenresRepo();
     const genres = genreRepo.getAllGenres();
 
-     
-    const { register, handleSubmit } = useForm();
-    const onSubmit = (data, e) => {
-        if (movie === undefined){
-            handleCreate(data);
-        } else {
-            handleUpdate(movie, data);
-        }
+    const defaultFormData = {}
 
-        handleCloseModal();
-    };
-    const onError = (errors, e) => console.log(errors, e);
+    if(movie !== undefined) {
+        defaultFormData.title = movie.title;
+        defaultFormData.url = movie.poster_path;
+        defaultFormData.rating = movie.vote_average;
+        defaultFormData.runtime = movie.runtime;
+        defaultFormData.overview = movie.overview;
+    }
+
+    const formik = useFormik({
+        initialValues: defaultFormData,
+        onSubmit: values => {
+            if (movie === undefined){
+                handleCreate(values);
+            } else {
+                handleUpdate(movie, values);
+            }
+            handleCloseModal();
+        }
+    })
 
     const handleUpdate = (movie, formData)=>{
         if(formData.title){
@@ -64,58 +73,85 @@ export default function UpsertMovieModal({header, movie, handleCloseModal}){
         newMovie.overview = formData.overview;
         createMovie(newMovie)
     };
-
-    const defaultFormData = {}
-
-    if(movie !== undefined) {
-        defaultFormData.title = movie.title;
-        defaultFormData.url = movie.poster_path;
-        defaultFormData.rating = movie.vote_average;
-        defaultFormData.runtime = movie.runtime;
-        defaultFormData.overview = movie.overview;
-    }
+  
 
     return (
         <>
             <h1>{header}</h1>
-            <form className="addMovieForm" onSubmit={handleSubmit(onSubmit, onError)}>
+            <form className="addMovieForm" onSubmit={formik.handleSubmit} onReset={formik.handleReset}>
             	<div className="col1-2 row1 form-input">
                 	<label >TITLE</label>
-                	<input placeholder="Best Movie" {...register("title")} type="text" name="title" defaultValue={defaultFormData.title}/>
+                	<input 
+                        placeholder="Best Movie" 
+                        type="text" 
+                        name="title" 
+                        onChange={formik.handleChange}
+                        value={formik.values.title}
+                    />
                 </div>
                 
                 <div className="col1-2 row2 form-input">
                 	<label>MOVIE URL</label>
-                	<input placeholder="http://picture-url" {...register("url")} type="text" name="url" defaultValue={defaultFormData.url} />
+                	<input 
+                        type="text"
+                        placeholder="http://picture-url" 
+                        name="url" 
+                        onChange={formik.handleChange}
+                        value={formik.values.url} 
+                    />
                 </div>
                 
                 <div className="col1-2 row3 form-input">
                 	<label>GENRE</label>
-                    <select {...register("genre")} name="genre">
-                        {genres.map((genre) =>
-                            <option key={genre.id}>{genre.name}</option>
-                        )}
+                    <select 
+                        name="genre" 
+                        onChange={formik.handleChange}
+                        value={formik.values.genre}>
+
+                            {genres.map((genre) =>
+                                <option key={genre.id}>{genre.name}</option>
+                            )}
                     </select>
                 </div>
                 
                 <div className="col3 row1 form-input">
                 	<label>RELEASE DATE</label>
-                	<input type="date" {...register("date")} name="releaseDate"/>
+                	<input type="date" onChange={formik.handleChange} 
+                        value = {formik.values.date}
+                        name="releaseDate"/>
                 </div>
                 
                  <div className="col3 row2 form-input">
                     <label>RATING</label>
-                    <input placeholder="7.8" {...register("rating")} type="text" name="rating" defaultValue={defaultFormData.rating} />
+                    <input 
+                        placeholder="7.8"  
+                        type="text" 
+                        name="rating"
+                        onChange={formik.handleChange}
+                        value={formik.values.rating}
+                     />
                  </div>
                  
                  <div className="col3 row3 form-input">
                     <label>RUNTIME</label>
-                    <input placeholder="120" {...register("runtime")} type="text" name="runtime" defaultValue={defaultFormData.runtime} />
+                    <input 
+                        placeholder="120"
+                        type="text" 
+                        name="runtime" 
+                        onChange={formik.handleChange}
+                        value={formik.values.runtime}
+                    />
                  </div>
 
                 <div className="col1-3 row4 form-input">
                 	<label>OVERVIEW</label>
-                	<textarea placeholder="Lorem ipsum" {...register("overview")} type="text" name="overview" defaultValue={defaultFormData.overview}/>
+                	<textarea 
+                        placeholder="Lorem ipsum" 
+                        type="text" 
+                        name="overview" 
+                        onChange={formik.handleChange}
+                        value={formik.values.overview}
+                    />
                 </div>
                 
                 <div className="col2-3 row5 form-control">
@@ -128,4 +164,3 @@ export default function UpsertMovieModal({header, movie, handleCloseModal}){
         </>
     );
 }
-

From 486f322016abb068bc99e27ff2f5f82422eb1c6d Mon Sep 17 00:00:00 2001
From: Olesia_Serban <olesiaserban@gmail.com>
Date: Tue, 28 Dec 2021 17:33:58 +0200
Subject: [PATCH 2/2] task-7: use validation

---
 package.json                        |  3 +-
 src/components/UpsertMovieModal.css |  1 +
 src/components/UpsertMovieModal.js  | 57 ++++++++++++++++++++++++++---
 src/store/movie/movieActions.js     |  2 -
 src/store/movie/movieReducer.js     |  3 --
 5 files changed, 55 insertions(+), 11 deletions(-)

diff --git a/package.json b/package.json
index 8f2ebd0..c16a967 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,8 @@
     "react-dom": "^17.0.2",
     "react-redux": "^7.2.6",
     "redux": "^4.1.2",
-    "redux-thunk": "^2.4.1"
+    "redux-thunk": "^2.4.1",
+    "yup": "^0.32.11"
   },
   "devDependencies": {
     "@babel/core": "^7.16.0",
diff --git a/src/components/UpsertMovieModal.css b/src/components/UpsertMovieModal.css
index 4ae7110..c70882a 100644
--- a/src/components/UpsertMovieModal.css
+++ b/src/components/UpsertMovieModal.css
@@ -65,6 +65,7 @@
 .form-input{
 	display: flex;
     flex-direction: column;
+    color: yellow;
 }
 
 .form-input input, .form-input select, .form-input textarea {
diff --git a/src/components/UpsertMovieModal.js b/src/components/UpsertMovieModal.js
index 3639736..478c980 100644
--- a/src/components/UpsertMovieModal.js
+++ b/src/components/UpsertMovieModal.js
@@ -5,6 +5,25 @@ import { useDispatch } from "react-redux";
 import { bindActionCreators } from "redux";
 import { actionCreators } from "../store";
 import { useFormik } from "formik";
+import * as Yup from "yup";
+
+const MovieSchema = Yup.object().shape({
+    title: Yup.string().required(),
+    url: Yup.string().required(),
+    releaseDate: Yup.string().required(),
+    rating: Yup.number()
+                .required()
+                .test("is more the 0 less then 10", 
+                "Rating must be from 0 to 10 ", (val)=>{
+                    return val >= 0 && val <= 10
+                }),
+    runtime: Yup.number()
+                .required()
+                .test("more then 0", "runtime should be positive", val=>{
+                    return val >= 0
+                }),
+    overview: Yup.string().required()
+})
 
 
 export default function UpsertMovieModal({header, movie, handleCloseModal}){
@@ -22,11 +41,14 @@ export default function UpsertMovieModal({header, movie, handleCloseModal}){
         defaultFormData.rating = movie.vote_average;
         defaultFormData.runtime = movie.runtime;
         defaultFormData.overview = movie.overview;
+        defaultFormData.releaseDate = movie.release_date;
     }
 
     const formik = useFormik({
         initialValues: defaultFormData,
+        validationSchema: MovieSchema,
         onSubmit: values => {
+            console.log(values)
             if (movie === undefined){
                 handleCreate(values);
             } else {
@@ -41,7 +63,7 @@ export default function UpsertMovieModal({header, movie, handleCloseModal}){
             movie.title = formData.title;
         }
         if(formData.genre && formData.genre !== "All"){
-            movie.genres = [{name: formData.genre}];
+            movie.genres = [formData.genre];
         }
 
         if(formData.url){
@@ -59,6 +81,10 @@ export default function UpsertMovieModal({header, movie, handleCloseModal}){
             movie.overview = formData.overview;
         }
 
+        if(formData.releaseDate){
+            movie.release_date = formData.releaseDate;
+        }
+
         updateMovie(movie)
     };
 
@@ -71,6 +97,7 @@ export default function UpsertMovieModal({header, movie, handleCloseModal}){
         newMovie.vote_average = Number(formData.rating);
         newMovie.runtime = Number(formData.runtime);
         newMovie.overview = formData.overview;
+        newMovie.release_date = formData.releaseDate;
         createMovie(newMovie)
     };
   
@@ -80,14 +107,16 @@ export default function UpsertMovieModal({header, movie, handleCloseModal}){
             <h1>{header}</h1>
             <form className="addMovieForm" onSubmit={formik.handleSubmit} onReset={formik.handleReset}>
             	<div className="col1-2 row1 form-input">
-                	<label >TITLE</label>
+                    <label >TITLE</label>
                 	<input 
                         placeholder="Best Movie" 
                         type="text" 
                         name="title" 
                         onChange={formik.handleChange}
                         value={formik.values.title}
+                        onBlur={formik.handleBlur('title')}
                     />
+                    {formik.touched.title && formik.errors.title}
                 </div>
                 
                 <div className="col1-2 row2 form-input">
@@ -98,7 +127,10 @@ export default function UpsertMovieModal({header, movie, handleCloseModal}){
                         name="url" 
                         onChange={formik.handleChange}
                         value={formik.values.url} 
+                        onBlur={formik.handleBlur('url')}
+
                     />
+                    {formik.touched.url && formik.errors.url}
                 </div>
                 
                 <div className="col1-2 row3 form-input">
@@ -106,19 +138,25 @@ export default function UpsertMovieModal({header, movie, handleCloseModal}){
                     <select 
                         name="genre" 
                         onChange={formik.handleChange}
-                        value={formik.values.genre}>
+                        value={formik.values.genre}
+                        onBlur={formik.handleBlur('genre')}>
 
                             {genres.map((genre) =>
                                 <option key={genre.id}>{genre.name}</option>
                             )}
                     </select>
+                    {formik.touched.genre && formik.errors.genre}
                 </div>
                 
                 <div className="col3 row1 form-input">
                 	<label>RELEASE DATE</label>
                 	<input type="date" onChange={formik.handleChange} 
-                        value = {formik.values.date}
-                        name="releaseDate"/>
+                        value = {formik.values.releaseDate}
+                        name="releaseDate"
+                        onBlur={formik.handleBlur('releaseDate')}
+                    />
+                    {formik.touched.releaseDate && formik.errors.releaseDate}
+
                 </div>
                 
                  <div className="col3 row2 form-input">
@@ -129,7 +167,10 @@ export default function UpsertMovieModal({header, movie, handleCloseModal}){
                         name="rating"
                         onChange={formik.handleChange}
                         value={formik.values.rating}
+                        onBlur={formik.handleBlur('rating')}
+
                      />
+                    {formik.touched.rating && formik.errors.rating}
                  </div>
                  
                  <div className="col3 row3 form-input">
@@ -140,7 +181,10 @@ export default function UpsertMovieModal({header, movie, handleCloseModal}){
                         name="runtime" 
                         onChange={formik.handleChange}
                         value={formik.values.runtime}
+                        onBlur={formik.handleBlur('runtime')}
+
                     />
+                    {formik.touched.runtime && formik.errors.runtime}
                  </div>
 
                 <div className="col1-3 row4 form-input">
@@ -151,7 +195,10 @@ export default function UpsertMovieModal({header, movie, handleCloseModal}){
                         name="overview" 
                         onChange={formik.handleChange}
                         value={formik.values.overview}
+                        onBlur={formik.handleBlur('overview')}
+
                     />
+                    {formik.touched.overview && formik.errors.overview}
                 </div>
                 
                 <div className="col2-3 row5 form-control">
diff --git a/src/store/movie/movieActions.js b/src/store/movie/movieActions.js
index b5dc91d..cba7464 100644
--- a/src/store/movie/movieActions.js
+++ b/src/store/movie/movieActions.js
@@ -56,8 +56,6 @@ export const turnOnMovieInfo = (movieInfo) => {
 export const fetchMovies = () => {
     return (dispatch, getState) => {
         dispatch(fetchMoviesRequest())
-        console.log(getState())
-        console.log(`${MOVIE_BASE_URL}${getState().movie.sortParams}${getState().movie.filterParam}`)
         axios
             .get(`${MOVIE_BASE_URL}${getState().movie.sortParams}${getState().movie.filterParam}`)
             .then(response => {
diff --git a/src/store/movie/movieReducer.js b/src/store/movie/movieReducer.js
index 8b769d6..11cc247 100644
--- a/src/store/movie/movieReducer.js
+++ b/src/store/movie/movieReducer.js
@@ -22,13 +22,11 @@ const initialState = {
 const reducer = (state = initialState, action) => {
     switch (action.type) {
         case FETCH_MOVIES_REQUEST:
-            console.log(FETCH_MOVIES_REQUEST)
             return {
                 ...state,
                 loading: true
             }
         case FETCH_MOVIES_SUCCESS:
-            console.log(FETCH_MOVIES_SUCCESS)
             return  {
                 ...state,
                 loading: false,
@@ -36,7 +34,6 @@ const reducer = (state = initialState, action) => {
                 error: ''
             }
         case MOVIES_REQUEST_FAILURE:
-            console.log(MOVIES_REQUEST_FAILURE)
             return {
                 ...state,
                 loading: false,