first commit

client/src/App.js

@@ -8,7 +8,7 @@ import MovieHeader from './components/MovieHeader';
 
 import EditMovieForm from './components/EditMovieForm';
 import FavoriteMovieList from './components/FavoriteMovieList';
-
+import AddMovieForm from "./components/addMovieForm";
 import axios from 'axios';
 
 const App = (props) => {
@@ -26,6 +26,7 @@ const App = (props) => {
   }, []);
 
   const deleteMovie = (id)=> {
+
   }
 
   const addToFavorites = (movie) => {
@@ -44,20 +45,24 @@ const App = (props) => {
           <FavoriteMovieList favoriteMovies={favoriteMovies}/>
 
           <Switch>
-            <Route path="/movies/edit/:id">
-            </Route>
+            <Route 
+            path="/movies/edit/:id" 
+            render={props => <EditMovieForm {...props} setMovies={setMovies} />} />
 
-            <Route path="/movies/:id">
-              <Movie/>
-            </Route>
+            <Route 
+            path="/movies/:id" 
+            render={props => <Movie {...props} setMovies={setMovies} />} />
 
-            <Route path="/movies">
-              <MovieList movies={movies}/>
-            </Route>
+            <Route 
+            path="/addMovie" 
+            render={props => <AddMovieForm {...props} setMovies={setMovies} />} />
+
+            <Route path="/movies" render={props => <MovieList {...props} movies={movies} />} />
 
             <Route path="/">
               <Redirect to="/movies"/>
             </Route>
+
           </Switch>
         </div>
       </div>

client/src/components/DeleteMovieModal.js

@@ -1,6 +1,9 @@
+import axios from 'axios';
 import React from 'react';
 
 const DeleteMovieModal = () => {
+
+
     return (<div id="deleteMovieModal">
         <div className="modal-dialog">
             <div className="modal-content">

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,26 @@ const EditMovieForm = (props) => {
         });
     }
 
+	useEffect(()=> {
+		axios.get(`http://localhost:5000/api/movies/${id}`)
+		  .then(resp=> {
+			setMovie(resp.data);
+		  })
+		  .catch(err=> {
+			console.log(err);
+		  })
+	  }, []);
+
     const handleSubmit = (e) => {
 		e.preventDefault();
+		axios.put(`http://localhost:5000/api/movies/${id}`, movie)
+      .then(resp=> {
+        props.setMovies(resp.data);
+        push(`/movies/${id}`);
+      })
+      .catch(err=> {
+        console.log(err);
+      })
 	}
 
 	const { title, director, genre, metascore, description } = movie;

client/src/components/Movie.js

@@ -21,6 +21,17 @@ const Movie = (props) => {
             })
     }, [id]);
 
+
+    const handleDelete = () =>{
+        axios.delete(`http://localhost:5000/api/movies/${id}`)
+        .then(resp=>{
+            props.setMovies(resp.data);
+            push('/movies');
+        })
+        .catch(err => {
+            console.log(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 className="delete" onClick={handleDelete} ><input type="button" className="m-2 btn btn-danger" value="Delete"/></span>
                         </section>
                     </div>
                 </div>

client/src/components/MovieHeader.js

@@ -1,14 +1,15 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 
+
 const MovieHeader = ()=> {
     return(<div className="table-title">
         <div className="row">
         <div className="col-sm-6">
             <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='/addMovie'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>

client/src/components/addMovieForm.js

@@ -0,0 +1,78 @@
+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 [movie, setMovie] = useState({
+		title:"",
+		director: "",
+		genre: "",
+		metascore: 0,
+		description: ""
+	});
+
+	const handleChange = (e) => {
+        setMovie({
+            ...movie,
+            [e.target.name]: e.target.value
+        });
+    }
+
+    const handleSubmit = (e) => {
+        axios.post(`http://localhost:5000/api/movies`, movie)
+        .then(res => {
+            props.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">Editing <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/1`}><input type="button" className="btn btn-default" value="Cancel"/></Link>
+				</div>
+			</form>
+		</div>
+	</div>);
+}
+
+export default AddMovieForm;