Justin Peisker

src/App.js

@@ -11,6 +11,8 @@ import MovieHeader from './components/MovieHeader';
 import AddMovieForm from './components/AddMovieForm';
 import FavoriteMovieList from './components/FavoriteMovieList';
 
+
+
 const App = props => {
   const displayFavorites = true;
 

src/actions/movieActions.js

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

src/components/Movie.js

@@ -1,13 +1,17 @@
 import React from 'react';
 import { useParams, useHistory } from 'react-router-dom';
+import {deleteMovie} from '../actions/movieActions';
+import { connect } from 'react-redux';
 
 const Movie = (props) => {
     const { id } = useParams();
     const { push } = useHistory();
 
     const movies = [];
     const movie = movies.find(movie=>movie.id===Number(id));
-
+    const handleClick = () => {
+        props.deleteMovie()
+    }
     return(<div className="modal-page col">
         <div className="modal-dialog">
             <div className="modal-content">
@@ -38,7 +42,7 @@ const Movie = (props) => {
 
                         <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= {handleClick}className="delete"><input type="button" className="m-2 btn btn-danger" value="Delete"/></span>
                         </section>
                     </div>
                 </div>
@@ -47,4 +51,10 @@ const Movie = (props) => {
     </div>);
 }
 
-export default Movie;
+const mapStateToProps = (state) => {
+    return{
+        movies: state.movies
+    }
+}
+
+export default connect (mapStateToProps, {deleteMovie}) (Movie);

src/components/MovieHeader.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
+import { connect } from 'react-redux';
 
 const MovieHeader = (props) => {
     const appTitle = "";
@@ -8,7 +9,7 @@ const MovieHeader = (props) => {
     return(<div className="table-title">
         <div className="row">
         <div className="col-sm-6">
-            <h2>{appTitle}</h2>
+            <h2>{props.appTitle}</h2>
         </div>
         <div className="col-sm-6 headerBar">
             <div className="btn btn-sm btn-primary"><span>{ displayFavorites ? "Hide" : "Show"} Favorites</span></div>
@@ -19,4 +20,10 @@ const MovieHeader = (props) => {
     </div>);
 }
 
-export default MovieHeader;
+const mapStateToProps = (state) => {
+    return{
+        appTitle: state.appTitle
+    }
+}
+
+export default connect(mapStateToProps) (MovieHeader);

src/components/MovieList.js

@@ -1,5 +1,5 @@
 import React from 'react';
-
+import { connect } from 'react-redux';
 import MovieListItem from './MovieListItem';
 import MovieFooter from './MovieFooter';
 
@@ -31,4 +31,10 @@ const MovieList = (props)=> {
     );
 }
 
-export default MovieList;
+const mapStateToProps = (state) => {
+    return{
+        movies: state.movies
+    }
+}
+
+export default connect(mapStateToProps)(MovieList);

src/index.js

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

src/reducers/movieReducer.js

@@ -1,17 +1,22 @@
 import { ADD_MOVIE, DELETE_MOVIE } from '../actions/movieActions.js';
 import movies from './../data.js';
 
-const initialState = {
+export const initialState = {
     movies: movies,
     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, {movies: action.payload}]
+            }
         default:
             return state;
     }