redux functionality for sensor page

client/js/components/sensors/SensorInfo.js

@@ -1,34 +1,52 @@
 import React from 'react';
 
-let location, sensor, actions, uniqueDates;
+let location, sensor, actions, uniqueDates, fetchedAll;
 
 export default class SensorInfo extends React.Component{
     
     componentDidMount(){
         location = this.props.params.location;
-        actions = this.props.sensorActions;
+        this.props.sensorActions.fetchUniqueDates(location);
-        sensor = this.props.sensor;
-        
-        actions.fetchUniqueDates(location);
-        
-        /*
-        this.props.sensorActions.fetchSensorInfoYear('Grand Meadow', '2016');
-        this.props.sensorActions.fetchSensorInfoMonth('Grand Meadow', '2016', 'May');
-        this.props.sensorActions.fetchUniqueDates('Grand Meadow');
-        */
     }
     
-    componentWillReceiveProps(){
+    loadYearOptions = (date, index) => {
-        if(sensor.fetchedUniqueDates){
+        return (
-            uniqueDates = sensor.uniqueDates;
+            <option key={index} value={index}>{date.year}</option>
-            
+        );
-            //!sensor.fetchedInfoMonth ? actions.fetchSensorInfoMonth(location, )
+    }
-        }
+    
+    loadMonthOptions = (date, index) => {
+        return (
+            <option key={index} value={index}>{date.monthname}</option>
+        );
+    }
+    
+    onYearChange(event){
+        this.props.sensorActions.setSelectedYearIndex(parseInt(event.target.value));
+    }
+    
+    onMonthChange(event){
+        this.props.sensorActions.setSelectedMonthIndex(parseInt(event.target.value));
     }
     
     render(){
+        sensor = this.props.sensor;
         return(
-            <div class="Content">Test123</div>
+            <div class="Content">
+                <select onChange={this.onYearChange.bind(this)}>
+                    {sensor.fetchedUniqueDates
+                        ? sensor.uniqueDates.map(this.loadYearOptions)
+                        : null
+                    }
+                </select>
+                
+                <select onChange={this.onMonthChange.bind(this)}>
+                    {sensor.fetchedUniqueDates
+                        ? sensor.uniqueDates[sensor.selectedYearIndex].months.map(this.loadMonthOptions)
+                        : null
+                    }
+                </select>
+            </div>
             );
     }
 }

client/js/redux/actions/sensor.js

@@ -29,6 +29,20 @@ function loadUniqueDates(dates){
     }
 }
 
+export function setSelectedYearIndex(index){
+    return{
+        type: types.SET_SELECTED_YEAR_INDEX,
+        index
+    }
+}
+
+export function setSelectedMonthIndex(index){
+    return{
+        type: types.SET_SELECTED_MONTH_INDEX,
+        index
+    }
+}
+
 function fetchingList(){
     return {
         type: types.FETCHING_LIST
@@ -102,9 +116,15 @@ export function fetchUniqueDates(location){
             .then(response => response.json())
             .then(json => {
                 dispatch(loadUniqueDates(json));
+                if(json.length > 0){
+                    let year = json[0].year;
+                    let month = json[0].months[0].monthname;
+                    dispatch(fetchSensorInfoYear(location, year));
+                    dispatch(fetchSensorInfoMonth(location, year, month));
+                }
             })
             .catch(error => {
                 console.log(error);
             });
     }
-}
+}

client/js/redux/constants/sensor.js

@@ -8,4 +8,8 @@ export const LOAD_UNIQUE_DATES = 'LOAD_UNIQUE_DATES';
 export const FETCHING_LIST = 'FETCHING_LIST';
 export const FETCHING_INFO_YEAR = 'FETCHING_INFO_YEAR';
 export const FETCHING_INFO_MONTH = 'FETCHING_INFO_MONTH';
-export const FETCHING_UNIQUE_DATES = 'FETCHING_UNIQUE_DATES';
+export const FETCHING_UNIQUE_DATES = 'FETCHING_UNIQUE_DATES';
+
+//indexes
+export const SET_SELECTED_YEAR_INDEX = 'SET_SELECTED_YEAR_INDEX';
+export const SET_SELECTED_MONTH_INDEX = 'SET_SELECTED_MONTH_INDEX';

client/js/redux/reducers/sensor.js

@@ -8,6 +8,9 @@ const defaultState = {
     infoYear: [],
     uniqueDates: {},
     
+    selectedYearIndex: 0,
+    selectedMonthIndex: 0,
+    
     fetchingList: false,
     fetchingInfoMonth: false,
     fetchingInfoYear: false,
@@ -69,6 +72,16 @@ export default function app(state = defaultState, action) {
                fetchingUniqueDates: false,
                fetchedUniqueDates: true
             });
+            
+        //indexes
+        case types.SET_SELECTED_YEAR_INDEX:
+            return Object.assign({}, state, {
+                selectedYearIndex: action.index
+            });
+        case types.SET_SELECTED_MONTH_INDEX:
+            return Object.assign({}, state, {
+                selectedMonthIndex: action.index
+            });
     }
     //return present state if no actions get called
     return state;