MVP done

README.md

@@ -17,62 +17,62 @@ In this project, you take a fairly complex application used to search a movie da
 
 ## Instructions
 ### Task 1: Project Set Up
-* [ ] Create a forked copy of this project.
-* [ ] Clone your OWN version of the repository in your terminal
-* [ ] cd into the project base directory `cd web-module-project-redux`
-* [ ] Download project dependencies by running `npm install``
-* [ ] Start up the app using `npm start`
+* [x] Create a forked copy of this project.
+* [x] Clone your OWN version of the repository in your terminal
+* [x] cd into the project base directory `cd web-module-project-redux`
+* [x] Download project dependencies by running `npm install``
+* [x] Start up the app using `npm start`
 
 ### Task 2: Project Requirements
 #### Setup Redux
 > *The DOM and movie reducer has been provided for you, but it's up to to connect it to redux...*
 
-* [ ] In index.js, make use of the createStore method and Provider component to link your App to redux.
+*  [x] In index.js, make use of the createStore method and Provider component to link your App to redux.
 
 #### Connecting the Movie reducer
 > *Within the reducers folder is the movieReducers file. We have the state already setup it up here with some initial data. Let's connect that state to our component.*
 
-* [ ] **In movieReducer.js, make sure that we are setting our state by default to initialState.** Otherwise your state will not have the original structure it needs to function!
+* [x] **In movieReducer.js, make sure that we are setting our state by default to initialState.** Otherwise your state will not have the original structure it needs to function!
 
-* [ ] **The MovieList component prints all of our movies to the screen.** Use the connect method here to map the movies state value into props. Replace our static movie variable with that prop.
+* [x] **The MovieList component prints all of our movies to the screen.** Use the connect method here to map the movies state value into props. Replace our static movie variable with that prop.
 
-* [ ] **The Movie component needs to access our list of movies to function.** Map movies to props here as well.
+* [x] **The Movie component needs to access our list of movies to function.** Map movies to props here as well.
 
-* [ ] **Finally, MovieHeader uses appTitle to display the title text.** Connect this component to appTitle and test appTitle is correctly displayed in your app.
+* [x] **Finally, MovieHeader uses appTitle to display the title text.** Connect this component to appTitle and test appTitle is correctly displayed in your app.
 
 
 #### Connecting the Delete and Add Movie actions
 > *Looks like you got a good handle on mapping stateToProps! Now let's connect some actions.*
 
-* [ ] Note that the deleteMovie reducer case and action creator are already available.
+* [x] Note that the deleteMovie reducer case and action creator are already available.
 
-* [ ] **We can delete movies within the Movie Component.** Connect the deleteMovie action through the connect method.
+* [x] **We can delete movies within the Movie Component.** Connect the deleteMovie action through the connect method.
 
-* [ ] **Find the HTML element that should trigger a deletion in the movie component.** Create and connect the necessary event handlers to call deleteMovie on the current movie's id. After setting the state, redirect the user using the push('/movies') command.
+* [x] **Find the HTML element that should trigger a deletion in the movie component.** Create and connect the necessary event handlers to call deleteMovie on the current movie's id. After setting the state, redirect the user using the push('/movies') command.
 
