diff --git a/src/components/Movie.js b/src/components/Movie.js index 373201e5..e2f21368 100644 --- a/src/components/Movie.js +++ b/src/components/Movie.js @@ -1,5 +1,6 @@ import React from 'react'; import { useParams, useHistory } from 'react-router-dom'; +import {connect} from 'react-redux' const Movie = (props) => { const { id } = useParams(); @@ -47,4 +48,6 @@ const Movie = (props) => { ); } -export default Movie; \ No newline at end of file + + +export default connect(maptoStatetoProps, {})(Movie); \ No newline at end of file diff --git a/src/components/MovieHeader.js b/src/components/MovieHeader.js index e3443e5f..0d978b6d 100644 --- a/src/components/MovieHeader.js +++ b/src/components/MovieHeader.js @@ -1,4 +1,5 @@ import React from 'react'; +import { connect } from 'react-redux'; import { Link } from 'react-router-dom'; const MovieHeader = (props) => { @@ -19,4 +20,10 @@ const MovieHeader = (props) => { ); } -export default MovieHeader; \ No newline at end of file +const mapTitletoProps = state => { + return { + appTitle: state.appTitle + } +} + +export default connect(mapTitletoProps, {})(MovieHeader); \ No newline at end of file diff --git a/src/components/MovieList.js b/src/components/MovieList.js index 268c7809..59db6f58 100644 --- a/src/components/MovieList.js +++ b/src/components/MovieList.js @@ -1,5 +1,5 @@ import React from 'react'; - +import {connect} from 'react-redux' import MovieListItem from './MovieListItem'; import MovieFooter from './MovieFooter'; @@ -21,7 +21,7 @@ const MovieList = (props)=> { { - movies.map(movie=>) + props.movies.map(movie=>) } @@ -31,4 +31,10 @@ const MovieList = (props)=> { ); } -export default MovieList; \ No newline at end of file +export 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 dfc70e99..3f7660bf 100644 --- a/src/index.js +++ b/src/index.js @@ -9,9 +9,13 @@ import App from './App' import { BrowserRouter as Router } from 'react-router-dom'; import './index.css'; +const store = createStore(reducer); + ReactDOM.render( - + + + , document.getElementById('root') -); +); \ No newline at end of file diff --git a/src/reducers/favoriteReducer.js b/src/reducers/favoriteReducer.js new file mode 100644 index 00000000..2839443f --- /dev/null +++ b/src/reducers/favoriteReducer.js @@ -0,0 +1,18 @@ +import movies from "../data"; + +export const initialFavoriteState = { + favorites: movies, + displayFavorites: false, +} + +const favoriteReducer = (state, action) => { + switch(action.type) { + case (FAVORITE_MOVIE): + return({ + ...state, + displayFavorites: !state.displayFavorites + }) + } +} + +export default favoriteReducer; \ No newline at end of file diff --git a/src/reducers/index.js b/src/reducers/index.js index 6629609c..eaa6c5d8 100644 --- a/src/reducers/index.js +++ b/src/reducers/index.js @@ -2,4 +2,7 @@ import { combineReducers } from 'redux'; import movieReducer from './movieReducer'; +import favoriteReducer from './favoriteReducer'; + +rootReducer = combineReducers({movie: movieReducer, favorite: favoriteReducer}) export default movieReducer; \ No newline at end of file diff --git a/src/reducers/movieReducer.js b/src/reducers/movieReducer.js index 16f33bcd..193b17e4 100644 --- a/src/reducers/movieReducer.js +++ b/src/reducers/movieReducer.js @@ -1,7 +1,7 @@ import { ADD_MOVIE, DELETE_MOVIE } from '../actions/movieActions.js'; import movies from './../data.js'; -const initialState = { +export const initialState = { movies: movies, appTitle: "IMDB Movie Database" } @@ -12,6 +12,10 @@ const reducer = (state, action) => { return { movies: state.movies.filter(item=>(action.payload !== item.id)) } + case ADD_MOVIE: + return { + movies: state.movies.filter(item=>(action.payload === item.id)) + } default: return state; }