From 8bdd5b68cb4b245cf9c01fef9c4981810fb91615 Mon Sep 17 00:00:00 2001
From: daniela-idara <purpleelephant1987@gmail.com>
Date: Sun, 25 Aug 2019 17:36:45 -0500
Subject: [PATCH] making the page work

---
 package-lock.json                   | 56 ++++++++++++++++++------
 src/components/ChangeTemperature.js |  3 +-
 src/components/CityDropDown.js      |  7 +--
 src/components/Counter.js           | 17 +++++---
 src/components/CounterButton.js     |  7 +--
 src/components/CurrentCity.js       | 17 +++++---
 src/components/Modal.js             | 16 ++++---
 src/components/ScaleVideo.js        |  3 +-
 src/components/SearchTextBox.js     |  3 +-
 src/components/ShowModal.js         |  3 +-
 src/components/SortUsers.js         |  3 +-
 src/components/SpecialText.js       | 14 +++---
 src/components/SpecialTextBox.js    |  4 +-
 src/components/Thermostat.js        | 12 ++++--
 src/components/UserButtons.js       |  5 ++-
 src/components/Users.js             | 12 ++++++
 src/components/VideoPlayer.js       | 17 +++++---
 src/components/VideoTextBox.js      |  3 +-
 src/reducers/index.js               | 67 ++++++++++++++++++++++++++---
 19 files changed, 203 insertions(+), 66 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 20071db..2224181 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3086,12 +3086,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 +3108,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 +3238,8 @@
             "inherits": {
               "version": "2.0.3",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "ini": {
               "version": "1.3.5",
@@ -3245,6 +3251,7 @@
               "version": "1.0.0",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "number-is-nan": "^1.0.0"
               }
@@ -3259,6 +3266,7 @@
               "version": "3.0.4",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "brace-expansion": "^1.1.7"
               }
@@ -3266,12 +3274,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 +3300,7 @@
               "version": "0.5.1",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "minimist": "0.0.8"
               }
@@ -3370,7 +3381,8 @@
             "number-is-nan": {
               "version": "1.0.1",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "object-assign": {
               "version": "4.1.1",
@@ -3382,6 +3394,7 @@
               "version": "1.4.0",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "wrappy": "1"
               }
@@ -3503,6 +3516,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",
@@ -7487,12 +7501,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 +7523,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 +7653,8 @@
             "inherits": {
               "version": "2.0.3",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "ini": {
               "version": "1.3.5",
@@ -7646,6 +7666,7 @@
               "version": "1.0.0",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "number-is-nan": "^1.0.0"
               }
@@ -7660,6 +7681,7 @@
               "version": "3.0.4",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "brace-expansion": "^1.1.7"
               }
@@ -7667,12 +7689,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 +7715,7 @@
               "version": "0.5.1",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "minimist": "0.0.8"
               }
