diff --git a/README.md b/README.md index 338b5b3..1ff2b08 100644 --- a/README.md +++ b/README.md @@ -5,9 +5,6 @@ Fork, clone, npm i, npm start ### Intro View this video to see how the app should work once you are done coding. [Video](https://youtu.be/R8VFic_ZZUc). This project is to practice using redux actions to control data that is changed through user interactions. On the left hand side of the page is a collection of different inputs that are available on a web page. When the user interacts with the input it will change some data that should update the right hand side of the page. All you need to do is code the redux containers such that it will connect redux actions and data to the components. You do not need to alter the existing components themselves. There is nothing out of the ordinary that needs to be done here so if you do not undersand the instruction exactly, try to relate it to how you already know what to do with redux. - - - ### Reducers * Create Reducers in reducers/index.js * Look at state.js and create a reducer for each piece of state diff --git a/package-lock.json b/package-lock.json index ee9a1d2..d7bb883 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3187,12 +3187,14 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -3207,17 +3209,20 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -3334,7 +3339,8 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -3346,6 +3352,7 @@ "version": "1.0.0", "bundled": true, "dev": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -3360,6 +3367,7 @@ "version": "3.0.4", "bundled": true, "dev": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -3367,12 +3375,14 @@ "minimist": { "version": "0.0.8", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "minipass": { "version": "2.3.5", "bundled": true, "dev": true, + "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -3391,6 +3401,7 @@ "version": "0.5.1", "bundled": true, "dev": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -3471,7 +3482,8 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -3483,6 +3495,7 @@ "version": "1.4.0", "bundled": true, "dev": true, + "optional": true, "requires": { "wrappy": "1" } @@ -3604,6 +3617,7 @@ "version": "1.0.2", "bundled": true, "dev": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -7113,12 +7127,14 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -7133,17 +7149,20 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -7260,7 +7279,8 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -7272,6 +7292,7 @@ "version": "1.0.0", "bundled": true, "dev": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -7286,6 +7307,7 @@ "version": "3.0.4", "bundled": true, "dev": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -7293,12 +7315,14 @@ "minimist": { "version": "0.0.8", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "minipass": { "version": "2.2.4", "bundled": true, "dev": true, + "optional": true, "requires": { "safe-buffer": "^5.1.1", "yallist": "^3.0.0" @@ -7317,6 +7341,7 @@ "version": "0.5.1", "bundled": true, "dev": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -7397,7 +7422,8 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -7409,6 +7435,7 @@ "version": "1.4.0", "bundled": true, "dev": true, + "optional": true, "requires": { "wrappy": "1" } @@ -7530,6 +7557,7 @@ "version": "1.0.2", "bundled": true, "dev": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", diff --git a/src/App.js b/src/App.js index 392ed1f..ab7bbe5 100644 --- a/src/App.js +++ b/src/App.js @@ -1,16 +1,16 @@ 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 CounterButton from "./containers/CounterButtonContainer"; +import SpecialTextBox from "./containers/SpecialTextBoxContainer"; +import Counter from "./containers/CounterContainer"; +import SpecialText from "./containers/SpecialTextContainer"; import UserButtons from "./components/UserButtons"; -import Thermostat from "./components/Thermostat"; -import Users from "./components/Users"; -import ChangeTemperature from "./components/ChangeTemperature"; +import Thermostat from "./containers/ThermostatContainer"; +import Users from "./containers/UsersContainer"; +import ChangeTemperature from "./containers/ChangeTemperatureContainer"; import VideoPlayer from "./components/VideoPlayer"; import VideoTextBox from "./components/VideoTextBox"; -import CurrentCity from "./components/CurrentCity"; -import CityDropDown from "./components/CityDropDown"; +import CurrentCity from "./containers/CurrentCityContainer"; +import CityDropDown from "./containers/CityDropDownContainer"; import SearchTextBox from "./components/SearchTextBox"; import SortUsers from "./components/SortUsers"; import ScaleVideo from "./components/ScaleVideo"; diff --git a/src/actions/index.js b/src/actions/index.js index 78955f4..d3c2c30 100644 --- a/src/actions/index.js +++ b/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", @@ -11,6 +17,20 @@ export function setSpecialText(txt){ } } +export function setCurrentCity(city){ + return { + type: "SET_CURRENT_CITY", + value:city + } +} + +export function setTemp(temp){ + return { + type:"SET_TEMP", + value: temp + } +} + export function addUser(user){ return { type:"ADD_USER", @@ -19,6 +39,6 @@ export function addUser(user){ } export function removeUser(){ return { - type:"REMOVE_USER" + type:"REMOVE_USER", } } \ No newline at end of file diff --git a/src/components/CounterButton.js b/src/components/CounterButton.js index df3a778..92ec253 100644 --- a/src/components/CounterButton.js +++ b/src/components/CounterButton.js @@ -20,4 +20,5 @@ function CounterButton(props) { ); } + export default CounterButton; \ No newline at end of file diff --git a/src/components/SpecialTextBox.js b/src/components/SpecialTextBox.js index 53c3938..be8f840 100644 --- a/src/components/SpecialTextBox.js +++ b/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,12 +13,4 @@ function SpecialTextBox(props) { ); } -function mapDispatchToProps(dispatch){ - return { - set:function(txt){ - let action = setSpecialText(txt) - dispatch(action); - } - } -} -export default (SpecialTextBox); \ No newline at end of file +export default SpecialTextBox; \ No newline at end of file diff --git a/src/components/Thermostat.js b/src/components/Thermostat.js index d5c7d4e..2f9bf59 100644 --- a/src/components/Thermostat.js +++ b/src/components/Thermostat.js @@ -2,7 +2,7 @@ import React from "react"; import DonutChart from "./ignore/DonutChart"; function Thermostat(props){ - return () + return () } export default Thermostat; \ No newline at end of file diff --git a/src/containers/ChangeTemperatureContainer.js b/src/containers/ChangeTemperatureContainer.js new file mode 100644 index 0000000..70e2681 --- /dev/null +++ b/src/containers/ChangeTemperatureContainer.js @@ -0,0 +1,9 @@ +import {connect} from 'react-redux'; +import {setTemp} from "../actions"; +import ChangeTemperature from '../components/ChangeTemperature'; + +const mapDispatchToProps = { + set:setTemp +} + +export default connect(null,mapDispatchToProps)(ChangeTemperature); \ No newline at end of file diff --git a/src/containers/CityDropDownContainer.js b/src/containers/CityDropDownContainer.js new file mode 100644 index 0000000..88d07f8 --- /dev/null +++ b/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); \ No newline at end of file diff --git a/src/containers/CounterButtonContainer.js b/src/containers/CounterButtonContainer.js new file mode 100644 index 0000000..b0ade03 --- /dev/null +++ b/src/containers/CounterButtonContainer.js @@ -0,0 +1,9 @@ +import {connect} from 'react-redux'; +import {decreaseCounter, increaseCounter} from "../actions"; +import CounterButton from '../components/CounterButton'; + +const mapDispatchToProps = { + increase:increaseCounter, decrease:decreaseCounter +} + +export default connect(null,mapDispatchToProps)(CounterButton); \ No newline at end of file diff --git a/src/containers/CounterContainer.js b/src/containers/CounterContainer.js new file mode 100644 index 0000000..3300ade --- /dev/null +++ b/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); \ No newline at end of file diff --git a/src/containers/CurrentCityContainer.js b/src/containers/CurrentCityContainer.js new file mode 100644 index 0000000..2954407 --- /dev/null +++ b/src/containers/CurrentCityContainer.js @@ -0,0 +1,10 @@ +import { connect } from 'react-redux'; +import CurrentCity from "../components/CurrentCity"; + +function mapStateToProps(state){ + return { + text:state.setCurrentCity + } + } + +export default connect(mapStateToProps)(CurrentCity); \ No newline at end of file diff --git a/src/containers/SpecialTextBoxContainer.js b/src/containers/SpecialTextBoxContainer.js index 58e9b4c..8272721 100644 --- a/src/containers/SpecialTextBoxContainer.js +++ b/src/containers/SpecialTextBoxContainer.js @@ -2,10 +2,8 @@ import { connect } from 'react-redux'; import {setSpecialText} from "../actions"; import SpecialTextBox from "../components/SpecialTextBox"; - const mapDispatchToProps = { set:setSpecialText } - -export default connect(null,mapDispatchToProps)(SpecialTextBox); +export default connect(null,mapDispatchToProps)(SpecialTextBox); \ No newline at end of file diff --git a/src/containers/SpecialTextContainer.js b/src/containers/SpecialTextContainer.js index 794bd45..2299256 100644 --- a/src/containers/SpecialTextContainer.js +++ b/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 @@ -9,4 +8,4 @@ function mapStateToProps(state){ } } -export default connect(mapStateToProps)(SpecialText); +export default connect(mapStateToProps)(SpecialText); \ No newline at end of file diff --git a/src/containers/ThermostatContainer.js b/src/containers/ThermostatContainer.js new file mode 100644 index 0000000..56fe99e --- /dev/null +++ b/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); \ No newline at end of file diff --git a/src/containers/UsersContainer.js b/src/containers/UsersContainer.js new file mode 100644 index 0000000..b15f3d0 --- /dev/null +++ b/src/containers/UsersContainer.js @@ -0,0 +1,12 @@ +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); \ No newline at end of file diff --git a/src/index.js b/src/index.js index 25f54ba..84fadf2 100644 --- a/src/index.js +++ b/src/index.js @@ -2,9 +2,13 @@ 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"; ReactDOM.render( - , + + + , document.getElementById('root') ); diff --git a/src/reducers/index.js b/src/reducers/index.js index dce7c2c..31d8d0d 100644 --- a/src/reducers/index.js +++ b/src/reducers/index.js @@ -1,20 +1,72 @@ +import { combineReducers } from "redux"; function currentCount(state=0, action){ if(action.type === "INCREASE_COUNTER"){ - + let newCount = state+1; + return newCount; } if(action.type === "DECREASE_COUNTER"){ - + let newCount = state-1; + return newCount; } return state; } +function setCurrentCity(state="Austin", action){ + if(action.type === "SET_CURRENT_CITY"){ + return action.value + } + return state; +} + +function searchText(state="", action){ + if(action.type === ""){ + + } + return state +} + +function currentTemp(state=23, action){ + if(action.type === "SET_TEMP"){ + return action.value + } + return state +} + +function isLoading(state=false, action){ + if(action.type === ""){ + + } + return state +} + +function videoURL(state="", action){ + if (action.type === ""){ + + } + return state +} + +function currentUserSort(state="first_name", action){ + if (action.type === ""){ + + } + return state +} + +function videoScale(state=1, action){ + if (action.type === ""){ + + } + return state +} + function users(state =[], action){ if(action.type === "ADD_USER"){ - + return [...state, action.value]; } if(action.type === "REMOVE_USER"){ - + return [] } return state; } @@ -27,3 +79,8 @@ function specialText(state = "", action){ return state; } +let reducers = combineReducers({ + currentCount,users,specialText,setCurrentCity,searchText,currentTemp,isLoading,videoURL,currentUserSort,videoScale +}) + +export default reducers; \ No newline at end of file