redux-practice

package.json

@@ -22,5 +22,17 @@
     "not dead",
     "not ie <= 11",
     "not op_mini all"
-  ]
+  ],
+  "description": "Fork, clone, npm i, npm start",
+  "main": "index.js",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/anniebaker/redux-practice.git"
+  },
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/anniebaker/redux-practice/issues"
+  },
+  "homepage": "https://github.com/anniebaker/redux-practice#readme"
 }

src/components/ChangeTemperature.js

@@ -1,16 +1,16 @@
 import React from "react";
 
-function ChangeTemperature(props){
-    return(
-      <div>
-        <br/>
-        <label>Change Temp -  Enter a value from 1-100<br/>
-          <input onChange={(e)=>{
-           
-          }} type="number" min="0" max="100" />
-        </label>
-      </div>
-    )
+function ChangeTemperature(props) {
+  return (
+    <div>
+      <br />
+      <label>Change Temp -  Enter a value from 1-100<br />
+        <input onChange={(e) => {
+          StorageEvent.dispatch({ type: "SET_TEMP", value: e.target.value })
+        }} type="number" min="0" max="100" />
+      </label>
+    </div>
+  )
 }
 
 export default ChangeTemperature;

src/components/CityDropDown.js

@@ -2,22 +2,22 @@ import React from 'react';
 
 function CityDropDown(props) {
   return (
-      <div>
-        CurrentCity: 
+    <div>
+      CurrentCity:
         <select onChange={
-          (e)=>{
-           
-          }
-        }>
-          <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="Washington D.C.">Washington D.C.</option>
-        </select>
-      </div>
+        (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="Washington D.C.">Washington D.C.</option>
+      </select>
+    </div>
   );
 }
 export default CityDropDown;

src/components/Counter.js

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

src/components/CounterButton.js

@@ -2,18 +2,19 @@ import React from 'react';
 
 function CounterButton(props) {
   return (
-      <div>
-        <button onClick={
-          ()=>{
-
-          }
-        }>Increase Counter By One</button>
-        <button onClick={
-          ()=>{
-
-          }
-        }>Decrease Counter By One</button>
-      </div>
+    <div>
+      <button onClick={
+        () => {
+          store.dispatch({ type: "INCREMENT" })
+        }
+      }>Increase Counter By One</button>
+      <button onClick={
+        () => {
+          store.dispatch({ type: "DECREMENT" })
+
+        }
+      }>Decrease Counter By One</button>
+    </div>
   );
 }
 export default CounterButton;

src/components/CurrentCity.js

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

src/components/Modal.js

@@ -2,25 +2,27 @@ import React from 'react';
 import Modal from 'react-modal';
 
 class LoadingModal extends React.Component {
-  state={
-    isLoading:false
+  state = {
+    isLoading: false
+  }
+  componentDidMount() {
+    store.subscribe(() => {
+      let isLoading = store.getState().isLoading;
+      this.setState({ isLoading: isLoading });
+    })
   }
   render() {
-    const {
-      props,
-    } = this;
-
     return (
       <Modal
         isOpen={props.isLoading}
         style={customStyles}
         contentLabel="Example Modal"
       >
         <button onClick={
-          ()=>{
-
+          () => {
+            store.dispatch({ type: "SET_IS_LOADING", value: false })
           }
-          }>close</button>
+        }>close</button>
         <div>Loading .......</div>
 
       </Modal>
@@ -41,12 +43,12 @@ 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%)'
   }
 };

src/components/ScaleVideo.js

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

src/components/SearchTextBox.js

@@ -2,12 +2,12 @@ import React from 'react';
 
 function SearchTextBox(props) {
   return (
-      <div>
-        Search Users on First Name:
-        <input onChange={(e)=>{
-           
-        }} />
-      </div>
+    <div>
+      Search Users on First Name:
+        <input onChange={(e) => {
+        StorageEvent.dispatch({ type: "SET_SEARCH_TEXT", value: e.target.value })
+      }} />
+    </div>
   );
 }
 

src/components/ShowModal.js

@@ -2,14 +2,14 @@ import React from 'react';
 
 function ShowModal(props) {
   return (
-      <div>
-        <button onClick={
-          ()=>{
-            
-          }
-        }>Show Modal</button>
+    <div>
+      <button onClick={
+        () => {
+          store.dispatch({ type: "SET_IS_LOADING", value: true })
+        }
+      }>Show Modal</button>
 
-      </div>
+    </div>
   );
 }
 export default ShowModal;

src/components/SortUsers.js

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

src/components/SpecialText.js

@@ -1,16 +1,18 @@
 import React from 'react';
 
 class SpecialText extends React.Component {
-  state={text:""}
+  state = { text: "" }
+  componentDidMount() {
+    store.subscribe(() => {
+      let specialText = store.getState().specialText;
+      this.setState({ text: specialText })
+    })
+  }
   render() {
-    const {
-      props,
-    } = this;
-
     return (
-        <div>
-          Special Text: {this.state.text}
-        </div>
+      <div>
+        Special Text: {this.state.text || "Message"}
+      </div>
     );
   }
 }

src/components/SpecialTextBox.js

@@ -3,12 +3,12 @@ import React from 'react';
 
 function SpecialTextBox(props) {
   return (
-      <div>
-        Enter Special Text:
-        <input onChange={(e)=>{
-            
-        }} />
-      </div>
+    <div>
+      Enter Special Text:
+        <input onChange={(e) => {
+        store.dispatch({ type: "SET_SPECIAL_TEXT", value: e.target.value })
+      }} />
+    </div>
   );
 }