completed project

src/actions/favoritesActions.js

@@ -1,15 +1,15 @@
 export const TOGGLE_FAVORITES = "TOGGLE_FAVORITES";
-export const ADD_FAVORITE = "ADD_FAVORITE";
-export const REMOVE_FAVORITE = "REMOVE_FAVORITE";
+export const ADD_FAVORITES = "ADD_FAVORITE";
+export const REMOVE_FAVORITES = "REMOVE_FAVORITE";
 
 export const toggleFavorites = ()=> {
     return({type: TOGGLE_FAVORITES});
 }
 
-export const addFavorite = (movie)=> {
-    return({type: ADD_FAVORITE, payload:movie});
+export const addFavorites = (movie)=> {
+    return({type: ADD_FAVORITES, payload:movie});
 }
 
-export const removeFavorite = (id)=> {
-    return({type: REMOVE_FAVORITE, payload:id});
+export const removeFavorites = (id)=> {
+    return({type: REMOVE_FAVORITES, payload:id});
 }

src/actions/movieActions.js

@@ -1,5 +1,9 @@
 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});
 }

src/components/AddMovieForm.js

@@ -23,6 +23,9 @@ const AddMovieForm = (props) => {
     }
 
     const handleSubmit = (e) => {
+        e.preventDefault();
+        props.addMovie(movie);
+        push('/movies');
     }
 
     const { title, director, genre, metascore, description } = movie;
@@ -67,4 +70,5 @@ const AddMovieForm = (props) => {
     </div>);
 }
 
-export default AddMovieForm;
+
+export default connect(null,{addMovie})(AddMovieForm);

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;
 
   return (
     <div>
@@ -47,5 +47,10 @@ const App = props => {
     </div>
   );
 };
+const mapStateToProps = (state) => {
+  return{
+  displayFavorites: state.favoriteReducer.displayFavorites
+  }
+}
 
-export default App;
+export default connect(mapStateToProps)(App);

src/components/FavoriteMovieList.js

@@ -1,25 +1,34 @@
 import React from 'react';
-
+import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
-
+import { removeFavorites } from '../actions/favoritesActions';
 
 const FavoriteMovieList = (props) => {
-    const favorites = [];
-
+    const { favorites, removeFavorites } = props;
+
+    const handleClick = (id) => {
+        removeFavorites(id);
+    }
+
     return (<div className="col-xs savedContainer">
         <h5>Favorite Movies</h5>
         {
-            favorites.map(movie=>{
+            favorites.map(movie => {
                 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>
-                    </Link> 
+                        <span><span onClick={() => { handleClick(movie.id) }} class="material-icons">remove_circle</span></span>
+                    </Link>
                 </div>
             })
         }
     </div>);
 }
+const mapStateToProps = (state) => {
+    return {
+        favorites: state.favoriteReducer.favorites
+    }
+}
 
 
-export default FavoriteMovieList;
+export default connect(mapStateToProps, { removeFavorites })(FavoriteMovieList);

src/components/Movie.js

@@ -1,13 +1,24 @@
 import React from 'react';
 import { useParams, useHistory } from 'react-router-dom';
+import { connect } from 'react-redux';
+import { deleteMovie } from '../actions/movieActions';
+import { addFavorites } from '../actions/favoritesActions';
 
 const Movie = (props) => {
     const { id } = useParams();
     const { push } = useHistory();
 
-    const movies = [];
+    const {movies,deleteMovie, displayFavorites, addFavorites} = props;
     const movie = movies.find(movie=>movie.id===Number(id));
 
+    const handleDelete = () => {
+        deleteMovie(movie.id);
+        push('/movies');
+    }
+    const handleFavorite = () => {
+        addFavorites(movie);
+    }
+
     return(<div className="modal-page col">
         <div className="modal-dialog">
             <div className="modal-content">
@@ -37,14 +48,19 @@ 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>
+                            <span onClick={handleFavorite} className="m-2 btn btn-dark">Favorite</span>
+                            <span className="delete" onClick={handleDelete}><input type="button" className="m-2 btn btn-danger" value="Delete"/></span>
                         </section>
                     </div>
                 </div>
             </div>
         </div>
     </div>);
 }
-
-export default Movie;
+const mapStateToProps = (state) => {
+    return({
+        displayFavorites: state.favoriteReducer.displayFavorites,
+        movies:state.movieReducer.movies
+    })
+}
+export default connect(mapStateToProps,{deleteMovie, addFavorites})(Movie);

src/components/MovieHeader.js

@@ -1,22 +1,31 @@
 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;
-
-    return(<div className="table-title">
+    const { displayFavorites, appTitle, toggleFavorites } = props;
+    const handleToggleFavorites = () => {
+        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>
-            <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 className="col-sm-6">
+                <h2>{appTitle}</h2>
+            </div>
+            <div className="col-sm-6 headerBar">
+                <div onClick={handleToggleFavorites} 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>);
 }
+const mapStateToProps = (state) => {
+    return ({
+        displayFavorites: state.favoriteReducer.displayFavorites,
+        appTitle: state.movieReducer.appTitle
+    })
+}
 
-export default MovieHeader;
+export default connect(mapStateToProps, { toggleFavorites })(MovieHeader);

src/components/MovieList.js

@@ -1,34 +1,39 @@
 import React from 'react';
-
+import { connect } from 'react-redux';
 import MovieListItem from './MovieListItem';
 import MovieFooter from './MovieFooter';
 
-const MovieList = (props)=> {
-    const movies = [];
+const MovieList = (props) => {
+    const { movies } = props;
 
     return (
         <div className="col">
             <table className="table table-striped table-hover">
                 <thead>
-                <tr>
-                    <th>Title</th>
-                    <th>Director</th>
-                    <th>Genre</th>
-                    <th>Metascore</th>
-                    <th></th>
-                </tr>
+                    <tr>
+                        <th>Title</th>
+                        <th>Director</th>
+                        <th>Genre</th>
+                        <th>Metascore</th>
+                        <th></th>
+                    </tr>
                 </thead>
 
                 <tbody>
                     {
-                        movies.map(movie=><MovieListItem key={movie.id} movie={movie}/>)
+                        movies.map(movie => <MovieListItem key={movie.id} movie={movie} />)
                     }
                 </tbody>
             </table>
-            
-            <MovieFooter totalMovies={movies.length}/>
+
+            <MovieFooter totalMovies={movies.length} />
         </div>
     );
 }
+const mapStateToProps = (state) => {
+    return ({
+        movies:state.movieReducer.movies
+    });
+}
 
-export default MovieList;
+export default connect(mapStateToProps)(MovieList);

src/index.js

@@ -1,17 +1,19 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { createStore } from 'redux';
+import {createStore} from 'redux';
 import { Provider } from 'react-redux';
 
 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(
-  <Router>
+  <Provider store={store}>
+    <Router>
       <App />
-  </Router>,
+    </Router>
+  </Provider>,
   document.getElementById('root')
 );

src/reducers/FavoritesReducer.js

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

src/reducers/index.js

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

src/reducers/movieReducer.js

@@ -1,16 +1,27 @@
 import { ADD_MOVIE, DELETE_MOVIE } from '../actions/movieActions.js';
 import movies from './../data.js';
+import { connect } from 'react-redux';
 
 const initialState = {
     movies: movies,
     appTitle: "IMDB Movie Database"
 }
 
-const reducer = (state, action) => {
-    switch(action.type) {
+const reducer = (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:
+            const newMovie = {
+                ...action.payload,
+                id: Date.now()
+            }
+            return {
+                ...state,
+                movies: [...state.movies, newMovie]
             }
         default:
             return state;