Darwin

README.md

@@ -5,9 +5,6 @@ Fork, clone, npm i, npm start
 ### Intro
 View this video to see how the app should work once you are done coding. [Video](https://youtu.be/R8VFic_ZZUc). This project is to practice using redux actions to control data that is changed through user interactions. On the left hand side of the page is a collection of different inputs that are available on a web page. When the user interacts with the input it will change some data that should update the right hand side of the page. All you need to do is code the redux containers such that it will connect redux actions and data to the components. You do not need to alter the existing components themselves. There is nothing out of the ordinary that needs to be done here so if you do not undersand the instruction exactly, try to relate it to how you already know what to do with redux.
 
-
-
-
 ###  Reducers
   * Create Reducers in reducers/index.js
   * Look at state.js and create a reducer for each piece of state

src/App.js

@@ -1,16 +1,16 @@
 import React from 'react';
-import CounterButton from "./components/CounterButton";
-import SpecialTextBox from "./components/SpecialTextBox";
-import Counter from "./components/Counter";
-import SpecialText from "./components/SpecialText";
+import CounterButton from "./containers/CounterButtonContainer";
+import SpecialTextBox from "./containers/SpecialTextBoxContainer";
+import Counter from "./containers/CounterContainer";
+import SpecialText from "./containers/SpecialTextContainer";
 import UserButtons from "./components/UserButtons";
-import Thermostat from "./components/Thermostat";
-import Users from "./components/Users";
-import ChangeTemperature from "./components/ChangeTemperature";
+import Thermostat from "./containers/ThermostatContainer";
+import Users from "./containers/UsersContainer";
+import ChangeTemperature from "./containers/ChangeTemperatureContainer";
 import VideoPlayer from "./components/VideoPlayer";
 import VideoTextBox from "./components/VideoTextBox";
-import CurrentCity from "./components/CurrentCity";
-import CityDropDown from "./components/CityDropDown";
+import CurrentCity from "./containers/CurrentCityContainer";
+import CityDropDown from "./containers/CityDropDownContainer";
 import SearchTextBox from "./components/SearchTextBox";
 import SortUsers from "./components/SortUsers";
 import ScaleVideo from "./components/ScaleVideo";

src/actions/index.js

@@ -4,13 +4,33 @@ export function increaseCounter(){
   }
 }
 
+export function decreaseCounter(){
+  return {
+    type:"DECREASE_COUNTER"
+  }
+}
+
 export function setSpecialText(txt){
   return {
     type:"SET_SPECIAL_TEXT",
     value:txt
   }
 }
 
+export function setCurrentCity(city){
+  return {
+    type: "SET_CURRENT_CITY",
+    value:city
+  }
+}
+
+export function setTemp(temp){
+  return {
+    type:"SET_TEMP",
+    value: temp
+  }
+}
+
 export function addUser(user){
   return {
     type:"ADD_USER",
@@ -19,6 +39,6 @@ export function addUser(user){
 }
 export function removeUser(){
   return {
-    type:"REMOVE_USER"
+    type:"REMOVE_USER",
   }
 }

src/components/CounterButton.js

@@ -20,4 +20,5 @@ function CounterButton(props) {
       </div>
   );
 }
+
 export default CounterButton;

src/components/SpecialTextBox.js

@@ -1,6 +1,4 @@
 import React from 'react';
-import {connect} from "react-redux";
-import {setSpecialText} from "../actions";
 
 function SpecialTextBox(props) {
   return (
@@ -15,12 +13,4 @@ function SpecialTextBox(props) {
   );
 }
 
-function mapDispatchToProps(dispatch){
-  return {
-    set:function(txt){
-      let action = setSpecialText(txt)
-      dispatch(action);
-    }
-  }
-}
-export default (SpecialTextBox);
+export default SpecialTextBox;

src/components/Thermostat.js

@@ -2,7 +2,7 @@ import React from "react";
 import DonutChart from "./ignore/DonutChart";
 
 function Thermostat(props){
-  return (<DonutChart value={props.temp || 23 } />)
+  return (<DonutChart value={props.temp} />)
 }
 
 export default Thermostat;

src/containers/ChangeTemperatureContainer.js

@@ -0,0 +1,9 @@
+import {connect} from 'react-redux';
+import {setTemp} from "../actions";
+import ChangeTemperature from '../components/ChangeTemperature';
+
+const mapDispatchToProps = {
+    set:setTemp
+}
+
+export default connect(null,mapDispatchToProps)(ChangeTemperature);

src/containers/CityDropDownContainer.js

@@ -0,0 +1,9 @@
+import {connect} from 'react-redux';
+import {setCurrentCity} from "../actions";
+import CityDropDown from '../components/CityDropDown';
+
+const mapDispatchToProps = {
+    set:setCurrentCity
+}
+
+export default connect(null,mapDispatchToProps)(CityDropDown);

src/containers/CounterButtonContainer.js

@@ -0,0 +1,9 @@
+import {connect} from 'react-redux';
+import {decreaseCounter, increaseCounter} from "../actions";
+import CounterButton from '../components/CounterButton';
+
+const mapDispatchToProps = {
+    increase:increaseCounter, decrease:decreaseCounter
+}
+
+export default connect(null,mapDispatchToProps)(CounterButton);

src/containers/CounterContainer.js

@@ -0,0 +1,10 @@
+import { connect } from 'react-redux';
+import Counter from "../components/Counter";
+
+function mapStateToProps (state){
+   return {
+     count:state.currentCount
+   }
+  }
+
+export default connect(mapStateToProps)(Counter);