From 326c8f448b2e5c6dafedf730d3d174e902c7a973 Mon Sep 17 00:00:00 2001
From: cainpalmer <cain.a.palmer@gmail.com>
Date: Wed, 10 Nov 2021 13:53:42 -0500
Subject: [PATCH] completed

---
 client/src/App.js                      |  6 +-
 client/src/components/AddMovieForm.js  | 78 ++++++++++++++++++++++++++
 client/src/components/EditMovieForm.js | 23 +++++++-
 client/src/components/Movie.js         | 11 +++-
 client/src/components/MovieHeader.js   |  2 +-
 5 files changed, 115 insertions(+), 5 deletions(-)
 create mode 100644 client/src/components/AddMovieForm.js

diff --git a/client/src/App.js b/client/src/App.js
index 048a1923..eb5fad01 100644
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -3,7 +3,7 @@ import React, { useEffect, useState } from "react";
 import { Route, Switch, Redirect } from "react-router-dom";
 import MovieList from './components/MovieList';
 import Movie from './components/Movie';
-
+import AddMovieForm from './components/AddMovieForm';
 import MovieHeader from './components/MovieHeader';
 
 import EditMovieForm from './components/EditMovieForm';
@@ -26,6 +26,7 @@ const App = (props) => {
   }, []);
 
   const deleteMovie = (id)=> {
+    setMovies(movies.filter(item => (item.id !== Number(id))));
   }
 
   const addToFavorites = (movie) => {
@@ -45,10 +46,11 @@ const App = (props) => {
         
           <Switch>
             <Route path="/movies/edit/:id">
+              <EditMovieForm setMovies = {setMovies} />
             </Route>
 
             <Route path="/movies/:id">
-              <Movie/>
+              <Movie deleteMovie = {deleteMovie} />
             </Route>
 
             <Route path="/movies">
diff --git a/client/src/components/AddMovieForm.js b/client/src/components/AddMovieForm.js
new file mode 100644
index 00000000..e683453f
--- /dev/null
+++ b/client/src/components/AddMovieForm.js
@@ -0,0 +1,78 @@
+import React, {useState, useEffect} from 'react';
+import {useParams, useHistory} from 'react-router-dom';
+import axios from 'axios';
+import {Link} from 'react-router-dom';
+
+const AddMovieForm = (props) => {
+    const {push} = useHistory();
+
+    const [movie, setMovie] = useState({
+        title: '',
+        director: '',
+        genre: '',
+        metascore: 0,
+        description: '',
+    });
+
+    const handleChange = (event) => {
+        setMovie({
+            ...movie,
+            [event.target.name]: event.target.value
+        });
+    }
+
+    const handleSubmit = (event) => {
+        event.preventDefault();
+        axios.post(`https://localhost:5000/api/movies`, movie)
+        .then(res => {
+            console.log(res);
+            props.setMovies(res.data);
+            push(`/movies`);
+        })
+        .catch(err => {
+            console.log(err.response);
+        })
+    }
+
+    const {title, director, genre, metascore, description} = movie;
+
+    return (
+        <div>
+            <div>
+                <form onSubmit = {handleSubmit}>
+                    <div>
+                        <h4>Adding {movie.title}</h4>
+                    </div>
+                    <div>
+                        <div>
+                            <label>Title</label>
+                            <input value = {title} onChange = {handleChange} name = 'title' type = 'text' />
+                        </div>
+                        <div>
+                            <label>Director</label>
+                            <input value = {director} onChange = {handleChange} name = 'director' type = 'text' />
+                        </div>
+                        <div>
+                            <label>Genre</label>
+                            <input value = {genre} onChange = {handleChange} name = 'genre' type = 'text' />
+                        </div>
+                        <div>
+                            <label>Metascore</label>
+                            <input value = {metascore} onChange = {handleChange} name = 'metascore' type = 'number' />
+                        </div>
+                        <div>
+                            <label>Description</label>
+                            <input value = {description} onChange = {handleChange} name = 'description' />
+                        </div>
+                    </div>
+                    <div>
+                        <input type = 'submit' value = 'Save' />
+                        <Link to = {`/movies`}><input type = 'button' calue = 'Cancel' /></Link>
+                    </div>
+                </form>
+            </div>
+        </div>
+    )
+}
+
+export default AddMovieForm;
\ No newline at end of file
diff --git a/client/src/components/EditMovieForm.js b/client/src/components/EditMovieForm.js
index 9c058388..458f1041 100644
--- a/client/src/components/EditMovieForm.js
+++ b/client/src/components/EditMovieForm.js
@@ -6,6 +6,7 @@ import axios from 'axios';
 
 const EditMovieForm = (props) => {
 	const { push } = useHistory();
+	const {id} = useParams();
 
 	const [movie, setMovie] = useState({
 		title:"",
@@ -22,8 +23,28 @@ const EditMovieForm = (props) => {
         });
     }
 
+	useEffect(() => {
+		axios.get(`https://localhost:5000/api/movies/${id}`)
+		.then(resp => {
+			setMovie(resp.data);
+		})
+		.catch(err => {
+			console.log(err)
+		})
+	}, [])
+
     const handleSubmit = (e) => {
 		e.preventDefault();
+		axios.put(`https://localhost:5000/api/movies/${id}`, movie)
+		.then(resp => {
+			console.log(resp)
+			props.setMovies(resp.data);
+			push(`/movies/${id}`);
+		})
+		.catch(err => {
+			console.log(err.response);
+		})
+
 	}
 	
 	const { title, director, genre, metascore, description } = movie;
@@ -60,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/client/src/components/Movie.js b/client/src/components/Movie.js
index fc2b0e05..f2b7b269 100644
--- a/client/src/components/Movie.js
+++ b/client/src/components/Movie.js
@@ -21,6 +21,15 @@ const Movie = (props) => {
             })
     }, [id]);
 
+    const handleDelete = () => {
+        axios.delete(`https://localhost:5000/api/movies/${id}`)
+        .then(res => {
+            props.deleteMovies(id);
+            push('/movies');
+        })
+        .catch(err => {console.log(err)})
+    }
+
     return(<div className="modal-page col">
         <div className="modal-dialog">
             <div className="modal-content">
@@ -52,7 +61,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 = {handleDelete} className="delete"><input type="button" className="m-2 btn btn-danger" value="Delete"/></span>
                         </section>
                     </div>
                 </div>
diff --git a/client/src/components/MovieHeader.js b/client/src/components/MovieHeader.js
index 48ee5dd6..6640e42d 100644
--- a/client/src/components/MovieHeader.js
+++ b/client/src/components/MovieHeader.js
@@ -8,7 +8,7 @@ const MovieHeader = ()=> {
             <h2>IMDB Movie Database</h2>
         </div>
         <div className="col-sm-6">
-            <Link className="btn btn-success"><i className="material-icons">&#xE147;</i> <span>Add New Movie</span></Link>
+            <Link to = '/movies/add' className="btn btn-success"><i className="material-icons">&#xE147;</i> <span>Add New Movie</span></Link>
             <Link to="/movies" className="btn btn-primary">View All Movies</Link>
         </div>
         </div>