From fe8392bfa830c13ef1c94c639c79f871d2c3d2ad Mon Sep 17 00:00:00 2001 From: Melissa Kemp Date: Tue, 17 Sep 2019 11:59:55 -0600 Subject: [PATCH 1/5] imports and links on App.js and index.js --- client/src/App.js | 21 ++++++++++++++++----- client/src/index.js | 16 +++++++++++----- 2 files changed, 27 insertions(+), 10 deletions(-) diff --git a/client/src/App.js b/client/src/App.js index 740adc7a8a..087e0a5449 100644 --- a/client/src/App.js +++ b/client/src/App.js @@ -1,18 +1,29 @@ -import React, { useState } from 'react'; +import React, { useState } from "react"; -import SavedList from './Movies/SavedList'; +import SavedList from "./Movies/SavedList"; + +import MovieList from "./Movies/MovieList"; + +import Movie from "./Movies/Movie"; + +import { Route } from "react-router-dom"; const App = () => { - const [savedList, setSavedList] = useState( [] ); + const [savedList, setSavedList] = useState([]); const addToSavedList = movie => { - setSavedList( [...savedList, movie] ); + setSavedList([...savedList, movie]); }; return (
-
Replace this Div with your Routes
+ } /> + } + />
); }; diff --git a/client/src/index.js b/client/src/index.js index 9eac967ab4..b5f9a8147d 100644 --- a/client/src/index.js +++ b/client/src/index.js @@ -1,7 +1,13 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; +import React from "react"; +import ReactDOM from "react-dom"; +import { BrowserRouter as Router } from "react-router-dom"; -import './index.css'; -import App from './App'; +import "./index.css"; +import App from "./App"; -ReactDOM.render(, document.getElementById('root')); +ReactDOM.render( + + + , + document.getElementById("root") +); From 14c31b752d4694432010750012f74d60d16fd61b Mon Sep 17 00:00:00 2001 From: Melissa Kemp Date: Tue, 17 Sep 2019 12:30:37 -0600 Subject: [PATCH 2/5] edited movie.js and movieList.js --- client/src/Movies/Movie.js | 39 +++++++++++------------ client/src/Movies/MovieList.js | 57 ++++++++++++++++++++-------------- 2 files changed, 52 insertions(+), 44 deletions(-) diff --git a/client/src/Movies/Movie.js b/client/src/Movies/Movie.js index 25dd470bee..7470139f29 100644 --- a/client/src/Movies/Movie.js +++ b/client/src/Movies/Movie.js @@ -1,25 +1,22 @@ -import React, { useState, useEffect } from 'react'; -import axios from 'axios'; +import React, { useState, useEffect } from "react"; +import axios from "axios"; + +const Movie = props => { + const [movie, setMovie] = useState(); -const Movie = (props) => { - const [movie, setMovie] = useState({}); - useEffect(() => { - const id = 1; - // change ^^^ that line and grab the id from the URL - // You will NEED to add a dependency array to this effect hook - - axios - .get(`http://localhost:5000/api/movies/${id}`) - .then(response => { - setMovie(response.data); - }) - .catch(error => { - console.error(error); - }); - - },[]); - + const id = props.match.params.id; + + axios + .get(`http://localhost:5000/api/movies/${id}`) + .then(response => { + setMovie(response.data); + }) + .catch(error => { + console.error(error); + }); + }, [props.match.params.id]); + // Uncomment this only when you have moved on to the stretch goals // const saveMovie = () => { // const addToSavedList = props.addToSavedList; @@ -52,6 +49,6 @@ const Movie = (props) => {
Save
); -} +}; export default Movie; diff --git a/client/src/Movies/MovieList.js b/client/src/Movies/MovieList.js index ab22a906a1..09755d41d4 100644 --- a/client/src/Movies/MovieList.js +++ b/client/src/Movies/MovieList.js @@ -1,50 +1,61 @@ -import React, { useState, useEffect } from 'react'; -import axios from 'axios'; +import React, { useState, useEffect } from "react"; +import axios from "axios"; +import { Link, Route } from "react-router-dom"; const MovieList = props => { - const [movies, setMovies] = useState([]) + console.log("pops", props); + const [movies, setMovies] = useState([]); useEffect(() => { const getMovies = () => { axios - .get('http://localhost:5000/api/movies') + .get("http://localhost:5000/api/movies") .then(response => { setMovies(response.data); + console.log("Response:", response.data); }) .catch(error => { - console.error('Server Error', error); + console.error("Server Error", error); }); - } - + }; + getMovies(); }, []); - + return (
{movies.map(movie => ( - + ( + + )} + /> ))}
); -} +}; function MovieDetails({ movie }) { const { title, director, metascore, stars } = movie; + console.log("ID", movie.id); return (
-

{title}

-
- Director: {director} -
-
- Metascore: {metascore} -
-

Actors

- - {stars.map(star => ( -
- {star} + +

{title}

+
+ Director: {director}
- ))} +
+ Metascore: {metascore} +
+

Actors

+ + {stars.map(star => ( +
+ {star} +
+ ))} +
); } From 9a6087086550a5df3eda9ec4036ccfbd9ddae9d3 Mon Sep 17 00:00:00 2001 From: Melissa Kemp Date: Tue, 17 Sep 2019 12:35:17 -0600 Subject: [PATCH 3/5] added functionality to home --- client/src/Movies/SavedList.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/client/src/Movies/SavedList.js b/client/src/Movies/SavedList.js index 2c7d484cac..f1a5ce3490 100644 --- a/client/src/Movies/SavedList.js +++ b/client/src/Movies/SavedList.js @@ -1,4 +1,5 @@ -import React from 'react'; +import React from "react"; +import { Link, Route } from "react-router-dom"; const SavedList = props => (
@@ -6,7 +7,9 @@ const SavedList = props => ( {props.list.map(movie => ( {movie.title} ))} -
Home
+ + Home +
); From aabfdc648505e4d50cbbc8fb9617af60d876cdbd Mon Sep 17 00:00:00 2001 From: Melissa Kemp Date: Tue, 17 Sep 2019 13:03:30 -0600 Subject: [PATCH 4/5] changed some css, working on stretch --- client/src/App.js | 7 +++---- client/src/index.css | 5 +++++ 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/client/src/App.js b/client/src/App.js index 087e0a5449..5638a53250 100644 --- a/client/src/App.js +++ b/client/src/App.js @@ -18,11 +18,10 @@ const App = () => { return (
- } /> + } + path={"/movies/:id"} + render={props => } />
); diff --git a/client/src/index.css b/client/src/index.css index 80f0cec934..379727a4ab 100644 --- a/client/src/index.css +++ b/client/src/index.css @@ -5,6 +5,11 @@ body { background-color: #f2f2f2; } +a { + text-decoration: none; + color: darkslategray; +} + .movie-card { background-color: #fff; border: 0; From bfaa410d3590d48f16050ac6eda1f4fbf3c068ab Mon Sep 17 00:00:00 2001 From: Melissa Kemp Date: Tue, 17 Sep 2019 13:07:39 -0600 Subject: [PATCH 5/5] finished stretch --- client/src/Movies/Movie.js | 33 ++++++++++------------------ client/src/Movies/MovieCard.js | 21 ++++++++++++++++-- client/src/Movies/MovieList.js | 39 +++++----------------------------- client/src/Movies/SavedList.js | 14 +++++++----- 4 files changed, 44 insertions(+), 63 deletions(-) diff --git a/client/src/Movies/Movie.js b/client/src/Movies/Movie.js index 7470139f29..6685eef184 100644 --- a/client/src/Movies/Movie.js +++ b/client/src/Movies/Movie.js @@ -1,11 +1,14 @@ import React, { useState, useEffect } from "react"; import axios from "axios"; +import MovieCard from "./MovieCard"; const Movie = props => { const [movie, setMovie] = useState(); useEffect(() => { const id = props.match.params.id; + // change ^^^ that line and grab the id from the URL + // You will NEED to add a dependency array to this effect hook axios .get(`http://localhost:5000/api/movies/${id}`) @@ -17,36 +20,22 @@ const Movie = props => { }); }, [props.match.params.id]); - // Uncomment this only when you have moved on to the stretch goals - // const saveMovie = () => { - // const addToSavedList = props.addToSavedList; - // addToSavedList(movie) - // } + // Uncomment this only when you have moved on to the stretch goals + const saveMovie = () => { + const addToSavedList = props.addToSavedList; + addToSavedList(movie); + }; if (!movie) { return
Loading movie information...
; } - const { title, director, metascore, stars } = movie; return (
-
-

{title}

-
- Director: {director} -
-
- Metascore: {metascore} -
-

Actors

- - {stars.map(star => ( -
- {star} -
- ))} + +
+ Save
-
Save
); }; diff --git a/client/src/Movies/MovieCard.js b/client/src/Movies/MovieCard.js index ce8f4c15f3..81d76b2168 100644 --- a/client/src/Movies/MovieCard.js +++ b/client/src/Movies/MovieCard.js @@ -1,7 +1,24 @@ -import React from 'react'; +import React from "react"; const MovieCard = props => { - return; + return ( +
+

{props.movie.title}

+
+ Director: {props.movie.director} +
+
+ Metascore: {props.movie.metascore} +
+

Actors

+ + {props.movie.stars.map(star => ( +
+ {star} +
+ ))} +
+ ); }; export default MovieCard; diff --git a/client/src/Movies/MovieList.js b/client/src/Movies/MovieList.js index 09755d41d4..9b294578bf 100644 --- a/client/src/Movies/MovieList.js +++ b/client/src/Movies/MovieList.js @@ -1,9 +1,9 @@ import React, { useState, useEffect } from "react"; +import MovieCard from "./MovieCard"; +import { Link } from "react-router-dom"; import axios from "axios"; -import { Link, Route } from "react-router-dom"; const MovieList = props => { - console.log("pops", props); const [movies, setMovies] = useState([]); useEffect(() => { const getMovies = () => { @@ -11,7 +11,6 @@ const MovieList = props => { .get("http://localhost:5000/api/movies") .then(response => { setMovies(response.data); - console.log("Response:", response.data); }) .catch(error => { console.error("Server Error", error); @@ -24,40 +23,12 @@ const MovieList = props => { return (
{movies.map(movie => ( - ( - - )} - /> + + + ))}
); }; -function MovieDetails({ movie }) { - const { title, director, metascore, stars } = movie; - console.log("ID", movie.id); - return ( -
- -

{title}

-
- Director: {director} -
-
- Metascore: {metascore} -
-

Actors

- - {stars.map(star => ( -
- {star} -
- ))} - -
- ); -} - export default MovieList; diff --git a/client/src/Movies/SavedList.js b/client/src/Movies/SavedList.js index f1a5ce3490..89f2a717a9 100644 --- a/client/src/Movies/SavedList.js +++ b/client/src/Movies/SavedList.js @@ -1,15 +1,19 @@ import React from "react"; -import { Link, Route } from "react-router-dom"; +import { NavLink } from "react-router-dom"; const SavedList = props => (

Saved Movies:

{props.list.map(movie => ( - {movie.title} + + + {movie.title} + + ))} - - Home - + +
Home
+
);