Daniela Archibong

package.json

@@ -3,15 +3,15 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "react": "*",
-    "react-dom": "*",
+    "react": "^16.9.0",
+    "react-dom": "^16.9.0",
     "react-modal": "^1.7.7",
-    "react-redux": "*",
-    "redux": "*",
+    "react-redux": "^7.1.1",
+    "redux": "^4.0.4",
     "whatwg-fetch": "^2.0.3"
   },
   "devDependencies": {
-    "react-scripts": "*"
+    "react-scripts": "^3.1.1"
   },
   "scripts": {
     "start": "react-scripts start",

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 (

src/actions/index.js

@@ -4,13 +4,26 @@ export function increaseCounter(){
   }
 }
 
+export function decreaseCounter(){
+  return {
+    type:"DECREASE_COUNTER"
+  }
+}
+
 export function setSpecialText(txt){
   return {
     type:"SET_SPECIAL_TEXT",
     value:txt
   }
 }
 
+export function setSearchText(txt){
+  return {
+    type:"SET_SEARCH_TEXT",
+    value:txt
+  }
+}
+
 export function addUser(user){
   return {
     type:"ADD_USER",
@@ -21,4 +34,46 @@ export function removeUser(){
   return {
     type:"REMOVE_USER"
   }
+}
+
+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/CityDropDown.js

@@ -3,7 +3,7 @@ import React from 'react';
 function CityDropDown(props) {
   return (
       <div>
-        CurrentCity: 
+        CurrentCity:
         <select onChange={
           (e)=>{
             if(props.set){
@@ -13,10 +13,10 @@ function CityDropDown(props) {
         }>
           <option value="Austin">Austin</option>
           <option value="New York">New York</option>
-          <option value="New Olreans">New Olreans</option>
+          <option value="New Orleans">New Orleans</option>
           <option value="Las Vegas">Las Vegas</option>
           <option value="Seattle">Seattle</option>
-          <option value="San Fransisco">San Fransisco</option>
+          <option value="San Francisco">San Francisco</option>
           <option value="Washington D.C.">Washington D.C.</option>
         </select>
       </div>

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/containers/ChangeTemperatureContainer.js

@@ -0,0 +1,11 @@
+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,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";
+
+ 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";
+
+ function mapStateToProps (state){
+   return {
+     text:state.currentCity
+   }
+  }
+
+ export default connect(mapStateToProps)(CurrentCity);

src/containers/ModalContainer.js

@@ -0,0 +1,15 @@
+import { connect } from 'react-redux';
+import {setIsLoading} from '../actions/index'
+import Modal from "../components/Modal";
+
+ function mapStateToProps (state){
+   return {
+     isLoading: state.isLoading
+   }
+  }
+
+  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";
+
+
+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,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,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 { connect } from 'react-redux';
+import Thermostat from "../components/Thermostat";
+
+ 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 UserButtons from "../components/UserButtons";
+
+
+const mapDispatchToProps = {
+   add: addUser,
+   remove: removeUser
+  }
+
+
+export default connect(null,mapDispatchToProps)(UserButtons);

src/containers/UsersContainer.js

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

src/containers/VideoPlayerContainer.js

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

src/index.js

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