Track realtime state of itinerary legs

app/component/MobileView.js

@@ -1,11 +1,24 @@
 import PropTypes from 'prop-types';
-import React, { useRef, useLayoutEffect, useState } from 'react';
-import { configShape } from '../util/shapes';
+import React, {
+  useRef,
+  useLayoutEffect,
+  useState,
+  forwardRef,
+  useImperativeHandle,
+} from 'react';
 import MapBottomsheetContext from './map/MapBottomsheetContext';
 import MobileFooter from './MobileFooter';
 
-function slowlyScrollTo(el, to = 0, duration = 1000) {
+const BOTTOM_SHEET_OFFSET = 20;
+const topBarHeight = 64;
+
+function getMiddlePosition() {
+  return Math.floor((window.innerHeight - topBarHeight) * 0.45);
+}
+
+function slowlyScrollTo(el, to, done) {
   const element = el;
+  const duration = 500;
   const start = element.scrollTop;
   const change = to - start;
   const increment = 20;
@@ -20,6 +33,8 @@ function slowlyScrollTo(el, to = 0, duration = 1000) {
 
     if (currentTime < duration) {
       setTimeout(animateScroll, increment);
+    } else {
+      done();
     }
   };
 
@@ -36,101 +51,109 @@ Math.easeInOutQuad = function easeInOutQuad(a, b, c, d) {
   return (-c / 2) * (t * (t - 2) - 1) + b;
 };
 
-export default function MobileView({
-  header,
-  map,
-  content,
-  settingsDrawer,
-  selectFromMapHeader,
-  expandMap,
-  searchBox,
-}) {
-  if (settingsDrawer) {
-    return <div className="mobile">{settingsDrawer}</div>;
-  }
-  const scrollRef = useRef(null);
-  const topBarHeight = 64;
-  // pass these to map according to bottom sheet placement
-  const [bottomsheetState, changeBottomsheetState] = useState({
-    context: { mapBottomPadding: 0, buttonBottomPadding: 0 },
-  });
-
-  useLayoutEffect(() => {
-    if (map) {
-      const paddingHeight = (window.innerHeight - topBarHeight) * 0.9; // height of .drawer-padding, defined as 90% of map height
-      const newSheetPosition = paddingHeight / 2;
-      scrollRef.current.scrollTop = newSheetPosition;
-      changeBottomsheetState({
-        context: {
-          mapBottomPadding: newSheetPosition,
-          buttonBottomPadding: newSheetPosition,
-        },
-      });
-    }
-  }, [header]);
-
-  useLayoutEffect(() => {
-    if (map && expandMap) {
-      const newSheetPosition = 0;
-      slowlyScrollTo(scrollRef.current);
-      changeBottomsheetState({
-        context: {
-          mapBottomPadding: newSheetPosition,
-          buttonBottomPadding: newSheetPosition,
-        },
-      });
+const MobileView = forwardRef(
+  (
+    {
+      header,
+      map,
+      content,
+      settingsDrawer,
+      selectFromMapHeader,
+      mapRef,
+      searchBox,
+    },
+    ref,
+  ) => {
+    if (settingsDrawer) {
+      return <div className="mobile">{settingsDrawer}</div>;
     }
-  }, [expandMap]);
+    const scrollRef = useRef(null);
 
-  const onScroll = e => {
-    if (map) {
+    // pass these to map according to bottom sheet placement
+    const [bottomPadding, setBottomPadding] = useState(getMiddlePosition());
+
+    const onScroll = e => {
       if (e.target.className === 'drawer-container') {
-        const scroll = e.target.scrollTop;
-        changeBottomsheetState({
-          context: { ...bottomsheetState.context, buttonBottomPadding: scroll },
+        mapRef?.setBottomPadding(e.target.scrollTop);
+        setBottomPadding(e.target.scrollTop);
+      }
+    };
+
+    const changeBottomPadding = (padding, slowly) => {
+      if (slowly) {
+        slowlyScrollTo(scrollRef.current, padding, () => {
+          mapRef?.forceRefresh();
+          mapRef?.setBottomPadding(padding);
+          setBottomPadding(padding);
         });
+      } else {
+        if (scrollRef.current) {
+          scrollRef.current.scrollTop = padding;
+        }
+        mapRef?.setBottomPadding(padding);
+        setBottomPadding(padding);
       }
-    }
-  };
+    };
+
+    useImperativeHandle(ref, () => ({
+      setBottomSheet: (pos, slowly) => {
+        const pad =
+          pos === 'middle' ? getMiddlePosition() : BOTTOM_SHEET_OFFSET;
+        changeBottomPadding(pad, slowly);
+      },
+    }));
+
+    useLayoutEffect(() => {
+      if (map) {
+        changeBottomPadding(getMiddlePosition());
+      }
+    }, [header]);
 
-  return (
-    <div className="mobile">
-      {selectFromMapHeader}
-      {searchBox}
-      {map ? (
-        <>
-          <MapBottomsheetContext.Provider value={bottomsheetState.context}>
-            {map}
-          </MapBottomsheetContext.Provider>
-          <div
-            className="drawer-container"
-            onScroll={onScroll}
-            ref={scrollRef}
-            role="main"
-          >
-            <div className="drawer-padding" />
-            <div className="drawer-content">
-              <div className="drag-line" />
-              <div className="content-container">
-                {header}
-                {content}
+    useLayoutEffect(() => {
+      if (map) {
+        changeBottomPadding(getMiddlePosition());
+      }
+    }, []);
+
+    return (
+      <div className="mobile">
+        {selectFromMapHeader}
+        {searchBox}
+        {map ? (
+          <>
+            <MapBottomsheetContext.Provider value={bottomPadding}>
+              {map}
+            </MapBottomsheetContext.Provider>
+            <div
+              className="drawer-container"
+              onScroll={onScroll}
+              ref={scrollRef}
+              role="main"
+            >
+              <div className="drawer-padding" />
+              <div className="drawer-content">
+                <div className="drag-line" />
+                <div className="content-container">
+                  {header}
+                  {content}
+                </div>
               </div>
             </div>
-          </div>
-        </>
-      ) : (
-        <div role="main" className="mobile-main-container">
-          <div className="mobile-main-content-container">
-            {header}
-            {content}
-          </div>
+          </>
+        ) : (
+          <div role="main" className="mobile-main-container">
+            <div className="mobile-main-content-container">
+              {header}
+              {content}
+            </div>
 
-          <MobileFooter />
-        </div>
-      )}
-    </div>
-  );
-}
+            <MobileFooter />
+          </div>
+        )}
+      </div>
+    );
+  },
+);
 
 MobileView.propTypes = {
   header: PropTypes.node,
@@ -139,7 +162,8 @@ MobileView.propTypes = {
   settingsDrawer: PropTypes.node,
   selectFromMapHeader: PropTypes.node,
   searchBox: PropTypes.node,
-  expandMap: PropTypes.number,
+  // eslint-disable-next-line
+  mapRef: PropTypes.object,
 };
 
 MobileView.defaultProps = {
@@ -149,9 +173,7 @@ MobileView.defaultProps = {
   settingsDrawer: undefined,
   selectFromMapHeader: undefined,
   searchBox: undefined,
-  expandMap: undefined,
+  mapRef: undefined,
 };
 
-MobileView.contextTypes = {
-  config: configShape.isRequired,
-};
+export default MobileView;

app/component/StopsNearYouPage.js

@@ -264,6 +264,11 @@ class StopsNearYouPage extends React.Component {
     }
   };
 
+  // store ref to map
+  setMWTRef = ref => {
+    this.MWTRef = ref;
+  };
+
   updateLocation = () => {
     const { centerOfMap } = this;
     const { mode } = this.props.match.params;
@@ -695,6 +700,7 @@ class StopsNearYouPage extends React.Component {
                     ...this.props.favouriteVehicleStationIds,
                   ]}
                   breakpoint={this.props.breakpoint}
+                  setMWTRef={this.setMWTRef}
                 />
               );
             }
@@ -766,6 +772,7 @@ class StopsNearYouPage extends React.Component {
               onEndNavigation={this.setCenterOfMap}
               onMapTracking={this.setCenterOfMap}
               breakpoint={this.props.breakpoint}
+              setMWTRef={this.setMWTRef}
             />
           );
         }}
@@ -949,6 +956,8 @@ class StopsNearYouPage extends React.Component {
               content={this.renderContent()}
               map={this.renderMap()}
               searchBox={this.renderSearchBox()}
+              mapRef={this.MWTRef}
+              match={this.props.match}
             />
           )}
         />

app/component/TopLevel.js

@@ -163,6 +163,7 @@ class TopLevel extends React.Component {
               content={this.props.content}
               header={this.props.header}
               selectFromMapHeader={this.props.selectFromMapHeader}
+              match={this.props.match}
             />
           )}
           desktop={() => (