Laura Colten

src/App.js

@@ -1,21 +1,21 @@
 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/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 (
@@ -52,8 +52,8 @@ function App() {
           <br />
           <VideoPlayer />
           <br />
-          
-          
+
+
         </div>
         <div className="container">
           <Users />

src/actions/index.js

@@ -4,10 +4,16 @@ export function increaseCounter(){
   }
 }
 
-export function setSpecialText(txt){
+export function decreaseCounter(){
+  return {
+    type:"DECREASE_COUNTER"
+  }
+}
+
+export function setSpecialText(text){
   return {
     type:"SET_SPECIAL_TEXT",
-    value:txt
+    value:text
   }
 }
 
@@ -17,8 +23,59 @@ export function addUser(user){
     value:user
   }
 }
-export function removeUser(){
+export function removeUser(user){
+  return {
+    type:"REMOVE_USER",
+    value:user
+  }
+}
+
+export function setCurrentCity(city){
+  return {
+    type:"SET_CURRENT_CITY",
+    value:city
+  }
+}
+
+export function setSearchText(text){
   return {
-    type:"REMOVE_USER"
+    type:"SEARCH_TEXT",
+    value:text
   }
-}
+}
+
+export function setTemp(temp){
+  return {
+    type:"SET_CURRENT_TEMP",
+    value:temp
+  }
+}
+
+export function setIsLoading(isLoading){
+  return {
+    type:"IS_LOADING",
+    value:isLoading
+  }
+}
+
+export function setVideoURL(URL){
+  return {
+    type:"SET_VIDEO_URL",
+    value:URL
+  }
+}
+
+export function setCurrentUserSort(sort){
+  return {
+    type:"SET_CURRENT_USER",
+    value:sort
+  }
+}
+
+export function setVideoScale(scale){
+  return {
+    type:"SET_VIDEO_SCALE",
+    value:scale
+  }
+}
+

src/components/SpecialTextBox.js

@@ -1,8 +1,7 @@
 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:
@@ -15,12 +14,4 @@ function SpecialTextBox(props) {
   );
 }
 
-function mapDispatchToProps(dispatch){
-  return {
-    set:function(txt){
-      let action = setSpecialText(txt)
-      dispatch(action);
-    }
-  }
-}
-export default (SpecialTextBox);
+

src/containers/ChangeTemperatureContainer.js

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

src/containers/CityDropDownContainer.js

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

src/containers/CounterButtonContainer.js

@@ -0,0 +1,12 @@
+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 { connect } from 'react-redux';
+import Counter from "../components/Counter.js";
+
+function mapStateToProps(state){
+  return {
+    count: state.currentCount
+  }
+}
+
+export default connect(mapStateToProps)(Counter);

src/containers/CurrentCityContainer.js

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

src/containers/ModalContainer.js

@@ -0,0 +1,17 @@
+import { connect } from 'react-redux';
+import {setIsLoading} from "../actions"
+import Modal from "../components/Modal.js";
+
+function mapStateToProps(state){
+  return {
+    setIsLoading: state.setIsLoading
+  }
+}
+
+const mapDispatchToProps = {
+  setIsLoading:setIsLoading
+ }
+
+
+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.js";
+
+
+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.js";
+
+
+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.js";
+
+
+const mapDispatchToProps = {
+   setIsLoading:setIsLoading
+  }
+
+
+export default connect(null,mapDispatchToProps)(ShowModal);

src/containers/SortUsersContainer.js

@@ -0,0 +1,11 @@
+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/SpecialTextContainer.js

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

src/containers/ThermostatContainer.js

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

src/containers/UserButtonsContainer.js

@@ -0,0 +1,12 @@
+import { connect } from 'react-redux';
+import {addUser, removeUser} from "../actions";
+import Users from "../components/Users.js";
+
+
+const mapDispatchToProps = {
+   add:addUser,
+   remove:removeUser
+  }
+
+
+export default connect(null,mapDispatchToProps)(Users);

src/containers/UsersContainer.js

@@ -0,0 +1,28 @@
+import React,{Component} from "react";
+import { connect } from 'react-redux';
+import Users from "../components/Users.js";
+import {addUser} from "../actions";
+
+class UsersContainer extends Component {
+  componentDidMount(){
+    fetch("https://jsonplaceholder.typicode.com/users")
+    .then(res => res.json())
+    .then(users=> users.forEach(user=>this.props.addUser(user)));
+    }
+  render(){
+    return <Users {...this.props} />
+  }
+}
+function mapStateToProps(state){
+  return {
+    users: state.users,
+    firstNameFilter: state.searchText,
+    sortOn: state.currentUserSort
+  }
+}
+
+const mapDispatchToProps = {
+  addUser:addUser
+ }
+
+export default connect(mapStateToProps, mapDispatchToProps)(UsersContainer);

src/containers/VideoPlayerContainer.js

@@ -0,0 +1,11 @@
+import { connect } from 'react-redux';
+import VideoPlayer from "../components/VideoPlayer.js";
+
+function mapStateToProps(state){
+  return {
+    URL: state.videoURL,
+    scale: state.videoScale
+  }
+}
+
+export default connect(mapStateToProps)(VideoPlayer);

src/containers/VideoTextBoxContainer.js

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

src/index.js

@@ -2,9 +2,12 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';
 import './index.css';
-
+import {Provider} from "react-redux";
+import store from "./store.js";
 
 ReactDOM.render(
-  <App />,
+  <Provider store={store}>
+    <App />
+  </Provider>,
   document.getElementById('root')
 );