feat(time-slider): save time in store (#171)

package.json

@@ -37,6 +37,7 @@
     "@types/react-router-dom": "^5.1.0",
     "@types/redux-logger": "^3.0.7",
     "cesium": "^1.61.0",
+    "lodash.debounce": "^4.0.8",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
     "react-intl": "^3.3.2",
@@ -49,6 +50,7 @@
   "devDependencies": {
     "@types/cesium": "^1.59.0",
     "@types/classnames": "^2.2.9",
+    "@types/lodash.debounce": "^4.0.6",
     "@types/react": "^16.9.2",
     "@types/react-dom": "^16.9.0",
     "@types/react-redux": "^7.1.2",

src/scripts/actions/set-globe-time.ts

@@ -0,0 +1,13 @@
+export const SET_GLOBE_TIME = 'SET_GLOBE_TIME';
+
+export interface SetGlobeTimeAction {
+  type: typeof SET_GLOBE_TIME;
+  time: number;
+}
+
+const setGlobeTimeAction = (time: number): SetGlobeTimeAction => ({
+  type: SET_GLOBE_TIME,
+  time
+});
+
+export default setGlobeTimeAction;

src/scripts/components/time-slider/time-slider.tsx

@@ -1,16 +1,33 @@
-import React, {FunctionComponent, useState, useMemo, useEffect} from 'react';
-import {useSelector} from 'react-redux';
+import React, {
+  FunctionComponent,
+  useState,
+  useMemo,
+  useEffect,
+  useCallback
+} from 'react';
+import {useSelector, useDispatch} from 'react-redux';
+import debounce from 'lodash.debounce';
 
 import {selectedLayersSelector} from '../../reducers/layers/selected';
 import {detailedLayersSelector} from '../../reducers/layers/details';
+import setGlobeTime from '../../actions/set-globe-time';
 
 import styles from './time-slider.styl';
 
+const DELAY = 200;
+
 const TimeSlider: FunctionComponent = () => {
+  const dispatch = useDispatch();
   const [time, setTime] = useState(0);
   const stepSize = 1000 * 60 * 60 * 24; // one day
   const selectedLayers = useSelector(selectedLayersSelector);
   const detailedLayers = useSelector(detailedLayersSelector);
+  const debouncedSetGlobeTime = useCallback(
+    debounce((newTime: number) => dispatch(setGlobeTime(newTime)), DELAY, {
+      maxWait: DELAY
+    }),
+    []
+  );
 
   // get only active layer ids
   const activeLayers = useMemo(
@@ -62,7 +79,11 @@ const TimeSlider: FunctionComponent = () => {
         className={styles.input}
         type="range"
         value={time}
-        onChange={({target}) => setTime(parseInt(target.value, 10))}
+        onChange={({target}) => {
+          const newTime = parseInt(target.value, 10);
+          setTime(newTime);
+          debouncedSetGlobeTime(newTime);
+        }}
         min={min}
         max={max}
         step={stepSize}

src/scripts/config/main.ts

@@ -2,6 +2,7 @@ import {GlobeState} from '../reducers/globe/index';
 import {GlobeProjection} from '../types/globe-projection';
 
 const globeState: GlobeState = {
+  time: 0,
   projection: GlobeProjection.Sphere,
   view: {
     position: {

src/scripts/libs/globe-url-parameter.ts

@@ -20,7 +20,7 @@ export function parseUrl(): GlobeState | null {
 
   const splitted = globeParam.split(char);
 
-  if (splitted.length !== 7) {
+  if (splitted.length !== 8) {
     return null;
   }
 
@@ -58,16 +58,17 @@ export function parseUrl(): GlobeState | null {
         roll: values[5]
       }
     },
-    projection
+    projection,
+    time: values[6]
   };
 }
 
 export function getParamString(globeState: GlobeState): string | null {
-  const {view, projection} = globeState;
+  const {view, projection, time} = globeState;
   const {position, orientation} = view;
   const {longitude, latitude, height} = position;
   const {heading, pitch, roll} = orientation;
-  const values = [longitude, latitude, height, heading, pitch, roll];
+  const values = [longitude, latitude, height, heading, pitch, roll, time];
 
   if (values.some(num => isNaN(num))) {
     return null;

src/scripts/reducers/globe/index.ts

@@ -2,12 +2,14 @@ import {combineReducers} from 'redux';
 
 import projectionReducer from './projection';
 import viewReducer from './view';
+import timeReducer from './time';
 
 import {State} from '../index';
 
 const globeReducer = combineReducers({
   view: viewReducer,
-  projection: projectionReducer
+  projection: projectionReducer,
+  time: timeReducer
 });
 
 export default globeReducer;

src/scripts/reducers/globe/time.ts

@@ -0,0 +1,24 @@
+import {SET_GLOBE_TIME, SetGlobeTimeAction} from '../../actions/set-globe-time';
+import config from '../../config/main';
+
+import {State} from '../index';
+
+const initialState = config.globe.time;
+
+function timeReducer(
+  state: number = initialState,
+  action: SetGlobeTimeAction
+): number {
+  switch (action.type) {
+    case SET_GLOBE_TIME:
+      return action.time;
+    default:
+      return state;
+  }
+}
+
+export function timeSelector(state: State): number {
+  return state.globe.time;
+}
+
+export default timeReducer;