diff --git a/client/js/app.js b/client/js/app.js index f8913dc..9560bed 100644 --- a/client/js/app.js +++ b/client/js/app.js @@ -9,7 +9,8 @@ import {connect, Provider} from 'react-redux'; import store, {history} from './redux/store'; //import actions -import * as actions from './redux/actions'; +import * as appActions from './redux/actions/app'; +import * as sensorActions from './redux/actions/sensor'; import Index from './pages/Index'; import Preview from './components/Preview'; @@ -18,13 +19,15 @@ import SensorInfo from './components/sensors/SensorInfo'; function mapStateToProps(state) { return { - redux: state.reducer + app: state.app, + sensor: state.sensor } } function mapDispatchToProps(dispatch) { return { - actions: bindActionCreators(actions, dispatch) + appActions: bindActionCreators(appActions, dispatch), + sensorActions: bindActionCreators(sensorActions, dispatch) } } diff --git a/client/js/components/Post.js b/client/js/components/Post.js index 4f1d13a..188153b 100644 --- a/client/js/components/Post.js +++ b/client/js/components/Post.js @@ -21,13 +21,13 @@ export default class Post extends React.Component { componentDidMount() { const params = this.props.params; - this.props.actions.fetchPost(params.category, params.post); + this.props.appActions.fetchPost(params.category, params.post); } render() { - const post = this.props.redux.post; - const fetched = this.props.redux.fetched; - const fetching = this.props.redux.fetching; + const post = this.props.app.post; + const fetched = this.props.app.fetched; + const fetching = this.props.app.fetching; return (
diff --git a/client/js/components/Preview.js b/client/js/components/Preview.js index bfeaae9..9355c84 100644 --- a/client/js/components/Preview.js +++ b/client/js/components/Preview.js @@ -9,12 +9,12 @@ import '../../assets/scss/Content.scss'; export default class Preview extends React.Component { componentDidMount() { - this.props.actions.fetchPreview(); + this.props.appActions.fetchPreview(); } insertPosts(posts) { let elements = []; - for (let i = 0; i < this.props.redux.postLimit && i < posts.length; i++) { + for (let i = 0; i < this.props.app.postLimit && i < posts.length; i++) { elements.push(
@@ -34,10 +34,10 @@ export default class Preview extends React.Component { } render() { - const posts = this.props.redux.preview.posts; - const postLimit = this.props.redux.postLimit; - const increasePostLimit = this.props.actions.increasePostLimit; - const fetched = this.props.redux.fetched; + const posts = this.props.app.preview.posts; + const postLimit = this.props.app.postLimit; + const fetched = this.props.app.fetched; + const increasePostLimit = this.props.appActions.increasePostLimit; return (
diff --git a/client/js/components/Sidebar.js b/client/js/components/Sidebar.js index 33cce28..ce12e27 100644 --- a/client/js/components/Sidebar.js +++ b/client/js/components/Sidebar.js @@ -63,7 +63,7 @@ export default class Sidebar extends React.Component {

Sensors

- + {this.props.sensor.fetchedList ? : null}
); } diff --git a/client/js/components/sensors/SensorInfo.js b/client/js/components/sensors/SensorInfo.js index 38c80fc..dcd0f3b 100644 --- a/client/js/components/sensors/SensorInfo.js +++ b/client/js/components/sensors/SensorInfo.js @@ -2,10 +2,13 @@ import React from 'react'; export default class SensorInfo extends React.Component{ - + componentDidMount(){ + this.props.sensorActions.fetchSensorInfoYear('Grand Meadow', '2016'); + this.props.sensorActions.fetchSensorInfoMonth('Grand Meadow', '2016', 'May'); + } render(){ return( -
Test123
+
Test123
); } } \ No newline at end of file diff --git a/client/js/components/sensors/SensorList.js b/client/js/components/sensors/SensorList.js index fe6a02e..d7b79eb 100644 --- a/client/js/components/sensors/SensorList.js +++ b/client/js/components/sensors/SensorList.js @@ -3,41 +3,6 @@ import 'whatwg-fetch'; export default class SensorList extends React.Component { - constructor() { - super(); - - this.state = { - sensors: {}, - fetching: false, - fetched: false - } - } - - componentDidMount() { - this.loadSensorData(); - } - - loadSensorData() { - this.setState({ - fetching: true - }); - - fetch('/api/allsensors') - .then((response) => { - return response.json() - }) - .then((json) => { - this.setState({ - sensors: json, - fetching: false, - fetched: true - }); - }) - .catch((e) => { - console.log('Loading sensors failed', e) - }); - } - insertSensorData = (sensor, index) => { const date = new Date(sensor.updated); @@ -50,9 +15,11 @@ export default class SensorList extends React.Component { ); } render() { + const list = this.props.list; + return (
- {this.state.fetched ? this.state.sensors.map(this.insertSensorData) : null} + {list.map(this.insertSensorData)}
) } diff --git a/client/js/pages/Index.js b/client/js/pages/Index.js index 33c1408..308d94c 100644 --- a/client/js/pages/Index.js +++ b/client/js/pages/Index.js @@ -12,14 +12,17 @@ import 'font-awesome/css/font-awesome.min.css'; import '../../assets/css/dracula.css'; export default class Index extends React.Component { - + + componentDidMount(){ + this.props.sensorActions.fetchSensorList(); + } render() { return (
{React.cloneElement(this.props.children, this.props)} - +
diff --git a/client/js/redux/actions.js b/client/js/redux/actions/app.js similarity index 96% rename from client/js/redux/actions.js rename to client/js/redux/actions/app.js index 77568f9..b1c9018 100644 --- a/client/js/redux/actions.js +++ b/client/js/redux/actions/app.js @@ -1,4 +1,4 @@ -import * as types from "./constants"; +import * as types from "../constants/app"; import marked from 'marked'; import 'whatwg-fetch'; diff --git a/client/js/redux/actions/sensor.js b/client/js/redux/actions/sensor.js new file mode 100644 index 0000000..e356e99 --- /dev/null +++ b/client/js/redux/actions/sensor.js @@ -0,0 +1,83 @@ +import * as types from "../constants/sensor"; +import 'whatwg-fetch'; + +function loadSensorList(sensor_list){ + return { + type: types.LOAD_SENSOR_LIST, + sensor_list + } +} + +function loadSensorInfoYear(sensor_info){ + return{ + type: types.LOAD_SENSOR_INFO_YEAR, + sensor_info + } +} + +function loadSensorInfoMonth(sensor_info){ + return{ + type: types.LOAD_SENSOR_INFO_MONTH, + sensor_info + } +} + +function fetchingList(){ + return { + type: types.FETCHING_LIST + } +} + +function fetchingInfoYear(){ + return { + type: types.FETCHING_INFO_YEAR + } +} + +function fetchingInfoMonth(){ + return { + type: types.FETCHING_INFO_MONTH + } +} + +export function fetchSensorList(){ + return (dispatch) => { + dispatch(fetchingList()); + return fetch('/api/allsensors') + .then(response => response.json()) + .then(json => { + dispatch(loadSensorList(json)); + }) + .catch(error => { + console.log(error); + }); + } +} + +export function fetchSensorInfoYear(location, year){ + return (dispatch) => { + dispatch(fetchingInfoYear()); + return fetch(`/api/sensor/${location}/${year}`) + .then(response => response.json()) + .then(json => { + dispatch(loadSensorInfoYear(json)); + }) + .catch(error => { + console.log(error); + }); + } +} + +export function fetchSensorInfoMonth(location, year, month){ + return (dispatch) => { + dispatch(fetchingInfoMonth()); + return fetch(`/api/sensor/${location}/${year}/${month}`) + .then(response => response.json()) + .then(json => { + dispatch(loadSensorInfoMonth(json)); + }) + .catch(error => { + console.log(error); + }); + } +} \ No newline at end of file diff --git a/client/js/redux/constants.js b/client/js/redux/constants/app.js similarity index 100% rename from client/js/redux/constants.js rename to client/js/redux/constants/app.js diff --git a/client/js/redux/constants/sensor.js b/client/js/redux/constants/sensor.js new file mode 100644 index 0000000..ae93469 --- /dev/null +++ b/client/js/redux/constants/sensor.js @@ -0,0 +1,10 @@ +//constants +export const LOAD_SENSOR_LIST = 'LOAD_SENSOR_LIST'; +export const LOAD_SENSOR_INFO_YEAR = 'LOAD_SENSOR_INFO_YEAR'; +export const LOAD_SENSOR_INFO_MONTH = 'LOAD_SENSOR_INFO_MONTH'; + + +//fetching +export const FETCHING_LIST = 'FETCHING_LIST'; +export const FETCHING_INFO_YEAR = 'FETCHING_INFO_YEAR'; +export const FETCHING_INFO_MONTH = 'FETCHING_INFO_MONTH'; \ No newline at end of file diff --git a/client/js/redux/reducers.js b/client/js/redux/reducers/app.js similarity index 75% rename from client/js/redux/reducers.js rename to client/js/redux/reducers/app.js index 79a76d2..5611138 100644 --- a/client/js/redux/reducers.js +++ b/client/js/redux/reducers/app.js @@ -1,9 +1,5 @@ -//just using one reducer - use combineReducers from redux to modularize things -import {combineReducers} from 'redux'; -import {routerReducer} from 'react-router-redux'; - //import typs -import * as types from './constants'; +import * as types from '../constants/app'; //defaults - const defaultState = { @@ -17,7 +13,7 @@ const defaultState = { }; //default reducer -function reducer(state = defaultState, action) { +export default function app(state = defaultState, action) { //every reducer gets called when an action is called - we check for the type to modify our state accordingly switch (action.type) { case types.INIT_PREVIEW: @@ -46,10 +42,3 @@ function reducer(state = defaultState, action) { //return present state if no actions get called return state; } - -const allReducers = combineReducers({ - reducer, - routing: routerReducer -}); - -export default allReducers; diff --git a/client/js/redux/reducers/reducers.js b/client/js/redux/reducers/reducers.js new file mode 100644 index 0000000..5e5d7bd --- /dev/null +++ b/client/js/redux/reducers/reducers.js @@ -0,0 +1,14 @@ +//just using one reducer - use combineReducers from redux to modularize things +import {combineReducers} from 'redux'; +import {routerReducer} from 'react-router-redux'; + +import app from './app'; +import sensor from './sensor'; + +const allReducers = combineReducers({ + app, + sensor, + routing: routerReducer +}); + +export default allReducers; \ No newline at end of file diff --git a/client/js/redux/reducers/sensor.js b/client/js/redux/reducers/sensor.js new file mode 100644 index 0000000..8d5a4af --- /dev/null +++ b/client/js/redux/reducers/sensor.js @@ -0,0 +1,59 @@ +//import typs +import * as types from '../constants/sensor'; + +//defaults - +const defaultState = { + list : [], + infoMonth: [], + infoYear: [], + + fetchingList: false, + fetchingInfoMonth: false, + fetchingInfoYear: false, + + fetchedList: false, + fetchedInfoMonth: false, + fetchedInfoYear: false +}; + +//default reducer +export default function app(state = defaultState, action) { + switch(action.type){ + case types.FETCHING_LIST: + return Object.assign({}, state, { + fetchingList: true, + fetchedList: false + }); + case types.FETCHING_INFO_MONTH: + return Object.assign({}, state, { + fetchingInfoMonth: true, + fetchedInfoMonth: false + }); + case types.FETCHING_INFO_YEAR: + return Object.assign({}, state, { + fetchingInfoYear: true, + fetchedInfoYear: false + }); + + case types.LOAD_SENSOR_LIST: + return Object.assign({}, state, { + list: action.sensor_list, + fetchingList: false, + fetchedList: true + }); + case types.LOAD_SENSOR_INFO_MONTH: + return Object.assign({}, state, { + infoMonth: action.sensor_info, + fetchingInfoMonth: false, + fetchedInfoMonth: true + }); + case types.LOAD_SENSOR_INFO_YEAR: + return Object.assign({}, state, { + infoYear: action.sensor_info, + fetchingInfoYear: false, + fetchedInfoYear: true + }); + } + //return present state if no actions get called + return state; +} diff --git a/client/js/redux/store.js b/client/js/redux/store.js index 4206e8e..b28f24c 100644 --- a/client/js/redux/store.js +++ b/client/js/redux/store.js @@ -4,7 +4,7 @@ import {applyMiddleware, createStore} from 'redux'; import {browserHistory} from 'react-router'; import {syncHistoryWithStore} from 'react-router-redux'; -import reducers from './reducers'; +import reducers from './reducers/reducers'; const middleware = applyMiddleware(thunk, logger());