David Bobb

src/App.js

@@ -1,24 +1,34 @@
-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 UserButtons from "./components/UserButtons";
-import Thermostat from "./components/Thermostat";
-import Users from "./components/Users";
-import ChangeTemperature from "./components/ChangeTemperature";
-import VideoPlayer from "./components/VideoPlayer";
-import VideoTextBox from "./components/VideoTextBox";
-import CurrentCity from "./components/CurrentCity";
-import CityDropDown from "./components/CityDropDown";
-import SearchTextBox from "./components/SearchTextBox";
-import SortUsers from "./components/SortUsers";
-import ScaleVideo from "./components/ScaleVideo";
-import Modal from "./components/Modal";
-import ShowModal from "./components/ShowModal";
+import React from 'react'
+import CounterButton from "./containers/CounterButtonContainer";
+import SpecialTextBox from "./containers/SpecialTextBoxContainer";
+import Counter from "./containers/CounterContainer";
+import SpecialText from "./containers/SpecialTextContainer";
+import UserButtons from "./containers/UserButtonsContainer";
+import Thermostat from "./containers/ThermostatContainer";
+import Users from "./containers/UsersContainer";
+import ChangeTemperature from "./containers/ChangeTemperatureContainer";
+import VideoPlayer from "./containers/VideoPlayerContainer";
+import VideoTextBox from "./containers/VideoTextBoxContainer";
+import CurrentCity from "./containers/CurrentCityContainer";
+import CityDropDown from "./containers/CityDropDownContainer";
+import SearchTextBox from "./containers/SearchTextBoxContainer";
+import SortUsers from "./containers/SortUsersContainer";
+import ScaleVideo from "./containers/ScaleVideoContainer";
+import Modal from "./containers/ModalContainer";
+import ShowModal from "./containers/ShowModalContainer";
 
