Christopher "Fido ain't go nothing on my fetches" Willis

README.md

@@ -175,6 +175,4 @@ There is no new special thing we have to do. We have all the knowledge we need t
 * We should know how to make a fetch call by now. Where does the fetch call go? 
 * What do you do with the data when the fetch call is complete? Not setState.
 * Is there an action message that could represent that the redux store needs to be updated with the list of users you just fetched from the api.
-* Does any reducer need to be aware of this message?
-
-
+* Does any reducer need to be aware of this message?

src/App.js

@@ -1,23 +1,38 @@
 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 CounterButton from "./containers/CounterButtonContainer";
+import SpecialTextBox from "./containers/SpecialTextBoxContainer";
+import Counter from "./containers/CounterTextContainer";
+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() {
+const loadUser = (url,callback) =>{
+  fetch(url)
+  .then(function(response) {
+    return response.json();
+  })
+  .then(function(myJson) {
+    myJson.forEach(user => {
+      callback(user)
+    })
+  });
+
+}
+
+
+function App(props) {
+  loadUser(props.url,props.loadData)
   return (
       <div className="App">
         <div className="container">

src/actions/index.js

@@ -4,6 +4,12 @@ export function increaseCounter(){
   }
 }
 
+export function decreaseCounter(){
+  return {
+    type:"DECREASE_COUNTER"
+  }
+}
+
 export function setSpecialText(txt){
   return {
     type:"SET_SPECIAL_TEXT",
@@ -21,4 +27,51 @@ export function removeUser(){
   return {
     type:"REMOVE_USER"
   }
+}
+
+export const currentCity  = (city)=>{
+  return {
+    type:"SET_CURRENT_CITY",
+    value:city
+  }
+}
+
+export const setTemp = (temp) =>{
+  return {
+    type:"SET_TEMP",
+    value:temp
+  }
+}
+
+export const setSearchText = (text) =>{
+  return {
+    type:"SET_SEARCH_TEXT",
+    value:text
+  }
+}
+
+export const setIsLoading =(isLoading)=>{
+  return{ 
+    type : "SET_IS_LOADING",
+    value : isLoading
+  }
+}
+
+export const setVideoURL= (URL)=>{
+  return {
+    type : "SET_VIDEO_URL",
+    value : URL
+  }
+}
+export const setCurrentUserSort=(sort)=>{
+  return{  
+    type : "SET_CURRENT_USER_SORT",
+    value : sort
+  }
+}
+export const setVideoScale = (scale)=>{
+  return{  
+    type : "SET_VIDEO_SCALE",
+    value : scale
+  }
 }

src/components/CityDropDown.js

@@ -1,10 +1,13 @@
 import React from 'react';
 
+
+
 function CityDropDown(props) {
+  props.set("Austin")
   return (
       <div>
         CurrentCity: 
-        <select onChange={
+        <select id={"CityView"} onChange={
           (e)=>{
             if(props.set){
               props.set(e.target.value);

src/components/SpecialTextBox.js

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

src/components/UserButtons.js

@@ -8,8 +8,7 @@ function UserButtons(props) {
             if(props.add){
               props.add({
                 "id": 1,
-                "first_name": "george",
-                "last_name": "bluth",
+                "name": "george bluth",
                 "address": "4116 Magnolia Drive, Portland, ME 04103",
                 "phone": 15551234567,
                 "occupation": "father",

src/components/Users.js

@@ -11,8 +11,8 @@ function Users(props) {
       (props.firstNameFilter && 
       u.name.indexOf(props.firstNameFilter) > -1);
     })
-    usersDivs = usersDivs.map(function(u){
-      return <div>{u.name}</div>
+    usersDivs = usersDivs.map(function(u,index){
+      return <div key={index}>{u.name}</div>
     })
   }
   return (

src/containers/AppContainer.js

@@ -0,0 +1,18 @@
+import App from "../App.js"
+import { connect } from 'react-redux';
+import {addUser} from "../actions"
+
+
+const mapDispatchToProps = {
+  loadData:addUser,
+}
+
+function mapStateToProps(state){
+  return {
+    url:"https://jsonplaceholder.typicode.com/users"
+  }
+}
+
+
+export default connect(mapStateToProps,mapDispatchToProps)(App);
+

src/containers/ChangeTemperatureContainer.js

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

src/containers/CityDropDownContainer.js

@@ -0,0 +1,10 @@
+import { connect } from 'react-redux';
+import CityDropDown from "../components/CityDropDown";
+import {currentCity} from "../actions/index"
+
+//map a prop called text to the state specialText
+const mapDispatchToProps = {
+    set: currentCity
+}
+
+export default connect(null,mapDispatchToProps)(CityDropDown);

src/containers/CounterButtonContainer.js

@@ -0,0 +1,11 @@
+import { connect } from 'react-redux';
+import CounterButtons from "../components/CounterButton";
+import {increaseCounter,decreaseCounter} from "../actions/index"
+
+//map a prop called text to the state specialText
+const mapDispatchToProps = {
+    increase: increaseCounter,
+    decrease: decreaseCounter
+}
+
+export default connect(null,mapDispatchToProps)(CounterButtons);

src/containers/CounterTextContainer.js

@@ -0,0 +1,11 @@
+import { connect } from 'react-redux';
+import Counter from "../components/Counter";
+
+//map a prop called text to the state specialText
+function mapStateToProps(state){
+  return {
+    count: state.currentCount
+  }
+}
+
+export default connect(mapStateToProps)(Counter);

src/containers/CurrentCityContainer.js

@@ -0,0 +1,11 @@
+import { connect } from 'react-redux';
+import CurrentCity from "../components/CurrentCity";
+
+//map a prop called text to the state specialText
+function mapStateToProps(state){
+  return {
+    text: state.currentCity
+  }
+}
+
+export default connect(mapStateToProps)(CurrentCity);

src/containers/ModalContainer.js

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

src/containers/ScaleVideoContainer.js

@@ -0,0 +1,11 @@
+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,11 @@
+import { connect } from 'react-redux';
+import {setSearchText} from "../actions";
+import SearchTextBox from "../components/SearchTextBox";
+
+
+const mapDispatchToProps = {
+   set:setSearchText,
+  }
+
+
+export default connect(null,mapDispatchToProps)(SearchTextBox);

src/containers/ShowModalContainer.js

@@ -0,0 +1,11 @@
+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 SortUsers from "../components/SortUsers";
+import {setCurrentUserSort} from "../actions/index"
+
+const mapDispatchToProps = {
+    set:setCurrentUserSort
+}
+
+export default connect(null,mapDispatchToProps)(SortUsers);

src/containers/SpecialTextBoxContainer.js

@@ -4,7 +4,7 @@ import SpecialTextBox from "../components/SpecialTextBox";
 
 
 const mapDispatchToProps = {
-   set:setSpecialText
+   set:setSpecialText,
   }
 
 

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,13 @@
+import { connect } from 'react-redux';
+import Thermostat from "../components/Thermostat";
+
+//map a prop called text to the state specialText
+
+
+function mapStateToProps(state){
+  return {
+    temp: state.currentTemp
+  }
+}
+
+export default connect(mapStateToProps)(Thermostat);

src/containers/UserButtonsContainer.js

@@ -0,0 +1,10 @@
+import { connect } from 'react-redux';
+import UserButton from "../components/UserButtons";
+import {addUser,removeUser} from "../actions"
+
+//map a prop called text to the state specialText
+const mapDispatchToProps={
+    add:addUser,remove:removeUser
+}
+
+export default connect(null,mapDispatchToProps)(UserButton);

src/containers/UsersContainer.js

@@ -0,0 +1,13 @@
+import { connect } from 'react-redux';
+import Users from "../components/Users";
+
+//map a prop called text to the state specialText
+function mapStateToProps(state){
+  return {
+    users: state.users,
+    firstNameFilter:state.searchText,
+    sortOn:state.currentUserSort
+  }
+}
+
+export default connect(mapStateToProps)(Users);