From 32759ad7aaad8db8dde894f58f27e409ea70ec67 Mon Sep 17 00:00:00 2001 From: Kseniya Platonava <43353550+Kseniyapl@users.noreply.github.com> Date: Wed, 10 Nov 2021 19:45:07 -0500 Subject: [PATCH 1/4] working in editing a movie --- README.md | 22 +++++++++++----------- client/src/App.js | 2 ++ client/src/components/EditMovieForm.js | 24 ++++++++++++++++++++++-- 3 files changed, 35 insertions(+), 13 deletions(-) diff --git a/README.md b/README.md index 9225889f..0f401c94 100644 --- a/README.md +++ b/README.md @@ -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` -* [ ] 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* -* [ ] 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 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. diff --git a/client/src/App.js b/client/src/App.js index 048a1923..55bfd7e1 100644 --- a/client/src/App.js +++ b/client/src/App.js @@ -18,6 +18,7 @@ const App = (props) => { useEffect(()=>{ axios.get('http://localhost:5000/api/movies') .then(res => { + console.log(res) setMovies(res.data); }) .catch(err => { @@ -45,6 +46,7 @@ const App = (props) => { + diff --git a/client/src/components/EditMovieForm.js b/client/src/components/EditMovieForm.js index 9c058388..1b73733d 100644 --- a/client/src/components/EditMovieForm.js +++ b/client/src/components/EditMovieForm.js @@ -5,6 +5,7 @@ import { Link } from 'react-router-dom'; import axios from 'axios'; const EditMovieForm = (props) => { + const { id } = useParams(); const { push } = useHistory(); const [movie, setMovie] = useState({ @@ -21,10 +22,29 @@ const EditMovieForm = (props) => { [e.target.name]: e.target.value }); } + //3. Get the data for the item we are editing. + useEffect(()=> { + axios.get(`http://localhost:5000/movies/${id}`) + .then(resp=> { + setMovie(resp.data); + }) + .catch(err=> { + console.log(err); + }) + }, []); const handleSubmit = (e) => { + console.log("clicked") e.preventDefault(); - } + axios.get(`http://localhost:5000/movies/${id}`, movie) + .then(resp=> { + console.log(resp) + props.setMovie(resp.data); + push(`/movies/${id}`); + }).catch(err=>{ + console.log(err) + })} + const { title, director, genre, metascore, description } = movie; @@ -54,7 +74,7 @@ const EditMovieForm = (props) => {
- +
From d7d36c8678b1dbfb6a0837dd308b16cd5e0e4873 Mon Sep 17 00:00:00 2001 From: Kseniya Platonava <43353550+Kseniyapl@users.noreply.github.com> Date: Wed, 10 Nov 2021 20:58:51 -0500 Subject: [PATCH 2/4] added editing a movie --- README.md | 8 ++++---- client/src/App.js | 1 - client/src/components/EditMovieForm.js | 10 +++++----- 3 files changed, 9 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index 0f401c94..eed094f0 100644 --- a/README.md +++ b/README.md @@ -35,13 +35,13 @@ 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. +* [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...* diff --git a/client/src/App.js b/client/src/App.js index 55bfd7e1..c0ea9012 100644 --- a/client/src/App.js +++ b/client/src/App.js @@ -18,7 +18,6 @@ const App = (props) => { useEffect(()=>{ axios.get('http://localhost:5000/api/movies') .then(res => { - console.log(res) setMovies(res.data); }) .catch(err => { diff --git a/client/src/components/EditMovieForm.js b/client/src/components/EditMovieForm.js index 1b73733d..fe5ebd1f 100644 --- a/client/src/components/EditMovieForm.js +++ b/client/src/components/EditMovieForm.js @@ -24,7 +24,7 @@ const EditMovieForm = (props) => { } //3. Get the data for the item we are editing. useEffect(()=> { - axios.get(`http://localhost:5000/movies/${id}`) + axios.get(`http://localhost:5000/api/movies/${id}`) .then(resp=> { setMovie(resp.data); }) @@ -34,13 +34,13 @@ const EditMovieForm = (props) => { }, []); const handleSubmit = (e) => { - console.log("clicked") e.preventDefault(); - axios.get(`http://localhost:5000/movies/${id}`, movie) + axios.put(`http://localhost:5000/api/movies/${id}`, movie) .then(resp=> { - console.log(resp) - props.setMovie(resp.data); + + setMovie(resp.data); push(`/movies/${id}`); + }).catch(err=>{ console.log(err) })} From f1970def3642315869e9ede05df916738893fee6 Mon Sep 17 00:00:00 2001 From: Kseniya Platonava <43353550+Kseniyapl@users.noreply.github.com> Date: Wed, 10 Nov 2021 22:05:45 -0500 Subject: [PATCH 3/4] added delete movie --- README.md | 10 +++++----- client/src/App.js | 11 +++++++---- client/src/components/EditMovieForm.js | 4 ++-- client/src/components/Movie.js | 14 ++++++++++++-- 4 files changed, 26 insertions(+), 13 deletions(-) diff --git a/README.md b/README.md index eed094f0..3c70dd47 100644 --- a/README.md +++ b/README.md @@ -46,15 +46,15 @@ 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. +* [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 c0ea9012..57619534 100644 --- a/client/src/App.js +++ b/client/src/App.js @@ -1,6 +1,6 @@ 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'; @@ -14,6 +14,7 @@ import axios from 'axios'; const App = (props) => { const [movies, setMovies] = useState([]); const [favoriteMovies, setFavoriteMovies] = useState([]); + const { push } = useHistory(); useEffect(()=>{ axios.get('http://localhost:5000/api/movies') @@ -26,7 +27,9 @@ const App = (props) => { }, []); const deleteMovie = (id)=> { - } + + setMovies(movies.filter(movie => movie.id !== parseInt(id))) + } const addToFavorites = (movie) => { @@ -48,8 +51,8 @@ const App = (props) => { - - + + diff --git a/client/src/components/EditMovieForm.js b/client/src/components/EditMovieForm.js index fe5ebd1f..38402f7b 100644 --- a/client/src/components/EditMovieForm.js +++ b/client/src/components/EditMovieForm.js @@ -38,8 +38,8 @@ const EditMovieForm = (props) => { axios.put(`http://localhost:5000/api/movies/${id}`, movie) .then(resp=> { - setMovie(resp.data); - push(`/movies/${id}`); + setMovie(resp.data); + push(`/movies/${id}`); }).catch(err=>{ console.log(err) diff --git a/client/src/components/Movie.js b/client/src/components/Movie.js index fc2b0e05..33428430 100644 --- a/client/src/components/Movie.js +++ b/client/src/components/Movie.js @@ -4,7 +4,7 @@ import { Link, useParams, useHistory } from 'react-router-dom'; import axios from 'axios'; const Movie = (props) => { - const { addToFavorites } = props; + const { addToFavorites, deleteMovie } = props; const [movie, setMovie] = useState(''); @@ -21,6 +21,16 @@ const Movie = (props) => { }) }, [id]); + const handleDelete = () =>{ + axios.delete(`http://localhost:5000/api/movies/${id}`) + .then(res => { + deleteMovie(id) + push(`/movies`) + }) + .catch(err => { + console.log(err); + }) +} return(
@@ -52,7 +62,7 @@ const Movie = (props) => {
Favorite Edit - +
From 52fd9ab8d77944f37c128a1d6bea0e83f824817e Mon Sep 17 00:00:00 2001 From: Kseniya Platonava <43353550+Kseniyapl@users.noreply.github.com> Date: Wed, 10 Nov 2021 22:34:56 -0500 Subject: [PATCH 4/4] mvp --- README.md | 10 +-- client/src/App.js | 9 ++- client/src/components/AddMovieForm.js | 88 +++++++++++++++++++++++++++ client/src/components/MovieHeader.js | 3 +- 4 files changed, 103 insertions(+), 7 deletions(-) create mode 100644 client/src/components/AddMovieForm.js diff --git a/README.md b/README.md index 3c70dd47..81aef31f 100644 --- a/README.md +++ b/README.md @@ -59,15 +59,15 @@ 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`. +* 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 57619534..5ba15148 100644 --- a/client/src/App.js +++ b/client/src/App.js @@ -6,10 +6,12 @@ import Movie from './components/Movie'; import MovieHeader from './components/MovieHeader'; + import EditMovieForm from './components/EditMovieForm'; import FavoriteMovieList from './components/FavoriteMovieList'; import axios from 'axios'; +import AddMovieForm from "./components/AddMovieForm"; const App = (props) => { const [movies, setMovies] = useState([]); @@ -42,7 +44,7 @@ const App = (props) => {
- +
@@ -62,6 +64,11 @@ const App = (props) => { + + + + +
diff --git a/client/src/components/AddMovieForm.js b/client/src/components/AddMovieForm.js new file mode 100644 index 00000000..a074cd5f --- /dev/null +++ b/client/src/components/AddMovieForm.js @@ -0,0 +1,88 @@ +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 {setMovies} = props; + const [newMovie, setNewMovie] = useState({ + title:"", + director: "", + genre: "", + metascore: 0, + description: "" + }); + + const handleChange = (e) => { + setNewMovie({ + ...newMovie, + [e.target.name]: e.target.value + }); + } + useEffect(() => { + axios.get(`http://localhost:5000/api/movies`) + .then(res => { + setNewMovie(res.data); + }) + .catch(err => { + console.log(err) + }) + }, []) + + + const handleSubmit = (e) => { + e.preventDefault(); + axios.post(`http://localhost:5000/api/movies`, newMovie) + .then(resp=> { + setMovies(resp.data); + push(`/movies`); + + }).catch(err=>{ + console.log(err) + })} + + + const { title, director, genre, metascore, description } = newMovie; + + return ( +
+
+
+
+

Add movie {newMovie.title}

+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ +
+
+ + +
+
+
+
); +} + +export default AddMovieForm; \ No newline at end of file diff --git a/client/src/components/MovieHeader.js b/client/src/components/MovieHeader.js index 48ee5dd6..777683f0 100644 --- a/client/src/components/MovieHeader.js +++ b/client/src/components/MovieHeader.js @@ -1,6 +1,7 @@ import React from 'react'; import { Link } from 'react-router-dom'; + const MovieHeader = ()=> { return(
@@ -8,7 +9,7 @@ const MovieHeader = ()=> {

IMDB Movie Database

- Add New Movie + Add New Movie View All Movies