From 0f45ef7b4dbe019f370081f0748b65a94446dde9 Mon Sep 17 00:00:00 2001 From: james starling Date: Wed, 28 Dec 2022 17:02:36 -0500 Subject: [PATCH 1/7] created store and connected it. also in moviereducer state hotifx --- src/index.js | 3 +++ src/reducers/movieReducer.js | 2 +- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/src/index.js b/src/index.js index 227c0531b..cd0077d83 100644 --- a/src/index.js +++ b/src/index.js @@ -9,9 +9,12 @@ 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') ); diff --git a/src/reducers/movieReducer.js b/src/reducers/movieReducer.js index 16f33bcdd..5c061e564 100644 --- a/src/reducers/movieReducer.js +++ b/src/reducers/movieReducer.js @@ -6,7 +6,7 @@ const initialState = { appTitle: "IMDB Movie Database" } -const reducer = (state, action) => { +const reducer = (state = initialState, action) => { switch(action.type) { case DELETE_MOVIE: return { From ea354e4dd8a6b5dbf95a771e1fa897a6ac83c692 Mon Sep 17 00:00:00 2001 From: james starling Date: Wed, 28 Dec 2022 17:28:34 -0500 Subject: [PATCH 2/7] fixed spelling error, seeing movies now --- src/components/MovieList.js | 12 +++++++++--- src/index.js | 12 ++++++------ 2 files changed, 15 insertions(+), 9 deletions(-) diff --git a/src/components/MovieList.js b/src/components/MovieList.js index 268c78099..41ee978a5 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 return (
@@ -31,4 +31,10 @@ const MovieList = (props)=> { ); } -export default MovieList; \ No newline at end of file +const mapstatetoProps =(state)=> { + return({ + movies:state.movies + }) +} + +export default connect(mapstatetoProps)(MovieList); \ No newline at end of file diff --git a/src/index.js b/src/index.js index cd0077d83..a568285f1 100644 --- a/src/index.js +++ b/src/index.js @@ -1,6 +1,6 @@ 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 reducer from './reducers'; @@ -10,11 +10,11 @@ import { BrowserRouter as Router } from 'react-router-dom'; import './index.css'; const store = createStore(reducer) -ReactDOM.render( +ReactDOM.render( + - - - - , + + +, document.getElementById('root') ); From a45ef001c39179fbdc8c98ef771593e5e7276dca Mon Sep 17 00:00:00 2001 From: james starling Date: Wed, 28 Dec 2022 17:34:23 -0500 Subject: [PATCH 3/7] in movies.js connected statetoprops, view now works --- src/components/Movie.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/components/Movie.js b/src/components/Movie.js index 373201e56..c178ff48e 100644 --- a/src/components/Movie.js +++ b/src/components/Movie.js @@ -1,11 +1,12 @@ import React from 'react'; import { useParams, useHistory } from 'react-router-dom'; +import { connect } from 'react-redux'; const Movie = (props) => { const { id } = useParams(); const { push } = useHistory(); - const movies = []; + const { movies }= props; const movie = movies.find(movie=>movie.id===Number(id)); return(
@@ -46,5 +47,10 @@ const Movie = (props) => {
); } +const mapstatetoProps = (state)=> { + return({ + movies:state.movies + }) +} -export default Movie; \ No newline at end of file +export default connect(mapstatetoProps)(Movie); \ No newline at end of file From 32eba5854f61cd19ec187b5b1b3530283f0924f3 Mon Sep 17 00:00:00 2001 From: james starling Date: Wed, 28 Dec 2022 17:37:04 -0500 Subject: [PATCH 4/7] connected the title --- src/components/MovieHeader.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/components/MovieHeader.js b/src/components/MovieHeader.js index e3443e5fb..6fd0e954c 100644 --- a/src/components/MovieHeader.js +++ b/src/components/MovieHeader.js @@ -1,8 +1,8 @@ import React from 'react'; import { Link } from 'react-router-dom'; - +import { connect } from 'react-redux'; const MovieHeader = (props) => { - const appTitle = ""; + const appTitle = "IMDB Movie Database"; const displayFavorites = true; return(
@@ -18,5 +18,7 @@ const MovieHeader = (props) => {
); } - -export default MovieHeader; \ No newline at end of file +const mapstatetoProps = (state) => { + appTitle: state.appTitle +} +export default connect(mapstatetoProps)(MovieHeader); \ No newline at end of file From 87f111b7c2d20ffbfb907626ed7166ce92d8eed1 Mon Sep 17 00:00:00 2001 From: james starling Date: Wed, 28 Dec 2022 17:42:00 -0500 Subject: [PATCH 5/7] added action 'delete' --- src/components/Movie.js | 14 +++++++++----- src/reducers/movieReducer.js | 2 +- 2 files changed, 10 insertions(+), 6 deletions(-) diff --git a/src/components/Movie.js b/src/components/Movie.js index c178ff48e..fe939e7cd 100644 --- a/src/components/Movie.js +++ b/src/components/Movie.js @@ -1,14 +1,18 @@ 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 }= props; + const { movies, deleteMovie }= props; const movie = movies.find(movie=>movie.id===Number(id)); + const handleDelete = event => { + event.preventDefault(); + deleteMovie(movie.id); + push('/movies') + } return(
@@ -39,7 +43,7 @@ const Movie = (props) => {
Favorite - +
@@ -53,4 +57,4 @@ const mapstatetoProps = (state)=> { }) } -export default connect(mapstatetoProps)(Movie); \ No newline at end of file +export default connect(mapstatetoProps, {deleteMovie})(Movie); \ No newline at end of file diff --git a/src/reducers/movieReducer.js b/src/reducers/movieReducer.js index 5c061e564..b1b361d55 100644 --- a/src/reducers/movieReducer.js +++ b/src/reducers/movieReducer.js @@ -9,7 +9,7 @@ const initialState = { const reducer = (state = initialState, action) => { switch(action.type) { case DELETE_MOVIE: - return { + return { ...state, movies: state.movies.filter(item=>(action.payload !== item.id)) } default: From 8e4ca116030dae168b5652f0b7f17c08193eabe6 Mon Sep 17 00:00:00 2001 From: james starling Date: Wed, 28 Dec 2022 17:46:36 -0500 Subject: [PATCH 6/7] added addmovie action and case --- src/actions/movieActions.js | 8 +++++++- src/components/Movie.js | 4 ++++ src/reducers/movieReducer.js | 6 ++++++ 3 files changed, 17 insertions(+), 1 deletion(-) diff --git a/src/actions/movieActions.js b/src/actions/movieActions.js index 3fb8c9ddb..29901c736 100644 --- a/src/actions/movieActions.js +++ b/src/actions/movieActions.js @@ -1,5 +1,11 @@ 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/Movie.js b/src/components/Movie.js index fe939e7cd..8a487ed12 100644 --- a/src/components/Movie.js +++ b/src/components/Movie.js @@ -13,6 +13,10 @@ const Movie = (props) => { deleteMovie(movie.id); push('/movies') } + const handleAdd = event => { + event.preventDefault(); + + } return(
diff --git a/src/reducers/movieReducer.js b/src/reducers/movieReducer.js index b1b361d55..93bcb83b5 100644 --- a/src/reducers/movieReducer.js +++ b/src/reducers/movieReducer.js @@ -12,6 +12,12 @@ const reducer = (state = initialState, action) => { 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 2a8db69c80bfeaa5be57ebce71e97c2adf4dfa7e Mon Sep 17 00:00:00 2001 From: james starling Date: Wed, 28 Dec 2022 19:05:55 -0500 Subject: [PATCH 7/7] mvp met full working movie database app. --- package-lock.json | 16 ++++++++++++ package.json | 1 + src/components/AddMovieForm.js | 8 ++++-- src/components/App.js | 11 ++++++-- src/components/FavoriteMovieList.js | 15 ++++++++--- src/components/Movie.js | 39 +++++++++++++++++------------ src/components/MovieHeader.js | 19 +++++++++----- src/components/MovieList.js | 16 ++++++------ src/index.js | 21 ++++++++-------- src/reducers/favoritesReducer.js | 39 +++++++++++++++++++++++++++++ src/reducers/index.js | 6 +++-- src/reducers/movieReducer.js | 14 +++++------ 12 files changed, 148 insertions(+), 57 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/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 8a487ed12..896b05925 100644 --- a/src/components/Movie.js +++ b/src/components/Movie.js @@ -2,21 +2,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, deleteMovie }= props; + + const movies = props.movies; const movie = movies.find(movie=>movie.id===Number(id)); - - const handleDelete = event => { - event.preventDefault(); - deleteMovie(movie.id); - push('/movies') + + const handleFavorite = (e) => { + e.preventDefault; + props.addFavorite(movie) } - const handleAdd = event => { - event.preventDefault(); - + + const handleDelete = (e) => { + e.preventDefault; + props.deleteMovie(movie.id) + push('/movies') } + return(
@@ -46,8 +51,8 @@ const Movie = (props) => {
- Favorite - + handleFavorite(e)}>Favorite + handleDelete(e)}/>
@@ -55,10 +60,12 @@ const Movie = (props) => {
); } -const mapstatetoProps = (state)=> { - return({ - movies:state.movies - }) +const mapStateToProps = state => { + return { + displayFavorites: state.favorite.displayFavorites, + movies: state.movie.movies + } } -export default connect(mapstatetoProps, {deleteMovie})(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 6fd0e954c..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 = "IMDB Movie Database"; - const displayFavorites = true; + const appTitle = props.title; + const displayFavorites = props.displayFavorites; + return(
@@ -11,14 +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) => { - appTitle: state.appTitle +const mapStateToProps = state => { + return{ + displayFavorites: state.favorite.displayFavorites, + title: state.movie.appTitle + } } -export default connect(mapstatetoProps)(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 41ee978a5..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 { connect } from 'react-redux' import MovieListItem from './MovieListItem'; import MovieFooter from './MovieFooter'; const MovieList = (props)=> { - const { movies } = props + const movies = props.movies; return (
@@ -30,11 +30,11 @@ const MovieList = (props)=> {
); } - -const mapstatetoProps =(state)=> { - return({ - movies:state.movies - }) +const mapStateToProps = state => { + return { + movies: state.movie.movies + } } -export default connect(mapstatetoProps)(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 a568285f1..224bce754 100644 --- a/src/index.js +++ b/src/index.js @@ -1,20 +1,21 @@ import React from 'react'; import ReactDOM from 'react-dom'; -import { legacy_createStore as 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) -ReactDOM.render( - - - - -, +const store = createStore(reducer,composeWithDevTools()) + +ReactDOM.render( + + + + + , document.getElementById('root') -); +); \ No newline at end of file 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 93bcb83b5..3b3f37e32 100644 --- a/src/reducers/movieReducer.js +++ b/src/reducers/movieReducer.js @@ -9,15 +9,15 @@ const initialState = { const reducer = (state = initialState, action) => { switch(action.type) { case DELETE_MOVIE: - return { ...state, + 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 } } + case ADD_MOVIE: + return { + ...state, + movies: [...movies,action.payload] + } default: return state; }