diff --git a/src/App.js b/src/App.js index 392ed1f..b764946 100644 --- a/src/App.js +++ b/src/App.js @@ -1,65 +1,65 @@ 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 CounterButtonContainer from "./containers/CounterButtonContainer"; +import SpecialTextBox from "./containers/SpecialTextBoxContainer"; +import CounterContainer 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 ( -
-
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
-
- -
- -
- -
- -
- -
- - -
-
- -
- +
+
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+
+
+ +
+ +
+ +
+ +
+ +
+ + +
+
+ +
+ +
); } export default App; \ No newline at end of file diff --git a/src/actions/index.js b/src/actions/index.js index 78955f4..5d0d71e 100644 --- a/src/actions/index.js +++ b/src/actions/index.js @@ -1,24 +1,80 @@ -export function increaseCounter(){ +export function increaseCounter() { return { - type:"INCREASE_COUNTER" + type: "INCREASE_COUNTER" } } -export function setSpecialText(txt){ +export function decreaseCounter() { return { - type:"SET_SPECIAL_TEXT", - value:txt + type: "DECREASE_COUNTER" } } -export function addUser(user){ +export function setSpecialText(txt) { return { - type:"ADD_USER", - value:user + type: "SET_SPECIAL_TEXT", + value: txt } } -export function removeUser(){ + +export function add(user) { + return { + type: "ADD_USER", + value: user + } +} + +export function removeUser() { + return { + type: "REMOVE_USER" + } +} + +export function setCurrentCity(city) { + return { + type: "SET_CURRENT_CITY", + value: city + } +} + +export function setSearchText(txt) { + return { + type: "SET_SEARCH_TEXT", + value: txt + } +} + +export function setTemp(temp) { + return { + type: "SET_TEMP", + value: temp + } +} + +export function setIsLoading(isLoading) { + return { + type: "SET_IS_LOADING", + value: isLoading + } +} + +export function setVideoURL(txt) { + return { + type: "SET_VIDEO_URL", + value: txt + } +} + +export function setCurrentUserSort(sort) { + return { + type: "SET_CURRENT_USER_SORT", + value: sort + } +} + +export function setVideoScale(num) { return { - type:"REMOVE_USER" + type: "SET_VIDEO_SCALE", + value: num } } \ No newline at end of file diff --git a/src/components/CityDropDown.js b/src/components/CityDropDown.js index 843b9a3..cc88561 100644 --- a/src/components/CityDropDown.js +++ b/src/components/CityDropDown.js @@ -2,24 +2,24 @@ import React from 'react'; function CityDropDown(props) { return ( -
- CurrentCity: +
+ CurrentCity: -
+ } + }> + + + + + + + + +
); } export default CityDropDown; \ No newline at end of file diff --git a/src/components/SpecialTextBox.js b/src/components/SpecialTextBox.js index 53c3938..8c32053 100644 --- a/src/components/SpecialTextBox.js +++ b/src/components/SpecialTextBox.js @@ -1,26 +1,14 @@ import React from 'react'; -import {connect} from "react-redux"; -import {setSpecialText} from "../actions"; -function SpecialTextBox(props) { +export default function SpecialTextBox(props) { return ( -
- Enter Special Text: - { - if(props.set){ - props.set(e.target.value); - } - }} /> -
+
+ Enter Special Text: + { + if (props.set) { + props.set(e.target.value); + } + }} /> +
); } - -function mapDispatchToProps(dispatch){ - return { - set:function(txt){ - let action = setSpecialText(txt) - dispatch(action); - } - } -} -export default (SpecialTextBox); \ No newline at end of file diff --git a/src/components/UserButtons.js b/src/components/UserButtons.js index 261dd4d..f299d1f 100644 --- a/src/components/UserButtons.js +++ b/src/components/UserButtons.js @@ -2,30 +2,29 @@ import React from 'react'; function UserButtons(props) { return ( -
- - + -
+ } + }>Remove User +
); } export default UserButtons; \ No newline at end of file diff --git a/src/components/Users.js b/src/components/Users.js index 6a04386..753258a 100644 --- a/src/components/Users.js +++ b/src/components/Users.js @@ -2,24 +2,24 @@ import React from 'react'; function Users(props) { var usersDivs = null; - if(props.users){ - var sorted = props.users.sort((a,b) => { + if (props.users) { + var sorted = props.users.sort((a, b) => { return a[props.sortOn] > b[props.sortOn]; }); - usersDivs = sorted.filter(function(u){ - return !props.firstNameFilter || - (props.firstNameFilter && - u.name.indexOf(props.firstNameFilter) > -1); + usersDivs = sorted.filter(function (u) { + return !props.firstNameFilter || + (props.firstNameFilter && + u.first_name.indexOf(props.firstNameFilter) > -1); }) - usersDivs = usersDivs.map(function(u){ - return
{u.name}
+ usersDivs = usersDivs.map(function (u) { + return
{u.first_name} {u.last_name}
}) } return ( -
-

Users

- {usersDivs} -
+
+

Users

+ {usersDivs} +
); } export default Users; \ No newline at end of file diff --git a/src/containers/ChangeTemperatureContainer.js b/src/containers/ChangeTemperatureContainer.js new file mode 100644 index 0000000..d8e2c0d --- /dev/null +++ b/src/containers/ChangeTemperatureContainer.js @@ -0,0 +1,14 @@ +import { connect } from 'react-redux'; +import ChangeTemperature from "../components/ChangeTemperature"; +import { setTemp } from "../actions"; + +function mapDispatchToProps(dispatch) { + return { + set: function (temp) { + let action = setTemp(temp) + dispatch(action) + } + } +} + +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..24940f0 --- /dev/null +++ b/src/containers/CityDropdownContainer.js @@ -0,0 +1,14 @@ +import { connect } from 'react-redux'; +import CityDropDown from "../components/CityDropDown"; +import { setCurrentCity } from "../actions"; + +function mapDispatchToProps(dispatch) { + return { + set: function (city) { + let action = setCurrentCity(city) + dispatch(action) + } + } +} + +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..a247cc9 --- /dev/null +++ b/src/containers/CounterButtonContainer.js @@ -0,0 +1,18 @@ +import { connect } from 'react-redux'; +import CounterButton from "../components/CounterButton"; +import { increaseCounter, decreaseCounter } from "../actions"; + +function mapDispatchToProps(dispatch) { + return { + increase: function () { + let action = increaseCounter() + dispatch(action) + }, + decrease: function () { + let action = decreaseCounter() + dispatch(action) + } + } +} + +export default connect(null, mapDispatchToProps)(CounterButton) diff --git a/src/containers/CounterContainer.js b/src/containers/CounterContainer.js new file mode 100644 index 0000000..100fea5 --- /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..b8327da --- /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..f6f5e11 --- /dev/null +++ b/src/containers/ModalContainer.js @@ -0,0 +1,15 @@ +import { connect } from 'react-redux'; +import Modal from "../components/Modal"; +import { setIsLoading } from "../actions"; + +const mapDispatchToProps = { + setIsLoading: setIsLoading +} + +function mapStateToProps(state) { + return { + isLoading: state.isLoading + } +} + +export default connect(mapStateToProps, mapDispatchToProps)(Modal) \ No newline at end of file diff --git a/src/containers/ScaleVideoContainer.js b/src/containers/ScaleVideoContainer.js new file mode 100644 index 0000000..d531e79 --- /dev/null +++ b/src/containers/ScaleVideoContainer.js @@ -0,0 +1,14 @@ +import { connect } from 'react-redux'; +import ScaleVideo from "../components/ScaleVideo"; +import { setVideoScale } from "../actions"; + +function mapDispatchToProps(dispatch) { + return { + set: function (num) { + let action = setVideoScale(num) + dispatch(action) + } + } +} + +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..295a160 --- /dev/null +++ b/src/containers/SearchTextBoxContainer.js @@ -0,0 +1,14 @@ +import { connect } from 'react-redux'; +import SearchTextBox from "../components/SearchTextBox"; +import { setSearchText } from "../actions"; + +function mapDispatchToProps(dispatch) { + return { + set: function (txt) { + let action = setSearchText(txt) + dispatch(action) + } + } +} + +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..424af24 --- /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"; + +const mapDispatchToProps = { + setIsLoading: setIsLoading +} + +export default connect(null, mapDispatchToProps)(ShowModal) \ No newline at end of file diff --git a/src/containers/SortUsersContainer.js b/src/containers/SortUsersContainer.js new file mode 100644 index 0000000..8c15931 --- /dev/null +++ b/src/containers/SortUsersContainer.js @@ -0,0 +1,9 @@ +import { connect } from 'react-redux'; +import SortUsers from "../components/SortUsers"; +import { setCurrentUserSort } from "../actions"; + +const mapDispatchToProps = { + set: setCurrentUserSort +} + +export default connect(null, mapDispatchToProps)(SortUsers) \ No newline at end of file diff --git a/src/containers/SpecialTextBoxContainer.js b/src/containers/SpecialTextBoxContainer.js index 58e9b4c..7af506d 100644 --- a/src/containers/SpecialTextBoxContainer.js +++ b/src/containers/SpecialTextBoxContainer.js @@ -1,11 +1,11 @@ import { connect } from 'react-redux'; -import {setSpecialText} from "../actions"; +import { setSpecialText } from "../actions"; import SpecialTextBox from "../components/SpecialTextBox"; - +// same thing as store.dispatch({type:whatever}) const mapDispatchToProps = { - set:setSpecialText - } + set: setSpecialText +} -export default connect(null,mapDispatchToProps)(SpecialTextBox); +export default connect(null, mapDispatchToProps)(SpecialTextBox); diff --git a/src/containers/SpecialTextContainer.js b/src/containers/SpecialTextContainer.js index 794bd45..5565087 100644 --- a/src/containers/SpecialTextContainer.js +++ b/src/containers/SpecialTextContainer.js @@ -1,9 +1,9 @@ import { connect } from 'react-redux'; -import {setCurrentUser} from "../actions"; +// import { setCurrentUserSort } from "../actions"; import SpecialText from "../components/SpecialText"; //map a prop called text to the state specialText -function mapStateToProps(state){ +function mapStateToProps(state) { return { text: state.specialText } diff --git a/src/containers/ThermostatContainer.js b/src/containers/ThermostatContainer.js new file mode 100644 index 0000000..2b890a0 --- /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/UserButtonsContainer.js b/src/containers/UserButtonsContainer.js new file mode 100644 index 0000000..d27ae2b --- /dev/null +++ b/src/containers/UserButtonsContainer.js @@ -0,0 +1,18 @@ +import { connect } from 'react-redux'; +import UserButtons from "../components/UserButtons"; +import { add, removeUser } from "../actions"; + +function mapDispatchToProps(dispatch) { + return { + add: function (user) { + let action = add(user); + dispatch(action) + }, + remove: function () { + let action = removeUser(); + dispatch(action) + } + } +} + +export default connect(null, mapDispatchToProps)(UserButtons) \ No newline at end of file diff --git a/src/containers/UsersContainer.js b/src/containers/UsersContainer.js new file mode 100644 index 0000000..484bde4 --- /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/containers/VideoPlayerContainer.js b/src/containers/VideoPlayerContainer.js new file mode 100644 index 0000000..9d8bf05 --- /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 { + URL: state.videoURL, + scale: state.videoScale + } +} + +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..ac8e794 --- /dev/null +++ b/src/containers/VideoTextBoxContainer.js @@ -0,0 +1,14 @@ +import { connect } from 'react-redux'; +import VideoTextBox from "../components/VideoTextBox"; +import { setVideoURL } from "../actions"; + +function mapDispatchToProps(dispatch) { + return { + set: function (txt) { + let action = setVideoURL(txt) + dispatch(action) + } + } +} + +export default connect(null, mapDispatchToProps)(VideoTextBox) \ No newline at end of file diff --git a/src/index.js b/src/index.js index 25f54ba..b61c630 100644 --- a/src/index.js +++ b/src/index.js @@ -2,9 +2,11 @@ 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..8eee586 100644 --- a/src/reducers/index.js +++ b/src/reducers/index.js @@ -1,29 +1,87 @@ +import { combineReducers } from "redux"; -function currentCount(state=0, action){ - if(action.type === "INCREASE_COUNTER"){ - +function currentCount(state = 0, action) { + 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") { + return [...state, action.value] + } + + if (action.type === "REMOVE_USER") { + return state.slice(1); + } + return state; +} + + +function specialText(state = "", action) { + 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 users(state =[], action){ - if(action.type === "ADD_USER"){ +function currentTemp(state = "", 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; } - if(action.type === "REMOVE_USER"){ - + return state; +} + +function videoURL(state = "", action) { + if (action.type === "SET_VIDEO_URL") { + return action.value; } return state; } +function currentUserSort(state = "", 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 = "", action) { + if (action.type === "SET_VIDEO_SCALE") { return action.value; } return state; } +let reducers = combineReducers({ + currentCount, users, specialText, currentCity, searchText, currentTemp, + isLoading, videoURL, currentUserSort, videoScale +}) + +export default reducers; + diff --git a/src/state.js b/src/state.js index 7c89a59..425b387 100644 --- a/src/state.js +++ b/src/state.js @@ -1,78 +1,86 @@ -export default{ - currentCount:0, - specialText:"", - currentCity:"", - searchText:"", +export default { + currentCount: 0, + specialText: "", + currentCity: "", + searchText: "", currentTemp: 0, isLoading: false, videoURL: "", - currentUserSort:"first_name", - videoScale:1, + currentUserSort: "first_name", + videoScale: 1, users: [ - { - "id": 1, - "name": "george bluth", - "address": "4116 Magnolia Drive, Portland, ME 04103", - "phone": 15551234567, - "occupation": "father", - "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/calebogden/128.jpg" - }, - { - "id": 2, - "name": "lucille ball", - "address": "6428 3rd Street East, Zion, IL 60099", - "phone": 15552345678, - "occupation": "mother", - "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/josephstein/128.jpg" - }, - { - "id": 3, - "name": "oscar grouch", - "address": "4797 Sycamore Lane, Dover, NH 03820", - "phone": 15553456789, - "occupation": "uncle", - "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/olegpogodaev/128.jpg" - }, - { - "id": 4, - "name": "Steve Holt", - "address": "3722 Circle Drive, Bristow, VA 20136", - "phone": 15554567890, - "occupation": "friend", - "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/marcoramires/128.jpg" - }, - { - "id": 5, - "name": "gob bluth", - "address": "959 Hilltop Road, Apple Valley, CA 92307", - "phone": 15555678901, - "occupation": "brother", - "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/stephenmoon/128.jpg" - }, - { - "id": 6, - "name": "Tracey Ulman", - "address": "2640 Primrose Lane, Longview, TX 75604", - "phone": 15556789012, - "occupation": "wife", - "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/bigmancho/128.jpg" - }, - { - "id": 7, - "name": "Ted Mosbey", - "address": "959 Hilltop Road, Apple Valley, CA 92307", - "phone": 15555678901, - "occupation": "brother", - "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/stephenmoon/128.jpg" - }, - { - "id": 7, - "name": "Barney Stinson", - "address": "2640 Primrose Lane, Longview, TX 75604", - "phone": 15556789012, - "occupation": "wife", - "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/bigmancho/128.jpg" - } -] + { + "id": 1, + "first_name": "george", + "last_name": "bluth", + "address": "4116 Magnolia Drive, Portland, ME 04103", + "phone": 15551234567, + "occupation": "father", + "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/calebogden/128.jpg" + }, + { + "id": 2, + "first_name": "lucille", + "last_name": "ball", + "address": "6428 3rd Street East, Zion, IL 60099", + "phone": 15552345678, + "occupation": "mother", + "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/josephstein/128.jpg" + }, + { + "id": 3, + "first_name": "oscar", + "last_name": "grouch", + "address": "4797 Sycamore Lane, Dover, NH 03820", + "phone": 15553456789, + "occupation": "uncle", + "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/olegpogodaev/128.jpg" + }, + { + "id": 4, + "first_name": "Steve", + "last_name": "Holt", + "address": "3722 Circle Drive, Bristow, VA 20136", + "phone": 15554567890, + "occupation": "friend", + "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/marcoramires/128.jpg" + }, + { + "id": 5, + "first_name": "gob", + "last_name": "bluth", + "address": "959 Hilltop Road, Apple Valley, CA 92307", + "phone": 15555678901, + "occupation": "brother", + "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/stephenmoon/128.jpg" + }, + { + "id": 6, + "first_name": "Tracey", + "last_name": "Ulman", + "address": "2640 Primrose Lane, Longview, TX 75604", + "phone": 15556789012, + "occupation": "wife", + "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/bigmancho/128.jpg" + }, + { + "id": 7, + "first_name": "Ted", + "last_name": "Mosbey", + "address": "959 Hilltop Road, Apple Valley, CA 92307", + "phone": 15555678901, + "occupation": "brother", + "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/stephenmoon/128.jpg" + }, + { + "id": 7, + "first_name": "Barney", + "last_name": "Stinson", + "address": "2640 Primrose Lane, Longview, TX 75604", + "phone": 15556789012, + "occupation": "wife", + "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/bigmancho/128.jpg" + } + ] } \ No newline at end of file diff --git a/src/store.js b/src/store.js index 85e79b2..9589518 100644 --- a/src/store.js +++ b/src/store.js @@ -1,7 +1,7 @@ -import {createStore} from 'redux'; +import { createStore } from 'redux'; import state from "./state"; import reducers from "./reducers"; -var store = createStore(reducers,state); +let store = createStore(reducers, state); export default store; \ No newline at end of file