From 82a1b65c96260ac9a7289236d608b20b243bf3f0 Mon Sep 17 00:00:00 2001 From: Joseph William Hauger Date: Sun, 25 Aug 2019 20:28:52 -0500 Subject: [PATCH 1/2] mostlye done --- package-lock.json | 82 +++++++++++++++++++++-------- src/components/ChangeTemperature.js | 32 ++++++----- src/components/CityDropDown.js | 35 ++++++------ src/components/Counter.js | 23 ++++---- src/components/CounterButton.js | 34 ++++++------ src/components/CurrentCity.js | 24 ++++----- src/components/Modal.js | 55 +++++++++---------- src/components/ScaleVideo.js | 26 +++++---- src/components/SearchTextBox.js | 19 ++++--- src/components/ShowModal.js | 22 ++++---- src/components/SortUsers.js | 30 ++++++----- src/components/SpecialText.js | 22 ++++---- src/components/SpecialTextBox.js | 20 +++---- src/components/Thermostat.js | 16 +++--- src/components/UserButtons.js | 48 +++++++++-------- src/components/Users.js | 53 +++++++++++-------- src/components/VideoPlayer.js | 34 ++++++++---- src/components/VideoTextBox.js | 23 ++++---- src/reducers/index.js | 79 ++++++++++++++++++++++----- 19 files changed, 410 insertions(+), 267 deletions(-) diff --git a/package-lock.json b/package-lock.json index 20071db..2affb7a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3065,7 +3065,8 @@ "ansi-regex": { "version": "2.1.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "aproba": { "version": "1.2.0", @@ -3086,12 +3087,14 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -3106,17 +3109,20 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -3233,7 +3239,8 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -3245,6 +3252,7 @@ "version": "1.0.0", "bundled": true, "dev": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -3259,6 +3267,7 @@ "version": "3.0.4", "bundled": true, "dev": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -3266,12 +3275,14 @@ "minimist": { "version": "0.0.8", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "minipass": { "version": "2.3.5", "bundled": true, "dev": true, + "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -3290,6 +3301,7 @@ "version": "0.5.1", "bundled": true, "dev": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -3370,7 +3382,8 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -3382,6 +3395,7 @@ "version": "1.4.0", "bundled": true, "dev": true, + "optional": true, "requires": { "wrappy": "1" } @@ -3467,7 +3481,8 @@ "safe-buffer": { "version": "5.1.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -3503,6 +3518,7 @@ "version": "1.0.2", "bundled": true, "dev": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -3522,6 +3538,7 @@ "version": "3.0.1", "bundled": true, "dev": true, + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -3565,12 +3582,14 @@ "wrappy": { "version": "1.0.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "yallist": { "version": "3.0.3", "bundled": true, - "dev": true + "dev": true, + "optional": true } } }, @@ -7466,7 +7485,8 @@ "ansi-regex": { "version": "2.1.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "aproba": { "version": "1.2.0", @@ -7487,12 +7507,14 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -7507,17 +7529,20 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -7634,7 +7659,8 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -7646,6 +7672,7 @@ "version": "1.0.0", "bundled": true, "dev": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -7660,6 +7687,7 @@ "version": "3.0.4", "bundled": true, "dev": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -7667,12 +7695,14 @@ "minimist": { "version": "0.0.8", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "minipass": { "version": "2.3.5", "bundled": true, "dev": true, + "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -7691,6 +7721,7 @@ "version": "0.5.1", "bundled": true, "dev": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -7771,7 +7802,8 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -7783,6 +7815,7 @@ "version": "1.4.0", "bundled": true, "dev": true, + "optional": true, "requires": { "wrappy": "1" } @@ -7868,7 +7901,8 @@ "safe-buffer": { "version": "5.1.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -7904,6 +7938,7 @@ "version": "1.0.2", "bundled": true, "dev": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -7923,6 +7958,7 @@ "version": "3.0.1", "bundled": true, "dev": true, + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -7966,12 +8002,14 @@ "wrappy": { "version": "1.0.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "yallist": { "version": "3.0.3", "bundled": true, - "dev": true + "dev": true, + "optional": true } } } diff --git a/src/components/ChangeTemperature.js b/src/components/ChangeTemperature.js index fa894bc..d968a0a 100644 --- a/src/components/ChangeTemperature.js +++ b/src/components/ChangeTemperature.js @@ -1,16 +1,24 @@ import React from "react"; +import store from "../store"; -function ChangeTemperature(props){ - return( -
-
- -
- ) +function ChangeTemperature(props) { + return ( +
+
+ +
+ ); } -export default ChangeTemperature; \ No newline at end of file +export default ChangeTemperature; diff --git a/src/components/CityDropDown.js b/src/components/CityDropDown.js index d43df20..1e20041 100644 --- a/src/components/CityDropDown.js +++ b/src/components/CityDropDown.js @@ -1,23 +1,24 @@ -import React from 'react'; +import React from "react"; +import store from "../store"; function CityDropDown(props) { return ( -
- CurrentCity: - -
+
+ CurrentCity: + +
); } export default CityDropDown; diff --git a/src/components/Counter.js b/src/components/Counter.js index 281c6ff..511fd72 100644 --- a/src/components/Counter.js +++ b/src/components/Counter.js @@ -1,19 +1,18 @@ -import React from 'react'; +import React from "react"; +import store from "../store"; class Counter extends React.Component { - - state={count:0} + state = { count: 0 }; + componentDidMount() { + store.subscribe(() => { + this.setState({ count: store.getState().currentCount }); + }); + } render() { - const { - props, - } = this; + const { props } = this; - return ( -
- Counter: {this.state.count} -
- ); + return
Counter: {this.state.count}
; } } -export default Counter; \ No newline at end of file +export default Counter; diff --git a/src/components/CounterButton.js b/src/components/CounterButton.js index 96eaa08..0d649ee 100644 --- a/src/components/CounterButton.js +++ b/src/components/CounterButton.js @@ -1,19 +1,23 @@ -import React from 'react'; - +import React from "react"; +import store from "../store"; function CounterButton(props) { return ( -
- - -
+
+ + +
); } -export default CounterButton; \ No newline at end of file +export default CounterButton; diff --git a/src/components/CurrentCity.js b/src/components/CurrentCity.js index a073d8e..89f1279 100644 --- a/src/components/CurrentCity.js +++ b/src/components/CurrentCity.js @@ -1,21 +1,21 @@ -import React from 'react'; +import React from "react"; +import store from "../store"; class CurrentCity extends React.Component { - state={ - text:"" + state = { + text: "" + }; + componentDidMount() { + store.subscribe(() => { + this.setState({ text: store.getState().currentCity }); + }); } render() { - const { - props, - } = this; + const { props } = this; - return ( -
- CurrentCity: {this.state.text} -
- ); + return
CurrentCity: {this.state.text}
; } } -export default CurrentCity; \ No newline at end of file +export default CurrentCity; diff --git a/src/components/Modal.js b/src/components/Modal.js index 1789040..b148701 100644 --- a/src/components/Modal.js +++ b/src/components/Modal.js @@ -1,14 +1,18 @@ -import React from 'react'; -import Modal from 'react-modal'; +import React from "react"; +import Modal from "react-modal"; +import store from "../store"; class LoadingModal extends React.Component { - state={ - isLoading:false + state = { + isLoading: false + }; + componentDidMount() { + store.subscribe(() => { + this.setState({ isLoading: store.getState().isLoading }); + }); } render() { - const { - props, - } = this; + const { props } = this; return ( - +
Loading .......
- ); } @@ -30,23 +35,13 @@ class LoadingModal extends React.Component { export default LoadingModal; - - - - - - - - - - const customStyles = { - content : { - top : '50%', - left : '50%', - right : 'auto', - bottom : 'auto', - marginRight : '-50%', - transform : 'translate(-50%, -50%)' + content: { + top: "50%", + left: "50%", + right: "auto", + bottom: "auto", + marginRight: "-50%", + transform: "translate(-50%, -50%)" } }; diff --git a/src/components/ScaleVideo.js b/src/components/ScaleVideo.js index 803b257..77ced00 100644 --- a/src/components/ScaleVideo.js +++ b/src/components/ScaleVideo.js @@ -1,16 +1,20 @@ -import React from 'react'; +import React from "react"; +import store from "../store"; function ScaleVideo(props) { return ( -
- Scale Video: { - - } - } - type="range" min="1" max="10" step="1" /> -
+
+ Scale Video:{" "} + { + store.dispatch({ type: "SET_VIDEO_SCALE", value: e.target.value }); + }} + type="range" + min="1" + max="10" + step="1" + /> +
); } -export default ScaleVideo; \ No newline at end of file +export default ScaleVideo; diff --git a/src/components/SearchTextBox.js b/src/components/SearchTextBox.js index 43f3416..df8a74e 100644 --- a/src/components/SearchTextBox.js +++ b/src/components/SearchTextBox.js @@ -1,14 +1,17 @@ -import React from 'react'; +import React from "react"; +import store from "../store"; function SearchTextBox(props) { return ( -
- Search Users on First Name: - { - - }} /> -
+
+ Search Users on First Name: + { + store.dispatch({ type: "SET_SEARCH_TEXT", value: e.target.value }); + }} + /> +
); } -export default SearchTextBox; \ No newline at end of file +export default SearchTextBox; diff --git a/src/components/ShowModal.js b/src/components/ShowModal.js index 1e73950..06b8f38 100644 --- a/src/components/ShowModal.js +++ b/src/components/ShowModal.js @@ -1,15 +1,17 @@ -import React from 'react'; +import React from "react"; +import store from "../store"; function ShowModal(props) { return ( -
- - -
+
+ +
); } -export default ShowModal; \ No newline at end of file +export default ShowModal; diff --git a/src/components/SortUsers.js b/src/components/SortUsers.js index fd6cb04..8586aba 100644 --- a/src/components/SortUsers.js +++ b/src/components/SortUsers.js @@ -1,18 +1,22 @@ -import React from 'react'; +import React from "react"; +import store from "../store"; function SortUsers(props) { return ( -
- Sort Users On: - -
+
+ Sort Users On: + +
); } -export default SortUsers; \ No newline at end of file +export default SortUsers; diff --git a/src/components/SpecialText.js b/src/components/SpecialText.js index 7d3b5e9..6513209 100644 --- a/src/components/SpecialText.js +++ b/src/components/SpecialText.js @@ -1,18 +1,18 @@ -import React from 'react'; +import React from "react"; +import store from "../store"; class SpecialText extends React.Component { - state={text:""} + state = { text: "" }; + componentDidMount() { + store.subscribe(() => { + this.setState({ text: store.getState().specialText }); + }); + } render() { - const { - props, - } = this; + const { props } = this; - return ( -
- Special Text: {this.state.text} -
- ); + return
Special Text: {this.state.text}
; } } -export default SpecialText; \ No newline at end of file +export default SpecialText; diff --git a/src/components/SpecialTextBox.js b/src/components/SpecialTextBox.js index 63cb01f..c930c13 100644 --- a/src/components/SpecialTextBox.js +++ b/src/components/SpecialTextBox.js @@ -1,15 +1,17 @@ -import React from 'react'; - +import React from "react"; +import store from "../store"; function SpecialTextBox(props) { return ( -
- Enter Special Text: - { - - }} /> -
+
+ Enter Special Text: + { + store.dispatch({ type: "SET_SPECIAL_TEXT", value: e.target.value }); + }} + /> +
); } -export default (SpecialTextBox); +export default SpecialTextBox; diff --git a/src/components/Thermostat.js b/src/components/Thermostat.js index 2e43fbe..4638f85 100644 --- a/src/components/Thermostat.js +++ b/src/components/Thermostat.js @@ -1,16 +1,20 @@ import React from "react"; import DonutChart from "./ignore/DonutChart"; +import store from "../store"; class Thermostat extends React.Component { - state={temp:""} + state = { temp: "" }; + componentDidMount() { + store.subscribe(() => { + this.setState({ temp: store.getState().currentTemp }); + }); + } render() { - const { - props, - } = this; + const { props } = this; - return () + return ; } } -export default Thermostat; \ No newline at end of file +export default Thermostat; diff --git a/src/components/UserButtons.js b/src/components/UserButtons.js index f857369..c69aff8 100644 --- a/src/components/UserButtons.js +++ b/src/components/UserButtons.js @@ -1,27 +1,33 @@ -import React from 'react'; +import React from "react"; +import store from "../store"; function UserButtons(props) { return ( -
- - -
+
+ + +
); } export default UserButtons; diff --git a/src/components/Users.js b/src/components/Users.js index 79bfbef..da36436 100644 --- a/src/components/Users.js +++ b/src/components/Users.js @@ -1,36 +1,45 @@ -import React from 'react'; +import React from "react"; +import store from "../store"; class Users extends React.Component { - - state={ - users:[], - sortOn:"", - firstNameFilter:"" + state = { + users: [], + sortOn: "", + firstNameFilter: "" + }; + componentDidMount() { + let users = store.getState().users; + 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; + let { users, sortOn, firstNameFilter } = this.state; var usersDivs = null; - if(users){ - var sorted = users.sort((a,b) => { + if (users) { + var sorted = users.sort((a, b) => { return a[sortOn] > b[sortOn]; }); - usersDivs = sorted.filter(function(u){ - return !firstNameFilter || - (firstNameFilter && - u.name.indexOf(firstNameFilter) > -1); - }) - usersDivs = usersDivs.map(function(u){ - return
{u.name}
- }) + usersDivs = sorted.filter(function(u) { + return ( + !firstNameFilter || + (firstNameFilter && u.name.indexOf(firstNameFilter) > -1) + ); + }); + usersDivs = usersDivs.map(function(u) { + return
{u.name}
; + }); } return ( -
-

Users

- {usersDivs} -
+
+

Users

+ {usersDivs} +
); } } -export default Users; \ No newline at end of file +export default Users; diff --git a/src/components/VideoPlayer.js b/src/components/VideoPlayer.js index f4fc08b..686fe40 100644 --- a/src/components/VideoPlayer.js +++ b/src/components/VideoPlayer.js @@ -1,25 +1,37 @@ -import React from 'react'; +import React from "react"; +import store from "../store"; class VideoPlayer extends React.Component { - state={scale:0,URL:""} - + state = { scale: 0, URL: "" }; + componentDidMount() { + store.subscribe(() => { + this.setState({ URL: store.getState().videoURL }); + this.setState({ scale: store.getState().videoScale }); + }); + } render() { - const { - props, - } = this; + const { props } = this; let width = 200; let height = 200; - if(this.state.scale){ + if (this.state.scale) { width = 200 * props.scale; height = 200 * props.scale; } return ( -
+
+