fix bugs

src/actions/index.js

@@ -102,6 +102,13 @@ export function checkRoutesData() {
 export function checkLastRoutesData() {
   return (dispatch, getState) => {
     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) {
+      return
+    }
+
     console.log(`fetching ${limit +LIMIT_INCREMENT } routes`)
     dispatch({
       type: Types.ACTION_UPDATE_ROUTE_LIMIT,

src/actions/startup.js

@@ -41,7 +41,7 @@ async function initDevices() {
 export default function init() {
   return async (dispatch, getState) => {
     let state = getState();
-    if (state.dongleId) {
+    if (state.dongleId && !state.routes) {
       dispatch(checkLastRoutesData());
     }
 

src/components/Dashboard/DriveList.jsx

@@ -42,8 +42,8 @@ const DriveList = (props) => {
     content = (
       <div className={`${classes.drives} DriveList`}>
         {displayRoutes.map((drive, index) => {
-            // when the second to last item is in view, we fetch the next routes
-            return (index === routesSize - 2 ?
+            // when the last item is in view, we fetch the next routes
+            return (index === routesSize - 1 ?
               <ScrollIntoView key={drive.fullname} onInView={() => dispatch(checkLastRoutesData())}>
                 <DriveListItem drive={drive} />
               </ScrollIntoView> :

src/components/DeviceInfo/index.jsx

@@ -5,6 +5,7 @@ import * as Sentry from '@sentry/react';
 import dayjs from 'dayjs';
 
 import { withStyles, Typography, Button, CircularProgress, Popper, Tooltip } from '@material-ui/core';
+import AccessTime from '@material-ui/icons/AccessTime';
 
 import { athena as Athena, devices as Devices } from '@commaai/api';
 import { analyticsEvent } from '../../actions';
@@ -110,6 +111,11 @@ const styles = (theme) => ({
     padding: '5px 10px',
     borderRadius: 15,
   },
+  actionButtonIcon: {
+    minWidth: 60,
+    padding: '8px 16px',
+    borderRadius: 15,
+  },
   snapshotContainer: {
     borderBottom: `1px solid ${Colors.white10}`,
   },
@@ -525,10 +531,10 @@ class DeviceInfo extends Component {
             : 'take snapshot'}
         </Button>
         <Button
-          classes={{ root: `${classes.button} ${actionButtonClass}` }}
+          classes={{ root: `${classes.button} ${classes.actionButtonIcon}` }}
           onClick={ this.onOpenTimeSelect }
         >
-          set time filter
+          <AccessTime fontSize="inherit"/>
         </Button>
         <Popper
           className={ classes.popover }

src/components/explorer.jsx

@@ -136,7 +136,7 @@ class ExplorerApp extends Component {
   }
 
   componentDidUpdate(prevProps, prevState) {
-    const { pathname, zoom, dongleId } = this.props;
+    const { pathname, zoom, dongleId, limit } = this.props;
 
     if (prevProps.pathname !== pathname) {
       this.setState({ drawerIsOpen: false });
@@ -149,9 +149,10 @@ class ExplorerApp extends Component {
       this.props.dispatch(pause());
     }
 
-    if (prevProps.dongleId !== dongleId) {
-      const d = new Date();
-      d.setHours(d.getHours() + 1, 0, 0, 0);
+    // this is necessary when user goes to explorer for the first time, dongleId is not populated in state yet
+    // so init() will not successfully fetch routes data
+    // when checkLastRoutesData is called within init(), it would set limit so we don't need to check again
+    if (prevProps.dongleId !== dongleId && limit === 0) {
       this.props.dispatch(checkLastRoutesData());
     }
   }
@@ -255,6 +256,7 @@ const stateToProps = Obstruction({
   pathname: 'router.location.pathname',
   dongleId: 'dongleId',
   devices: 'devices',
+  limit: 'limit',
 });
 
 export default connect(stateToProps)(withStyles(styles)(ExplorerApp));