@@ -7771,7 +7796,8 @@
             "number-is-nan": {
               "version": "1.0.1",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "object-assign": {
               "version": "4.1.1",
@@ -7783,6 +7809,7 @@
               "version": "1.4.0",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "wrappy": "1"
               }
@@ -7904,6 +7931,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",
diff --git a/src/components/ChangeTemperature.js b/src/components/ChangeTemperature.js
index fa894bc..8e93b15 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){
         <br/>
         <label>Change Temp -  Enter a value from 1-100<br/>
           <input onChange={(e)=>{
-           
+           store.dispatch({type:"SET_TEMP", value: e.target.value})
           }} type="number" min="0" max="100" />
         </label>
       </div>
diff --git a/src/components/CityDropDown.js b/src/components/CityDropDown.js
index d43df20..4dec40e 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,15 +7,15 @@ function CityDropDown(props) {
         CurrentCity: 
         <select onChange={
           (e)=>{
-           
+            store.dispatch({type:"SET_CURRENT_CITY", value:e.target.value})
           }
         }>
           <option value="Austin">Austin</option>
           <option value="New York">New York</option>
-          <option value="New Olreans">New Orleans</option>
+          <option value="New Orleans">New Orleans</option>
           <option value="Las Vegas">Las Vegas</option>
           <option value="Seattle">Seattle</option>
-          <option value="San Fransisco">San Fransisco</option>
+          <option value="San Francisco">San Francisco</option>
           <option value="Washington D.C.">Washington D.C.</option>
         </select>
       </div>
diff --git a/src/components/Counter.js b/src/components/Counter.js
index 281c6ff..7affe7a 100644
--- a/src/components/Counter.js
+++ b/src/components/Counter.js
@@ -1,16 +1,23 @@
 import React from 'react';
+import store from "../store";
 
 class Counter extends React.Component {
   
   state={count:0}
-  render() {
-    const {
-      props,
-    } = this;
 
+  componentDidMount(){
+    let currentCount = store.getState().currentCount;
+    this.setState({count:currentCount});
+    store.subscribe(()=>{
+      let currentCount = store.getState().currentCount;
+      this.setState({count:currentCount});
+    });
+  }
+
+  render() {
     return (
         <div>
-          Counter: {this.state.count}
+          Counter: {this.state.count || "0"}
         </div>
     );
   }
diff --git a/src/components/CounterButton.js b/src/components/CounterButton.js
index 96eaa08..536df2c 100644
--- a/src/components/CounterButton.js
+++ b/src/components/CounterButton.js
@@ -1,16 +1,17 @@
 import React from 'react';
+import store from "../store";
 
-function CounterButton(props) {
+function CounterButton() {
   return (
       <div>
         <button onClick={
           ()=>{
-            
+            store.dispatch({type:"INCREASE_COUNTER"})
           }
         }>Increase Counter By One</button>
         <button onClick={
           ()=>{
-           
+            store.dispatch({type:"DECREASE_COUNTER"})
           }
         }>Decrease Counter By One</button>
       </div>
diff --git a/src/components/CurrentCity.js b/src/components/CurrentCity.js
index a073d8e..d7217f1 100644
--- a/src/components/CurrentCity.js
+++ b/src/components/CurrentCity.js
@@ -1,18 +1,25 @@
 import React from 'react';
+import store from "../store";
 
 class CurrentCity extends React.Component {
   state={
     text:""
   }
 
-  render() {
-    const {
-      props,
-    } = this;
+  componentDidMount(){
+    let currentCity = store.getState().currentCity;
+    this.setState({text:currentCity});
+    store.subscribe(()=>{
+      let currentCity = store.getState().currentCity;
+      this.setState({text:currentCity});
+    })
+  }
 
+  render() {
+  
     return (
         <div>
-          CurrentCity: {this.state.text}
+          Current City: {this.state.text || "Austin"} 
         </div>
     );
   }
diff --git a/src/components/Modal.js b/src/components/Modal.js
index 1789040..f88a5be 100644
--- a/src/components/Modal.js
+++ b/src/components/Modal.js
@@ -1,24 +1,28 @@
 import React from 'react';
 import Modal from 'react-modal';
+import store from "../store";
 
 class LoadingModal extends React.Component {
   state={
     isLoading:false
   }
-  render() {
-    const {
-      props,
-    } = this;
 
+  componentDidMount(){
+    store.subscribe(()=>{
+      let isLoading = store.getState().isLoading;
+      this.setState({isLoading:isLoading});
+    })
+  }
+  render() {
     return (
       <Modal
-        isOpen={props.isLoading}
+        isOpen={this.state.isLoading}
         style={customStyles}
         contentLabel="Example Modal"
       >
         <button onClick={
           ()=>{
-           
+            store.dispatch({type:"SET_IS_LOADING", value: false})
           }
           }>close</button>
         <div>Loading .......</div>
diff --git a/src/components/ScaleVideo.js b/src/components/ScaleVideo.js
index 803b257..245e80f 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: <input
         onChange={
           (e)=>{
-            
+            store.dispatch({type:"SET_VIDEO_SCALE", value: e.target.value})
           }
         }
          type="range" min="1" max="10" step="1" />
diff --git a/src/components/SearchTextBox.js b/src/components/SearchTextBox.js
index 43f3416..b0023f4 100644
--- a/src/components/SearchTextBox.js
+++ b/src/components/SearchTextBox.js
@@ -1,11 +1,12 @@
 import React from 'react';
+import store from "../store";
 
 function SearchTextBox(props) {
   return (
       <div>
         Search Users on First Name:
         <input onChange={(e)=>{
-           
+         store.dispatch({type:"SET_SEARCH_TEXT", value: e.target.value})  
         }} />
       </div>
   );
diff --git a/src/components/ShowModal.js b/src/components/ShowModal.js
index 1e73950..82af4ef 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 (
       <div>
         <button onClick={
           ()=>{
-            
+            store.dispatch({type:"SET_IS_LOADING", value: true})
           }
         }>Show Modal</button>
 
diff --git a/src/components/SortUsers.js b/src/components/SortUsers.js
index fd6cb04..86c23b2 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: 
         <select onChange={
           (e)=>{
-           
+            store.dispatch({type:"SET_CURRENT_USER_SORT", value: e.target.value})
           }
         }>
           <option value="first_name">First Name</option>
diff --git a/src/components/SpecialText.js b/src/components/SpecialText.js
index 7d3b5e9..d9780ca 100644
--- a/src/components/SpecialText.js
+++ b/src/components/SpecialText.js
@@ -1,15 +1,19 @@
 import React from 'react';
+import store from "../store";
 
 class SpecialText extends React.Component {
   state={text:""}
-  render() {
-    const {
-      props,
-    } = this;
 
+  componentDidMount(){
+    store.subscribe(()=>{
+      this.setState({text:store.getState().specialText});
+    });
+  }
+
+  render() {
     return (
         <div>
-          Special Text: {this.state.text}
+          Special Text: {this.state.text || "The Message"}
         </div>
     );
   }
diff --git a/src/components/SpecialTextBox.js b/src/components/SpecialTextBox.js
index 63cb01f..b0d3a93 100644
--- a/src/components/SpecialTextBox.js
+++ b/src/components/SpecialTextBox.js
@@ -1,12 +1,12 @@
 import React from 'react';
-
+import store from "../store";
 
 function SpecialTextBox(props) {
   return (
       <div>
         Enter Special Text:
         <input onChange={(e)=>{
-            
+            store.dispatch({type:"SET_SPECIAL_TEXT",value: e.target.value});
         }} />
       </div>
   );
diff --git a/src/components/Thermostat.js b/src/components/Thermostat.js
index 2e43fbe..682fcce 100644
--- a/src/components/Thermostat.js
+++ b/src/components/Thermostat.js
@@ -1,14 +1,18 @@
 import React from "react";
 import DonutChart from "./ignore/DonutChart";
+import store from "../store";
 
 class Thermostat extends React.Component {
   state={temp:""}
 
-  render() {
-    const {
-      props,
-    } = this;
+  componentDidMount(){
+    store.subscribe(()=>{
+      let currentTemp = store.getState().currentTemp;
+      this.setState({temp:currentTemp});
+    });
+  }
 
+  render() {
     return (<DonutChart value={this.state.temp || 23 } />)
   }
 }
diff --git a/src/components/UserButtons.js b/src/components/UserButtons.js
index f857369..47a1f2a 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</button>
         <button onClick={
           ()=>{
-           
+            store.dispatch({type:"REMOVE_USER"})
           }
         }>Remove User</button>
       </div>
diff --git a/src/components/Users.js b/src/components/Users.js
index 79bfbef..0889c55 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,17 @@ class Users extends React.Component {
     firstNameFilter:""
   }
 
+  componentDidMount(){
+    let users = store.getState().users;
+    this.setState({users:users})
+    store.subscribe(()=>{
+      let users = store.getState().users
+      let searchText = store.getState().searchText
+      let currentUserSort = store.getState().currentUserSort
+      this.setState({users:users, sortOn:currentUserSort, firstNameFilter:searchText})
+    })
+  }
+
   render() {
     let {users,sortOn,firstNameFilter} = this.state;
     var usersDivs = null;
diff --git a/src/components/VideoPlayer.js b/src/components/VideoPlayer.js
index f4fc08b..6002086 100644
--- a/src/components/VideoPlayer.js
+++ b/src/components/VideoPlayer.js
@@ -1,18 +1,23 @@
 import React from 'react';
+import store from "../store";
 
 class VideoPlayer extends React.Component {
   state={scale:0,URL:""}
 
-  render() {
-    const {
-      props,
-    } = this;
+  componentDidMount(){
+    store.subscribe(()=>{
+      const videoURL = store.getState().videoURL;
+      const videoScale = store.getState().videoScale;
+      this.setState({URL:videoURL,scale:videoScale});
+    });
+  }
 
+  render() {
     let width = 200;
     let height = 200;
     if(this.state.scale){
-      width = 200 * props.scale;
-      height = 200 * props.scale;
+      width = 200 * this.state.scale;
+      height = 200 * this.state.scale;
     }
     return (
         <div><iframe title="YouTube video player"  type="text/html" 
diff --git a/src/components/VideoTextBox.js b/src/components/VideoTextBox.js
index 62cb230..6b00b75 100644
--- a/src/components/VideoTextBox.js
+++ b/src/components/VideoTextBox.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import store from "../store";
 
 function VideoTextBox(props) {
   return (
@@ -6,7 +7,7 @@ function VideoTextBox(props) {
         Enter URL of YouTube video
         <input 
       onChange={(e)=>{
-       
+        store.dispatch({type:"SET_VIDEO_URL",value:e.target.value});
       }}
       type="text" />
 
diff --git a/src/reducers/index.js b/src/reducers/index.js
index e4e85c8..14d99af 100644
--- a/src/reducers/index.js
+++ b/src/reducers/index.js
@@ -1,21 +1,22 @@
 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;
 }
@@ -27,9 +28,65 @@ 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 = "first_name", 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