Abby Gottlich

src/App.js

@@ -1,65 +1,65 @@
 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 CounterButtonContainer from "./containers/CounterButtonContainer";
+import SpecialTextBox from "./containers/SpecialTextBoxContainer";
+import CounterContainer 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 (
-      <div className="App">
-        <div className="container">
-          <CounterButton />
-          <br />
-          <SpecialTextBox />
-          <br />
-          <UserButtons />
-          <br />
-          <CityDropDown />
-           <br />
-          <ChangeTemperature />
-          <br />
-          <SearchTextBox />
-          <br />
-          <VideoTextBox />
-          <br />
-          <SortUsers />
-          <br />
-          <ScaleVideo />
-          <br />
-          <ShowModal />
-        </div>
-        <div className="container">
-          <Counter />
-          <br />
-          <SpecialText />
-          <br />
-          <CurrentCity />
-          <br />
-          <Thermostat />
-          <br />
-          <VideoPlayer />
-          <br />
-
-
-        </div>
-        <div className="container">
-          <Users />
-        </div>
-        <Modal />
+    <div className="App">
+      <div className="container">
+        <CounterButtonContainer />
+        <br />
+        <SpecialTextBox />
+        <br />
+        <UserButtons />
+        <br />
+        <CityDropDown />
+        <br />
+        <ChangeTemperature />
+        <br />
+        <SearchTextBox />
+        <br />
+        <VideoTextBox />
+        <br />
+        <SortUsers />
+        <br />
+        <ScaleVideo />
+        <br />
+        <ShowModal />
       </div>
+      <div className="container">
+        <CounterContainer />
+        <br />
+        <SpecialText />
+        <br />
+        <CurrentCity />
+        <br />
+        <Thermostat />
+        <br />
+        <VideoPlayer />
+        <br />
+
+
+      </div>
+      <div className="container">
+        <Users />
+      </div>
+      <Modal />
+    </div>
   );
 }
 export default App;

src/actions/index.js

