handling sensors with redux

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)
     }
 }
 

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 (
       <div class="Content">

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(
         <div class="post" key={i}>
           <div class="date">
@@ -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 (
       <div class="Content">

client/js/components/Sidebar.js

@@ -63,7 +63,7 @@ export default class Sidebar extends React.Component {
 
         <h2>Sensors</h2>
         <hr/>
-        <SensorList/>
+        {this.props.sensor.fetchedList ? <SensorList list={this.props.sensor.list}/> : null}
       </div>
     );
   }

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(
-            <div>Test123</div>
+            <div class="Content">Test123</div>
             );
     }
 }

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 (
       <div>
-        {this.state.fetched ? this.state.sensors.map(this.insertSensorData) : null}
+        {list.map(this.insertSensorData)}
       </div>
     )
   }

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 (
       <div>
             <Header/>
               <div class="Main">
                 {React.cloneElement(this.props.children, this.props)}
-                <Sidebar/>
+                <Sidebar sensor={Object.assign({}, this.props.sensor)}/>
               </div>
             <Footer/>
           </div>

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';
 

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);
+            });
+    }
+}

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';

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;

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;

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;
+}

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());