diff --git a/README.md b/README.md index 9225889f..1f41edfe 100644 --- a/README.md +++ b/README.md @@ -16,58 +16,58 @@ 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` -* [ ] Start up the app using `npm start` +* [x] Create a forked copy of this project. +* [x] Clone your OWN version of the repository in your terminal +* [x] cd into the project base directory `cd web-module-project-HTTP` +* [x] Download server dependencies by running `npm install` +* [x] Run the local web server by running `node server.js` +* [x] Open a new terminal window and cd into the client code `cd client` +* [x] Download project dependencies by running `npm install` +* [x] 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* + +* [x] First, we need to be able to navigate to the edit movie component. In App.js, add in the ` `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 ` `component to the supplied edit route. +* [x] 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. +* [x] 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. +* [x] 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. -* [ ] 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. +* [x] Don't forget to make sure that your server data and your local state are in sync! Make any changes the edit route needed to give the edit form access to App's `setMovies` method. -* [ ] Don't forget to make sure that your server data and your local state are in sync! Make any changes the edit route needed to give the edit form access to App's `setMovies` method. +* [ x Now that we have access to `setMovies`, made sure the updated list of movies is saved to our global state. -* [ ] Now that we have access to `setMovies`, made sure the updated list of movies is saved to our global state. - -* [ ] Redirect the user to the currently edited movie's individual info page. +* [x] Redirect the user to the currently edited movie's individual info page. #### Deleting a Movie > *You added in a CRUD feature! Good job! Now let's get deleted squared away...* -* [ ] Identify the component that holds the "button" needed for deletion. Add an event handler to that button. +* [x] Identify the component that holds the "button" needed for deletion. Add an event handler to that button. -* [ ] Build an event handler that makes a request to delete the currently viewed movie. Observe what is returned from the request. +* [x] Build an event handler that makes a request to delete the currently viewed movie. Observe what is returned from the request. -* [ ] You will once again need to keep the server and state data in sync. In `App.js`, complete the `deleteMovie` method so that it receives an id, filters out any movie with that id and sets state to that resultant movie list. +* [x] You will once again need to keep the server and state data in sync. In `App.js`, complete the `deleteMovie` method so that it receives an id, filters out any movie with that id and sets state to that resultant movie list. -* [ ] Pass `deleteMovie` into the approprate component. +* [x] Pass `deleteMovie` into the approprate component. -* [ ] Run `deleteMovie` on the currently selected movie when your delete request is complete and redirect the user to the `/movies` route. +* [x] Run `deleteMovie` on the currently selected movie when your delete request is complete and redirect the user to the `/movies` route. #### Adding a Movie > *Alright! You ready! Let's see you use the skills of the previous steps to build a crud function from start to finish.* -* [ ] Use `EditMovieForm.js` as a model to build an `AddMovieForm` component from scratch. The component should hold all the attributes of a new movie in local state. +* [x] Use `EditMovieForm.js` as a model to build an `AddMovieForm` component from scratch. The component should hold all the attributes of a new movie in local state. -* [ ] Add in a route that allows access to `AddMovieForm`. +* [x] Add in a route that allows access to `AddMovieForm`. -* [ ] Locate the part of the ui that should redirect to your new `AddMovieForm`. Make that button works as expected. +* [x] Locate the part of the ui that should redirect to your new `AddMovieForm`. Make that button works as expected. -* [ ] In `AddMovieForm,` add an event handler for form submission. When the form is submitted, run the approprate request for adding a movie with the component's state values. +* [x] In `AddMovieForm,` add an event handler for form submission. When the form is submitted, run the approprate request for adding a movie with the component's state values. -* [ ] Make sure your component has access to and runs and modifications needed to global state and redirects to `/movies` after creation. +* [x] Make sure your component has access to and runs and modifications needed to global state and redirects to `/movies` after creation. ### Stretch goals - Make the added DeleteMovieModal appear and be reacted to before deletion occurs. diff --git a/client/src/App.js b/client/src/App.js index 048a1923..4c4c1ee2 100644 --- a/client/src/App.js +++ b/client/src/App.js @@ -8,6 +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'; @@ -26,6 +27,7 @@ const App = (props) => { }, []); const deleteMovie = (id)=> { + setMovies(movies.filter(item => (item.id !== Number(id)))); } const addToFavorites = (movie) => { @@ -43,12 +45,15 @@ const App = (props) => {
+ {/* Edit Movie Component */} + + {/* Delete movie */} - + diff --git a/client/src/components/AddMovieForm.js b/client/src/components/AddMovieForm.js new file mode 100644 index 00000000..605ebc63 --- /dev/null +++ b/client/src/components/AddMovieForm.js @@ -0,0 +1,79 @@ +import React, { useState } from 'react'; +import { useParams, 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 = event => { + setMovie({ + ...movie, + [event.target.name]: event.target.value + }); + } + + // handling submission for editing movies + const handleSubmit = event => { + event.preventDefault(); + + axios.put(`http://localhost:5000/api/movies/`, movie) + .then(response => { + props.setMovies(response.data); + push(`/movies`); + + }).catch(error => { + console.error(error); + }) + } + + const { title, director, genre, metascore, description } = movie; + + return ( +
+
+
+
+

Editing {movie.title}

+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ +
+
+ + +
+
+
+
); +} + +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..6d60e993 100644 --- a/client/src/components/EditMovieForm.js +++ b/client/src/components/EditMovieForm.js @@ -3,10 +3,14 @@ import { useParams, useHistory } from 'react-router-dom'; import { Link } from 'react-router-dom'; import axios from 'axios'; +import { response } from 'express'; const EditMovieForm = (props) => { const { push } = useHistory(); + // grabbing the ID being passed to the component using useParams + const { id } = useParams(); + const [movie, setMovie] = useState({ title:"", director: "", @@ -14,6 +18,17 @@ const EditMovieForm = (props) => { metascore: 0, description: "" }); + + // retrieving movie's current ID from the api + useEffect(() => { + axios.get(`http://localhost:5000/api/movies/${id}`) + .then(response => { + setMovie(response.data); + + }).catch(error => { + console.error(error) + }) + }, [id]) const handleChange = (e) => { setMovie({ @@ -22,8 +37,18 @@ const EditMovieForm = (props) => { }); } + // handling submission for editing movies const handleSubmit = (e) => { e.preventDefault(); + + axios.put(`http://localhost:5000/api/movies/${id}`, movie) + .then(response => { + props.setMovies(response.data); + push(`/movies/${id}`); + + }).catch(error => { + console.error(error); + }) } const { title, director, genre, metascore, description } = movie; @@ -60,7 +85,7 @@ const EditMovieForm = (props) => {
- +
diff --git a/client/src/components/Movie.js b/client/src/components/Movie.js index fc2b0e05..bea4648a 100644 --- a/client/src/components/Movie.js +++ b/client/src/components/Movie.js @@ -21,6 +21,18 @@ const Movie = (props) => { }) }, [id]); + // Event handler for deleting a movie + const handleDelete = () => { + axios.delete(`http://localhost:5000/api/movies/${id}`) + .then(response => { + props.deleteMovies(id); + push("/movies"); + + }).catch(error => { + console.error(error); + }) + } + return(
@@ -52,7 +64,7 @@ const Movie = (props) => {
Favorite Edit - +