From 1aa6203035b70f7fe8daf862a633fa214c6d4b69 Mon Sep 17 00:00:00 2001 From: Terri Archer Date: Fri, 16 Dec 2022 13:24:50 -0500 Subject: [PATCH] completed coursework --- package-lock.json | 16 ++++++++++++ package.json | 1 + src/actions/movieActions.js | 5 ++++ src/components/AddMovieForm.js | 8 ++++-- src/components/App.js | 11 ++++++-- src/components/FavoriteMovieList.js | 15 ++++++++--- src/components/Movie.js | 29 ++++++++++++++++++--- src/components/MovieHeader.js | 17 ++++++++++--- src/components/MovieList.js | 12 ++++++--- src/index.js | 14 +++++++---- src/reducers/favoritesReducer.js | 39 +++++++++++++++++++++++++++++ src/reducers/index.js | 6 +++-- src/reducers/movieReducer.js | 8 +++++- 13 files changed, 154 insertions(+), 27 deletions(-) create mode 100644 src/reducers/favoritesReducer.js diff --git a/package-lock.json b/package-lock.json index 5ddc4bd0c..51afc44c5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22,6 +22,7 @@ "react-redux": "^7.2.6", "react-router-dom": "5.2.0", "redux": "^4.2.0", + "redux-devtools-extension": "^2.13.9", "sass": "^1.32.8", "style-loader": "^3.3.1", "styled-components": "5.3.3" @@ -12604,6 +12605,15 @@ "@babel/runtime": "^7.9.2" } }, + "node_modules/redux-devtools-extension": { + "version": "2.13.9", + "resolved": "https://registry.npmjs.org/redux-devtools-extension/-/redux-devtools-extension-2.13.9.tgz", + "integrity": "sha512-cNJ8Q/EtjhQaZ71c8I9+BPySIBVEKssbPpskBfsXqb8HJ002A3KRVHfeRzwRo6mGPqsm7XuHTqNSNeS1Khig0A==", + "deprecated": "Package moved to @redux-devtools/extension.", + "peerDependencies": { + "redux": "^3.1.0 || ^4.0.0" + } + }, "node_modules/regenerate": { "version": "1.4.2", "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz", @@ -24652,6 +24662,12 @@ "@babel/runtime": "^7.9.2" } }, + "redux-devtools-extension": { + "version": "2.13.9", + "resolved": "https://registry.npmjs.org/redux-devtools-extension/-/redux-devtools-extension-2.13.9.tgz", + "integrity": "sha512-cNJ8Q/EtjhQaZ71c8I9+BPySIBVEKssbPpskBfsXqb8HJ002A3KRVHfeRzwRo6mGPqsm7XuHTqNSNeS1Khig0A==", + "requires": {} + }, "regenerate": { "version": "1.4.2", "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz", diff --git a/package.json b/package.json index 8f39e1399..018644a4e 100644 --- a/package.json +++ b/package.json @@ -46,6 +46,7 @@ "react-redux": "^7.2.6", "react-router-dom": "5.2.0", "redux": "^4.2.0", + "redux-devtools-extension": "^2.13.9", "sass": "^1.32.8", "style-loader": "^3.3.1", "styled-components": "5.3.3" diff --git a/src/actions/movieActions.js b/src/actions/movieActions.js index 3fb8c9ddb..d6f961b28 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}); +} + +export const addMovie = (movie) => { + return({type:ADD_MOVIE, payload:movie}) } \ No newline at end of file diff --git a/src/components/AddMovieForm.js b/src/components/AddMovieForm.js index d8a4d768c..a6c1424ba 100644 --- a/src/components/AddMovieForm.js +++ b/src/components/AddMovieForm.js @@ -8,6 +8,7 @@ const AddMovieForm = (props) => { const { push } = useHistory(); const [movie, setMovie] = useState({ + id: Date.now(), title: "", director: "", genre: "", @@ -22,7 +23,9 @@ const AddMovieForm = (props) => { }); } - const handleSubmit = (e) => { + const handleSubmit = () => { + props.addMovie(movie) + push('/movies') } const { title, director, genre, metascore, description } = movie; @@ -67,4 +70,5 @@ const AddMovieForm = (props) => { ); } -export default AddMovieForm; \ No newline at end of file + +export default connect(null,{addMovie})(AddMovieForm); \ No newline at end of file diff --git a/src/components/App.js b/src/components/App.js index d2d276d38..4fe36bb2c 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -12,7 +12,7 @@ import AddMovieForm from './AddMovieForm'; import FavoriteMovieList from './FavoriteMovieList'; const App = props => { - const displayFavorites = true; + const displayFavorites = props.displayFavorites; return (
@@ -48,4 +48,11 @@ const App = props => { ); }; -export default App; \ No newline at end of file +const mapStateToProps = state => { + return{ + displayFavorites: state.favorite.displayFavorites + } +} + + +export default connect(mapStateToProps,{})(App); \ No newline at end of file diff --git a/src/components/FavoriteMovieList.js b/src/components/FavoriteMovieList.js index 54f4383fa..f8e1c1f96 100644 --- a/src/components/FavoriteMovieList.js +++ b/src/components/FavoriteMovieList.js @@ -1,10 +1,11 @@ import React from 'react'; - +import { connect } from 'react-redux'; import { Link } from 'react-router-dom'; +import { removeFavorite } from '../actions/favoritesActions'; const FavoriteMovieList = (props) => { - const favorites = []; + const favorites = props.favorites; return (
Favorite Movies
@@ -13,7 +14,7 @@ const FavoriteMovieList = (props) => { return
{movie.title} - remove_circle + props.removeFavorite(movie.id)}>remove_circle
}) @@ -21,5 +22,11 @@ const FavoriteMovieList = (props) => {
); } +const mapStateToProps = state => { + return { + favorites: state.favorite.favorites + } + +} -export default FavoriteMovieList; \ No newline at end of file +export default connect(mapStateToProps,{removeFavorite})(FavoriteMovieList); \ No newline at end of file diff --git a/src/components/Movie.js b/src/components/Movie.js index 373201e56..896b05925 100644 --- a/src/components/Movie.js +++ b/src/components/Movie.js @@ -1,12 +1,26 @@ import React from 'react'; 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(); const { push } = useHistory(); - const movies = []; + const movies = props.movies; const movie = movies.find(movie=>movie.id===Number(id)); + + const handleFavorite = (e) => { + e.preventDefault; + props.addFavorite(movie) + } + + const handleDelete = (e) => { + e.preventDefault; + props.deleteMovie(movie.id) + push('/movies') + } return(
@@ -37,8 +51,8 @@ const Movie = (props) => {
- Favorite - + handleFavorite(e)}>Favorite + handleDelete(e)}/>
@@ -46,5 +60,12 @@ const Movie = (props) => {
); } +const mapStateToProps = state => { + return { + displayFavorites: state.favorite.displayFavorites, + movies: state.movie.movies + } +} + -export default Movie; \ No newline at end of file +export default connect(mapStateToProps, {deleteMovie, addFavorite})(Movie); \ No newline at end of file diff --git a/src/components/MovieHeader.js b/src/components/MovieHeader.js index e3443e5fb..763af28e9 100644 --- a/src/components/MovieHeader.js +++ b/src/components/MovieHeader.js @@ -1,9 +1,12 @@ import React from 'react'; import { Link } from 'react-router-dom'; +import { connect } from 'react-redux'; +import { toggleFavorites } from '../actions/favoritesActions'; const MovieHeader = (props) => { - const appTitle = ""; - const displayFavorites = true; + const appTitle = props.title; + const displayFavorites = props.displayFavorites; + return(
@@ -11,12 +14,18 @@ const MovieHeader = (props) => {

{appTitle}

-
{ displayFavorites ? "Hide" : "Show"} Favorites
+
props.toggleFavorites()}>{ displayFavorites ? "Hide" : "Show"} Favorites
View All Movies Add New Movie
); } +const mapStateToProps = state => { + return{ + displayFavorites: state.favorite.displayFavorites, + title: state.movie.appTitle + } +} -export default MovieHeader; \ No newline at end of file +export default connect(mapStateToProps, {toggleFavorites})(MovieHeader); \ No newline at end of file diff --git a/src/components/MovieList.js b/src/components/MovieList.js index 268c78099..5aef85796 100644 --- a/src/components/MovieList.js +++ b/src/components/MovieList.js @@ -1,10 +1,10 @@ import React from 'react'; - +import { connect } from 'react-redux' import MovieListItem from './MovieListItem'; import MovieFooter from './MovieFooter'; const MovieList = (props)=> { - const movies = []; + const movies = props.movies; return (
@@ -30,5 +30,11 @@ const MovieList = (props)=> {
); } +const mapStateToProps = state => { + return { + movies: state.movie.movies + } +} + -export default MovieList; \ No newline at end of file +export default connect(mapStateToProps, {})(MovieList); \ No newline at end of file diff --git a/src/index.js b/src/index.js index 227c0531b..71ef77dd1 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 { legacy_createStore as createStore } from 'redux'; import { Provider } from 'react-redux'; - +import {composeWithDevTools} from 'redux-devtools-extension' import reducer from './reducers'; import App from './components/App'; import { BrowserRouter as Router } from 'react-router-dom'; import './index.css'; +const store = createStore(reducer,composeWithDevTools()) + ReactDOM.render( - - - , + + + + + , document.getElementById('root') ); diff --git a/src/reducers/favoritesReducer.js b/src/reducers/favoritesReducer.js new file mode 100644 index 000000000..dad1f64b7 --- /dev/null +++ b/src/reducers/favoritesReducer.js @@ -0,0 +1,39 @@ +import { TOGGLE_FAVORITES, ADD_FAVORITE, REMOVE_FAVORITE } from "../actions/favoritesActions"; + +const initialState = { + favorites: [], + displayFavorites: false +} + +const reducer = (state = initialState, action) => { + switch(action.type) { + case TOGGLE_FAVORITES: + return { + ...state, + displayFavorites: !state.displayFavorites + } + case ADD_FAVORITE: + for(let i = 0; i(action.payload !== item.id)) + } + default: + return state; + } + +} + + +export default reducer \ No newline at end of file diff --git a/src/reducers/index.js b/src/reducers/index.js index 6629609ca..c1ea2bc6f 100644 --- a/src/reducers/index.js +++ b/src/reducers/index.js @@ -1,5 +1,7 @@ import { combineReducers } from 'redux'; - import movieReducer from './movieReducer'; +import favoritesRducer from './favoritesReducer' + +const rootReducers = combineReducers({movie: movieReducer, favorite: favoritesRducer}) -export default movieReducer; \ No newline at end of file +export default rootReducers; \ No newline at end of file diff --git a/src/reducers/movieReducer.js b/src/reducers/movieReducer.js index 16f33bcdd..3b3f37e32 100644 --- a/src/reducers/movieReducer.js +++ b/src/reducers/movieReducer.js @@ -6,12 +6,18 @@ const initialState = { appTitle: "IMDB Movie Database" } -const reducer = (state, action) => { +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: + return { + ...state, + movies: [...movies,action.payload] + } default: return state; }