Finished the proj

src/actions/movieActions.js

@@ -1,5 +1,12 @@
 export const DELETE_MOVIE = "DELETE_MOVIE";
+export const ADD_MOVIE = "ADD_MOVIE";
 
 export const deleteMovie = (id)=>{
-    return({type: DELETE_MOVIE, payload:id});
+    return({type: DELETE_MOVIE, payload: id});
+}
+
+export const addMovie = (newMovie) => {
+    return {
+        type: ADD_MOVIE, payload: newMovie
+    }
 }

src/components/AddMovieForm.js

@@ -58,7 +58,7 @@ const AddMovieForm = (props) => {
 
                     </div>
                     <div className="modal-footer">
-                        <input type="submit" className="btn btn-success" value="Add"/>
+                        <input onClick={(e) => e.preventDefault()/props.addMovie(movie)/push("/movies")} type="submit" className="btn btn-success" value="Add"/>
                         <Link to={`/movies`}><input type="button" className="btn btn-default" value="Cancel"/></Link>
                     </div>
                 </form>
@@ -67,4 +67,4 @@ const AddMovieForm = (props) => {
     </div>);
 }
 
-export default AddMovieForm;
+export default connect(null, {addMovie})(AddMovieForm);

src/components/FavoriteMovieList.js

@@ -1,10 +1,11 @@
 import React from 'react';
 
 import { Link } from 'react-router-dom';
-
+import { connect } from "react-redux";
+import { removeFavorite } from "../actions/favoritesActions"
 
 const FavoriteMovieList = (props) => {
-    const favorites = [];
+    const {favorites, removeFavorite} = props;
 
     return (<div className="col-xs savedContainer">
         <h5>Favorite Movies</h5>
@@ -13,13 +14,17 @@ const FavoriteMovieList = (props) => {
                 return <div key={movie.id}>
                     <Link className="btn btn-light savedButton" to={`/movies/${movie.id}`}>
                         {movie.title}
-                        <span><span class="material-icons">remove_circle</span></span>
+                        <span><span onClick={() => removeFavorite(movie.id)} class="material-icons">remove_circle</span></span>
                     </Link> 
                 </div>
             })
         }
     </div>);
 }
 
-
-export default FavoriteMovieList;
+const mapStateToProps = state => {
+    return {
+        favorites: state.favoriteReducer.favorites
+    }
+}
+export default connect(mapStateToProps, {removeFavorite})(FavoriteMovieList);

src/components/Movie.js

@@ -1,13 +1,16 @@
 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, deleteMovie, displayFavorites, addFavorite } = props;
     const movie = movies.find(movie=>movie.id===Number(id));
-    
+
     return(<div className="modal-page col">
         <div className="modal-dialog">
             <div className="modal-content">
@@ -37,8 +40,8 @@ const Movie = (props) => {
                         </section>
 
                         <section>
-                            <span className="m-2 btn btn-dark">Favorite</span>
-                            <span className="delete"><input type="button" className="m-2 btn btn-danger" value="Delete"/></span>
+                            {displayFavorites && <span onClick={() => addFavorite(movie)} className="m-2 btn btn-dark">Favorite</span>}
+                            <span className="delete"><input onClick={() => deleteMovie(movie.id)/push("/movies")} type="button" className="m-2 btn btn-danger" value="Delete"/></span>
                         </section>
                     </div>
                 </div>
@@ -47,4 +50,11 @@ const Movie = (props) => {
     </div>);
 }
 
-export default Movie;
+const mapStateToProps = state => {
+    return {
+        displayFavorites: state.favoriteReducer.displayFavorites,
+        movies: state.movieReducer.movies
+    }
+}
+
+export default connect(mapStateToProps, {deleteMovie, addFavorite})(Movie);

src/components/MovieHeader.js

@@ -1,22 +1,35 @@
 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.appTitle;
+    const {displayFavorites, toggleFavorites} = props;
 
+    const handleClick = () => {
+        toggleFavorites();
+    }
+
     return(<div className="table-title">
         <div className="row">
         <div className="col-sm-6">
             <h2>{appTitle}</h2>
         </div>
         <div className="col-sm-6 headerBar">
-            <div className="btn btn-sm btn-primary"><span>{ displayFavorites ? "Hide" : "Show"} Favorites</span></div>
+            <div onClick={handleClick} className="btn btn-sm btn-primary"><span>{ displayFavorites ? "Hide" : "Show"} Favorites</span></div>
             <Link to="/movies" className="btn btn-sm btn-primary">View All Movies</Link>
             <Link to="/movies/add" className="btn btn-sm btn-success"><i className="material-icons">&#xE147;</i> <span>Add New Movie</span></Link>
         </div>
         </div>
     </div>);
 }
 