-function App() {
-  return (
+class App extends React.Component {
+
+
+  componentDidMount() {
+    fetch('https://jsonplaceholder.typicode.com/users') 
+      .then(res => res.json())
+      .then(data => {this.props.set(data)})
+        .catch(err => console.log(`Error: ${err}`))
+  }
+
+  render() {
+    return (
       <div className="App">
         <div className="container">
           <CounterButton />
@@ -28,7 +38,7 @@ function App() {
           <UserButtons />
           <br />
           <CityDropDown />
-           <br />
+          <br />
           <ChangeTemperature />
           <br />
           <SearchTextBox />
@@ -52,14 +62,13 @@ function App() {
           <br />
           <VideoPlayer />
           <br />
-
-
         </div>
         <div className="container">
           <Users />
         </div>
         <Modal />
       </div>
-  );
+    );
+  }
 }
 export default App;

src/actions/index.js

@@ -1,24 +1,100 @@
+export const INCREASE_COUNTER = "INCREASE_COUNTER";
+export const LOAD_USERS = "LOAD_USERS";
+export const DECREASE_COUNTER = "DECREASE_COUNTER"
+export const SET_SPECIAL_TEXT= "SET_SPECIAL_TEXT"
+export const ADD_USER = "ADD_USER"
+export const REMOVE_USER = "REMOVE_USER"
+export const SET_SEARCH_TEXT = "SET_SEARCH_TEXT"
+export const SET_IS_LOADING = "SET_IS_LOADING"
+export const SET_TEMP = "SET_TEMP"
+export const SET_CURRENT_CITY = "SET_CURRENT_CITY"
+export const SET_VIDEO_URL = "SET_VIDEO_URL"
+export const SET_CURRENT_USER_SORT = "SET_CURRENT_USER_SORT"
+export const SET_VIDEO_SCALE = "SET_VIDEO_SCALE"
+
 export function increaseCounter(){
   return {
-    type:"INCREASE_COUNTER"
+    type: INCREASE_COUNTER
+  }
+}
+
+export function loadUsers(users) {
+  return {
+    type: LOAD_USERS,
+    value: users
   }
 }
 
-export function setSpecialText(txt){
+export function decreaseCounter(){
   return {
-    type:"SET_SPECIAL_TEXT",
-    value:txt
+    type:DECREASE_COUNTER
+  }
+}
+
+export function setSpecialText(text){
+  return {
+    type:SET_SPECIAL_TEXT,
+    value:text
   }
 }
 
 export function addUser(user){
   return {
-    type:"ADD_USER",
+    type:ADD_USER,
     value:user
   }
 }
 export function removeUser(){
   return {
-    type:"REMOVE_USER"
+    type:REMOVE_USER
+  }
+}
+
+export function setSearchText(text){
+  return {
+    type: SET_SEARCH_TEXT,
+    value: text
+  }
+}
+
+export function setIsLoading(isLoading) {
+  return {
+    type:  SET_IS_LOADING,
+    value: isLoading
+  }
+}
+
+export function setTemp(temp) {
+  return {
+    type: SET_TEMP,
+    value: temp
+  }
+}
+
+export function setCurrentCity(city) {
+  return {
+    type: SET_CURRENT_CITY,
+    value: city
+  }
+}
+
+export function setVideoURL(URL) {
+  return {
+    type: SET_VIDEO_URL,
+    value: URL
   }
-}
+}
+
+export function setCurrentUserSort(sort) {
+  return {
+    type: SET_CURRENT_USER_SORT,
+    value: sort
+  }
+}
+
+export function setVideoScale(scale) {
+  return {
+    type: SET_VIDEO_SCALE,
+    value: scale
+  }
+}

src/components/Counter.js

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

src/components/CounterButton.js

@@ -12,12 +12,13 @@ function CounterButton(props) {
         }>Increase Counter By One</button>
         <button onClick={
           ()=>{
-            if(props.increase){
+            if(props.decrease){
               props.decrease();
             }
           }
         }>Decrease Counter By One</button>
       </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,4 +13,4 @@ function SpecialTextBox(props) {
   );
 }
 
-export default (SpecialTextBox);
+export default SpecialTextBox;

src/components/Users.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-function Users(props) {
+export default function Users(props) {
   var usersDivs = null;
   if(props.users){
     var sorted = props.users.sort((a,b) => {
@@ -22,4 +22,3 @@ function Users(props) {
       </div>
   );
 }
-export default Users;

src/containers/AppContainer.js

@@ -0,0 +1,10 @@
+import App from '../App';
+import {connect} from 'react-redux';
+import {loadUsers} from '../actions';
+
+const mapDispatchToProps = {
+    set: loadUsers
+}
+
+export default connect(null, mapDispatchToProps)(App)
+

src/containers/ChangeTemperatureContainer.js

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

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,10 @@
+import {connect} from 'react-redux';
+import {increaseCounter, decreaseCounter} 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 Counter from '../components/Counter';
+import {connect} from 'react-redux';
+
+const mapStateToProps = (state) => {
+    return {
+        count: state.currentCount
+    }
+}
+
+export default connect(mapStateToProps)(Counter)

src/containers/CurrentCityContainer.js

@@ -0,0 +1,10 @@
+import CurrentCity from '../components/CurrentCity';
+import {connect} from 'react-redux';
+
+const mapStateToProps = (state) => {
+    return {
+        text: state.currentCity
+    }
+}
+
+export default connect(mapStateToProps)(CurrentCity)

src/containers/ModalContainer.js

@@ -0,0 +1,15 @@
+import Modal from '../components/Modal';
+import {connect} from 'react-redux';
+import {setIsLoading} from '../actions';
+
+const mapStateToProps = (state) => {
+    return {
+        isLoading: state.isLoading
+    }
+}
+
+const mapDispatchToProps = {
+    setIsLoading: setIsLoading
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(Modal)

src/containers/ScaleVideoContainer.js

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

src/containers/SearchTextBoxContainer.js

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

src/containers/ShowModalContainer.js

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

src/containers/SortUsersContainer.js

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

src/containers/SpecialTextBoxContainer.js

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

src/containers/SpecialTextContainer.js

@@ -1,5 +1,4 @@
 import { connect } from 'react-redux';
-import {setCurrentUser} from "../actions";
 import SpecialText from "../components/SpecialText";
 
 //map a prop called text to the state specialText

src/containers/ThermostatContainer.js

@@ -0,0 +1,10 @@
+import Thermostat from '../components/Thermostat';
+import {connect} from 'react-redux';
+
+const mapStateToProps = (state) => {
+    return {
+        temp: state.currentTemp
+    }
+}
+
+export default connect(mapStateToProps)(Thermostat)