1st push

README.md

@@ -1,4 +1,4 @@
-# HTTP / AJAX II React Module Project: Movie CRUD
+# HTTP / AJAX II React Module Project: Movie CRUD 
 
 This module explored HTTP methods, REST interfaces, CRUD apps and using put and delete to allow editing and deleting functionality. We also dug into how to pass props to Route connected components and using URL params to get values from an api. In this project, you will practice each of these skills by implement various pieces of functionality in a movie database CRUD app.
 
@@ -16,24 +16,24 @@ CRUD applications are the foundation of most web applications. Being able to man
 
 ## Instructions
 ### Task 1: Project Set Up
-* [ ] Create a forked copy of this project.
-* [ ] Clone your OWN version of the repository in your terminal
-* [ ] cd into the project base directory `cd web-module-project-HTTP`
-* [ ] Download server dependencies by running `npm install`
-* [ ] Run the local web server by running `node server.js`
-* [ ] Open a new terminal window and cd into the client code `cd client`
-* [ ] Download project dependencies by running `npm install`
+* [ .] Create a forked copy of this project.
+* [ .] Clone your OWN version of the repository in your terminal
+* [ .] cd into the project base directory `cd web-module-project-HTTP`
+* [ .] Download server dependencies by running `npm install`
+* [. ] Run the local web server by running `node server.js`
+* [. ] Open a new terminal window and cd into the client code `cd client`
+* [ .] Download project dependencies by running `npm install`
 * [ ] Start up the app using `npm start`
 
 ### Task 2: Project Requirements
 #### Editing a Movie
 > *Let's start by walking through the process of adding the routing, component and service calls need for resource updating*
 
-* [ ] First, we need to be able to navigate to the edit movie component. In App.js, add in the `<EditMovieForm> `component to the supplied edit route.
+* [ .] First, we need to be able to navigate to the edit movie component. In App.js, add in the `<EditMovieForm> `component to the supplied edit route.
 
-* [ ] Next, we need to grab the id being passed into the component through the url. Use the `useParams` hook to get the id value.
+* [. ] Next, we need to grab the id being passed into the component through the url. Use the `useParams` hook to get the id value.
 
-* [ ] We need to be able to load in the current movie's attributes into our local form state. When `EditMovieForm` mount, retrieve our current id's movie from the api and save the data returned to local state.
+* [. ] We need to be able to load in the current movie's attributes into our local form state. When `EditMovieForm` mount, retrieve our current id's movie from the api and save the data returned to local state.
 
 * [ ] At this point, nothing happens when the edit form is submitted. Add in the api call needed to update the server with our updated movie data.
 

client/src/App.js

@@ -8,26 +8,36 @@ 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) => {
   const [movies, setMovies] = useState([]);
   const [favoriteMovies, setFavoriteMovies] = useState([]);
 
-  useEffect(()=>{
+  const getMovies = () => {
     axios.get('http://localhost:5000/api/movies')
       .then(res => {
         setMovies(res.data);
       })
       .catch(err => {
         console.log(err);
       });
+  }
+
+  useEffect(()=>{
+    getMovies()
   }, []);
 
-  const deleteMovie = (id)=> {
+  const updateMovies = () => {
+   getMovies()
   }
 
+  // const deleteMovie = (id)=> {
+  //   getMovies()
+  // }
+
   const addToFavorites = (movie) => {
 
   }
@@ -45,10 +55,15 @@ const App = (props) => {
 
           <Switch>
             <Route path="/movies/edit/:id">
+            <EditMovieForm updateMovies={updateMovies}/> 
             </Route>
 
             <Route path="/movies/:id">
-              <Movie/>
+              <Movie updateMovies={updateMovies}/>
+            </Route>
+
+            <Route exact path="/addMovie">
+              <AddMovieForm updateMovies={updateMovies}/>
             </Route>
 
             <Route path="/movies">

client/src/components/AddMovieForm.js

@@ -0,0 +1,78 @@
+import React, { useState, useEffect } from 'react';
+import { useParams, useHistory } from 'react-router-dom';
+import { Link } from 'react-router-dom';
+
+import axios from 'axios';
+
+const AddMovieForm = ({ updateMovies }) => {
+    const { push } = useHistory();
+	const { id } = useParams();
+	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(resp=> {
+        setMovie(resp.data);
+		updateMovies()
+        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;

client/src/components/EditMovieForm.js

@@ -4,17 +4,26 @@ import { Link } from 'react-router-dom';
 
 import axios from 'axios';
 
-const EditMovieForm = (props) => {
+const EditMovieForm = ({ updateMovies }) => {
 	const { push } = useHistory();
-
+	const { id } = useParams();
 	const [movie, setMovie] = useState({
 		title:"",
 		director: "",
 		genre: "",
 		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,
@@ -24,8 +33,19 @@ const EditMovieForm = (props) => {
 
     const handleSubmit = (e) => {
 		e.preventDefault();
+		axios.put(`http://localhost:5000/api/movies/${id}`, movie)
+      .then(resp=> {
+        setMovie(resp.data);
+		updateMovies()
+        push(`/movies/${id}`);
+
+      })
+      .catch(err=> {
+        console.log(err);
+      })
 	}
 
+
 	const { title, director, genre, metascore, description } = movie;
 
     return (

client/src/components/Movie.js

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