From 2f0c582d16b48acdb846bcf6117f3485c3f204e4 Mon Sep 17 00:00:00 2001 From: Wade Cosby Date: Thu, 14 Jun 2018 21:43:42 -0500 Subject: [PATCH] finishes acaFlix --- db.json | 2 +- src/App.js | 39 +++++++--------- src/actions/index.js | 66 +++++++++++++++++++++++++++ src/components/Item.js | 2 +- src/components/Navigation.js | 20 ++++++++ src/components/SearchBox.js | 11 ++++- src/components/TitleList.js | 2 +- src/components/UserProfile.js | 16 +++++++ src/containers/AppContainer.js | 18 ++++++++ src/containers/ListToggleContainer.js | 12 +++++ src/containers/SearchBoxContainer.js | 11 +++++ src/index.js | 9 +++- src/reducers/index.js | 21 +++++++++ src/state.js | 3 +- src/store.js | 17 +++++++ 15 files changed, 219 insertions(+), 30 deletions(-) create mode 100644 src/components/Navigation.js create mode 100644 src/components/UserProfile.js create mode 100644 src/containers/AppContainer.js create mode 100644 src/containers/ListToggleContainer.js create mode 100644 src/containers/SearchBoxContainer.js create mode 100644 src/store.js diff --git a/db.json b/db.json index 1482809..7802fb1 100644 --- a/db.json +++ b/db.json @@ -1,5 +1,5 @@ { - "movies":[], + "movies": [], "posts": [ { "id": 1, diff --git a/src/App.js b/src/App.js index 9aa2579..b921cf7 100644 --- a/src/App.js +++ b/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 (
- {/* */} - - {/* */} + - {/* */} -
-
-
Jack Oliver
-
- profile -
-
-
- {/* */} +
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)) + }) + } + } \ No newline at end of file diff --git a/src/components/Item.js b/src/components/Item.js index 621c374..80bd842 100644 --- a/src/components/Item.js +++ b/src/components/Item.js @@ -1,5 +1,5 @@ import React from "react"; -import ListToggle from "./ListToggle"; +import ListToggle from "../containers/ListToggleContainer"; function Item(props) { diff --git a/src/components/Navigation.js b/src/components/Navigation.js new file mode 100644 index 0000000..0ab28e9 --- /dev/null +++ b/src/components/Navigation.js @@ -0,0 +1,20 @@ +import React, { Component } from 'react' + +export default class Navigation extends Component{ + render(){ + return( +
+ +
+ ) + } +} \ No newline at end of file diff --git a/src/components/SearchBox.js b/src/components/SearchBox.js index 443dfd2..a0ee9eb 100644 --- a/src/components/SearchBox.js +++ b/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 ( diff --git a/src/components/TitleList.js b/src/components/TitleList.js index bf7fd54..8848ea5 100644 --- a/src/components/TitleList.js +++ b/src/components/TitleList.js @@ -1,4 +1,4 @@ -import React, { Component } from "react"; +import React from "react"; import Item from "./Item"; function TitleList(props) { diff --git a/src/components/UserProfile.js b/src/components/UserProfile.js new file mode 100644 index 0000000..a9a9dbf --- /dev/null +++ b/src/components/UserProfile.js @@ -0,0 +1,16 @@ +import React, { Component } from 'react' + +export default class UserProfile extends Component{ + render(){ + return( +
+
+
Jack Oliver
+
+ profile +
+
+
+ ) + } +} \ No newline at end of file diff --git a/src/containers/AppContainer.js b/src/containers/AppContainer.js new file mode 100644 index 0000000..e7aa7f0 --- /dev/null +++ b/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) \ No newline at end of file diff --git a/src/containers/ListToggleContainer.js b/src/containers/ListToggleContainer.js new file mode 100644 index 0000000..06aa680 --- /dev/null +++ b/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) \ No newline at end of file diff --git a/src/containers/SearchBoxContainer.js b/src/containers/SearchBoxContainer.js new file mode 100644 index 0000000..705b28d --- /dev/null +++ b/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) \ No newline at end of file diff --git a/src/index.js b/src/index.js index 332a31e..18691d1 100644 --- a/src/index.js +++ b/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( - , + + + , document.getElementById("root") ); diff --git a/src/reducers/index.js b/src/reducers/index.js index e69de29..9bfd1b8 100644 --- a/src/reducers/index.js +++ b/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 \ No newline at end of file diff --git a/src/state.js b/src/state.js index d1a2c33..5ef5a49 100644 --- a/src/state.js +++ b/src/state.js @@ -1,3 +1,4 @@ export default { - + searchResults: [], + myMovieList: [] }; diff --git a/src/store.js b/src/store.js new file mode 100644 index 0000000..89c4a6e --- /dev/null +++ b/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; \ No newline at end of file