From 041315451da6db86dab2b1dde42c6048d48ea6b3 Mon Sep 17 00:00:00 2001
From: Kate Ridgle <kroo.2394@gmail.com>
Date: Tue, 26 Sep 2023 17:07:57 -0700
Subject: [PATCH] completed module

---
 src/App.js                      |  9 ++++
 src/components/AddMovieForm.js  | 81 +++++++++++++++++++++++++++++++++
 src/components/EditMovieForm.js | 14 +++++-
 src/components/Movie.js         | 13 +++++-
 4 files changed, 115 insertions(+), 2 deletions(-)
 create mode 100644 src/components/AddMovieForm.js

diff --git a/src/App.js b/src/App.js
index edd0e16e..c4741bed 100644
--- a/src/App.js
+++ b/src/App.js
@@ -9,6 +9,8 @@ import MovieHeader from './components/MovieHeader';
 import FavoriteMovieList from './components/FavoriteMovieList';
 
 import axios from 'axios';
+import EditMovieForm from "./components/EditMovieForm";
+import AddMovieForm from "./components/AddMovieForm";
 
 const App = (props) => {
   const [movies, setMovies] = useState([]);
@@ -25,6 +27,7 @@ const App = (props) => {
   }, []);
 
   const deleteMovie = (id) => {
+    setMovies(movies.filter(item=>(item.id !== Number(id))))
   }
 
   const addToFavorites = (movie) => {
@@ -44,8 +47,14 @@ const App = (props) => {
 
           <Routes>
             <Route path="movies/edit/:id" />
+            <EditMovieForm setMovies={setMovies} />
 
             <Route path="movies/:id" />
+            <Movie deleteMovie={deleteMovie} />
+
+            <Route path='movies/add'>
+              <AddMovieForm setMovies={setMovies} />
+            </Route>
 
             <Route path="movies" element={<MovieList movies={movies} />} />
 
diff --git a/src/components/AddMovieForm.js b/src/components/AddMovieForm.js
new file mode 100644
index 00000000..85978b41
--- /dev/null
+++ b/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:5000/api/movies`, movie)
+      .then(res => {
+        setMovies(res.data);
+        push('/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;
\ No newline at end of file
diff --git a/src/components/EditMovieForm.js b/src/components/EditMovieForm.js
index 4a229e18..afa25de3 100644
--- a/src/components/EditMovieForm.js
+++ b/src/components/EditMovieForm.js
@@ -6,7 +6,9 @@ import axios from 'axios';
 
 const EditMovieForm = (props) => {
   const navigate = useNavigate();
+  const {id} = useParams();
 
+  
   const { setMovies } = props;
   const [movie, setMovie] = useState({
     title: "",
@@ -16,6 +18,16 @@ const EditMovieForm = (props) => {
     description: ""
   });
 
+  useEffect(()=>{
+    axios.get(`http://localhost:5000/api/movies/${id}`)
+    .then(res=>{
+      setMovie(res.data);
+    })
+    .catch(err=>{
+
+    })
+  }, []);
+
   const handleChange = (e) => {
     setMovie({
       ...movie,
@@ -69,7 +81,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>
diff --git a/src/components/Movie.js b/src/components/Movie.js
index 9b2159f1..4902e0c0 100644
--- a/src/components/Movie.js
+++ b/src/components/Movie.js
@@ -21,6 +21,17 @@ const Movie = (props) => {
       })
   }, [id]);
 
+  const handleDeleteClick = () => {
+    axios.delete(`http://ocalhost:5000/api/movies/${id}`)
+      .then(res=>{
+        deleteMovie(id)
+        push('/movies')
+      })
+      .catch(err=>{
+        
+      })
+  }
+
   return (<div className="modal-page col">
     <div className="modal-dialog">
       <div className="modal-content">
@@ -52,7 +63,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 onCLick={handleDeleteClick} className="delete"><input type="button" className="m-2 btn btn-danger" value="Delete" /></span>
             </section>
           </div>
         </div>