ACA-Flix

src/App.js

@@ -1,40 +1,28 @@
 import React, {Component} from "react";
-import PropTypes from "prop-types";
+import PropTypes, { array } 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 Navigation from "./components/Navigation";
+import UserProfile from "./components/UserProfile";
+import { loadMyMovieList } from "./actions";
+import SearchBoxContainer from "./containers/SearchBoxContainer";
 
 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>   */}
-          <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 
@@ -47,4 +35,10 @@ class App extends Component {
     );
   }
 }
+
+App.PropTypes = {
+  searchResults: PropTypes.array.isRequired,
+  myMovieList: PropTypes.array.isRequired
+}
+
 export default App;

src/actions/index.js

@@ -0,0 +1,63 @@
+export function loadMyMovieList(){
+    return function (dispatch) {
+        dispatch({
+            type: "LOAD_MY_MOVIE_LIST"
+        });
+
+        fetch("/movies")
+        .then( (response) => {
+            return response.json();
+        }).then((movies) => {
+            dispatch(myMovieListLoaded(movies));
+        });
+    };
+};  
+
+export function myMovieListLoaded(movies){
+    return {
+        type: "MY_MOVIE_LIST_LOADED",
+        movies: movies
+    }
+};
+
+export function loadSearch(searchTerm){
+    return function (dispatch) {
+        dispatch({
+            type: "LOAD_SEARCH"
+        });
+
+        fetch(`https://api.themoviedb.org/3/search/multi?query=${searchTerm}&api_key=0dc94f449f50d8c8598f3f801426f127`)
+        .then( (response) => {
+            return response.json();
+        }).then( (movies) => {
+            dispatch(searchLoaded(movies));
+        });
+    };
+};
+
+export function searchLoaded(movies){
+    return {
+        type: "SEARCH_RESULTS_LOADED",
+        movies: movies.results
+    }
+}
+
+export function saveMyMovie(movie){
+  return function (dispatch){
+    fetch("/movies", {
+      method: "POST",
+      headers: {"Content-Type": "application/json"},
+      body: JSON.stringify(movie)
+    }).then(() => dispatch(loadMyMovieList()));
+  };
+}
+
+export function removeMyMovie(_id) {
+    return function (dispatch) {
+      fetch(`/movies/${_id}`, {
+          method: "DELETE"
+        }).then(() => dispatch(loadMyMovieList()));
+    };
+}
+
+

src/components/Hero.js

@@ -3,9 +3,9 @@ import HeroButton from "./HeroButton";
 
 function Hero() {
   return (
-    <div id="hero" className="Hero" style={{backgroundImage: "url(https://images.alphacoders.com/633/633643.jpg)"}}>
+    <div id="hero" className="Hero" style={{backgroundImage: "url(https://images3.alphacoders.com/882/thumb-1920-882548.jpg)"}}>
       <div className="content">
-        <img className="logo" src="http://www.returndates.com/backgrounds/narcos.logo.png" alt="narcos background" />
+        <img className="logo" src="https://www.returndates.com/backgrounds/strangerthings.logo.png" alt="stranger things background" />
         <h2>Season 2 now available</h2>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
           Doloremque id quam sapiente unde voluptatum alias vero debitis, 

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,20 @@
+import React, { Component } from "react";
+
+class Navigation extends Component {
+    render(){
+        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

@@ -3,11 +3,19 @@ import React, {Component} from "react";
 class SearchBox extends Component {
   constructor() {
     super();
+    this.state = {
+      searchTerm: ""
+    }
   }
+
+  handleChange(e) {
+    this.setState({searchTerm: e.target.value});
+  } 
+
   render() {
     return (
       <div id="search" className="Search">
-        <input 
+        <input onChange={this.handleChange.bind(this)}
           onKeyUp={
             (e) => {
               /* this is so th search will only be done on enter key */
@@ -22,5 +30,6 @@ class SearchBox extends Component {
     );
   }
 }
+
 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,18 @@
+import React, { Component } from "react";
+
+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>
+        )
+    }
+}
+
+export default UserProfile;

src/containers/AppContainer.js

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

src/containers/ListToggleContainer.js

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

src/containers/SearchBoxContainer.js

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

src/index.js

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

src/reducers/index.js

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

src/state.js

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

src/store.js

@@ -0,0 +1,16 @@
+import state from "./state";
+import reducers from "./reducers";
+import {createStore, applyMiddleware, compose} from "redux";
+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;