From 1c84d11541529752dc9ea19008c66abfae9d9154 Mon Sep 17 00:00:00 2001 From: anniebaker Date: Mon, 26 Aug 2019 13:06:15 -0500 Subject: [PATCH] redux-practice --- package.json | 14 ++++- src/components/ChangeTemperature.js | 22 ++++---- src/components/CityDropDown.js | 30 +++++------ src/components/Counter.js | 22 +++++--- src/components/CounterButton.js | 25 ++++----- src/components/CurrentCity.js | 22 +++++--- src/components/Modal.js | 34 +++++++------ src/components/ScaleVideo.js | 12 ++--- src/components/SearchTextBox.js | 12 ++--- src/components/ShowModal.js | 14 ++--- src/components/SortUsers.js | 20 ++++---- src/components/SpecialText.js | 18 ++++--- src/components/SpecialTextBox.js | 12 ++--- src/components/Thermostat.js | 14 ++--- src/components/UserButtons.js | 40 +++++++-------- src/components/Users.js | 45 +++++++++------- src/components/VideoPlayer.js | 18 ++++--- src/components/VideoTextBox.js | 16 +++--- src/reducers/index.js | 79 ++++++++++++++++++++++++----- 19 files changed, 283 insertions(+), 186 deletions(-) diff --git a/package.json b/package.json index 31db398..a97096c 100644 --- a/package.json +++ b/package.json @@ -22,5 +22,17 @@ "not dead", "not ie <= 11", "not op_mini all" - ] + ], + "description": "Fork, clone, npm i, npm start", + "main": "index.js", + "repository": { + "type": "git", + "url": "git+https://github.com/anniebaker/redux-practice.git" + }, + "author": "", + "license": "ISC", + "bugs": { + "url": "https://github.com/anniebaker/redux-practice/issues" + }, + "homepage": "https://github.com/anniebaker/redux-practice#readme" } diff --git a/src/components/ChangeTemperature.js b/src/components/ChangeTemperature.js index fa894bc..1c461e6 100644 --- a/src/components/ChangeTemperature.js +++ b/src/components/ChangeTemperature.js @@ -1,16 +1,16 @@ import React from "react"; -function ChangeTemperature(props){ - return( -
-
- -
- ) +function ChangeTemperature(props) { + return ( +
+
+ +
+ ) } export default ChangeTemperature; \ No newline at end of file diff --git a/src/components/CityDropDown.js b/src/components/CityDropDown.js index d43df20..151714e 100644 --- a/src/components/CityDropDown.js +++ b/src/components/CityDropDown.js @@ -2,22 +2,22 @@ import React from 'react'; function CityDropDown(props) { return ( -
- CurrentCity: +
+ CurrentCity: -
+ (e) => { + store.dispatch({ type="SET_CURRENT_CITY", value: e.target.value }) + } + }> + + + + + + + + +
); } export default CityDropDown; diff --git a/src/components/Counter.js b/src/components/Counter.js index 281c6ff..88bec61 100644 --- a/src/components/Counter.js +++ b/src/components/Counter.js @@ -1,17 +1,23 @@ import React from 'react'; class Counter extends React.Component { - - state={count:0} + + state = { count: 0 } + + componentDidMount() { + let currentCount = store.getState().currentCount; + this.setState({ count: currentCount }); + store.subscribe(() => { + let currentCount = store.getState().currentCount; + this.setState({ count: currentCount }); + }) + } render() { - const { - props, - } = this; return ( -
- Counter: {this.state.count} -
+
+ Counter: {this.state.count} +
); } } diff --git a/src/components/CounterButton.js b/src/components/CounterButton.js index 96eaa08..5d39125 100644 --- a/src/components/CounterButton.js +++ b/src/components/CounterButton.js @@ -2,18 +2,19 @@ import React from 'react'; function CounterButton(props) { return ( -
- - -
+
+ + +
); } export default CounterButton; \ No newline at end of file diff --git a/src/components/CurrentCity.js b/src/components/CurrentCity.js index a073d8e..dc11918 100644 --- a/src/components/CurrentCity.js +++ b/src/components/CurrentCity.js @@ -1,19 +1,25 @@ import React from 'react'; class CurrentCity extends React.Component { - state={ - text:"" + state = { + text: "" + } + componentDidMount() { + let currentCity = store.getState().currentCity; + this.setState({ text: currentCity }); + store.subscribe(() => { + let currentCity = store.getState().currentCity; + this.setState({ text: currentCity }); + }) } render() { - const { - props, - } = this; + return ( -
- CurrentCity: {this.state.text} -
+
+ CurrentCity: {this.state.text} +
); } } diff --git a/src/components/Modal.js b/src/components/Modal.js index 1789040..eabe852 100644 --- a/src/components/Modal.js +++ b/src/components/Modal.js @@ -2,14 +2,16 @@ import React from 'react'; import Modal from 'react-modal'; class LoadingModal extends React.Component { - state={ - isLoading:false + state = { + isLoading: false + } + componentDidMount() { + store.subscribe(() => { + let isLoading = store.getState().isLoading; + this.setState({ isLoading: isLoading }); + }) } render() { - const { - props, - } = this; - return ( + }>close
Loading .......
 @@ -41,12 +43,12 @@ export default LoadingModal; const customStyles = { - content : { - top : '50%', - left : '50%', - right : 'auto', - bottom : 'auto', - marginRight : '-50%', - transform : 'translate(-50%, -50%)' + content: { + top: '50%', + left: '50%', + right: 'auto', + bottom: 'auto', + marginRight: '-50%', + transform: 'translate(-50%, -50%)' } }; diff --git a/src/components/ScaleVideo.js b/src/components/ScaleVideo.js index 803b257..bdd6e84 100644 --- a/src/components/ScaleVideo.js +++ b/src/components/ScaleVideo.js @@ -2,15 +2,15 @@ import React from 'react'; function ScaleVideo(props) { return ( -
- Scale Video: + Scale Video: { - + (e) => { + store.dispatch({ type: "SET_VIDEO_SCALE", value: e.target.value }) } } - type="range" min="1" max="10" step="1" /> -
+ type="range" min="1" max="10" step="1" /> + ); } export default ScaleVideo; \ No newline at end of file diff --git a/src/components/SearchTextBox.js b/src/components/SearchTextBox.js index 43f3416..03e625a 100644 --- a/src/components/SearchTextBox.js +++ b/src/components/SearchTextBox.js @@ -2,12 +2,12 @@ import React from 'react'; function SearchTextBox(props) { return ( -
- Search Users on First Name: - { - - }} /> -
+
+ Search Users on First Name: + { + StorageEvent.dispatch({ type: "SET_SEARCH_TEXT", value: e.target.value }) + }} /> +
); } diff --git a/src/components/ShowModal.js b/src/components/ShowModal.js index 1e73950..d468f1c 100644 --- a/src/components/ShowModal.js +++ b/src/components/ShowModal.js @@ -2,14 +2,14 @@ import React from 'react'; function ShowModal(props) { return ( -
- +
+ -
+
); } export default ShowModal; \ No newline at end of file diff --git a/src/components/SortUsers.js b/src/components/SortUsers.js index fd6cb04..b9fd1bd 100644 --- a/src/components/SortUsers.js +++ b/src/components/SortUsers.js @@ -2,17 +2,17 @@ import React from 'react'; function SortUsers(props) { return ( -
- Sort Users On: +
+ Sort Users On: -
+ (e) => { + store.dispatch({ type: "SET_CURRENT_USER_SORT", value: e.target.value }) + } + }> + + + +
); } export default SortUsers; \ No newline at end of file diff --git a/src/components/SpecialText.js b/src/components/SpecialText.js index 7d3b5e9..1cb4adc 100644 --- a/src/components/SpecialText.js +++ b/src/components/SpecialText.js @@ -1,16 +1,18 @@ import React from 'react'; class SpecialText extends React.Component { - state={text:""} + state = { text: "" } + componentDidMount() { + store.subscribe(() => { + let specialText = store.getState().specialText; + this.setState({ text: specialText }) + }) + } render() { - const { - props, - } = this; - return ( -
- Special Text: {this.state.text} -
+
+ Special Text: {this.state.text || "Message"} +
); } } diff --git a/src/components/SpecialTextBox.js b/src/components/SpecialTextBox.js index 63cb01f..4d74234 100644 --- a/src/components/SpecialTextBox.js +++ b/src/components/SpecialTextBox.js @@ -3,12 +3,12 @@ import React from 'react'; function SpecialTextBox(props) { return ( -
- Enter Special Text: - { - - }} /> -
+
+ Enter Special Text: + { + store.dispatch({ type: "SET_SPECIAL_TEXT", value: e.target.value }) + }} /> +
); } diff --git a/src/components/Thermostat.js b/src/components/Thermostat.js index 2e43fbe..b82ca1f 100644 --- a/src/components/Thermostat.js +++ b/src/components/Thermostat.js @@ -2,14 +2,16 @@ import React from "react"; import DonutChart from "./ignore/DonutChart"; class Thermostat extends React.Component { - state={temp:""} - + state = { temp: "" } + componentDidMount() { + store.subscribe(() => { + let currentTemp = store.getState().currentTemp; + this.setState({ temp: currentTemp }); + }) + } render() { - const { - props, - } = this; - return () + return () } } diff --git a/src/components/UserButtons.js b/src/components/UserButtons.js index f857369..ba46c8c 100644 --- a/src/components/UserButtons.js +++ b/src/components/UserButtons.js @@ -2,26 +2,26 @@ import React from 'react'; function UserButtons(props) { return ( -
- - -
+
+ + +
); } export default UserButtons; diff --git a/src/components/Users.js b/src/components/Users.js index 79bfbef..ae7b845 100644 --- a/src/components/Users.js +++ b/src/components/Users.js @@ -1,34 +1,43 @@ import React from 'react'; class Users extends React.Component { - - state={ - users:[], - sortOn:"", - firstNameFilter:"" - } + state = { + users: [], + sortOn: "", + firstNameFilter: "" + } + componentDidMount() { + let users = store.getState().users + this.setState({ users: users }); + store.subscribe(() => { + let users = store.getState().users + let searchText = store.getState().searchText + let currentUserSort = store.getState().currentUserSort + this.setState({ users: users, sortOn: currentUserSort, firstNameFilter: searchText }) + }) + } render() { - let {users,sortOn,firstNameFilter} = this.state; + let { users, sortOn, firstNameFilter } = this.state; var usersDivs = null; - if(users){ - var sorted = users.sort((a,b) => { + if (users) { + var sorted = users.sort((a, b) => { return a[sortOn] > b[sortOn]; }); - usersDivs = sorted.filter(function(u){ - return !firstNameFilter || - (firstNameFilter && - u.name.indexOf(firstNameFilter) > -1); + usersDivs = sorted.filter(function (u) { + return !firstNameFilter || + (firstNameFilter && + u.name.indexOf(firstNameFilter) > -1); }) - usersDivs = usersDivs.map(function(u){ + usersDivs = usersDivs.map(function (u) { return
{u.name}
}) } return ( -
-

Users

- {usersDivs} -
+
+

Users

+ {usersDivs} +
); } } diff --git a/src/components/VideoPlayer.js b/src/components/VideoPlayer.js index f4fc08b..87075a8 100644 --- a/src/components/VideoPlayer.js +++ b/src/components/VideoPlayer.js @@ -1,21 +1,23 @@ import React from 'react'; class VideoPlayer extends React.Component { - state={scale:0,URL:""} - + state = { scale: 0, URL: "" } + componentDidMount() { + store.subscribe(() => { + let videoURL = store.getState().videoURL; + let videoScale = store.getState().videoScale; + this.setState({ URL: videoURL, scale: videoScale }); + }) + } render() { - const { - props, - } = this; - let width = 200; let height = 200; - if(this.state.scale){ + if (this.state.scale) { width = 200 * props.scale; height = 200 * props.scale; } return ( -
); diff --git a/src/components/VideoTextBox.js b/src/components/VideoTextBox.js index 62cb230..e9b7744 100644 --- a/src/components/VideoTextBox.js +++ b/src/components/VideoTextBox.js @@ -2,15 +2,15 @@ import React from 'react'; function VideoTextBox(props) { return ( -
- Enter URL of YouTube video - { - - }} - type="text" /> +
+ Enter URL of YouTube video + { + store.dispatch({ type: "SET_VIDEO_URL", value: e.target.value }) + }} + type="text" /> -
+
); } export default VideoTextBox; \ No newline at end of file diff --git a/src/reducers/index.js b/src/reducers/index.js index e4e85c8..9957040 100644 --- a/src/reducers/index.js +++ b/src/reducers/index.js @@ -1,28 +1,76 @@ import { combineReducers } from 'redux' -function currentCount(state=0, action){ - if(action.type === "INCREASE_COUNTER"){ +function currentCount(state = 0, action) { + if (action.type === "INCREMENT") { + return state + 1; + } + if (action.type === "DECREMENT") { + return state - 1; + } + return state; +} +function users(state = [], action) { + if (action.type === "ADD_USER") { + return [...state, action.value] } - if(action.type === "DECREASE_COUNTER"){ - + if (action.type === "REMOVE_USER") { + return state.slice(1) } return state; -} +} -function users(state =[], action){ - if(action.type === "ADD_USER"){ +function currentCity(state = " ", action) { + if (action.type === "SET_CURRENT_CITY") { + return action.value; + } + return state; +} +function searchText(state = "", action) { + if (action.type === "SET_SEARCH_TEXT") { + return action.value; } - if(action.type === "REMOVE_USER"){ - + return state; +} + +function currentTemp(state = 0, action) { + if (action.type === "SET_TEMP") { + return action.value; } return state; } +function specialText(state = "", action) { + if (action.type === "SET_SPECIAL_TEXT") { + return action.value; + } + return state; +} + +function isLoading(state = false, action) { + if (action.type === "SET_IS_LOADING") { + return action.value; + } + return state; +} + +function videoURL(state = "", action) { + if (action.type === "SET_VIDEO_URL") { + return action.value; + } + return state; +} + +function currentUserSort(state = "first_name", action) { + if (action.type === "SET_CURRENT_USER_SORT") { + return action.value; + } + return state; +} -function specialText(state = "", action){ - if(action.type === "SET_SPECIAL_TEXT"){ +function videoScale(state = 1, action) { + if (action.type === "SET_VIDEO_SCALE") { return action.value; } return state; @@ -31,5 +79,12 @@ function specialText(state = "", action){ export default combineReducers({ currentCount, users, - specialText + specialText, + currentCity, + searchText, + currentTemp, + isLoading, + videoURL, + currentUserSort, + videoScale }) \ No newline at end of file