first and final push

client/src/App.js

@@ -6,6 +6,7 @@ import Movie from './components/Movie';
 
 import MovieHeader from './components/MovieHeader';
 
+import AddMovieForm from './components/AddMovieForm';
 import EditMovieForm from './components/EditMovieForm';
 import FavoriteMovieList from './components/FavoriteMovieList';
 
@@ -14,57 +15,62 @@ import axios from 'axios';
 const App = (props) => {
   const [movies, setMovies] = useState([]);
   const [favoriteMovies, setFavoriteMovies] = useState([]);
-
+  console.log("App: ", movies);
   useEffect(()=>{
     axios.get('http://localhost:5000/api/movies')
-      .then(res => {
-        setMovies(res.data);
-      })
-      .catch(err => {
-        console.log(err);
-      });
+        .then(res => {
+          setMovies(res.data);
+        })
+        .catch(err => {
+          console.log(err);
+        });
   }, []);
 
   const deleteMovie = (id)=> {
+    setMovies(movies.filter(movie => movie.id = Number(id)));
   }
 
   const addToFavorites = (movie) => {
-    
+
   }
 
   return (
-    <div>
-      <nav className="navbar navbar-dark bg-dark">
-        <span className="navbar-brand" ><img width="40px" alt="" src="./Lambda-Logo-Red.png"/> HTTP / CRUD Module Project</span>
-      </nav>
-
-      <div className="container">
-        <MovieHeader/>
-        <div className="row ">
-          <FavoriteMovieList favoriteMovies={favoriteMovies}/>
-
-          <Switch>
-            <Route path="/movies/edit/:id">
-            </Route>
-
-            <Route path="/movies/:id">
-              <Movie/>
-            </Route>
-
-            <Route path="/movies">
-              <MovieList movies={movies}/>
-            </Route>
-
-            <Route path="/">
-              <Redirect to="/movies"/>
-            </Route>
-          </Switch>
+      <div>
+        <nav className="navbar navbar-dark bg-dark">
+          <span className="navbar-brand" ><img width="40px" alt="" src="./Lambda-Logo-Red.png"/> HTTP / CRUD Module Project</span>
+        </nav>
+
+        <div className="container">
+          <MovieHeader/>
+          <div className="row ">
+            <FavoriteMovieList favoriteMovies={favoriteMovies}/>
+
+            <Switch>
+              <Route path="/movies/add" >
+                <AddMovieForm component={AddMovieForm} setMovies={setMovies}/>
+              </Route>
+
+              <Route path="/movies/edit/:id" >
+                <EditMovieForm component={EditMovieForm} setMovies={setMovies}/>
+              </Route>
+
+              <Route path="/movies/:id">
+                <Movie deleteMovie={deleteMovie}/>
+              </Route>
+
+              <Route path="/movies">
+                <MovieList movies={movies}/>
+              </Route>
+
+              <Route path="/">
+                <Redirect to="/movies"/>
+              </Route>
+            </Switch>
+          </div>
         </div>
       </div>
-    </div>
   );
 };
 
 
 export default App;
-

client/src/components/AddMovieForm.js

@@ -0,0 +1,78 @@
+import React, { useState } from 'react';
+import { Link } from 'react-router-dom';
+import { useHistory } from 'react-router-dom';
+
+import axios from 'axios';
+
+const AddMovieForm = (props) => {
+    const { setMovies } = 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) => {
+        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 Movie <strong>{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;

client/src/components/DeleteMovieModal.js

@@ -1,15 +1,17 @@
 import React from 'react';
 
+
+
 const DeleteMovieModal = () => {
     return (<div id="deleteMovieModal">
         <div className="modal-dialog">
             <div className="modal-content">
                 <form>
-                    <div className="modal-header">						
+                    <div className="modal-header">
                         <h4 className="modal-title">Delete Movie</h4>
                         <button type="button" className="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                     </div>
-                    <div className="modal-body">					
+                    <div className="modal-body">
                         <p>Are you sure you want to delete these records?</p>
                         <p className="text-warning"><small>This action cannot be undone.</small></p>
                     </div>
@@ -23,4 +25,4 @@ const DeleteMovieModal = () => {
     </div>)
 }
 
-export default DeleteMovieModal;
+export default DeleteMovieModal;