mvp

package.json

@@ -6,10 +6,10 @@
     "axios": "^0.19.0",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
-    "react-redux": "^7.2.3",
+    "react-redux": "^7.2.6",
     "react-router-dom": "^5.0.1",
     "react-scripts": "^3.1.1",
-    "redux": "^4.0.5"
+    "redux": "^4.1.2"
   },
   "scripts": {
     "start": "react-scripts start",

src/App.js

@@ -12,7 +12,7 @@ import AddMovieForm from './components/AddMovieForm';
 import FavoriteMovieList from './components/FavoriteMovieList';
 
 const App = props => {
-  const displayFavorites = true;
+  const { displayFavorites } = props;
 
   return (
     <div>
@@ -48,4 +48,10 @@ const App = props => {
   );
 };
 
-export default App;
+const mapStateToProps = (state) => {
+  return ({
+    displayFavorites: state.favoriteReducer.displayFavorites
+  })
+}
+
+export default connect(mapStateToProps, {})(App);

src/actions/favoriteActions.js

@@ -0,0 +1,23 @@
+export const TOGGLE_FAVORITES = "TOGGLE_FAVORITES";
+
+export const ADD_FAVORITES = "ADD_FAVORITES";
+
+export const DELETE_FAVORITES = "DELETE_FAVORITES";
+
+export const toggleFavorites = () => {
+    return({
+        type: TOGGLE_FAVORITES
+    })
+}
+
+export const addFavorites = (movie) => {
+    return({
+        type: ADD_FAVORITES, payload: movie
+    })
+}
+
+export const deleteFavorites = (movie) => {
+    return ({
+        type: DELETE_FAVORITES, payload: movie
+    })
+}

src/actions/movieActions.js

@@ -1,5 +1,15 @@
 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) => {
+    console.log(movie)
+
+    return({
+        type: ADD_MOVIE,
+        payload: movie
+    })
 }

src/components/AddMovieForm.js

@@ -6,13 +6,15 @@ import { Link, useHistory } from 'react-router-dom';
 
 const AddMovieForm = (props) => {
     const { push } = useHistory();
+    const { addMovie } = props;
 
     const [movie, setMovie] = useState({
         title: "",
         director: "",
         genre: "",
         metascore: 0,
-        description:""
+        description:"",
+        id: Date.now()
     });
 
     const handleChange = (e) => {
@@ -23,23 +25,27 @@ const AddMovieForm = (props) => {
     }
 
     const handleSubmit = (e) => {
+        e.preventDefault()
+        addMovie(movie)
+
+        push('/movies/')
     }
 
     const { title, director, genre, metascore, description } = movie;
     return(<div className="col">
         <div className="modal-dialog">
             <div className="modal-content">
                 <form onSubmit={handleSubmit}>
-                    <div className="modal-header">						
+                    <div className="modal-header">                        
                         <h4 className="modal-title">Add Movie</h4>
                     </div>
 
-                    <div className="modal-body">					
+                    <div className="modal-body">                    
                         <div className="form-group">
                             <label>Title</label>
                             <input value={title} onChange={handleChange} name="title" type="text" className="form-control"/>
                         </div>
-                        <div className="form-group">
+<div className="form-group">
                             <label>Director</label>
                             <input value={director} onChange={handleChange} name="director" type="text" className="form-control"/>
                         </div>
@@ -50,12 +56,12 @@ const AddMovieForm = (props) => {
                         <div className="form-group">
                             <label>Metascore</label>
                             <input value={metascore} onChange={handleChange} name="metascore" type="number" className="form-control"/>
-                        </div>		
+                        </div>        
                         <div className="form-group">
                             <label>Description</label>
                             <textarea value={description} onChange={handleChange} name="description" className="form-control"></textarea>
                         </div>
-                        			
+                                    
                     </div>
                     <div className="modal-footer">
                         <input type="submit" className="btn btn-success" value="Add"/>
@@ -67,4 +73,8 @@ const AddMovieForm = (props) => {
     </div>);
 }
 
-export default AddMovieForm;
+const mapStateToProps = (state) => {
+    return({})
+}
+
+export default connect(mapStateToProps, {addMovie})(AddMovieForm);

src/components/FavoriteMovieList.js

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

src/components/Movie.js

@@ -1,17 +1,20 @@
 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, addFavorites } = props;
     const movie = movies.find(movie=>movie.id===Number(id));
 
     return(<div className="modal-page col">
         <div className="modal-dialog">
             <div className="modal-content">
-                <div className="modal-header">						
+                <div className="modal-header">                        
                     <h4 className="modal-title">{movie.title} Details</h4>
                 </div>
                 <div className="modal-body">
@@ -35,10 +38,15 @@ const Movie = (props) => {
                                 <p><strong>{movie.description}</strong></p>
                             </div>
                         </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>
+<section>
+                            <span className="m-2 btn btn-dark" onClick = {() => {
+                                addFavorites(movie)
+                            }}>Favorite</span>
+
+                            <span className="delete" onClick = {() => {
+                                deleteMovie(movie.id)
+                                push('/movies')
+                            }}><input type="button" className="m-2 btn btn-danger" value="Delete"/></span>
                         </section>
                     </div>
                 </div>
@@ -47,4 +55,11 @@ const Movie = (props) => {
     </div>);
 }
 
-export default Movie;
+const mapStateToProps = (state) => {
+    return({
+        movies: state.movieReducer.movies,
+        displayFavorites: state.favoriteReducer.displayFavorites
+    })
+}
+
+export default connect(mapStateToProps, {deleteMovie, addFavorites})(Movie);