From 9202622c8d11ec2bf07aa574faf6d64eed9dfd11 Mon Sep 17 00:00:00 2001 From: Aaron Belmore Date: Thu, 1 Jun 2023 19:25:15 -0400 Subject: [PATCH 1/3] Connecting the Movie reducer step 2 complete --- src/components/MovieList.js | 65 ++++++++++++++++++--------------- src/components/MovieListItem.js | 20 +++++----- src/index.js | 26 +++++++------ src/reducers/movieReducer.js | 32 ++++++++-------- 4 files changed, 78 insertions(+), 65 deletions(-) diff --git a/src/components/MovieList.js b/src/components/MovieList.js index 268c78099..84b54a784 100644 --- a/src/components/MovieList.js +++ b/src/components/MovieList.js @@ -1,34 +1,41 @@ -import React from 'react'; +import React from "react"; -import MovieListItem from './MovieListItem'; -import MovieFooter from './MovieFooter'; +import MovieListItem from "./MovieListItem"; +import MovieFooter from "./MovieFooter"; -const MovieList = (props)=> { - const movies = []; +import { connect } from "react-redux"; - return ( -
- - - - - - - - - - +const MovieList = (props) => { + const movies = props.movies; + console.log(movies); + return ( +
+
TitleDirectorGenreMetascore
+ + + + + + + + + - - { - movies.map(movie=>) - } - -
TitleDirectorGenreMetascore
- - -
- ); -} + + {movies.map((movie) => ( + + ))} + + -export default MovieList; \ No newline at end of file + + + ); +}; + +const mapStateToProps = (state) => { + return { + movies: state.movies, + }; +}; +export default connect(mapStateToProps, {})(MovieList); diff --git a/src/components/MovieListItem.js b/src/components/MovieListItem.js index 11f13730e..b931739d0 100644 --- a/src/components/MovieListItem.js +++ b/src/components/MovieListItem.js @@ -1,20 +1,22 @@ -import React from 'react'; -import { Link } from 'react-router-dom'; +import React from "react"; +import { Link } from "react-router-dom"; -const MovieListItem = (props)=> { - const { id, title, director, genre, metascore} = props.movie; +const MovieListItem = (props) => { + const { id, title, director, genre, metascore } = props.movie; - return( + return ( + {title} {director} {genre} {metascore} - + - ); -} + + ); +}; -export default MovieListItem; \ No newline at end of file +export default MovieListItem; diff --git a/src/index.js b/src/index.js index 227c0531b..be701b1f6 100644 --- a/src/index.js +++ b/src/index.js @@ -1,17 +1,21 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import { createStore } from 'redux'; -import { Provider } from 'react-redux'; +import React from "react"; +import ReactDOM from "react-dom"; +import { createStore } from "redux"; +import { Provider } from "react-redux"; -import reducer from './reducers'; +import reducer from "./reducers"; -import App from './components/App'; -import { BrowserRouter as Router } from 'react-router-dom'; -import './index.css'; +import App from "./components/App"; +import { BrowserRouter as Router } from "react-router-dom"; +import "./index.css"; + +const store = createStore(reducer); ReactDOM.render( - + + - , - document.getElementById('root') + + , + document.getElementById("root") ); diff --git a/src/reducers/movieReducer.js b/src/reducers/movieReducer.js index 16f33bcdd..80869f2e3 100644 --- a/src/reducers/movieReducer.js +++ b/src/reducers/movieReducer.js @@ -1,20 +1,20 @@ -import { ADD_MOVIE, DELETE_MOVIE } from '../actions/movieActions.js'; -import movies from './../data.js'; +import { ADD_MOVIE, DELETE_MOVIE } from "../actions/movieActions.js"; +import movies from "./../data.js"; const initialState = { - movies: movies, - appTitle: "IMDB Movie Database" -} + movies: movies, + appTitle: "IMDB Movie Database", +}; -const reducer = (state, action) => { - switch(action.type) { - case DELETE_MOVIE: - return { - movies: state.movies.filter(item=>(action.payload !== item.id)) - } - default: - return state; - } -} +const reducer = (state = initialState, action) => { + switch (action.type) { + case DELETE_MOVIE: + return { + movies: state.movies.filter((item) => action.payload !== item.id), + }; + default: + return state; + } +}; -export default reducer; \ No newline at end of file +export default reducer; From b2d20a27416f7b029e0780c775f6ae596917e483 Mon Sep 17 00:00:00 2001 From: Aaron Belmore Date: Fri, 2 Jun 2023 02:24:46 -0400 Subject: [PATCH 2/3] Working on favorites reducer --- src/actions/movieActions.js | 11 +- src/components/AddMovieForm.js | 162 ++++++++++++++++++---------- src/components/FavoriteMovieList.js | 54 ++++++---- src/components/Movie.js | 121 +++++++++++++-------- src/components/MovieHeader.js | 48 ++++++--- src/components/MovieList.js | 5 +- src/reducers/favoritesReducer.js | 38 +++++++ src/reducers/index.js | 12 ++- src/reducers/movieReducer.js | 10 ++ 9 files changed, 316 insertions(+), 145 deletions(-) create mode 100644 src/reducers/favoritesReducer.js diff --git a/src/actions/movieActions.js b/src/actions/movieActions.js index 3fb8c9ddb..da8f2c0aa 100644 --- a/src/actions/movieActions.js +++ b/src/actions/movieActions.js @@ -1,5 +1,10 @@ export const DELETE_MOVIE = "DELETE_MOVIE"; +export const ADD_MOVIE = "ADD_MOVIE"; -export const deleteMovie = (id)=>{ - return({type: DELETE_MOVIE, payload:id}); -} \ No newline at end of file +export const deleteMovie = (id) => { + return { type: DELETE_MOVIE, payload: id }; +}; + +export const addMovie = (newMovie) => { + return { type: ADD_MOVIE, payload: newMovie }; +}; diff --git a/src/components/AddMovieForm.js b/src/components/AddMovieForm.js index d8a4d768c..06ba73bf2 100644 --- a/src/components/AddMovieForm.js +++ b/src/components/AddMovieForm.js @@ -1,70 +1,114 @@ -import React, { useState } from 'react'; -import { addMovie } from './../actions/movieActions'; -import { connect } from 'react-redux'; +import React, { useState } from "react"; +import { addMovie } from "./../actions/movieActions"; +import { connect } from "react-redux"; -import { Link, useHistory } from 'react-router-dom'; +import { Link, useHistory } from "react-router-dom"; const AddMovieForm = (props) => { - const { push } = useHistory(); + const { push } = useHistory(); - const [movie, setMovie] = useState({ - title: "", - director: "", - genre: "", - metascore: 0, - description:"" - }); + const [movie, setMovie] = useState({ + title: "", + director: "", + genre: "", + metascore: 0, + description: "", + }); - const handleChange = (e) => { - setMovie({ - ...movie, - [e.target.name]: e.target.value - }); - } + const handleChange = (e) => { + setMovie({ + ...movie, + [e.target.name]: e.target.value, + }); + }; - const handleSubmit = (e) => { - } + const handleSubmit = (e) => { + e.preventDefault; + props.addMovie(movie); + push("/movies"); + }; - const { title, director, genre, metascore, description } = movie; - return(
-
-
-
-
-

Add Movie

-
+ const { title, director, genre, metascore, description } = movie; + return ( +
+
+
+ +
+

Add Movie

+
-
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
- -
-
- - -
- +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+ + + +
+
-
); -} +
+
+ ); +}; -export default AddMovieForm; \ No newline at end of file +export default connect(null, { addMovie })(AddMovieForm); diff --git a/src/components/FavoriteMovieList.js b/src/components/FavoriteMovieList.js index 54f4383fa..5c84086f4 100644 --- a/src/components/FavoriteMovieList.js +++ b/src/components/FavoriteMovieList.js @@ -1,25 +1,41 @@ -import React from 'react'; +import React from "react"; -import { Link } from 'react-router-dom'; +import { Link } from "react-router-dom"; +import { connect } from "react-redux"; const FavoriteMovieList = (props) => { - const favorites = []; - - return (
-
Favorite Movies
- { - favorites.map(movie=>{ - return
- - {movie.title} - remove_circle - -
- }) - } -
); -} + const { favorites } = props; + console.log(favorites); + return ( +
+
Favorite Movies
+ {favorites.map((movie) => { + return ( +
+ + {movie.title} + + remove_circle + + +
+ ); + })} +
+ ); +}; -export default FavoriteMovieList; \ No newline at end of file +const mapStateToProps = (state) => { + console.log(state); + return { + favorites: state.favoritesReducer.favorites, + displayFavorites: state.favoritesReducer.displayFavorites, + }; +}; + +export default connect(mapStateToProps, {})(FavoriteMovieList); diff --git a/src/components/Movie.js b/src/components/Movie.js index 373201e56..f7f821f50 100644 --- a/src/components/Movie.js +++ b/src/components/Movie.js @@ -1,50 +1,83 @@ -import React from 'react'; -import { useParams, useHistory } from 'react-router-dom'; +import React from "react"; +import { useParams, useHistory } from "react-router-dom"; + +import { connect } from "react-redux"; + +import { deleteMovie } from "../actions/movieActions"; const Movie = (props) => { - const { id } = useParams(); - const { push } = useHistory(); - - const movies = []; - const movie = movies.find(movie=>movie.id===Number(id)); - - return(
-
-
-
-

{movie.title} Details

+ const { id } = useParams(); + const { push } = useHistory(); + + const handleClick = () => { + props.deleteMovie(movie.id); + push("/movies"); + }; + + const dispplayFavorites = props.displayFavorites; + + const movie = props.movies.find((movie) => movie.id === Number(id)); + + return ( +
+
+
+
+

{movie.title} Details

+
+
+
+
+
+
-
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -

{movie.description}

-
-
- -
- Favorite - -
-
+
+
+
+ +
+
+ +
+
+ +

+ {movie.description} +

+
+
+ +
+ Favorite + + + +
+
-
); -} - -export default Movie; \ No newline at end of file +
+
+ ); +}; +const mapStateToProps = (state) => { + return { + displayFavorites: state.favoritesReducer.displayFavorites, + movies: state.movieReducer.movies, + }; +}; +export default connect(mapStateToProps, { deleteMovie })(Movie); diff --git a/src/components/MovieHeader.js b/src/components/MovieHeader.js index e3443e5fb..90d05f6a4 100644 --- a/src/components/MovieHeader.js +++ b/src/components/MovieHeader.js @@ -1,22 +1,40 @@ -import React from 'react'; -import { Link } from 'react-router-dom'; +import React from "react"; +import { Link } from "react-router-dom"; + +import { connect } from "react-redux"; const MovieHeader = (props) => { - const appTitle = ""; - const displayFavorites = true; - - return(
-
+ const appTitle = ""; + const { displayFavorites } = props; + + return ( +
+
-

{appTitle}

+

{props.appTitle}

-
{ displayFavorites ? "Hide" : "Show"} Favorites
- View All Movies - Add New Movie +
+ {displayFavorites ? "Hide" : "Show"} Favorites +
+ + View All Movies + + + {" "} + Add New Movie +
-
-
); -} +
+
+ ); +}; + +const mapStateToProps = (state) => { + return { + displayFavorites: state.favoritesReducer.displayFavorites, + appTitle: state.movieReducer.appTitle, + }; +}; -export default MovieHeader; \ No newline at end of file +export default connect(mapStateToProps, {})(MovieHeader); diff --git a/src/components/MovieList.js b/src/components/MovieList.js index 84b54a784..a9afb1830 100644 --- a/src/components/MovieList.js +++ b/src/components/MovieList.js @@ -7,7 +7,7 @@ import { connect } from "react-redux"; const MovieList = (props) => { const movies = props.movies; - console.log(movies); + return (
@@ -34,8 +34,9 @@ const MovieList = (props) => { }; const mapStateToProps = (state) => { + console.log(state.movieReducer); return { - movies: state.movies, + movies: state.movieReducer.movies, }; }; export default connect(mapStateToProps, {})(MovieList); diff --git a/src/reducers/favoritesReducer.js b/src/reducers/favoritesReducer.js new file mode 100644 index 000000000..e3117ea24 --- /dev/null +++ b/src/reducers/favoritesReducer.js @@ -0,0 +1,38 @@ +import { + ADD_FAVORITE, + REMOVE_FAVORITE, + TOGGLE_FAVORITES, +} from "../actions/favoritesActions"; + +const initialState = { + favorites: [], + displayFavorites: false, +}; + +const favoritesReducer = (state = initialState, action) => { + switch (action.type) { + case TOGGLE_FAVORITES: + return { + ...state, + displayFavorites: !state.displayFavorites, + }; + + case ADD_FAVORITE: + return { + ...state, + favorites: [...state.favorites, action.payload], + }; + case REMOVE_FAVORITE: { + return { + ...state, + favorites: state.filter((movie) => { + movie.id !== action.payload; + }), + }; + } + default: + return state; + } +}; + +export default favoritesReducer; diff --git a/src/reducers/index.js b/src/reducers/index.js index 6629609ca..98b4a8130 100644 --- a/src/reducers/index.js +++ b/src/reducers/index.js @@ -1,5 +1,11 @@ -import { combineReducers } from 'redux'; +import { combineReducers } from "redux"; -import movieReducer from './movieReducer'; +import movieReducer from "./movieReducer"; +import favoritesReducer from "./favoritesReducer"; -export default movieReducer; \ No newline at end of file +const combinedReducers = combineReducers({ + movieReducer, + favoritesReducer, +}); + +export default combinedReducers; diff --git a/src/reducers/movieReducer.js b/src/reducers/movieReducer.js index 80869f2e3..73da7f6ed 100644 --- a/src/reducers/movieReducer.js +++ b/src/reducers/movieReducer.js @@ -10,8 +10,18 @@ const reducer = (state = initialState, action) => { switch (action.type) { case DELETE_MOVIE: return { + ...state, movies: state.movies.filter((item) => action.payload !== item.id), }; + case ADD_MOVIE: + const newMovie = { + ...action.payload, + id: Date.now(), + }; + return { + ...state, + movies: [...state.movies, newMovie], + }; default: return state; } From 1134613ed016f516c59c667302f366e1c6d75ace Mon Sep 17 00:00:00 2001 From: Aaron Belmore Date: Fri, 2 Jun 2023 02:45:20 -0400 Subject: [PATCH 3/3] Completed Proj --- src/components/FavoriteMovieList.js | 15 +++++++++++++-- src/components/Movie.js | 17 +++++++++++++---- src/components/MovieHeader.js | 10 ++++++---- src/reducers/favoritesReducer.js | 4 ++-- 4 files changed, 34 insertions(+), 12 deletions(-) diff --git a/src/components/FavoriteMovieList.js b/src/components/FavoriteMovieList.js index 5c84086f4..6ec372ec9 100644 --- a/src/components/FavoriteMovieList.js +++ b/src/components/FavoriteMovieList.js @@ -4,10 +4,16 @@ import { Link } from "react-router-dom"; import { connect } from "react-redux"; +import { removeFavorite } from "../actions/favoritesActions"; + const FavoriteMovieList = (props) => { const { favorites } = props; console.log(favorites); + const handleRemove = (id) => { + props.removeFavorite(id); + }; + return (
Favorite Movies
@@ -20,7 +26,12 @@ const FavoriteMovieList = (props) => { > {movie.title} - remove_circle + handleRemove(movie.id)} + class="material-icons" + > + remove_circle +
@@ -38,4 +49,4 @@ const mapStateToProps = (state) => { }; }; -export default connect(mapStateToProps, {})(FavoriteMovieList); +export default connect(mapStateToProps, { removeFavorite })(FavoriteMovieList); diff --git a/src/components/Movie.js b/src/components/Movie.js index f7f821f50..f445c2782 100644 --- a/src/components/Movie.js +++ b/src/components/Movie.js @@ -4,6 +4,7 @@ import { useParams, useHistory } from "react-router-dom"; import { connect } from "react-redux"; import { deleteMovie } from "../actions/movieActions"; +import { addFavorite } from "../actions/favoritesActions"; const Movie = (props) => { const { id } = useParams(); @@ -14,10 +15,14 @@ const Movie = (props) => { push("/movies"); }; - const dispplayFavorites = props.displayFavorites; + const handleAdd = () => { + props.addFavorite(movie); + }; - const movie = props.movies.find((movie) => movie.id === Number(id)); + const displayFavorites = props.displayFavorites; + const movie = props.movies.find((movie) => movie.id === Number(id)); + console.log(movie); return (
@@ -57,7 +62,11 @@ const Movie = (props) => {
- Favorite + {displayFavorites && ( + + Favorite + + )} { movies: state.movieReducer.movies, }; }; -export default connect(mapStateToProps, { deleteMovie })(Movie); +export default connect(mapStateToProps, { deleteMovie, addFavorite })(Movie); diff --git a/src/components/MovieHeader.js b/src/components/MovieHeader.js index 90d05f6a4..dfcdad95c 100644 --- a/src/components/MovieHeader.js +++ b/src/components/MovieHeader.js @@ -1,11 +1,11 @@ import React from "react"; import { Link } from "react-router-dom"; - +import { toggleFavorites } from "../actions/favoritesActions"; import { connect } from "react-redux"; const MovieHeader = (props) => { const appTitle = ""; - const { displayFavorites } = props; + const { displayFavorites, toggleFavorites } = props; return (
@@ -15,7 +15,9 @@ const MovieHeader = (props) => {
- {displayFavorites ? "Hide" : "Show"} Favorites + + {displayFavorites ? "Hide" : "Show"} Favorites +
View All Movies @@ -37,4 +39,4 @@ const mapStateToProps = (state) => { }; }; -export default connect(mapStateToProps, {})(MovieHeader); +export default connect(mapStateToProps, { toggleFavorites })(MovieHeader); diff --git a/src/reducers/favoritesReducer.js b/src/reducers/favoritesReducer.js index e3117ea24..960cfefc6 100644 --- a/src/reducers/favoritesReducer.js +++ b/src/reducers/favoritesReducer.js @@ -6,7 +6,7 @@ import { const initialState = { favorites: [], - displayFavorites: false, + displayFavorites: true, }; const favoritesReducer = (state = initialState, action) => { @@ -25,7 +25,7 @@ const favoritesReducer = (state = initialState, action) => { case REMOVE_FAVORITE: { return { ...state, - favorites: state.filter((movie) => { + favorites: state.favorites.filter((movie) => { movie.id !== action.payload; }), };