Almost Done

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

src/components/AddMovieForm.js

@@ -1,18 +1,20 @@
 import React, { useState } from 'react';
-import { addMovie } from './../actions/movieActions';
+//import { addMovie } from '../actions/movieActions';
 import { connect } from 'react-redux';
 
 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,6 +25,11 @@ const AddMovieForm = (props) => {
     }
 
     const handleSubmit = (e) => {
+        e.preventDefault()
+        addMovie(movie)
+        console.log(movie)
+
+        push('/movies/')
     }
 
     const { title, director, genre, metascore, description } = movie;
@@ -66,5 +73,8 @@ const AddMovieForm = (props) => {
         </div>
     </div>);
 }
+const mapStateToProps = (state) => {
+    return ({})
+}
 
-export default AddMovieForm;
+export default connect(mapStateToProps,{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 {deleteFavorites} from '../actions/favoritesActions'
 const FavoriteMovieList = (props) => {
-    const favorites = [];
+    const {favorites, displayFavorites, deleteFavorites} = props;
+    console.log(favorites)
 
     return (<div className="col-xs savedContainer">
         <h5>Favorite Movies</h5>
@@ -13,13 +14,20 @@ 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 className="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,11 +1,14 @@
 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">
@@ -37,14 +40,26 @@ 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 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>
             </div>
         </div>
     </div>);
 }
+const mapStateToProps = (state) => {
+    return({
+        movies: state.movieReducer.movies,  displayFavorites: state.favoriteReducer.displayFavorites
+    })
+}
 
-export default Movie;
+export default connect(mapStateToProps,{deleteMovie, addFavorites})(Movie);

src/components/MovieList.js

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

src/index.js

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