-export default MovieHeader;
+const mapStateToProps = state => {
+    return {
+        displayFavorites: state.favoriteReducer.displayFavorites,
+        appTitle: state.movieReducer.appTitle
+    }
+}
+
+export default connect(mapStateToProps, {toggleFavorites})(MovieHeader);

src/components/MovieList.js

@@ -2,9 +2,10 @@ import React from 'react';
 
 import MovieListItem from './MovieListItem';
 import MovieFooter from './MovieFooter';
+import { connect } from "react-redux"
 
 const MovieList = (props)=> {
-    const movies = [];
+    const movies = props.movies;
 
     return (
         <div className="col">
@@ -31,4 +32,11 @@ const MovieList = (props)=> {
     );
 }
 
-export default MovieList;
+const mapStateToProps = state => {
+    return {
+        movies: state.movieReducer.movies,
+        appTitle: state.movieReducer.appTitle
+    }
+}
+
+export default connect(mapStateToProps)(MovieList);

src/index.js

@@ -9,9 +9,13 @@ import App from './components/App';
 import { BrowserRouter as Router } from 'react-router-dom';
 import './index.css';
 
+const store = createStore(reducer)
+
 ReactDOM.render(
-  <Router>
+  <Provider store={store}>
+    <Router>
       <App />
-  </Router>,
+    </Router>
+  </Provider>,
   document.getElementById('root')
 );

src/reducers/favoriteReducer.js

@@ -0,0 +1,31 @@
+import { TOGGLE_FAVORITES, ADD_FAVORITE, REMOVE_FAVORITE } from "../actions/favoritesActions";
+
+const initialState = {
+    favorites: [],
+    displayFavorites: true
+}
+
+const favoriteReducer = (state = initialState, action) => {
+    switch(action.type){
+        case ADD_FAVORITE:
+            return {
+                ...state,
+                favorites: [...state.favorites, action.payload]
+            }
+        case REMOVE_FAVORITE:
+            return {
+                ...state,
+                favorites: state.favorites.filter(item => item.id !== action.payload)
+            }
+        case TOGGLE_FAVORITES:
+            return {
+                ...state,
+                displayFavorites: !state.displayFavorites
+            }
+        default:
+            return(state)
+    }
+
+}
+
+export default favoriteReducer;

src/reducers/index.js

@@ -1,5 +1,10 @@
 import { combineReducers } from 'redux';
 
 import movieReducer from './movieReducer';
+import favoriteReducer from "./favoriteReducer"
 
-export default movieReducer;
+const rootReducer = combineReducers({
+    movieReducer, favoriteReducer
+})
+
+export default rootReducer;

src/reducers/movieReducer.js

@@ -6,15 +6,25 @@ const initialState = {
     appTitle: "IMDB Movie Database"
 }
 
-const reducer = (state, action) => {
-    switch(action.type) {
+const movieReducer = (state = initialState, action) => {
+    switch (action.type) {
         case DELETE_MOVIE:
             return {
-                movies: state.movies.filter(item=>(action.payload !== item.id))
+                ...state,
+                movies: state.movies.filter(item => (action.payload !== item.id))
+            }
+        case ADD_MOVIE:
+            return {
+                movies: [...state.movies, 
+                    {
+                        ...action.payload,
+                        id: state.movies.length
+                    }
+                ]
             }
         default:
             return state;
     }
 }
 
-export default reducer;
+export default movieReducer;