-* [ ] Add in an ADD_MOVIE case to movieReducer.js.
-* [ ] Make this new case return a version of state with new movie values passed in through the payload.
-* [ ] Create an action creator for addMovie in movieActions.js.
-* [ ] Find the component that triggers the adding of a movie and connect the addMovie action.
-* [ ] Create and connect the necessary event handlers to call addMovie.
-* [ ] Add in push('/movies/) after calling your action to trigger a redirect.
+* [x] Add in an ADD_MOVIE case to movieReducer.js.
+* [x] Make this new case return a version of state with new movie values passed in through the payload.
+* [x] Create an action creator for addMovie in movieActions.js.
+* [x] Find the component that triggers the adding of a movie and connect the addMovie action.
+* [x] Create and connect the necessary event handlers to call addMovie.
+* [x] Add in push('/movies/) after calling your action to trigger a redirect.
 
 #### Build out the favorites reducer
 > *Alright! Now that the movie reducer is complete, you have the chance to build a reducer from scratch to handle favorite movie functionality. We will also work on combining reducers.*
 
-* [ ] Create a reducer file for handling business logic for favorites. Include the following state values in your initialState setup:
+* [x] Create a reducer file for handling business logic for favorites. Include the following state values in your initialState setup:
   -  favorites: an array of movie objects
   -  displayFavorites: a boolean that holds if favorite elements should be displayed in app
 
-* [ ] **Import your new reducer file into the ./reducers/index.js file.** As a start, only add a default case to the switch statement.
+* [x] **Import your new reducer file into the ./reducers/index.js file.** As a start, only add a default case to the switch statement.
 
-* [ ] **In reducers/index.js, use the combineReducers method to connect both movies and favorite movies to redux.**
+* [x] **In reducers/index.js, use the combineReducers method to connect both movies and favorite movies to redux.**
 
-* [ ] **Notice that your movie functions no longer work. Why?** Make changes necessary to get the component connected to the movie reducer working again.
+* [x] **Notice that your movie functions no longer work. Why?** Make changes necessary to get the component connected to the movie reducer working again.
 
-* [ ] Connect the favorites state to the FavoriteMovieList component and test.
+* [x] Connect the favorites state to the FavoriteMovieList component and test.
 
-* [ ] Connect the displayFavorites state to the Movie and MovieHeader component.
+* [x] Connect the displayFavorites state to the Movie and MovieHeader component.
 
 #### Build out the favorites actions
 > *Now is your chance to build our all the rest of the app on your own. You can do this!*

src/App.js

@@ -13,6 +13,7 @@ import FavoriteMovieList from './components/FavoriteMovieList';
 
 const App = props => {
   const displayFavorites = true;
+  console.log("props from App: ", props)
 
   return (
     <div>
@@ -23,7 +24,7 @@ const App = props => {
       <div className="container">
         <MovieHeader/>
         <div className="row ">
-          {displayFavorites && <FavoriteMovieList/>}
+          {props.favorites.displayFavorites && <FavoriteMovieList/>}
 
           <Switch>
             <Route exact path="/movies/add">
@@ -48,4 +49,10 @@ const App = props => {
   );
 };
 
-export default App;
+const mapStateToProps = (state)=>{
+  return{
+    favorites: state.favorites
+  }
+}
+
+export default connect(mapStateToProps)(App);

src/actions/movieActions.js

@@ -1,5 +1,24 @@
 export const DELETE_MOVIE = "DELETE_MOVIE";
+export const ADD_MOVIE = "ADD_MOVIE";
+export const ADD_FAVORITE = "ADD_FAVORITE";
+export const DELETE_FAVORITE = "DELETE_FAVORITE";
+export const TOGGLE_FAVORITE = "TOGGLE_FAVORITE";
 
 export const deleteMovie = (id)=>{
     return({type: DELETE_MOVIE, payload:id});
-}
+}
+
+export const addMovie = (newMovie) =>{
+    return({type: ADD_MOVIE, payload: newMovie})
+}
+
+export const addFavorite = (e) =>{
+    return({type: ADD_FAVORITE, payload: e})
+}
+
+export const deleteFavorite = (e) =>{
+    return({type: DELETE_FAVORITE, payload: e})
+}
+export const toggleFavorite = (e) =>{
+    return({type: TOGGLE_FAVORITE})
+}

src/components/AddMovieForm.js

@@ -12,7 +12,8 @@ const AddMovieForm = (props) => {
         director: "",
         genre: "",
         metascore: 0,
-        description:""
+        description:"",
+        id: Date.now()
     });
 
     const handleChange = (e) => {
@@ -23,6 +24,12 @@ const AddMovieForm = (props) => {
     }
 
     const handleSubmit = (e) => {
+
+    }
+
+    const oneMoreMovie=()=>{
+        props.addMovie(movie)
+        push('/movies/');
     }
 
     const { title, director, genre, metascore, description } = movie;
@@ -58,7 +65,7 @@ const AddMovieForm = (props) => {
 
                     </div>
                     <div className="modal-footer">
-                        <input type="submit" className="btn btn-success" value="Add"/>
+                        <input type="submit" onClick={oneMoreMovie} className="btn btn-success" value="Add"/>
                         <Link to={`/movies`}><input type="button" className="btn btn-default" value="Cancel"/></Link>
                     </div>
                 </form>
@@ -67,4 +74,4 @@ const AddMovieForm = (props) => {
     </div>);
 }
 
-export default AddMovieForm;
+export default connect(null,{addMovie})(AddMovieForm);

src/components/FavoriteMovieList.js

@@ -1,25 +1,34 @@
 import React from 'react';
-
+import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
+import { deleteFavorite } from '../actions/movieActions';
 
 
 const FavoriteMovieList = (props) => {
-    const favorites = [];
-
+    const dltFav = (id) =>{
+        props.deleteFavorite(id);
+    }
+
     return (<div className="col-xs savedContainer">
         <h5>Favorite Movies</h5>
         {
-            favorites.map(movie=>{
+            props.favorites.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><span onClick = {function(){dltFav(movie.id)}} class="material-icons">remove_circle</span></span>
                     </Link> 
                 </div>
             })
         }
     </div>);
 }
 
+const mapStateToProps = (state) =>{
+    return{
+        favorites: state.favorites
+    }
+
+}
 
-export default FavoriteMovieList;
+export default connect(mapStateToProps,{ deleteFavorite })(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, addFavorite } from '../actions/movieActions';
 
 const Movie = (props) => {
     const { id } = useParams();
     const { push } = useHistory();
-
-    const movies = [];
-    const movie = movies.find(movie=>movie.id===Number(id));
+    const movie = props.cinema.movies.find(movie=>movie.id===Number(id));
+
 
+
+    const dltMovie = (id) =>{
+        props.deleteMovie(id);
+        push('/movies')
+    }
+
+    const addCinema = () =>{
+        props.addFavorite(movie)
+    }
+
     return(<div className="modal-page col">
         <div className="modal-dialog">
             <div className="modal-content">
@@ -37,8 +48,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>
+                            <span className="m-2 btn btn-dark" onClick={addCinema}>Favorite</span>
+                            <span className="delete"><input onClick = {function(){dltMovie(movie.id)}} type="button" className="m-2 btn btn-danger" value="Delete"/></span>
                         </section>
                     </div>
                 </div>
@@ -47,4 +58,11 @@ const Movie = (props) => {
     </div>);
 }
 
-export default Movie;
+const mapStateToProps = (state) =>{
+    return{
+        cinema: state.cinema, 
+        favorites: state.favorites
+    }
+}
+
+export default connect(mapStateToProps, { deleteMovie, addFavorite })(Movie);

src/components/MovieHeader.js

@@ -1,22 +1,33 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
+import { connect } from 'react-redux';
+import { toggleFavorite } from '../actions/movieActions';
 
 const MovieHeader = (props) => {
-    const appTitle = "";
-    const displayFavorites = true;
+
+    const disFav = () =>{
+        props.toggleFavorite();
+    }
 
     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>
+            <div className="btn btn-sm btn-primary" onClick={disFav}><span>{ props.favorites.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{
+        appTitle: state.cinema.appTitle,
+        favorites: state.favorites
+    }
+}
+
+export default connect(mapStateToProps, {toggleFavorite})(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">
@@ -21,14 +19,19 @@ const MovieList = (props)=> {
 
                 <tbody>
                     {
-                        movies.map(movie=><MovieListItem key={movie.id} movie={movie}/>)
+                        props.cinema.movies.map(movie=><MovieListItem key={movie.id} movie={movie}/>)
                     }
                 </tbody>
             </table>
 
-            <MovieFooter totalMovies={movies.length}/>
+            <MovieFooter totalMovies={props.cinema.movies.length}/>
         </div>
     );
 }
 
-export default MovieList;
+const mapStateToProps = (state) =>{
+    return{
+        cinema: state.cinema
+    }
+}
+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 combineReducer from './reducers';
 
 import App from './App'
 import { BrowserRouter as Router } from 'react-router-dom';
 import './index.css';
+const store = createStore(combineReducer)
 
 ReactDOM.render(
-  <Router>
-      <App />
-  </Router>,
+  <Provider store={store}>
+    <Router>
+        <App />
+    </Router>
+  </Provider>,
   document.getElementById('root')
 );