Landon Taylor

package.json

@@ -3,15 +3,17 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "react": "*",
-    "react-dom": "*",
+    "express": "^4.17.1",
+    "mongoose": "^5.7.0",
+    "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",

server/controllers/cityController.js

@@ -0,0 +1,22 @@
+const City = require('../models/cityModel');
+
+exports.create = function create(req,res) {
+    // console.log(req.body.city)
+  let item = {
+    city: req.body.city
+  };
+  let newCity = new City(item)
+  newCity.save();
+}
+
+exports.list = function list(req,res) {
+  City.find((e,v)=>{
+    return res.json(v);
+  });
+}
+
+exports.show = function show(req, res) {
+  City.findById(req.params.id, (err,v)=>{
+      return res.json(v);
+  });
+}

server/index.js

@@ -0,0 +1,20 @@
+let express = require("express");
+
+let cityRoutes = require('./routes/cityRoute');
+
+const bodyParser = require("body-parser");
+const app = express();
+
+app.use(bodyParser.json());
+app.use(express.static("public"));
+app.use(cityRoutes);
+
+const mongoose = require('mongoose');
+mongoose.connect('mongodb://localhost:27017/react-redux-actions-practice', {useNewUrlParser: true});
+
+app.listen(3003, (err) => {
+ if (err) {
+   return console.log("Error", err);
+ }
+ console.log("Web server is now listening for messages on port",3003);
+});

server/models/cityModel.js

@@ -0,0 +1,9 @@
+const mongoose = require('mongoose');
+
+let citySchema = new mongoose.Schema({
+    city: String
+});
+
+let City = mongoose.model('City', citySchema);
+
+module.exports = City;

server/routes/cityRoute.js

@@ -0,0 +1,9 @@
+const express = require("express");
+const router = express.Router();
+const {list, show, create} = require("../controllers/cityController");
+
+router.get("/city", list);
+router.get("/city/:id", show);
+router.post('/city', create);
+
+module.exports = router;

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/userButtonContainer";
+import Thermostat from "./containers/thermostatContainer";
+import Users from "./containers/usersContainer";
+import ChangeTemperature from "./containers/changeTempContainer";
+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/sortUserContainer";
+import ScaleVideo from './containers/scaleVideoContainer';
+import Modal from "./containers/modalContainer";
+import ShowModal from "./containers/showModalContainer";
 
 function App() {
   return (

src/actions/index.js

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

src/components/CityDropDown.js

@@ -8,6 +8,17 @@ function CityDropDown(props) {
           (e)=>{
             if(props.set){
               props.set(e.target.value);
+              // console.log(e.target.value)
+              fetch('http://localhost:3003/city', {
+                method: 'POST',
+                mode: 'no-cors',
+                headers: {
+                  'Content-Type': 'application/json'
+                },
+                body: JSON.stringify(e.target.value)
+              })
+              .then(res => res.json())
+              .catch(console.log);
             }
           }
         }>

src/components/CurrentCity.js

@@ -3,7 +3,7 @@ import React from 'react';
 function CurrentCity(props) {
   return (
       <div>
-        CurrentCity: {props.text}
+        CurrentCity: {props.text || "Select a City"}
       </div>
   );
 }

src/components/SpecialText.js

@@ -3,7 +3,7 @@ import React from 'react';
 function SpecialText(props) {
   return (
       <div>
-        Special Text: {props.text}
+        Special Text: {props.text || "What would you like to write?"}
       </div>
   );
 }

src/containers/changeTempContainer.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,9 @@
+import {connect} from 'react-redux';
+import CityDropDown from '../components/CityDropDown';
+import {setCurrentCity} from '../actions/index';
+
+const mapDispatchToProps = {
+    set: setCurrentCity
+}
+
+export default connect(null, mapDispatchToProps)(CityDropDown);

src/containers/counterButtonContainer.js

@@ -0,0 +1,11 @@
+import {connect} from 'react-redux';
+import CounterButton from '../components/CounterButton';
+import {increaseCounter} from '../actions/index';
+import {decreaseCounter} from '../actions/index';
+
+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 LoadingModal from '../components/Modal';
+import {setIsLoading} from '../actions/index';
+
+function mapStateToProps(state) {
+    return {
+        isLoading: state.isLoading
+    }
+}
+
+const mapDispatchToProps = {
+    setIsLoading
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(LoadingModal);

src/containers/scaleVideoContainer.js

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

src/containers/showModalContainer.js

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

src/containers/sortUserContainer.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/thermostatContainer.js

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