Initial Commit

client/src/App.js

@@ -10,8 +10,10 @@ import EditMovieForm from './components/EditMovieForm';
 import FavoriteMovieList from './components/FavoriteMovieList';
 
 import axios from 'axios';
+import AddMovieForm from "./components/AddMovieForm";
 
-const App = (props) => {
+
+const App = () => {
   const [movies, setMovies] = useState([]);
   const [favoriteMovies, setFavoriteMovies] = useState([]);
 
@@ -26,6 +28,7 @@ const App = (props) => {
   }, []);
 
   const deleteMovie = (id)=> {
+    setMovies(movies.filter(movie => movie.id !== id))
   }
 
   const addToFavorites = (movie) => {
@@ -45,16 +48,21 @@ 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">
               <MovieList movies={movies}/>
             </Route>
 
+            <Route path='/add-movie'>
+              <AddMovieForm setMovies={setMovies} />
+            </Route>
+
             <Route path="/">
               <Redirect to="/movies"/>
             </Route>

client/src/components/AddMovieForm.js

@@ -0,0 +1,81 @@
+import React, { useState } from 'react';
+import { useHistory } from 'react-router-dom';
+import { Link } from 'react-router-dom';
+import axios from 'axios';
+
+const AddMovieForm = (props) => {
+    const { push } = useHistory();
+
+    const { setMovies } = props;
+
+    const initialValues = {
+		title:"",
+		director: "",
+		genre: "",
+		metascore: 0,
+		description: ""
+	}
+
+	const [movie, setMovie] = useState(initialValues);
+
+    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(resp => {
+              setMovies(resp.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">Add<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="Add"/>
+					<Link to={`/movies/`}><input type="button" className="btn btn-default" value="Cancel"/></Link>
+				</div>
+			</form>
+		</div>
+	</div>
+    );
+}
+
+export default AddMovieForm;

client/src/components/EditMovieForm.js

@@ -1,11 +1,11 @@
 import React, { useState, useEffect } from 'react';
 import { useParams, useHistory } from 'react-router-dom';
 import { Link } from 'react-router-dom';
-
 import axios from 'axios';
 
 const EditMovieForm = (props) => {
 	const { push } = useHistory();
+	const { id } = useParams();
 
 	const [movie, setMovie] = useState({
 		title:"",
@@ -14,7 +14,17 @@ const EditMovieForm = (props) => {
 		metascore: 0,
 		description: ""
 	});
-
+
+	useEffect(() => {
+	  axios.get(`http://localhost:5000/api/movies/${id}`)
+	   .then(resp => {
+		  setMovie(resp.data)
+	  })
+	  .catch(err => {
+		  console.log(err);
+	  })
+	}, [])
+
 	const handleChange = (e) => {
         setMovie({
             ...movie,
@@ -25,6 +35,15 @@ const EditMovieForm = (props) => {
     const handleSubmit = (e) => {
 		e.preventDefault();
 	}
+
+	axios.put(`http://localhost:5000/api/movies/${id}`, movie)
+	  .then(resp => {
+		  push(`/movies/${id}`)
+		  props.setMovie(resp.data)
+	  })
+	  .catch(err => {
+		  console.log(err);
+	  })
 
 	const { title, director, genre, metascore, description } = movie;
 
@@ -60,7 +79,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/${id}`}><input type="button" className="btn btn-default" value="Cancel"/></Link>
 				</div>
 			</form>
 		</div>

client/src/components/Movie.js

@@ -4,7 +4,7 @@ import { Link, useParams, useHistory } from 'react-router-dom';
 import axios from 'axios';
 
 const Movie = (props) => {
-    const { addToFavorites } = props;
+    const { addToFavorites, deleteMovie } = props;
 
     const [movie, setMovie] = useState('');
 
@@ -21,6 +21,16 @@ const Movie = (props) => {
             })
     }, [id]);
 
+    const handleDelete = () => {
+        axios.delete(`http://localhost:5000/api/movies/${id}`)
+          .then(resp => {
+              deleteMovie(resp.data)
+              push('/movies')
+          })
+          .catch(err => {
+              console.log(err);
+          })
+    }
     return(<div className="modal-page col">
         <div className="modal-dialog">
             <div className="modal-content">
@@ -51,8 +61,8 @@ 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>
+                            <Link to={`/movies/edit/${id}`} className="m-2 btn btn-success">Edit</Link>
+                            <span onClick={handleDelete} className="delete"><input type="button" className="m-2 btn btn-danger" value="Delete"/></span>
                         </section>
                     </div>
                 </div>

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>