CrisSmith

src/components/ChangeTemperature.js

@@ -1,12 +1,13 @@
 import React from "react";
+import store from '../store';
 
 function ChangeTemperature(props){
     return(
       <div>
         <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>

src/components/CityDropDown.js

@@ -1,20 +1,21 @@
 import React from 'react';
+import store from '../store';
 
 function CityDropDown(props) {
   return (
       <div>
         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="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>

src/components/Counter.js

@@ -1,19 +1,27 @@
 import React from 'react';
+import store from '../store'
 
 class Counter extends React.Component {
 
-  state={count:0}
-  render() {
-    const {
-      props,
-    } = this;
-
+  state = {
+    count:0
+  }
+  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}
         </div>
     );
   }
+
 }
 
 export default Counter;

src/components/CounterButton.js

@@ -1,16 +1,17 @@
 import React from 'react';
+import store from '../store'
 
 function CounterButton(props) {
   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>

src/components/CurrentCity.js

@@ -1,18 +1,24 @@
 import React from 'react';
+import store from '../store'
 
 class CurrentCity extends React.Component {
   state={
     text:""
   }
-
+  componentDidMount(){
+    this.setState({
+      text: store.getState().currentCity
+    });
+    store.subscribe(()=>{
+      this.setState({
+        text: store.getState().currentCity
+      })
+    })
+  }
   render() {
-    const {
-      props,
-    } = this;
-
     return (
         <div>
-          CurrentCity: {this.state.text}
+          CurrentCity: {this.state.text || "Austin"}
         </div>
     );
   }

src/components/Modal.js

@@ -1,24 +1,30 @@
 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(()=>{
+      this.setState({
+        isLoading: store.getState().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>

src/components/ScaleVideo.js

@@ -1,12 +1,13 @@
 import React from 'react';
+import store from '../store';
 
 function ScaleVideo(props) {
   return (
       <div>
         Scale Video: <input
         onChange={
           (e)=>{
-
+            store.dispatch({type:"SET_VIDEO_SCALE", value: e.target.value})
           }
         }
          type="range" min="1" max="10" step="1" />

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>
   );

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>
 

src/components/SortUsers.js

@@ -1,12 +1,13 @@
 import React from 'react';
+import store from '../store';
 
 function SortUsers(props) {
   return (
       <div>
         Sort Users On: 
         <select onChange={
           (e)=>{
-
+           store.dispatch({type:"SET_CURRENT_USER_SORT", value: e.target.value})
           }
         }>
           <option value="first_name">First Name</option>

src/components/SpecialText.js

@@ -1,12 +1,18 @@
 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}

src/components/SpecialTextBox.js

@@ -1,12 +1,13 @@
 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>
   );

src/components/Thermostat.js

@@ -1,14 +1,22 @@
 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(){
+    this.setState({
+      temp: store.getState().currentTemp
+    });
+    store.subscribe(()=>{
+      this.setState({
+        temp: store.getState().currentTemp
+      });
+    })
+  }
 
+  render() {
     return (<DonutChart value={this.state.temp || 23 } />)
   }
 }

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>

src/components/Users.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import store from '../store';
 
 class Users extends React.Component {
 
@@ -7,7 +8,36 @@ class Users extends React.Component {
     sortOn:"",
     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})
+    });
+  }
+
+/* WITH FETCH:
 
+  componentDidMount(){
+    this.setState({
+      users: store.getState().users
+      });
+    fetch("https://jsonplaceholder.typicode.com/users")
+    .then(res=>res.json())
+    .then(users=>this.setState({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;

src/components/VideoPlayer.js

@@ -1,18 +1,27 @@
 import React from 'react';
+import store from '../store';
 
 class VideoPlayer extends React.Component {
-  state={scale:0,URL:""}
+  state={
+    scale:0,
+    URL:""
+  }
 
-  render() {
-    const {
-      props,
-    } = this;
+  componentDidMount(){
+    store.subscribe(()=>{
+      this.setState({
+        scale: store.getState().videoScale,
+        URL: store.getState().videoURL
+      });
+    });
+  }
 
+  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" 

src/components/VideoTextBox.js

@@ -1,12 +1,13 @@
 import React from 'react';
+import store from '../store';
 
 function VideoTextBox(props) {
   return (
       <div>
         Enter URL of YouTube video
         <input 
       onChange={(e)=>{
-
+       store.dispatch({type:"SET_VIDEO_URL", value: e.target.value})
       }}
       type="text" />