Aaron Altounian

src/components/ChangeTemperature.js

@@ -1,12 +1,18 @@
 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)=>{
-
+            let value = e.target.value;
+            let message = {
+              type: 'SET_TEMP',
+              value: value
+            }
+            store.dispatch(message);
           }} type="number" min="0" max="100" />
         </label>
       </div>

src/components/CityDropDown.js

@@ -1,12 +1,18 @@
 import React from 'react';
+import store from '../store';
 
 function CityDropDown(props) {
   return (
       <div>
         CurrentCity: 
         <select onChange={
           (e)=>{
-
+            let value = e.target.value;
+            let message = {
+              type: 'SET_CURRENT_CITY',
+              value: value
+            }
+            store.dispatch(message)
           }
         }>
           <option value="Austin">Austin</option>

src/components/Counter.js

@@ -1,8 +1,17 @@
 import React from 'react';
+import store from '../store';
 
 class Counter extends React.Component {
 
   state={count:0}
+
+  componentDidMount() {
+    store.subscribe(() => {
+      let count = store.getState().currentCount;
+      this.setState({count})
+    })
+  }
+
   render() {
     const {
       props,

src/components/CounterButton.js

@@ -1,16 +1,23 @@
 import React from 'react';
+import store from '../store';
 
 function CounterButton(props) {
   return (
       <div>
         <button onClick={
           ()=>{
-
+            let message = {
+              type: 'INCREASE_COUNTER'
+            };
+            store.dispatch(message);
           }
         }>Increase Counter By One</button>
         <button onClick={
           ()=>{
-
+            let message = {
+              type: 'DECREASE_COUNTER'
+            }
+            store.dispatch(message);
           }
         }>Decrease Counter By One</button>
       </div>

src/components/CurrentCity.js

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

src/components/Modal.js

@@ -1,24 +1,38 @@
 import React from 'react';
 import Modal from 'react-modal';
+import store from '../store';
 
 class LoadingModal extends React.Component {
   state={
     isLoading:false
   }
+
+  componentDidMount() {
+    store.subscribe(() => {
+      console.log(store.getState().isLoading);
+      let isLoading = store.getState().isLoading;
+      this.setState({isLoading: isLoading});
+    })
+  }
+
   render() {
     const {
       props,
     } = this;
 
     return (
       <Modal
-        isOpen={props.isLoading}
+        isOpen={this.state.isLoading}
         style={customStyles}
         contentLabel="Example Modal"
       >
         <button onClick={
           ()=>{
-
+            let message = {
+              type: 'SET_IS_LOADING',
+              value: false
+            }
+            store.dispatch(message)
           }
           }>close</button>
         <div>Loading .......</div>

src/components/ShowModal.js

@@ -1,11 +1,18 @@
 import React from 'react';
+import store from '../store';
+import state from '../state';
 
 function ShowModal(props) {
+
   return (
       <div>
         <button onClick={
           ()=>{
-
+            let message = {
+              type: 'SET_IS_LOADING',
+              value: true
+            }
+            store.dispatch(message);  
           }
         }>Show Modal</button>