David Bobb

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 (
       <div className="App">
         <div className="container">
           <CounterButton />
@@ -28,7 +40,7 @@ function App() {
           <UserButtons />
           <br />
           <CityDropDown />
-           <br />
+            <br />
           <ChangeTemperature />
           <br />
           <SearchTextBox />
@@ -60,6 +72,7 @@ function App() {
         </div>
         <Modal />
       </div>
-  );
+    );
+  }
 }
 export default App;

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

src/components/Counter.js

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

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

src/components/Modal.js

@@ -1,10 +1,18 @@
 import React from 'react';
 import Modal from 'react-modal';
+import store from '../store'
 
 class LoadingModal extends React.Component {
   state={
     isLoading:false
   }
+
+  componentDidMount() {
+    store.subscribe(()=> {
+      this.setState({isLoading: store.getState().isLoading})
+    });
+  }
+
   render() {
     const {
       props,
@@ -18,7 +26,7 @@ class LoadingModal extends React.Component {
       >
         <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,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,

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,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,

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", value:[]})
           }
         }>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 {
 
@@ -8,6 +9,15 @@ class Users extends React.Component {
     firstNameFilter:""
   }
 
+  componentDidMount() {
+    this.setState({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;
     var usersDivs = null;

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,

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" />