Movie search is working. Can't figure out the problem adding to my list.

package.json

@@ -10,14 +10,14 @@
     "react-scripts": "^0.9.5"
   },
   "dependencies": {
-    "foreman": "^2.0.0",
+    "foreman": "^3.0.1",
     "json-server": "^0.9.6",
     "prop-types": "^15.5.8",
     "react": "^15.5.4",
     "react-dom": "^15.5.4",
     "react-redux": "^5.0.4",
     "redux": "^3.6.0",
-    "redux-thunk": "^2.2.0"
+    "redux-thunk": "^2.3.0"
   },
   "scripts": {
     "start": "nf start",

src/App.js

@@ -1,41 +1,29 @@
 import React, {Component} from "react";
-import PropTypes from "prop-types";
+// import PropTypes from "prop-types";
 import "./App.css";
 import Logo from "./Logo.js";
 import TitleList from "./components/TitleList";
 import Hero from "./components/Hero";
-import SearchBox from "./components/SearchBox";
+import SearchBoxContainer from "./containers/SearchBoxContainer";
+import Navigation from "./components/Navigation";
+import UserProfile from "./components/UserProfile"
 
 class App extends Component {
+  componentDidMount(){
+    this.props.loadMyMovieList();
+    // console.log('results', this.props.myMovieList)
+  }
+
   render() {
     return (
       <div>
         <header className="Header">
           <Logo />
-          {/*  <Navigation>   */}
-          <div id="navigation" className="Navigation">
-            <nav>
-              <ul>
-                <li>Browse</li>
-                <li>My list</li>
-                <li>Top picks</li>
-                <li>Recent</li>
-              </ul>
-            </nav>
-          </div>
-          {/*  </Navigation>   */}
-          <SearchBox />
-          {/*  <UserProfile>   */}
-          <div className="UserProfile">
-            <div className="User">
-              <div className="name">Jack Oliver</div>
-              <div className="image">
-                <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/profile/profile-512_1.jpg" alt="profile" />
-              </div>
-            </div>
-          </div>
-          {/*  </UserProfile>   */}
+          <Navigation />  
+          <SearchBoxContainer />
+          <UserProfile />  
         </header>
+
         <Hero />
         <TitleList 
           title="Search Results" 

src/actions/index.js

@@ -0,0 +1,64 @@
+export const myMovieListLoaded = (movies) => {
+    return {
+    type: 'MY_MOVIE_LIST_LOADED',
+    value: movies
+    };
+}
+
+export const loadMyMovieList = () => dispatch => {
+        fetch("/movies")
+        .then((res) => {
+            return res.json()
+        })
+        .then((movies) => {
+            dispatch(myMovieListLoaded(movies))
+        });
+    }
+
+
+export const searchLoaded = (movies) => {
+    return {
+        type: 'SEARCH_RESULTS_LOADED',
+        value: movies.results
+    };
+}
+
+export const loadSearch = (searchTerm) => {
+    return (dispatch) => {
+        fetch(`https://api.themoviedb.org/3/search/multi?query=${searchTerm}&api_key=2c21f9c6b3a11ec9052a26d421ca1f7b`)
+        .then((res) => {
+            return res.json()
+        })
+        .then((movies) => {
+            dispatch(searchLoaded(movies))
+        });
+    }   
+}
+
+export const saveMyMovie = (movie) => {
+    return (dispatch) => {
+        fetch("/movies", {
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            method: "POST",
+            body: JSON.stringify(movie)
+        })
+        .then((res) => {
+            console.log('RES:', res);
+            dispatch(loadMyMovieList(res))
+        })
+    }
+}
+
+export const removeMyMovie = (id) => dispatch => {
+        fetch(`/movies/${id}`, {
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            method: "DELETE"
+        })
+        .then((res) => {
+            dispatch(loadMyMovieList(res))
+        })   
+}

src/components/Item.js

@@ -1,5 +1,5 @@
 import React from "react";
-import ListToggle from "./ListToggle";
+import ListToggleContainer from "../containers/ListToggleContainer";
 
 function Item(props) {
 
@@ -17,7 +17,7 @@ function Item(props) {
         <div className="title">{name}</div>
         <div className="rating">{props.movie.vote_average} / 10</div>
         <div className="plot">{props.movie.overview}</div>
-        <ListToggle movie={props.movie}/>
+        <ListToggleContainer movie={props.movie}/>
       </div>
     </div>
   );

src/components/Navigation.js

@@ -0,0 +1,18 @@
+import React from 'react';
+
+const Navigation = () => {
+    return (
+        <div id="navigation" className="Navigation">
+        <nav>
+          <ul>
+            <li>Browse</li>
+            <li>My list</li>
+            <li>Top picks</li>
+            <li>Recent</li>
+          </ul>
+        </nav>
+       </div>
+    )
+}
+
+export default Navigation;

src/components/SearchBox.js

@@ -1,16 +1,19 @@
-import React, {Component} from "react";
+import React, { Component } from "react";
 
 class SearchBox extends Component {
   constructor() {
     super();
+    this.state = { searchTerm: '' }
+
   }
+
   render() {
     return (
       <div id="search" className="Search">
-        <input 
+        <input onChange={(e)=>this.setState({searchTerm: e.target.value})}
           onKeyUp={
-            (e) => {
-              /* this is so th search will only be done on enter key */
+            (e)=> {
+              /* this is so the search will only be done on enter key */
               if (this.props.loadSearch && e.key === "Enter" && this.state.searchTerm) {
                 this.props.loadSearch(this.state.searchTerm);
               }
@@ -22,5 +25,4 @@ class SearchBox extends Component {
     );
   }
 }
-export default SearchBox;
-
+export default SearchBox;

src/components/TitleList.js

@@ -1,4 +1,4 @@
-import React, { Component } from "react";
+import React from "react";
 import Item from "./Item";
 
 function TitleList(props) {

src/components/UserProfile.js

@@ -0,0 +1,16 @@
+import React from 'react';
+
+const UserProfile = () => {
+    return (
+        <div className="UserProfile">
+        <div className="User">
+            <div className="name">Jack Oliver</div>
+            <div className="image">
+            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/profile/profile-512_1.jpg" alt="profile" />
+            </div>
+        </div>
+        </div>
+    )
+}
+
+export default UserProfile;

src/containers/AppContainer.js

@@ -0,0 +1,18 @@
+import App from "../App"
+import { loadMyMovieList } from "../actions"
+import { connect } from "react-redux"
+
+const mapStateToProps = state => {
+    return {
+        searchResults: state.searchResults,
+        myMovieList: state.myMovieList
+    }
+}
+
+const mapDispatchToProps = dispatch => {
+    return {
+        loadMyMovieList: () => dispatch(loadMyMovieList())
+    }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(App)

src/containers/ListToggleContainer.js

@@ -0,0 +1,13 @@
+import { connect } from "react-redux"
+import ListToggle from "../components/ListToggle"
+import { saveMyMovie, removeMyMovie} from "../actions"
+
+const mapDispatchToProps = (dispatch) => {
+    return{
+    saveMyMovie: (movie) => dispatch(saveMyMovie(movie)),
+    removeMyMovie: (id) => dispatch(removeMyMovie(id))
+    }
+}
+
+export default connect(null, mapDispatchToProps)(ListToggle)
+

src/containers/SearchBoxContainer.js

@@ -0,0 +1,11 @@
+import { connect } from "react-redux"
+import SearchBox from "../components/SearchBox"
+import { loadSearch } from "../actions"
+
+const mapDispatchToProps = (dispatch) => {
+    return {
+        loadSearch: searchTerm => dispatch(loadSearch(searchTerm))
+    };
+};
+
+export default connect(null, mapDispatchToProps)(SearchBox);

src/index.js

@@ -1,10 +1,13 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import App from "./App";
+import App from "./containers/AppContainer";
 import "./index.css";
-
+import { Provider } from "react-redux"
+import store from "./store"
 
 ReactDOM.render(
-  <App />,
+  <Provider store={store}>
+  <App />
+  </Provider>,
   document.getElementById("root")
 );

src/reducers/index.js

@@ -0,0 +1,25 @@
+import { combineReducers } from 'redux';
+
+const searchResults = (state = [], action) => {
+    if(action.type === 'SEARCH_RESULTS_LOADED'){
+        return action.value;
+    }
+        return state;
+    }
+
+
+const myMovieList = (state = [], action) => {
+            console.log("ACTION:", action)
+
+    if(action.type === 'MY_MOVIE_LIST_LOADED'){
+        // console.log("ACTION.VALUE:", action.value)
+        return action.value;
+    }
+        return state;
+    }
+
+
+export default combineReducers({
+    searchResults,
+    myMovieList
+})

src/state.js

@@ -1,3 +1,4 @@
 export default {
-
+    searchResults: [],
+    myMovieList: []
 };

src/store.js

@@ -0,0 +1,7 @@
+import { createStore, applyMiddleware } from 'redux';
+import reducers from "./reducers";
+import state from "./state";
+import thunk from "redux-thunk";
+
+export default createStore(reducers, state, applyMiddleware(thunk));
+