From 54a5610160dd57b59edf53451acaa1a635f32c0b Mon Sep 17 00:00:00 2001 From: Angelique Abacajan Date: Wed, 10 Nov 2021 14:54:23 -0500 Subject: [PATCH 01/12] Installed dependencies --- README.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index 9225889f..3462cb25 100644 --- a/README.md +++ b/README.md @@ -16,14 +16,14 @@ 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 From 97a873de82c879e847ed5e74b9228532dcc80cd4 Mon Sep 17 00:00:00 2001 From: Angelique Abacajan Date: Wed, 10 Nov 2021 14:55:27 -0500 Subject: [PATCH 02/12] Installed dependencies --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 3462cb25..6a4faf45 100644 --- a/README.md +++ b/README.md @@ -28,7 +28,7 @@ CRUD applications are the foundation of most web applications. Being able to man ### 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 ` `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. From bad6d4b0b898007fb11375bce8e3e4354295a48c Mon Sep 17 00:00:00 2001 From: Angelique Abacajan Date: Wed, 10 Nov 2021 15:18:41 -0500 Subject: [PATCH 03/12] Added EditMovieForm into App.js and supplied an edit route --- README.md | 2 +- client/src/App.js | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 6a4faf45..190928db 100644 --- a/README.md +++ b/README.md @@ -29,7 +29,7 @@ CRUD applications are the foundation of most web applications. Being able to man #### 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 ` `component to the supplied edit route. +* [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. * [ ] Next, we need to grab the id being passed into the component through the url. Use the `useParams` hook to get the id value. diff --git a/client/src/App.js b/client/src/App.js index 048a1923..429e48e5 100644 --- a/client/src/App.js +++ b/client/src/App.js @@ -43,8 +43,10 @@ const App = (props) => {
+ {/* Edit Movie Component */} + From 84bbda38a2c937ec49213b1062db3ada51f9b164 Mon Sep 17 00:00:00 2001 From: Angelique Abacajan Date: Wed, 10 Nov 2021 15:28:40 -0500 Subject: [PATCH 04/12] Implemented useParams hook --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 190928db..e266ce7a 100644 --- a/README.md +++ b/README.md @@ -31,7 +31,7 @@ CRUD applications are the foundation of most web applications. Being able to man * [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. -* [ ] 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] 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. From 462dc9b21a16940289cf13cfedb359c0c00f88d4 Mon Sep 17 00:00:00 2001 From: Angelique Abacajan Date: Wed, 10 Nov 2021 15:51:54 -0500 Subject: [PATCH 05/12] Retrieving movie's current id from api --- README.md | 2 +- client/src/components/EditMovieForm.js | 14 ++++++++++++++ 2 files changed, 15 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index e266ce7a..0778575c 100644 --- a/README.md +++ b/README.md @@ -33,7 +33,7 @@ CRUD applications are the foundation of most web applications. Being able to man * [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. -* [ ] 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] 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. diff --git a/client/src/components/EditMovieForm.js b/client/src/components/EditMovieForm.js index 9c058388..f220d617 100644 --- a/client/src/components/EditMovieForm.js +++ b/client/src/components/EditMovieForm.js @@ -7,6 +7,9 @@ import axios from 'axios'; 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 +17,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({ From a353e236eedd3572bfe2cf64fd61b6f8dab739c0 Mon Sep 17 00:00:00 2001 From: Angelique Abacajan Date: Wed, 10 Nov 2021 16:20:18 -0500 Subject: [PATCH 06/12] Implemented a handleSubmit to sync server data and local state --- README.md | 2 +- client/src/components/EditMovieForm.js | 13 ++++++++++++- 2 files changed, 13 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 0778575c..0fa8f7cc 100644 --- a/README.md +++ b/README.md @@ -35,7 +35,7 @@ CRUD applications are the foundation of most web applications. Being able to man * [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. -* [ ] 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] 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. * [ ] 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. diff --git a/client/src/components/EditMovieForm.js b/client/src/components/EditMovieForm.js index f220d617..6d60e993 100644 --- a/client/src/components/EditMovieForm.js +++ b/client/src/components/EditMovieForm.js @@ -3,6 +3,7 @@ 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(); @@ -36,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; @@ -74,7 +85,7 @@ const EditMovieForm = (props) => {
- +
From 0213b3e3f3b317363d5c401b973bf650b9b1185b Mon Sep 17 00:00:00 2001 From: Angelique Abacajan Date: Wed, 10 Nov 2021 16:21:19 -0500 Subject: [PATCH 07/12] Updated ReadMe's checklist --- README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 0fa8f7cc..e2c03171 100644 --- a/README.md +++ b/README.md @@ -37,11 +37,11 @@ CRUD applications are the foundation of most web applications. Being able to man * [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. -* [ ] 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] 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. -* [ ] Now that we have access to `setMovies`, made sure the updated list of movies is saved to our global state. +* [ x 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...* From 6ddf4a2f77a2b13fbb582919503e57a73abdfa1d Mon Sep 17 00:00:00 2001 From: Angelique Abacajan Date: Wed, 10 Nov 2021 16:36:36 -0500 Subject: [PATCH 08/12] Added event handlers to delete movies and made a request to delete currently viewed movie --- README.md | 4 ++-- client/src/components/Movie.js | 14 +++++++++++++- 2 files changed, 15 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index e2c03171..bfed6000 100644 --- a/README.md +++ b/README.md @@ -46,9 +46,9 @@ CRUD applications are the foundation of most web applications. Being able to man #### 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. 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 - +
From d6ca0144c13d4c33e0e5bb8662c195c92e99cd3f Mon Sep 17 00:00:00 2001 From: Angelique Abacajan Date: Wed, 10 Nov 2021 16:56:26 -0500 Subject: [PATCH 09/12] Synced deleteMovie in server and state data, passed deleteMovie to component, and redirects user to movie route --- README.md | 6 +++--- client/src/App.js | 4 +++- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index bfed6000..4b102ec5 100644 --- a/README.md +++ b/README.md @@ -50,11 +50,11 @@ CRUD applications are the foundation of most web applications. Being able to man * [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.* diff --git a/client/src/App.js b/client/src/App.js index 429e48e5..ddfe26f9 100644 --- a/client/src/App.js +++ b/client/src/App.js @@ -26,6 +26,7 @@ const App = (props) => { }, []); const deleteMovie = (id)=> { + setMovies(movies.filter(item => (item.id !== Number(id)))); } const addToFavorites = (movie) => { @@ -49,8 +50,9 @@ const App = (props) => { + {/* Delete movie */} - + From 567b5e2f588d9b89d5ececf710231581daacdaed Mon Sep 17 00:00:00 2001 From: Angelique Abacajan Date: Wed, 10 Nov 2021 16:58:39 -0500 Subject: [PATCH 10/12] Created an AddMovieForm.js --- README.md | 2 +- client/src/components/AddMovieForm.js | 0 2 files changed, 1 insertion(+), 1 deletion(-) create mode 100644 client/src/components/AddMovieForm.js diff --git a/README.md b/README.md index 4b102ec5..7065b56a 100644 --- a/README.md +++ b/README.md @@ -59,7 +59,7 @@ CRUD applications are the foundation of most web applications. Being able to man #### 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`. diff --git a/client/src/components/AddMovieForm.js b/client/src/components/AddMovieForm.js new file mode 100644 index 00000000..e69de29b From 97bf03b6803b76bf11480effb372167ccae3505f Mon Sep 17 00:00:00 2001 From: Angelique Abacajan Date: Wed, 10 Nov 2021 17:15:47 -0500 Subject: [PATCH 11/12] MVP --- README.md | 8 +-- client/src/App.js | 1 + client/src/components/AddMovieForm.js | 79 +++++++++++++++++++++++++++ 3 files changed, 84 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 7065b56a..1f41edfe 100644 --- a/README.md +++ b/README.md @@ -61,13 +61,13 @@ CRUD applications are the foundation of most web applications. Being able to man * [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 ddfe26f9..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'; diff --git a/client/src/components/AddMovieForm.js b/client/src/components/AddMovieForm.js index e69de29b..aad7a00f 100644 --- a/client/src/components/AddMovieForm.js +++ b/client/src/components/AddMovieForm.js @@ -0,0 +1,79 @@ +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 = (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 From 4a81316636a5899b2c4320715a664ead34e7e251 Mon Sep 17 00:00:00 2001 From: Angelique Abacajan Date: Wed, 10 Nov 2021 17:22:42 -0500 Subject: [PATCH 12/12] Finalized MVP --- client/src/components/AddMovieForm.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/src/components/AddMovieForm.js b/client/src/components/AddMovieForm.js index aad7a00f..605ebc63 100644 --- a/client/src/components/AddMovieForm.js +++ b/client/src/components/AddMovieForm.js @@ -1,4 +1,4 @@ -import React, { useState, useEffect } from 'react'; +import React, { useState } from 'react'; import { useParams, useHistory } from 'react-router-dom'; import { Link } from 'react-router-dom'; import axios from 'axios';