diff --git a/src/App.js b/src/App.js index 392ed1f..394da80 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/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 ( @@ -52,8 +52,8 @@ function App() {

- - + +
diff --git a/src/actions/index.js b/src/actions/index.js index 78955f4..2e4d695 100644 --- a/src/actions/index.js +++ b/src/actions/index.js @@ -4,10 +4,16 @@ export function increaseCounter(){ } } -export function setSpecialText(txt){ +export function decreaseCounter(){ + return { + type:"DECREASE_COUNTER" + } +} + +export function setSpecialText(text){ return { type:"SET_SPECIAL_TEXT", - value:txt + value:text } } @@ -17,8 +23,59 @@ export function addUser(user){ value:user } } -export function removeUser(){ +export function removeUser(user){ + return { + type:"REMOVE_USER", + value:user + } +} + +export function setCurrentCity(city){ + return { + type:"SET_CURRENT_CITY", + value:city + } +} + +export function setSearchText(text){ return { - type:"REMOVE_USER" + type:"SEARCH_TEXT", + value:text } -} \ No newline at end of file +} + +export function setTemp(temp){ + return { + type:"SET_CURRENT_TEMP", + value:temp + } +} + +export function setIsLoading(isLoading){ + return { + type:"IS_LOADING", + value:isLoading + } +} + +export function setVideoURL(URL){ + return { + type:"SET_VIDEO_URL", + value:URL + } +} + +export function setCurrentUserSort(sort){ + return { + type:"SET_CURRENT_USER", + value:sort + } +} + +export function setVideoScale(scale){ + return { + type:"SET_VIDEO_SCALE", + value:scale + } +} + diff --git a/src/components/SpecialTextBox.js b/src/components/SpecialTextBox.js index 53c3938..f097ddf 100644 --- a/src/components/SpecialTextBox.js +++ b/src/components/SpecialTextBox.js @@ -1,8 +1,7 @@ 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: @@ -15,12 +14,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 + diff --git a/src/containers/ChangeTemperatureContainer.js b/src/containers/ChangeTemperatureContainer.js new file mode 100644 index 0000000..5ce8abc --- /dev/null +++ b/src/containers/ChangeTemperatureContainer.js @@ -0,0 +1,11 @@ +import { connect } from 'react-redux'; +import {setTemp} from "../actions"; +import ChangeTemperature from "../components/ChangeTemperature.js"; + + +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..7ca9911 --- /dev/null +++ b/src/containers/CityDropDownContainer.js @@ -0,0 +1,11 @@ +import { connect } from 'react-redux'; +import {setCurrentCity} from "../actions"; +import CityDropDown from "../components/CityDropDown.js"; + + +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..e848baf --- /dev/null +++ b/src/containers/CounterButtonContainer.js @@ -0,0 +1,12 @@ +import { connect } from 'react-redux'; +import {increaseCounter, decreaseCounter} 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..23a20b2 --- /dev/null +++ b/src/containers/CounterContainer.js @@ -0,0 +1,10 @@ +import { connect } from 'react-redux'; +import Counter from "../components/Counter.js"; + +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..a039f32 --- /dev/null +++ b/src/containers/CurrentCityContainer.js @@ -0,0 +1,10 @@ +import { connect } from 'react-redux'; +import CurrentCity from "../components/CurrentCity.js"; + +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..22ec72b --- /dev/null +++ b/src/containers/ModalContainer.js @@ -0,0 +1,17 @@ +import { connect } from 'react-redux'; +import {setIsLoading} from "../actions" +import Modal from "../components/Modal.js"; + +function mapStateToProps(state){ + return { + setIsLoading: state.setIsLoading + } +} + +const mapDispatchToProps = { + setIsLoading:setIsLoading + } + + +export default connect(mapStateToProps,mapDispatchToProps)(Modal); + diff --git a/src/containers/ScaleVideoContainer.js b/src/containers/ScaleVideoContainer.js new file mode 100644 index 0000000..2fa39a9 --- /dev/null +++ b/src/containers/ScaleVideoContainer.js @@ -0,0 +1,11 @@ +import { connect } from 'react-redux'; +import {setVideoScale} from "../actions"; +import ScaleVideo from "../components/ScaleVideo.js"; + + +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..f8965c6 --- /dev/null +++ b/src/containers/SearchTextBoxContainer.js @@ -0,0 +1,11 @@ +import { connect } from 'react-redux'; +import {setSearchText} from "../actions"; +import SearchTextBox from "../components/SearchTextBox.js"; + + +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..bbed7c4 --- /dev/null +++ b/src/containers/ShowModalContainer.js @@ -0,0 +1,11 @@ +import { connect } from 'react-redux'; +import {setIsLoading} from "../actions"; +import ShowModal from "../components/ShowModal.js"; + + +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..ef5d2b2 --- /dev/null +++ b/src/containers/SortUsersContainer.js @@ -0,0 +1,11 @@ +import { connect } from 'react-redux'; +import {setCurrentUserSort} from "../actions"; +import SortUsers from "../components/SortUsers"; + + +const mapDispatchToProps = { + set:setCurrentUserSort + } + + +export default connect(null,mapDispatchToProps)(SortUsers); \ No newline at end of file diff --git a/src/containers/SpecialTextContainer.js b/src/containers/SpecialTextContainer.js index 794bd45..db1383a 100644 --- a/src/containers/SpecialTextContainer.js +++ b/src/containers/SpecialTextContainer.js @@ -1,5 +1,6 @@ import { connect } from 'react-redux'; -import {setCurrentUser} from "../actions"; +// import {setCurrentUser} from "../actions"; +// import SpecialText from "../components/SpecialText"; import SpecialText from "../components/SpecialText"; //map a prop called text to the state specialText diff --git a/src/containers/ThermostatContainer.js b/src/containers/ThermostatContainer.js new file mode 100644 index 0000000..5eab6f3 --- /dev/null +++ b/src/containers/ThermostatContainer.js @@ -0,0 +1,10 @@ +import { connect } from 'react-redux'; +import Thermostat from "../components/Thermostat.js"; + +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..7392d46 --- /dev/null +++ b/src/containers/UserButtonsContainer.js @@ -0,0 +1,12 @@ +import { connect } from 'react-redux'; +import {addUser, removeUser} from "../actions"; +import Users from "../components/Users.js"; + + +const mapDispatchToProps = { + add:addUser, + remove:removeUser + } + + +export default connect(null,mapDispatchToProps)(Users); \ No newline at end of file diff --git a/src/containers/UsersContainer.js b/src/containers/UsersContainer.js new file mode 100644 index 0000000..b4522e3 --- /dev/null +++ b/src/containers/UsersContainer.js @@ -0,0 +1,28 @@ +import React,{Component} from "react"; +import { connect } from 'react-redux'; +import Users from "../components/Users.js"; +import {addUser} from "../actions"; + +class UsersContainer extends Component { + componentDidMount(){ + fetch("https://jsonplaceholder.typicode.com/users") + .then(res => res.json()) + .then(users=> users.forEach(user=>this.props.addUser(user))); + } + render(){ + return + } +} +function mapStateToProps(state){ + return { + users: state.users, + firstNameFilter: state.searchText, + sortOn: state.currentUserSort + } +} + +const mapDispatchToProps = { + addUser:addUser + } + +export default connect(mapStateToProps, mapDispatchToProps)(UsersContainer); \ No newline at end of file diff --git a/src/containers/VideoPlayerContainer.js b/src/containers/VideoPlayerContainer.js new file mode 100644 index 0000000..8dfcfdd --- /dev/null +++ b/src/containers/VideoPlayerContainer.js @@ -0,0 +1,11 @@ +import { connect } from 'react-redux'; +import VideoPlayer from "../components/VideoPlayer.js"; + +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..b4dba2e --- /dev/null +++ b/src/containers/VideoTextBoxContainer.js @@ -0,0 +1,11 @@ +import { connect } from 'react-redux'; +import {setVideoURL} from "../actions"; +import VideoTextBox from "../components/VideoTextBox.js"; + + +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..d19a769 100644 --- a/src/index.js +++ b/src/index.js @@ -2,9 +2,12 @@ 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.js"; ReactDOM.render( - , + + + , document.getElementById('root') ); diff --git a/src/reducers/index.js b/src/reducers/index.js index dce7c2c..005f433 100644 --- a/src/reducers/index.js +++ b/src/reducers/index.js @@ -1,20 +1,30 @@ +import {combineReducers} from "redux"; + function currentCount(state=0, action){ if(action.type === "INCREASE_COUNTER"){ - + return state + 1; } if(action.type === "DECREASE_COUNTER"){ - + return state - 1; } return state; -} +} + + function users(state =[], action){ if(action.type === "ADD_USER"){ + // let newArray = state.map(p=>p); + // newArray.push(action.value); + // return newArray; + return [...state, /*state.map(p=>p)*/ + action.value /*newArry.push(action.value);*/ + ]; } if(action.type === "REMOVE_USER"){ - + return state.splice(); } return state; } @@ -27,3 +37,57 @@ function specialText(state = "", action){ return state; } +function currentCity(state = "", action){ + if(action.type === "SET_CURRENT_CITY"){ + return action.value; + } + return state; +} + +function searchText(state = "", action){ + if(action.type === "SEARCH_TEXT"){ + return action.value; + } + return state; +} + +function currentTemp(state = "", action){ + if(action.type === "SET_CURRENT_TEMP"){ + return action.value; + } + return state; +} + +function isLoading(state = true, action){ + if(action.type === "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 = "", action){ + if(action.type === "SET_CURRENT_USER"){ + return action.value; + } + return state; +} + +function videoScale(state = 0, 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; \ No newline at end of file diff --git a/src/store.js b/src/store.js index 85e79b2..ea336b7 100644 --- a/src/store.js +++ b/src/store.js @@ -1,5 +1,5 @@ import {createStore} from 'redux'; -import state from "./state"; +import state from "./state.js"; import reducers from "./reducers"; var store = createStore(reducers,state);