first draft

src/App.js

@@ -1,7 +1,7 @@
 import React from "react";
 
 import { Route, Switch, Redirect } from "react-router-dom";
-import { connect } from 'react-redux';
+// import { connect } from 'react-redux';
 
 import MovieList from './components/MovieList';
 import Movie from './components/Movie';

src/actions/favoriteActions.js

@@ -0,0 +1,15 @@
+export const ADD_FAVORITE = "ADD_FAVORITE";
+export const DELETE_FAVORITE = "DELETE_FAVORITE";
+export const TOGGLE_FAVORITE = "TOGGLE_FAVORITE";
+
+export const addFavorite = (movie) => {
+    return {type: ADD_FAVORITE, payload: movie}
+}
+
+export const deleteFavorite = (id) => {
+    return {type: DELETE_FAVORITE, payload: id}
+}
+
+export const toggleFavorites = (movie) => {
+    return {type: TOGGLE_FAVORITE}
+}

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 = ({id, title, director, genre, metascore, description})=> {
+    return({type:ADD_MOVIE, payload:{id, title, director, genre, metascore, description}})}

src/components/AddMovieForm.js

@@ -8,6 +8,7 @@ const AddMovieForm = (props) => {
     const { push } = useHistory();
 
     const [movie, setMovie] = useState({
+        id: "",
         title: "",
         director: "",
         genre: "",
@@ -23,6 +24,9 @@ const AddMovieForm = (props) => {
     }
 
     const handleSubmit = (e) => {
+        e.preventDefault();
+        props.addMovie({...movie, id:Date.now()});
+        push("/movies");
     }
 
     const { title, director, genre, metascore, description } = movie;
@@ -67,4 +71,4 @@ const AddMovieForm = (props) => {
     </div>);
 }
 
-export default AddMovieForm;
+export default connect(null, {addMovie})(AddMovieForm);

src/components/FavoriteMovieList.js

@@ -1,19 +1,21 @@
 import React from 'react';
-
 import { Link } from 'react-router-dom';
+import { connect } from 'react-redux';
+import { deleteFavorite } from '../actions/favoriteActions';
 
 
 const FavoriteMovieList = (props) => {
-    const favorites = [];
+    const handleRemove = (id) => {
+        props.deleteFavorite(id);
+    }
 
     return (<div className="col-xs savedContainer">
         <h5>Favorite Movies</h5>
-        {
-            favorites.map(movie=>{
+        {props.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>
+                        <span onClick={()=>{handleRemove(movie.id)}}><span class="material-icons">remove_circle</span></span>
                     </Link> 
                 </div>
             })
@@ -22,4 +24,10 @@ const FavoriteMovieList = (props) => {
 }
 
 
-export default FavoriteMovieList;
+const mapStateToProps = (state)=> {
+    return {
+        favorites: state.favoritesState.favorites,
+    }
+}
+
+export default connect(mapStateToProps, {deleteFavorite})(FavoriteMovieList);

src/components/Movie.js

@@ -1,12 +1,24 @@
 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/favoriteActions';
 
 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 handleDelete = (e) => {
+        props.deleteMovie(movie.id);
+        push("/movies");
+    }
+
+    const handleFavorite = (e) => {
+        props.addFavorite(movie)
+    }
 
     return(<div className="modal-page col">
         <div className="modal-dialog">
@@ -37,8 +49,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>
+                            {props.displayFavorites && <span onClick={handleFavorite}className="m-2 btn btn-dark">Favorite</span>}
+                            <span className="delete"><input type="button" className="m-2 btn btn-danger" value="Delete" onClick={handleDelete}/></span>
                         </section>
                     </div>
                 </div>
@@ -47,4 +59,16 @@ const Movie = (props) => {
     </div>);
 }
 
-export default Movie;
+const mapStateToProps = (state) => {
+    return ({
+        movies: state.moviesState.movies,
+        displayFavorites: state.favoritesState.displayFavorites
+    })
+}
+
+const mapActionToProps = {
+    deleteMovie: deleteMovie,
+    addFavorite: addFavorite
+}
+
+export default connect(mapStateToProps, mapActionToProps)(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/favoriteActions';
 
 const MovieHeader = (props) => {
-    const appTitle = "";
-    const displayFavorites = true;
+    const appTitle = props.header;
+    const displayFavorites = props.displayFavorites;
+
+    const handleClick = () => {
+        props.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 className="btn btn-sm btn-primary" onClick = {handleClick}><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 {
+        header: state.moviesState.appTitle,
+        displayFavorites: state.favoritesState.displayFavorites
+    }
+}
+
+export default connect(mapStateToProps, {toggleFavorites})(MovieHeader);

src/components/MovieList.js

@@ -1,11 +1,9 @@
 import React from 'react';
-
+import { connect } from 'react-redux';
 import MovieListItem from './MovieListItem';
 import MovieFooter from './MovieFooter';
 
 const MovieList = (props)=> {
-    const movies = [];
-
     return (
         <div className="col">
             <table className="table table-striped table-hover">
@@ -19,16 +17,19 @@ const MovieList = (props)=> {
                 </tr>
                 </thead>
 
-                <tbody>
-                    {
-                        movies.map(movie=><MovieListItem key={movie.id} movie={movie}/>)
-                    }
+                <tbody>        
+                {props.movies.map(movie=><MovieListItem key={movie.id} movie={movie}/>)}
                 </tbody>
             </table>
-
-            <MovieFooter totalMovies={movies.length}/>
+            <MovieFooter totalMovies={props.movies.length}/>
         </div>
     );
 }
 
-export default MovieList;
+const mapStateToProps = (state) => {
+    return {
+        movies: state.moviesState.movies,
+    }
+}
+
+export default connect(mapStateToProps,{})(MovieList);

src/index.js

@@ -3,15 +3,18 @@ import ReactDOM from 'react-dom';
 import { createStore } from 'redux';
 import { Provider} from 'react-redux';
 
-import reducer from './reducers';
+// import reducer from './reducers';
 
 import App from './App'
 import { BrowserRouter as Router } from 'react-router-dom';
 import './index.css';
+import combineReducer from './reducers/index';
 
 ReactDOM.render(
-  <Router>
-      <App />
-  </Router>,
+  <Provider store={createStore(combineReducer)}>
+    <Router>
+        <App />
+    </Router>
+  </Provider>,
   document.getElementById('root')
 );

src/reducers/favoritesReducer.js

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

src/reducers/index.js

@@ -1,5 +1,11 @@
 import { combineReducers } from 'redux';
 
 import movieReducer from './movieReducer';
+import favoriteReducer from './favoritesReducer';
 
-export default movieReducer;
+const combineReducer = combineReducers({
+    favoritesState: favoriteReducer,
+    moviesState: movieReducer
+})
+
+export default combineReducer;

src/reducers/movieReducer.js

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