From 8ba46ad837dba4d330ffb0443082cef361d844b4 Mon Sep 17 00:00:00 2001 From: dbobb220 Date: Wed, 21 Aug 2019 20:32:17 -0500 Subject: [PATCH 1/3] up to Publisher SearchTextBox --- src/components/CityDropDown.js | 3 +- src/components/Counter.js | 8 +++- src/components/CounterButton.js | 5 ++- src/components/CurrentCity.js | 7 ++++ src/components/Modal.js | 8 ++++ src/components/SearchTextBox.js | 3 +- src/components/SpecialText.js | 6 +++ src/components/SpecialTextBox.js | 3 +- src/components/Thermostat.js | 7 +++- src/components/UserButtons.js | 5 ++- src/components/Users.js | 9 +++++ src/components/VideoPlayer.js | 10 +++++ src/reducers/index.js | 67 +++++++++++++++++++++++++++++--- 13 files changed, 126 insertions(+), 15 deletions(-) diff --git a/src/components/CityDropDown.js b/src/components/CityDropDown.js index d43df20..b0b966f 100644 --- a/src/components/CityDropDown.js +++ b/src/components/CityDropDown.js @@ -1,4 +1,5 @@ import React from 'react'; +import store from '../store'; function CityDropDown(props) { return ( @@ -6,7 +7,7 @@ function CityDropDown(props) { CurrentCity: { - + store.dispatch({type:"SET_SEARCH_TEXT", value: e.target.value}) }} /> ); diff --git a/src/components/SpecialText.js b/src/components/SpecialText.js index 7d3b5e9..95dcfa1 100644 --- a/src/components/SpecialText.js +++ b/src/components/SpecialText.js @@ -1,7 +1,13 @@ import React from 'react'; +import store from '../store'; class SpecialText extends React.Component { state={text:""} + componentDidMount() { + store.subscribe(()=> { + this.setState({text:store.getState().specialText}) + }) + } render() { const { props, diff --git a/src/components/SpecialTextBox.js b/src/components/SpecialTextBox.js index 63cb01f..c5e6522 100644 --- a/src/components/SpecialTextBox.js +++ b/src/components/SpecialTextBox.js @@ -1,4 +1,5 @@ import React from 'react'; +import store from '../store'; function SpecialTextBox(props) { @@ -6,7 +7,7 @@ function SpecialTextBox(props) {
Enter Special Text: { - + store.dispatch({type:"SET_SPECIAL_TEXT", value:e.target.value}) }} />
); diff --git a/src/components/Thermostat.js b/src/components/Thermostat.js index 2e43fbe..c1d54a5 100644 --- a/src/components/Thermostat.js +++ b/src/components/Thermostat.js @@ -1,9 +1,14 @@ import React from "react"; import DonutChart from "./ignore/DonutChart"; +import store from '../store'; class Thermostat extends React.Component { state={temp:""} - + componentDidMount() { + store.subscribe(()=> { + this.setState({temp: store.getState().currentTemp}) + }); + } render() { const { props, diff --git a/src/components/UserButtons.js b/src/components/UserButtons.js index f857369..bfdbafd 100644 --- a/src/components/UserButtons.js +++ b/src/components/UserButtons.js @@ -1,4 +1,5 @@ import React from 'react'; +import store from '../store'; function UserButtons(props) { return ( @@ -13,12 +14,12 @@ function UserButtons(props) { "occupation": "father", "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/calebogden/128.jpg" }; - + store.dispatch({type:"ADD_USER", value:user}) } }>Add User diff --git a/src/components/Users.js b/src/components/Users.js index 79bfbef..63e1295 100644 --- a/src/components/Users.js +++ b/src/components/Users.js @@ -1,4 +1,5 @@ import React from 'react'; +import store from '../store'; class Users extends React.Component { @@ -8,6 +9,14 @@ class Users extends React.Component { firstNameFilter:"" } + componentDidMount() { + store.subscribe(()=>{ + this.setState({users: store.getState().users}); + this.setState({firstNameFilter: store.getState().searchText}); + this.setState({sortOn: store.getState().currentUserSort}) + }) + } + render() { let {users,sortOn,firstNameFilter} = this.state; var usersDivs = null; diff --git a/src/components/VideoPlayer.js b/src/components/VideoPlayer.js index f4fc08b..aaf6b10 100644 --- a/src/components/VideoPlayer.js +++ b/src/components/VideoPlayer.js @@ -1,8 +1,18 @@ import React from 'react'; +import store from '../store'; class VideoPlayer extends React.Component { state={scale:0,URL:""} + componentDidMount() { + store.subscribe(()=>{ + this.setState({ + URL: store.getState().videoURL, + scale: store.getState().videoScale + }) + }) + } + render() { const { props, diff --git a/src/reducers/index.js b/src/reducers/index.js index e4e85c8..2d90d92 100644 --- a/src/reducers/index.js +++ b/src/reducers/index.js @@ -2,25 +2,24 @@ import { combineReducers } from 'redux' function currentCount(state=0, action){ if(action.type === "INCREASE_COUNTER"){ - + return state + 1 } if(action.type === "DECREASE_COUNTER"){ - + return state - 1 } return state; } function users(state =[], action){ if(action.type === "ADD_USER"){ - + return [...state, action.value] } if(action.type === "REMOVE_USER"){ - + return state.slice(1) } return state; } - function specialText(state = "", action){ if(action.type === "SET_SPECIAL_TEXT"){ return action.value; @@ -28,8 +27,64 @@ function specialText(state = "", action){ return state; } +function currentCity(state = "", action) { + if(action.type === "SET_CURRENT_CITY") { + return action.value + } + return state; +} + +function searchText(state = "", action) { + if(action.type === "SET_SEARCH_TEXT") { + return action.value + } + return state; +} + +function currentTemp(state = 0, action) { + if(action.type === "SET_TEMP") { + return action.value + } + return state; +} + +function isLoading(state = false , action) { + if(action.type === "SET_IS_LOADING") { + return action.value + } + return state; +} + +function videoURL(state = "", action) { + if(action.type === "SET_VIDEO_URL") { + return action.value + } + return state; +} + +function currentUserSort(state = "", action) { + if(action.type === "SET_CURRENT_USER_SORT") { + return action.value + } + return state; +} + +function videoScale(state = 1, action) { + if(action.type === "SET_VIDEO_SCALE") { + return action.value + } + return state; +} + export default combineReducers({ currentCount, users, - specialText + specialText, + currentCity, + searchText, + currentTemp, + isLoading, + videoURL, + currentUserSort, + videoScale }) \ No newline at end of file From 99f7f3598f0479f7ff3cf9c98bff1387fc8e2611 Mon Sep 17 00:00:00 2001 From: dbobb220 Date: Thu, 22 Aug 2019 14:02:13 -0500 Subject: [PATCH 2/3] all but bounus --- src/components/ChangeTemperature.js | 3 ++- src/components/Modal.js | 2 +- src/components/ScaleVideo.js | 3 ++- src/components/ShowModal.js | 3 ++- src/components/SortUsers.js | 3 ++- src/components/Users.js | 1 + src/components/VideoTextBox.js | 3 ++- 7 files changed, 12 insertions(+), 6 deletions(-) diff --git a/src/components/ChangeTemperature.js b/src/components/ChangeTemperature.js index fa894bc..a5102ba 100644 --- a/src/components/ChangeTemperature.js +++ b/src/components/ChangeTemperature.js @@ -1,4 +1,5 @@ import React from "react"; +import store from '../store' function ChangeTemperature(props){ return( @@ -6,7 +7,7 @@ function ChangeTemperature(props){
diff --git a/src/components/Modal.js b/src/components/Modal.js index a24da27..545320a 100644 --- a/src/components/Modal.js +++ b/src/components/Modal.js @@ -26,7 +26,7 @@ class LoadingModal extends React.Component { >
Loading .......
diff --git a/src/components/ScaleVideo.js b/src/components/ScaleVideo.js index 803b257..4abb5a8 100644 --- a/src/components/ScaleVideo.js +++ b/src/components/ScaleVideo.js @@ -1,4 +1,5 @@ import React from 'react'; +import store from '../store'; function ScaleVideo(props) { return ( @@ -6,7 +7,7 @@ function ScaleVideo(props) { Scale Video: { - + store.dispatch({type:"SET_VIDEO_SCALE", value: e.target.value}) } } type="range" min="1" max="10" step="1" /> diff --git a/src/components/ShowModal.js b/src/components/ShowModal.js index 1e73950..fc16399 100644 --- a/src/components/ShowModal.js +++ b/src/components/ShowModal.js @@ -1,11 +1,12 @@ import React from 'react'; +import store from '../store'; function ShowModal(props) { return (
diff --git a/src/components/SortUsers.js b/src/components/SortUsers.js index fd6cb04..429f776 100644 --- a/src/components/SortUsers.js +++ b/src/components/SortUsers.js @@ -1,4 +1,5 @@ import React from 'react'; +import store from '../store'; function SortUsers(props) { return ( @@ -6,7 +7,7 @@ function SortUsers(props) { Sort Users On: { - + store.dispatch({type:"SET_VIDEO_URL", value: e.target.value}) }} type="text" /> From f0d78f16e2c89568301d4f5cfd565a093ae926ff Mon Sep 17 00:00:00 2001 From: dbobb220 Date: Wed, 28 Aug 2019 11:47:12 -0500 Subject: [PATCH 3/3] bonus added --- src/App.js | 21 +++++++++++++++++---- src/reducers/index.js | 3 +++ 2 files changed, 20 insertions(+), 4 deletions(-) diff --git a/src/App.js b/src/App.js index 392ed1f..9fa061f 100644 --- a/src/App.js +++ b/src/App.js @@ -16,9 +16,21 @@ import SortUsers from "./components/SortUsers"; import ScaleVideo from "./components/ScaleVideo"; import Modal from "./components/Modal"; import ShowModal from "./components/ShowModal"; +import store from "./store"; -function App() { - return ( +class App extends React.Component { + + componentDidMount() { + fetch('https://jsonplaceholder.typicode.com/users ') + .then(res => res.json()) + .then(data => { + store.dispatch({type: "LOAD_USERS", value: data}) + }) + .catch(err => console.log(`Error: ${err}`)) + } + + render() { + return (
@@ -28,7 +40,7 @@ function App() {
-
+

@@ -60,6 +72,7 @@ function App() {
- ); + ); + } } export default App; \ No newline at end of file diff --git a/src/reducers/index.js b/src/reducers/index.js index 2d90d92..da234ab 100644 --- a/src/reducers/index.js +++ b/src/reducers/index.js @@ -17,6 +17,9 @@ function users(state =[], action){ if(action.type === "REMOVE_USER"){ return state.slice(1) } + if(action.type === "LOAD_USERS"){ + return action.value; + } return state; }