From 7293e7733719c6c45dc14070548e71251fa1149c Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Fri, 20 Oct 2023 15:22:48 -0400
Subject: [PATCH] trip viewer: sticky header, jump to first stop

---
 lib/components/viewers/trip-viewer.js | 22 ++++++++++++++++------
 1 file changed, 16 insertions(+), 6 deletions(-)

diff --git a/lib/components/viewers/trip-viewer.js b/lib/components/viewers/trip-viewer.js
index b76db43e1..092d6156c 100644
--- a/lib/components/viewers/trip-viewer.js
+++ b/lib/components/viewers/trip-viewer.js
@@ -9,7 +9,7 @@ import { toDate } from 'date-fns-tz'
 import { Wheelchair } from '@styled-icons/fa-solid/Wheelchair'
 import coreUtils from '@opentripplanner/core-utils'
 import PropTypes from 'prop-types'
-import React, { Component } from 'react'
+import React, { Component, createRef } from 'react'
 import styled from 'styled-components'
 
 import * as apiActions from '../../actions/api'
@@ -59,6 +59,8 @@ class TripViewer extends Component {
     viewedTrip: PropTypes.object
   }
 
+  firstStopRef = createRef()
+
   _backClicked = () => {
     this.props.setViewedTrip(null)
   }
@@ -69,6 +71,13 @@ class TripViewer extends Component {
     findTrip({ tripId })
   }
 
+  componentDidUpdate() {
+    const { current } = this.firstStopRef
+    if (current) {
+      current.scrollIntoView({ behavior: 'smooth', block: 'start' })
+    }
+  }
+
   /**
    * Gets a breadcrumbs-like text of format (Trip Viewer - <operator> <route>)
    */
@@ -116,10 +125,7 @@ class TripViewer extends Component {
           <HeaderText className="header-text">
             <FormattedMessage id="components.TripViewer.header" />
           </HeaderText>
-          <div style={{ clear: 'both' }} />
-        </div>
-
-        <div className="trip-viewer-body">
+          <div style={{ clear: 'both', height: '0.25ch' }} />
           {/* Basic Trip Info */}
           {tripData && (
             <div>
@@ -181,7 +187,9 @@ class TripViewer extends Component {
               )}
             </div>
           )}
+        </div>
 
+        <div className="trip-viewer-body">
           {/* Stop Listing */}
           <StopList
             aria-label={intl.formatMessage({
@@ -200,10 +208,12 @@ class TripViewer extends Component {
                 }
 
                 let stopLabel = null
+                let refProp = null
                 if (fromIndex === i) {
                   stopLabel = (
                     <FormattedMessage id="components.TripViewer.startOfTrip" />
                   )
+                  refProp = this.firstStopRef
                 }
                 if (toIndex === i) {
                   stopLabel = (
@@ -229,7 +239,7 @@ class TripViewer extends Component {
                         {stopLabel && (
                           <InvisibleA11yLabel>{stopLabel}</InvisibleA11yLabel>
                         )}
-                        <div className="stop-time">
+                        <div className="stop-time" ref={refProp}>
                           <DepartureTime
                             originDate={startOfDay}
                             stopTime={tripData.stopTimes[i]}