diff --git a/package-lock.json b/package-lock.json index ee9a1d2..4904d1a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3166,7 +3166,8 @@ "ansi-regex": { "version": "2.1.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "aproba": { "version": "1.2.0", @@ -3187,12 +3188,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 +3210,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 +3340,8 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -3346,6 +3353,7 @@ "version": "1.0.0", "bundled": true, "dev": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -3360,6 +3368,7 @@ "version": "3.0.4", "bundled": true, "dev": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -3367,12 +3376,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 +3402,7 @@ "version": "0.5.1", "bundled": true, "dev": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -3471,7 +3483,8 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -3483,6 +3496,7 @@ "version": "1.4.0", "bundled": true, "dev": true, + "optional": true, "requires": { "wrappy": "1" } @@ -3568,7 +3582,8 @@ "safe-buffer": { "version": "5.1.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -3604,6 +3619,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", @@ -3623,6 +3639,7 @@ "version": "3.0.1", "bundled": true, "dev": true, + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -3666,12 +3683,14 @@ "wrappy": { "version": "1.0.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "yallist": { "version": "3.0.3", "bundled": true, - "dev": true + "dev": true, + "optional": true } } }, @@ -7092,7 +7111,8 @@ "ansi-regex": { "version": "2.1.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "aproba": { "version": "1.2.0", @@ -7113,12 +7133,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 +7155,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 +7285,8 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -7272,6 +7298,7 @@ "version": "1.0.0", "bundled": true, "dev": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -7286,6 +7313,7 @@ "version": "3.0.4", "bundled": true, "dev": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -7293,12 +7321,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 +7347,7 @@ "version": "0.5.1", "bundled": true, "dev": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -7397,7 +7428,8 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -7409,6 +7441,7 @@ "version": "1.4.0", "bundled": true, "dev": true, + "optional": true, "requires": { "wrappy": "1" } @@ -7494,7 +7527,8 @@ "safe-buffer": { "version": "5.1.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -7530,6 +7564,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", @@ -7549,6 +7584,7 @@ "version": "3.0.1", "bundled": true, "dev": true, + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -7592,12 +7628,14 @@ "wrappy": { "version": "1.0.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "yallist": { "version": "3.0.2", "bundled": true, - "dev": true + "dev": true, + "optional": true } } }, diff --git a/package.json b/package.json index 0f713ab..919d936 100644 --- a/package.json +++ b/package.json @@ -24,5 +24,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/kelly-tnguyen/react-redux-actions-practice.git" + }, + "author": "", + "license": "ISC", + "bugs": { + "url": "https://github.com/kelly-tnguyen/react-redux-actions-practice/issues" + }, + "homepage": "https://github.com/kelly-tnguyen/react-redux-actions-practice#readme" } diff --git a/src/App.js b/src/App.js index 392ed1f..c21779a 100644 --- a/src/App.js +++ b/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 ( diff --git a/src/actions/index.js b/src/actions/index.js index 78955f4..d742781 100644 --- a/src/actions/index.js +++ b/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 } -} \ No newline at end of file +} \ No newline at end of file diff --git a/src/components/CurrentCity.js b/src/components/CurrentCity.js index 629c737..19e5110 100644 --- a/src/components/CurrentCity.js +++ b/src/components/CurrentCity.js @@ -3,7 +3,7 @@ import React from 'react'; function CurrentCity(props) { return (
- CurrentCity: {props.text} + CurrentCity: {props.text || "Select a City"}
); } diff --git a/src/components/SpecialText.js b/src/components/SpecialText.js index 13ef89f..f0fcefe 100644 --- a/src/components/SpecialText.js +++ b/src/components/SpecialText.js @@ -3,7 +3,7 @@ import React from 'react'; function SpecialText(props) { return (
- Special Text: {props.text} + Special Text: {props.text || "What would you like to write?"}
); } diff --git a/src/containers/changeTempContainer.js b/src/containers/changeTempContainer.js new file mode 100644 index 0000000..cda6e81 --- /dev/null +++ b/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); \ No newline at end of file diff --git a/src/containers/cityDropDownContainer.js b/src/containers/cityDropDownContainer.js new file mode 100644 index 0000000..980409d --- /dev/null +++ b/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); diff --git a/src/containers/counterButtonContainer.js b/src/containers/counterButtonContainer.js new file mode 100644 index 0000000..d8bc12e --- /dev/null +++ b/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); \ No newline at end of file diff --git a/src/containers/counterContainer.js b/src/containers/counterContainer.js new file mode 100644 index 0000000..ba441a5 --- /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..c0318b9 --- /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.currentCity + } +} + +export default connect(mapStateToProps)(CurrentCity); \ No newline at end of file diff --git a/src/containers/modalContainer.js b/src/containers/modalContainer.js new file mode 100644 index 0000000..6751998 --- /dev/null +++ b/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); \ No newline at end of file diff --git a/src/containers/scaleVideoContainer.js b/src/containers/scaleVideoContainer.js new file mode 100644 index 0000000..9029da2 --- /dev/null +++ b/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); \ No newline at end of file diff --git a/src/containers/searchTextBoxContainer.js b/src/containers/searchTextBoxContainer.js new file mode 100644 index 0000000..a4d9c56 --- /dev/null +++ b/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); \ No newline at end of file diff --git a/src/containers/showModalContainer.js b/src/containers/showModalContainer.js new file mode 100644 index 0000000..a518813 --- /dev/null +++ b/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); \ No newline at end of file diff --git a/src/containers/sortUserContainer.js b/src/containers/sortUserContainer.js new file mode 100644 index 0000000..bca2447 --- /dev/null +++ b/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); \ No newline at end of file diff --git a/src/containers/thermostatContainer.js b/src/containers/thermostatContainer.js new file mode 100644 index 0000000..5fa6637 --- /dev/null +++ b/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); \ No newline at end of file diff --git a/src/containers/userButtonContainer.js b/src/containers/userButtonContainer.js new file mode 100644 index 0000000..33e259a --- /dev/null +++ b/src/containers/userButtonContainer.js @@ -0,0 +1,10 @@ +import {connect} from 'react-redux'; +import UserButton from '../components/UserButtons'; +import {addUser} from '../actions/index'; +import {removeUser} from '../actions/index'; + +const mapDispatchToProps = { + add: addUser, + remove: removeUser +} +export default connect(null, mapDispatchToProps)(UserButton); \ No newline at end of file diff --git a/src/containers/usersContainer.js b/src/containers/usersContainer.js new file mode 100644 index 0000000..f488f5e --- /dev/null +++ b/src/containers/usersContainer.js @@ -0,0 +1,11 @@ +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/containers/videoPlayerContainer.js b/src/containers/videoPlayerContainer.js new file mode 100644 index 0000000..81a3669 --- /dev/null +++ b/src/containers/videoPlayerContainer.js @@ -0,0 +1,11 @@ +import {connect} from 'react-redux'; +import VideoPlayer from '../components/VideoPlayer'; + +function mapStateToProps(state) { + return { + scale: state.videoScale, + URL: state.videoURL + } +} + +export default connect (mapStateToProps)(VideoPlayer); \ No newline at end of file diff --git a/src/containers/videoTextBoxContainer.js b/src/containers/videoTextBoxContainer.js new file mode 100644 index 0000000..cbbbb87 --- /dev/null +++ b/src/containers/videoTextBoxContainer.js @@ -0,0 +1,9 @@ +import {connect} from 'react-redux'; +import VideoTextBox from '../components/VideoTextBox'; +import {setVideoURL} from '../actions/index'; + +const mapDispatchToProps = { + set: setVideoURL +} + +export default connect(null, mapDispatchToProps)(VideoTextBox); \ No newline at end of file diff --git a/src/index.js b/src/index.js index 25f54ba..327f949 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..a07a548 100644 --- a/src/reducers/index.js +++ b/src/reducers/index.js @@ -1,29 +1,103 @@ +import {combineReducers} from 'redux'; +import {INCREASE_COUNTER} from '../actions/index'; +import {DECREASE_COUNTER} from '../actions/index'; +import {SET_SPECIAL_TEXT} from '../actions/index'; +import {ADD_USER} from '../actions/index'; +import {REMOVE_USER} from '../actions/index'; +import {SET_CURRENT_CITY} from '../actions/index'; +import {SET_SEARCH_TEXT} from '../actions/index'; +import {SET_TEMP} from '../actions/index'; +import {SET_IS_LOADING} from '../actions/index'; +import {SET_VIDEO_URL} from '../actions/index'; +import {SET_CURRENT_USER_SORT} from '../actions/index'; +import {SET_VIDEO_SCALE} from '../actions/index'; function currentCount(state=0, action){ - if(action.type === "INCREASE_COUNTER"){ - + if(action.type === INCREASE_COUNTER){ + return state +1 } - if(action.type === "DECREASE_COUNTER"){ - + if(action.type === DECREASE_COUNTER){ + return state -1 } return state; -} +} function users(state =[], action){ - if(action.type === "ADD_USER"){ + if(action.type === ADD_USER){ + return [...state,action.value] } - if(action.type === "REMOVE_USER"){ - + if(action.type === REMOVE_USER){ + return state.slice(1) } return state; } - function specialText(state = "", action){ - if(action.type === "SET_SPECIAL_TEXT"){ + if(action.type === SET_SPECIAL_TEXT){ + return action.value; + } + return state; +} + +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; + } + return state; +} + +function currentTemp(state=0,action){ + if(action.type===SET_TEMP) { + 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 videoScale(state=1,action){ + if(action.type===SET_VIDEO_SCALE) { return action.value; } return state; } +export default combineReducers({ + currentCount, + users, + specialText, + currentCity, + searchText, + currentTemp, + isLoading, + videoURL, + currentUserSort, + videoScale +}) \ No newline at end of file