@@ -1,24 +1,80 @@
-export function increaseCounter(){
+export function increaseCounter() {
   return {
-    type:"INCREASE_COUNTER"
+    type: "INCREASE_COUNTER"
   }
 }
 
-export function setSpecialText(txt){
+export function decreaseCounter() {
   return {
-    type:"SET_SPECIAL_TEXT",
-    value:txt
+    type: "DECREASE_COUNTER"
   }
 }
 
-export function addUser(user){
+export function setSpecialText(txt) {
   return {
-    type:"ADD_USER",
-    value:user
+    type: "SET_SPECIAL_TEXT",
+    value: txt
   }
 }
-export function removeUser(){
+
+export function add(user) {
+  return {
+    type: "ADD_USER",
+    value: user
+  }
+}
+
+export function removeUser() {
+  return {
+    type: "REMOVE_USER"
+  }
+}
+
+export function setCurrentCity(city) {
+  return {
+    type: "SET_CURRENT_CITY",
+    value: city
+  }
+}
+
+export function setSearchText(txt) {
+  return {
+    type: "SET_SEARCH_TEXT",
+    value: txt
+  }
+}
+
+export function setTemp(temp) {
+  return {
+    type: "SET_TEMP",
+    value: temp
+  }
+}
+
+export function setIsLoading(isLoading) {
+  return {
+    type: "SET_IS_LOADING",
+    value: isLoading
+  }
+}
+
+export function setVideoURL(txt) {
+  return {
+    type: "SET_VIDEO_URL",
+    value: txt
+  }
+}
+
+export function setCurrentUserSort(sort) {
+  return {
+    type: "SET_CURRENT_USER_SORT",
+    value: sort
+  }
+}
+
+export function setVideoScale(num) {
   return {
-    type:"REMOVE_USER"
+    type: "SET_VIDEO_SCALE",
+    value: num
   }
 }

src/components/CityDropDown.js

@@ -2,24 +2,24 @@ import React from 'react';
 
 function CityDropDown(props) {
   return (
-      <div>
-        CurrentCity: 
+    <div>
+      CurrentCity:
         <select onChange={
-          (e)=>{
-            if(props.set){
-              props.set(e.target.value);
-            }
+        (e) => {
+          if (props.set) {
+            props.set(e.target.value);
           }
-        }>
-          <option value="Austin">Austin</option>
-          <option value="New York">New York</option>
-          <option value="New Olreans">New Olreans</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>
+        }
+      }>
+        <option value="Austin">Austin</option>
+        <option value="New York">New York</option>
+        <option value="New Olreans">New Olreans</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/SpecialTextBox.js

@@ -1,26 +1,14 @@
 import React from 'react';
-import {connect} from "react-redux";
-import {setSpecialText} from "../actions";
 
-function SpecialTextBox(props) {
+export default function SpecialTextBox(props) {
   return (
-      <div>
-        Enter Special Text:
-        <input onChange={(e)=>{
-            if(props.set){
-              props.set(e.target.value);
-            }
-        }} />
-      </div>
+    <div>
+      Enter Special Text:
+        <input onChange={(e) => {
+        if (props.set) {
+          props.set(e.target.value);
+        }
+      }} />
+    </div>
   );
 }
-
-function mapDispatchToProps(dispatch){
-  return {
-    set:function(txt){
-      let action = setSpecialText(txt)
-      dispatch(action);
-    }
-  }
-}
-export default (SpecialTextBox);

src/components/UserButtons.js

@@ -2,30 +2,29 @@ import React from 'react';
 
 function UserButtons(props) {
   return (
-      <div>
-        <button onClick={
-          ()=>{
-            if(props.add){
-              props.add({
-                "id": 1,
-                "first_name": "george",
-                "last_name": "bluth",
-                "address": "4116 Magnolia Drive, Portland, ME 04103",
-                "phone": 15551234567,
-                "occupation": "father",
-                "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/calebogden/128.jpg"
-              });
-            }
+    <div>
+      <button onClick={
+        () => {
+          if (props.add) {
+            props.add({
+              "id": 1,
+              "name": "george bluth",
+              "address": "4116 Magnolia Drive, Portland, ME 04103",
+              "phone": 15551234567,
+              "occupation": "father",
+              "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/calebogden/128.jpg"
+            });
           }
-        }>Add User</button>
-        <button onClick={
-          ()=>{
-            if(props.remove){
-              props.remove()
-            }
+        }
+      }>Add User</button>
+      <button onClick={
+        () => {
+          if (props.remove) {
+            props.remove()
           }
-        }>Remove User</button>
-      </div>
+        }
+      }>Remove User</button>
+    </div>
   );
 }
 export default UserButtons;

src/components/Users.js

@@ -2,24 +2,24 @@ import React from 'react';
 
 function Users(props) {
   var usersDivs = null;
-  if(props.users){
-    var sorted = props.users.sort((a,b) => {
+  if (props.users) {
+    var sorted = props.users.sort((a, b) => {
       return a[props.sortOn] > b[props.sortOn];
     });
-    usersDivs = sorted.filter(function(u){
-      return !props.firstNameFilter || 
-      (props.firstNameFilter && 
-      u.name.indexOf(props.firstNameFilter) > -1);
+    usersDivs = sorted.filter(function (u) {
+      return !props.firstNameFilter ||
+        (props.firstNameFilter &&
+          u.first_name.indexOf(props.firstNameFilter) > -1);
     })
-    usersDivs = usersDivs.map(function(u){
-      return <div>{u.name}</div>
+    usersDivs = usersDivs.map(function (u) {
+      return <div>{u.first_name} {u.last_name}</div>
     })
   }
   return (
-      <div>
-        <h1>Users</h1>
-       {usersDivs}
-      </div>
+    <div>
+      <h1>Users</h1>
+      {usersDivs}
+    </div>
   );
 }
 export default Users;