From 03a83633f6ed043e2633fc09b0899b1a399e2622 Mon Sep 17 00:00:00 2001 From: LirongCui Date: Tue, 2 Nov 2021 23:56:00 -0700 Subject: [PATCH 1/2] setup --- 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 1a119f5abff11bb419d0218fcbaee24e2d5e9044 Mon Sep 17 00:00:00 2001 From: LirongCui Date: Fri, 5 Nov 2021 15:33:10 -0700 Subject: [PATCH 2/2] mvp --- README.md | 34 +++++----- client/src/App.js | 20 ++++-- client/src/components/AddMovie.js | 75 +++++++++++++++++++++++ client/src/components/DeleteMovieModal.js | 1 + client/src/components/EditMovieForm.js | 17 ++++- client/src/components/Movie.js | 13 +++- client/src/components/MovieHeader.js | 2 +- 7 files changed, 137 insertions(+), 25 deletions(-) create mode 100644 client/src/components/AddMovie.js diff --git a/README.md b/README.md index 3462cb25..f105c9cf 100644 --- a/README.md +++ b/README.md @@ -29,45 +29,45 @@ 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. +* [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. +* [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...* -* [ ] 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..93bb0152 100644 --- a/client/src/App.js +++ b/client/src/App.js @@ -1,8 +1,9 @@ import React, { useEffect, useState } from "react"; -import { Route, Switch, Redirect } from "react-router-dom"; +import { Route, Switch, Redirect, useHistory } from "react-router-dom"; import MovieList from './components/MovieList'; import Movie from './components/Movie'; +import AddMovieForm from './components/AddMovie'; import MovieHeader from './components/MovieHeader'; @@ -12,20 +13,24 @@ import FavoriteMovieList from './components/FavoriteMovieList'; import axios from 'axios'; const App = (props) => { + const { id } = props; const [movies, setMovies] = useState([]); const [favoriteMovies, setFavoriteMovies] = useState([]); useEffect(()=>{ - axios.get('http://localhost:5000/api/movies') + + axios.get(`http://localhost:5000/api/movies`) .then(res => { setMovies(res.data); }) .catch(err => { console.log(err); }); - }, []); + }, [movies]); const deleteMovie = (id)=> { + setMovies(movies.filter(movie => movie.id !== Number(id))); + } const addToFavorites = (movie) => { @@ -45,14 +50,19 @@ const App = (props) => { + - + - + + + + + diff --git a/client/src/components/AddMovie.js b/client/src/components/AddMovie.js new file mode 100644 index 00000000..f4f70cd0 --- /dev/null +++ b/client/src/components/AddMovie.js @@ -0,0 +1,75 @@ +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 [newMovie, setNewMovie] = useState({ + title:"", + director: "", + genre: "", + metascore: 0, + description: "" + }); + + const handleChange = (e) => { + setNewMovie({ + ...newMovie, + [e.target.name]: e.target.value + }); + } + + const handleSubmit = (e) => { + e.preventDefault(); + axios.post(`http://localhost:5000/api/movies`, newMovie) + .then(res=> { + props.setMovies(res.data) + push(`/movies`) + }) + .catch(err=> console.log(err)) + } + + const { title, director, genre, metascore, description } = newMovie; + + return ( +
+
+
+
+

Add New Movie

+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ +
+
+ + +
+
+
+
); +} + +export default AddMovieForm \ No newline at end of file diff --git a/client/src/components/DeleteMovieModal.js b/client/src/components/DeleteMovieModal.js index 87b96bb5..e2e5cc55 100644 --- a/client/src/components/DeleteMovieModal.js +++ b/client/src/components/DeleteMovieModal.js @@ -1,3 +1,4 @@ +import axios from 'axios'; import React from 'react'; const DeleteMovieModal = () => { diff --git a/client/src/components/EditMovieForm.js b/client/src/components/EditMovieForm.js index 9c058388..e2956242 100644 --- a/client/src/components/EditMovieForm.js +++ b/client/src/components/EditMovieForm.js @@ -4,7 +4,9 @@ import { Link } from 'react-router-dom'; import axios from 'axios'; -const EditMovieForm = (props) => { +const EditMovieForm = props => { + + const { id } = useParams(); const { push } = useHistory(); const [movie, setMovie] = useState({ @@ -15,6 +17,13 @@ const EditMovieForm = (props) => { description: "" }); + useEffect(() => { + axios + .get(`http://localhost:5000/api/movies/${id}`) + .then((res) => setMovie(res.data)) + .catch((err) => console.log(err)) + },[]); + const handleChange = (e) => { setMovie({ ...movie, @@ -24,6 +33,12 @@ const EditMovieForm = (props) => { const handleSubmit = (e) => { e.preventDefault(); + axios + .put(`http://localhost:5000/api/movies/${id}`, movie ) + .then((res) => { + setMovie(res.data[id]) + push(`/movies/${id}`)}) + .catch((err) => console.log(err)); } const { title, director, genre, metascore, description } = movie; diff --git a/client/src/components/Movie.js b/client/src/components/Movie.js index fc2b0e05..515d19e3 100644 --- a/client/src/components/Movie.js +++ b/client/src/components/Movie.js @@ -5,6 +5,7 @@ import axios from 'axios'; const Movie = (props) => { const { addToFavorites } = props; + // const { deleteMovie } = props; const [movie, setMovie] = useState(''); @@ -21,6 +22,16 @@ const Movie = (props) => { }) }, [id]); + + const handleDelete = ()=> { + axios.delete(`http://localhost:5000/api/movies/${id}`) + .then(res=> { + props.deleteMovie(id) + push('/movies') + }) + .catch(err=> console.log(err)) + } + return(
@@ -52,7 +63,7 @@ const Movie = (props) => {
Favorite Edit - +
diff --git a/client/src/components/MovieHeader.js b/client/src/components/MovieHeader.js index 48ee5dd6..398ac299 100644 --- a/client/src/components/MovieHeader.js +++ b/client/src/components/MovieHeader.js @@ -8,7 +8,7 @@ const MovieHeader = ()=> {

IMDB Movie Database

- Add New Movie + Add New Movie View All Movies