fix time select not display routes events

src/actions/index.js

@@ -104,8 +104,8 @@ export function checkLastRoutesData() {
     const limit = getState().limit
     const routes = getState().routes
 
-    // if current routes are not a multiple of LIMIT_INCREMENT, that means the last fetch already fetched all the routes
-    if (routes && routes.length % LIMIT_INCREMENT !== 0) {
+    // if current routes are fewer than limit, that means the last fetch already fetched all the routes
+    if (routes && routes.length > limit) {
       return
     }
 

src/components/Dashboard/DriveList.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import Obstruction from 'obstruction';
-import { withStyles } from '@material-ui/core';
+import { withStyles, Typography } from '@material-ui/core';
 
 import { checkRoutesData, checkLastRoutesData } from '../../actions';
 import VisibilityHandler from '../VisibilityHandler';
@@ -20,14 +20,24 @@ const styles = () => ({
     padding: 16,
     flex: '1',
   },
+  endMessage: {
+    padding: 8,
+    textAlign: 'center',
+  },
 });
 
 const DriveList = (props) => {
   const { dispatch, classes, device, routes, lastRoutes } = props;
-  let emptyContent;
+  let contentStatus;
   let content;
   if (!routes || routes.length === 0) {
-    emptyContent = <DriveListEmpty device={device} routes={routes} />;
+    contentStatus = <DriveListEmpty device={device} routes={routes} />;
+  } else if (routes && routes.length > 5) {
+    contentStatus = (
+      <div className={classes.endMessage}>
+        <Typography>There are no more routes found in selected time range.</Typography>
+      </div>
+    );
   }
 
   // we clean up routes during data fetching, fallback to using lastRoutes to display current data
@@ -57,7 +67,7 @@ const DriveList = (props) => {
     <div className={classes.drivesTable}>
       <VisibilityHandler onVisible={() => dispatch(checkRoutesData())} minInterval={60} />
       {content}
-      {emptyContent}
+      {contentStatus}
     </div>
   );
 };

src/components/ScrollIntoView/index.jsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef } from 'react';
 
-const ScrollIntoView = ({ onInView, children, key }) => {
+const ScrollIntoView = ({ onInView, children }) => {
   const elementRef = useRef(null);
   const hasDispatched = useRef(false);
 

src/components/TimeSelect/index.jsx

@@ -63,6 +63,22 @@ class TimeSelect extends Component {
     this.handleSave = this.handleSave.bind(this);
   }
 
+  componentDidMount() {
+    this.setState({
+      start: this.props.filter.start,
+      end: this.props.filter.end,
+    });
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.filter !== this.props.filter) {
+      this.setState({
+        start: this.props.filter.start,
+        end: this.props.filter.end,
+      });
+    }
+  }
+
   handleClose() {
     this.props.onClose()
   }
@@ -84,6 +100,7 @@ class TimeSelect extends Component {
   }
 
   handleSave() {
+    console.log({start: this.state.start, end: this.state.end})
     this.props.dispatch(selectTimeFilter(this.state.start, this.state.end));
     this.props.onClose()
   }

src/reducers/globalState.js

@@ -331,8 +331,8 @@ export default function reducer(_state, action) {
         const existingRoute = state.lastRoutes ?
           state.lastRoutes.find((r) => r.fullname === route.fullname) : {};
         return {
-          ...route,
           ...existingRoute,
+          ...route,
         }
       });
       state.routesMeta = {