finishes acaFlix

db.json

@@ -1,5 +1,5 @@
 {
-  "movies":[],
+  "movies": [],
   "posts": [
     {
       "id": 1,

src/App.js

@@ -4,37 +4,25 @@ import "./App.css";
 import Logo from "./Logo.js";
 import TitleList from "./components/TitleList";
 import Hero from "./components/Hero";
-import SearchBox from "./components/SearchBox";
+import SearchBox from "./containers/SearchBoxContainer";
+import Navigation from "./components/Navigation"
+import UserProfile from "./components/UserProfile"
+// import {loadMyMovieList} from "./actions"
+
 
 class App extends Component {
+  componentDidMount() {
+    this.props.loadMyMovieList()
+  }
+
   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>   */}
+          <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>   */}
+          <UserProfile />
         </header>
         <Hero />
         <TitleList 
@@ -48,3 +36,8 @@ class App extends Component {
   }
 }
 export default App;
+
+App.PropTypes = {
+  searchResults: PropTypes.string.isRequired,
+  myMovieList: PropTypes.string.isRequired
+}

src/actions/index.js

@@ -0,0 +1,66 @@
+export function loadMyMovieList(){
+  return function(dispatch){
+    // dispatch({type : "LOAD_MY_MOVIE_LIST"})
+    fetch("http://localhost:4000/movies")
+    .then(res=>res.json())
+    .then((list)=>{
+      dispatch(myMovieListLoaded(list))
+    })
+  }
+}
+
+export function myMovieListLoaded(movies){
+  return{
+    type: "MY_MOVIE_LIST_LOADED",
+    value: movies
+  }
+}
+
+export function loadSearch(searchTerm){
+  return function(dispatch){
+    // dispatch({type : "LOAD_SEARCH"})
+    fetch(`https://api.themoviedb.org/3/search/multi?query=${searchTerm}&api_key=aaeeda9440592bb331a7997a9a20c45e`)
+    .then(res=>res.json())
+    .then((movies)=>{
+      dispatch(searchLoaded(movies))
+    })
+  }
+}
+
+export function searchLoaded(movies){
+  return{
+    type: "SEARCH_RESULTS_LOADED",
+    value: movies.results
+  }
+}
+
+export function saveMyMovie(movie){
+  return function(dispatch){
+    fetch("/movies",{
+      method: 'post',
+      body: JSON.stringify(movie),
+      headers:{
+        'content-type': 'application/json'
+      } 
+    })
+    .then(res=>res.json)
+    .then((movies)=>{
+      dispatch(loadMyMovieList(movies))
+    })
+  }
+}
+
+  export function removeMyMovie(id){
+    return function(dispatch){
+      fetch(`/movies/${id}`,{
+        method: 'delete',
+        headers:{
+          'content-type': 'application/json'
+        } 
+      })
+      .then(res=>res.json)
+      .then((movies)=>{
+        dispatch(loadMyMovieList(movies))
+      })
+    }
+  }

src/components/Item.js

@@ -1,5 +1,5 @@
 import React from "react";
-import ListToggle from "./ListToggle";
+import ListToggle from "../containers/ListToggleContainer";
 
 function Item(props) {
 

src/components/Navigation.js

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

src/components/SearchBox.js

@@ -3,7 +3,15 @@ import React, {Component} from "react";
 class SearchBox extends Component {
   constructor() {
     super();
+    this.state = {
+      searchTerm: ''
+    }
   }
+
+  handleOnChange = (e) =>{
+    this.setState({searchTerm:e.target.value})
+  }
+
   render() {
     return (
       <div id="search" className="Search">
@@ -15,7 +23,8 @@ class SearchBox extends Component {
                 this.props.loadSearch(this.state.searchTerm);
               }
             }
-          } 
+          }
+          onChange={this.handleOnChange} 
           type="search" 
           placeholder="Search for a title..." />
       </div>

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, { Component } from 'react'
+
+export default class UserProfile extends Component{
+  render(){
+    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>
+    )
+  }
+}

src/containers/AppContainer.js

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

src/containers/ListToggleContainer.js

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

src/containers/SearchBoxContainer.js

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

src/index.js

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

src/reducers/index.js

@@ -0,0 +1,21 @@
+import {combineReducers} from 'redux'
+
+const myMovieList = (state = [], action)=>{
+  if(action.type === 'MY_MOVIE_LIST_LOADED'){
+    return action.value
+  }
+  return state
+}
+
+const searchResults = (state = [], action)=>{
+  if(action.type === 'SEARCH_RESULTS_LOADED'){
+    return action.value
+  }
+  return state
+}
+
+const rootReducer = combineReducers({
+  searchResults, myMovieList
+})
+
+export default rootReducer

src/state.js

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

src/store.js

@@ -0,0 +1,17 @@
+import {createStore, applyMiddleware, compose} from "redux";
+import state from "./state";
+import reducers from "./reducers";
+import thunk from "redux-thunk";
+
+const composeEnhancers =
+ typeof window === "object" &&
+ window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
+   window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}) 
+   : compose;
+
+const enhancer = composeEnhancers(
+ applyMiddleware(thunk)
+);
+
+const store = createStore(reducers,state,enhancer);
+export default store;