I have completed the mvp challenges

src/App.js

@@ -8,23 +8,31 @@ import MovieHeader from './components/MovieHeader';
 
 import FavoriteMovieList from './components/FavoriteMovieList';
 
+import EditMovieForm from "./components/EditMovieForm";
+
+import AddMovieForm from "./components/AddMovieForm";
+
 import axios from 'axios';
 
 const App = (props) => {
   const [movies, setMovies] = useState([]);
   const [favoriteMovies, setFavoriteMovies] = useState([]);
 
+  console.log(movies)
   useEffect(() => {
     axios.get('http://localhost:9000/api/movies')
       .then(res => {
+        console.log(res)
         setMovies(res.data);
       })
       .catch(err => {
         console.log(err);
       });
   }, []);
 
-  const deleteMovie = (id) => {
+  const deleteMovie =(id)=> {
+    console.log('click')
+    setMovies(movies.filter(item=>(item.id!==id)))
   }
 
   const addToFavorites = (movie) => {
@@ -43,9 +51,11 @@ const App = (props) => {
           <FavoriteMovieList favoriteMovies={favoriteMovies} />
 
           <Routes>
-            <Route path="movies/edit/:id" />
+            <Route path="movies/edit/:id" element={<EditMovieForm setMovies={setMovies}/>}/>
+
+            <Route path="movies/:id" element={<Movie deleteMovie={deleteMovie}/>}/>
 
-            <Route path="movies/:id" />
+            <Route path='movies/add' element={<AddMovieForm setMovies={setMovies} />}/>
 
             <Route path="movies" element={<MovieList movies={movies} />} />
 

src/components/AddMovieForm.js

@@ -0,0 +1,81 @@
+import React, { useState, useEffect } from 'react';
+import {useNavigate } from 'react-router-dom';
+import { Link } from 'react-router-dom';
+
+import axios from 'axios';
+
+const AddMovieForm = (props) => {
+  const navigate = useNavigate();
+  const { setMovies } = props;
+
+
+  const [movie, setMovie] = useState({
+    title: "",
+    director: "",
+    genre: "",
+    metascore: 0,
+    description: ""
+  });
+
+  const handleChange = (e) => {
+    setMovie({
+      ...movie,
+      [e.target.name]: e.target.value
+    });
+  }
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    axios.post(`http://localhost:9000/api/movies`, movie)
+      .then(res => {
+
+        props.setMovies(res.data);
+        navigate(`/movies`);
+      })
+      .catch(err => {
+        console.log(err);
+      })
+  }
+
+  const { title, director, genre, metascore, description } = movie;
+
+  return (
+    <div className="col">
+      <div className="modal-content">
+        <form onSubmit={handleSubmit}>
+          <div className="modal-header">
+            <h4 className="modal-title">Adding<strong>{movie.title}</strong></h4>
+          </div>
+          <div className="modal-body">
+            <div className="form-group">
+              <label>Title</label>
+              <input value={title} onChange={handleChange} name="title" type="text" className="form-control" />
+            </div>
+            <div className="form-group">
+              <label>Director</label>
+              <input value={director} onChange={handleChange} name="director" type="text" className="form-control" />
+            </div>
+            <div className="form-group">
+              <label>Genre</label>
+              <input value={genre} onChange={handleChange} name="genre" type="text" className="form-control" />
+            </div>
+            <div className="form-group">
+              <label>Metascore</label>
+              <input value={metascore} onChange={handleChange} name="metascore" type="number" className="form-control" />
+            </div>
+            <div className="form-group">
+              <label>Description</label>
+              <textarea value={description} onChange={handleChange} name="description" className="form-control"></textarea>
+            </div>
+
+          </div>
+          <div className="modal-footer">
+            <input type="submit" className="btn btn-info" value="Save" />
+            <Link to={`/movies`}><input type="button" className="btn btn-default" value="Cancel" /></Link>
+          </div>
+        </form>
+      </div>
+    </div>);
+}
+
+export default AddMovieForm;

src/components/EditMovieForm.js

@@ -6,8 +6,11 @@ import axios from 'axios';
 
 const EditMovieForm = (props) => {
   const navigate = useNavigate();
-
+  const { id } = useParams();
   const { setMovies } = props;
+
+  console.log('current Id' , id)
+
   const [movie, setMovie] = useState({
     title: "",
     director: "",
@@ -22,6 +25,16 @@ const EditMovieForm = (props) => {
       [e.target.name]: e.target.value
     });
   }
+  console.log(props)
+  useEffect(()=>{
+    axios.get(`http://localhost:9000/api/movies/${id}`)
+    .then(res => {
+      setMovie(res.data)
+    })
+    .catch(err => {
+      console.error(err)
+    })
+  },[])
 
   const handleSubmit = (e) => {
     e.preventDefault();
@@ -69,7 +82,7 @@ const EditMovieForm = (props) => {
           </div>
           <div className="modal-footer">
             <input type="submit" className="btn btn-info" value="Save" />
-            <Link to={`/movies/1`}><input type="button" className="btn btn-default" value="Cancel" /></Link>
+            <Link to={`/movies`}><input type="button" className="btn btn-default" value="Cancel" /></Link>
           </div>
         </form>
       </div>

src/components/Movie.js

@@ -4,22 +4,34 @@ import { Link, useParams, useNavigate } from 'react-router-dom';
 import axios from 'axios';
 
 const Movie = (props) => {
-  const { addToFavorites } = props;
+  const { addToFavorites} = props;
 
   const [movie, setMovie] = useState('');
 
   const { id } = useParams();
   const navigate = useNavigate();
-
   useEffect(() => {
     axios.get(`http://localhost:9000/api/movies/${id}`)
       .then(res => {
+        console.log(res, '2')
         setMovie(res.data);
       })
       .catch(err => {
         console.log(err.response);
       })
   }, [id]);
+
+  const handleDeleteClick = () => {
+    axios.delete(`http://localhost:9000/api/movies/${id}`)
+      .then(res=>{
+        props.deleteMovie(id)
+        console.log(movie)
+        navigate('/movies')
+      })
+      .catch(err => {
+        console.error(err.response)
+      })
+  }
 
   return (<div className="modal-page col">
     <div className="modal-dialog">
@@ -52,7 +64,7 @@ const Movie = (props) => {
             <section>
               <span className="m-2 btn btn-dark">Favorite</span>
               <Link to={`/movies/edit/${movie.id}`} className="m-2 btn btn-success">Edit</Link>
-              <span className="delete"><input type="button" className="m-2 btn btn-danger" value="Delete" /></span>
+              <span className="delete"><input onClick={handleDeleteClick} type="button" className="m-2 btn btn-danger" value="Delete" /></span>
             </section>
           </div>
         </div>