first commit

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,8 @@ import AddMovieForm from './components/AddMovieForm';
 import FavoriteMovieList from './components/FavoriteMovieList';
 
 const App = props => {
-  const displayFavorites = true;
+  const displayFavorites = props;
+  // console.log("props from App: ", props)
 
   return (
     <div>
@@ -48,4 +49,10 @@ const App = props => {
   );
 };
 
+// const mapStateToProps = (state)=>{
+//   return{
+//     displayFavorites: state.favoriteReducer.displayFavorites
+//   }
+// }
+
 export default 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/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')
-);
+);

src/reducers/favoriteReducer.js

@@ -0,0 +1,31 @@
+import { ADD_FAVORITE, DELETE_FAVORITE, TOGGLE_FAVORITE } from '../actions/movieActions.js';
+
+const initialState = {
+    favorites: [],
+    displayFavorites: true
+}
+
+
+const reducer = (state = initialState, action) => {
+    switch(action.type) {
+        case DELETE_FAVORITE:
+            return {
+                ...state,
+                favorites: state.favorites.filter(item=>(action.payload !== item.id))
+            }
+        case ADD_FAVORITE:
+            return{
+                ...state, 
+                favorites: [...state.favorites, action.payload]
+            }
+        case TOGGLE_FAVORITE:
+            return{
+                ...state, 
+                displayFavorites: !state.displayFavorites
+            }
+        default:
+            return state;
+    }
+}
+
+export default reducer;

src/reducers/index.js

@@ -1,5 +1,9 @@
 import { combineReducers } from 'redux';
 
 import movieReducer from './movieReducer';
+import favoriteReducer from './favoriteReducer'
 
-export default movieReducer;
+export default combineReducers({
+    cinema: movieReducer,
+    favorites: favoriteReducer
+});

src/reducers/movieReducer.js

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