From 6ae7fedf7129803b235cf298623b45a8aae37b50 Mon Sep 17 00:00:00 2001
From: "philip.cline" <philip.cline@ibigroup.com>
Date: Tue, 17 Oct 2023 15:15:53 -0400
Subject: [PATCH 1/4] fix(routelayout): fix pagination

---
 .../reporter/components/RouteLayout.js        | 38 +++++++++++++------
 1 file changed, 26 insertions(+), 12 deletions(-)

diff --git a/lib/manager/components/reporter/components/RouteLayout.js b/lib/manager/components/reporter/components/RouteLayout.js
index b508bf935..d5ef7c458 100644
--- a/lib/manager/components/reporter/components/RouteLayout.js
+++ b/lib/manager/components/reporter/components/RouteLayout.js
@@ -17,13 +17,13 @@ import Loading from '../../../../common/components/Loading'
 import ActiveDateTimeFilter from '../containers/ActiveDateTimeFilter'
 import * as routesActions from '../../../../gtfs/actions/routes'
 import * as patternsActions from '../../../../gtfs/actions/patterns'
-import TripsPerHourChart from './TripsPerHourChart'
-
 import type {Props as ContainerProps} from '../containers/Routes'
 import type {RouteRowData} from '../../../selectors'
 import type {FetchStatus} from '../../../../types'
 import type {AllRoutesSubState, RouteListItem} from '../../../../types/reducers'
 
+import TripsPerHourChart from './TripsPerHourChart'
+
 type Props = ContainerProps & {
   allRoutes: AllRoutesSubState,
   fetchRouteDetails: typeof routesActions.fetchRouteDetails,
@@ -98,6 +98,20 @@ export default class RouteLayout extends Component<Props> {
     // order to see items 1 - 4).
     const extraPage = +(routeOffset % PAGE_SIZE > 0)
     const activePage = Math.floor(routeOffset / PAGE_SIZE) + 1 + extraPage
+    const numPages = Math.ceil(numRoutes / PAGE_SIZE)
+
+    const paginationItems = []
+    for (let pageNum = 1; pageNum <= numPages; pageNum++) {
+      paginationItems.push(
+        <Pagination.Item
+          active={pageNum === activePage}
+          key={pageNum}
+          onClick={(e) => this._onPaginationSelect(+e.target.text)}
+        >
+          {pageNum}
+        </Pagination.Item>
+      )
+    }
 
     return (
       <div>
@@ -144,16 +158,16 @@ export default class RouteLayout extends Component<Props> {
                     selectTab={selectTab} />
                 ))}
               </ListGroup>
-              <Pagination
-                activePage={activePage}
-                bsSize='large'
-                ellipsis
-                first
-                items={Math.ceil(numRoutes / PAGE_SIZE)}
-                last
-                next
-                onSelect={this._onPaginationSelect}
-                prev />
+              {numPages > 1 &&
+                <div>
+                  <Pagination
+                    bsSize='small'
+                    // onSelect={(e) => console.log('yoyo')}
+                  >
+                    {paginationItems}
+                  </Pagination>
+                </div>
+              }
             </Col>
           </Row>
         }

From 096e9afbd610a7fbb6aa36ba325af690b0232411 Mon Sep 17 00:00:00 2001
From: "philip.cline" <philip.cline@ibigroup.com>
Date: Mon, 23 Oct 2023 10:32:34 -0700
Subject: [PATCH 2/4] refactor(RouteLayout): i18n

---
 i18n/english.yml                              |  8 +++++++
 i18n/german.yml                               |  8 +++++++
 i18n/polish.yml                               |  8 +++++++
 .../reporter/components/RouteLayout.js        | 23 +++++++++++--------
 4 files changed, 37 insertions(+), 10 deletions(-)

diff --git a/i18n/english.yml b/i18n/english.yml
index ec643f86f..75bd98df5 100644
--- a/i18n/english.yml
+++ b/i18n/english.yml
@@ -1152,6 +1152,14 @@ components:
     line: Line
     priority: Priority
     problemType: Problem Type
+  RouteLayout:
+    errorOccurred: An error occurred while trying to fetch the data
+    jumpToRoute: Jump to a Route
+    route: "Route:"
+  RouteRow:
+    patterns: "%num% Patterns"
+    stops: "%num% Stops"
+    trips: "%num% Trips"
   SelectFileModal:
     ok: OK
     cancel: Cancel
diff --git a/i18n/german.yml b/i18n/german.yml
index 88917dab1..10cd74353 100644
--- a/i18n/german.yml
+++ b/i18n/german.yml
@@ -1156,6 +1156,14 @@ components:
       und eine detailierte Beschreibung der Schritte, die Sie zuvor ausgeführt haben
       an <a href='mailto:%supportEmail%'>%supportEmail%</a>.
     view: Ansehen
+  RouteLayout:
+    errorOccurred: An error occurred while trying to fetch the data
+    jumpToRoute: Jump to a Route
+    route: "Route:"
+  RouteRow:
+    patterns: "%num% Patterns"
+    stops: "%num% Stops"
+    trips: "%num% Trips"
   SelectFileModal:
     cancel: Abbrechen
     ok: OK
diff --git a/i18n/polish.yml b/i18n/polish.yml
index f643f2eb5..1a9d38cfe 100644
--- a/i18n/polish.yml
+++ b/i18n/polish.yml
@@ -1140,6 +1140,14 @@ components:
       the following text (current URL and error details), and a detailed description
       of the steps you followed to <a href='mailto:%supportEmail%'>%supportEmail%</a>.
     view: View
+  RouteLayout:
+    errorOccurred: An error occurred while trying to fetch the data
+    jumpToRoute: Jump to a Route
+    route: "Route:"
+  RouteRow:
+    patterns: "%num% Patterns"
+    stops: "%num% Stops"
+    trips: "%num% Trips"
   SelectFileModal:
     cancel: Cancel
     ok: OK
diff --git a/lib/manager/components/reporter/components/RouteLayout.js b/lib/manager/components/reporter/components/RouteLayout.js
index d5ef7c458..9cc6c0bfd 100644
--- a/lib/manager/components/reporter/components/RouteLayout.js
+++ b/lib/manager/components/reporter/components/RouteLayout.js
@@ -17,6 +17,7 @@ import Loading from '../../../../common/components/Loading'
 import ActiveDateTimeFilter from '../containers/ActiveDateTimeFilter'
 import * as routesActions from '../../../../gtfs/actions/routes'
 import * as patternsActions from '../../../../gtfs/actions/patterns'
+import { getComponentMessages } from '../../../../common/util/config'
 import type {Props as ContainerProps} from '../containers/Routes'
 import type {RouteRowData} from '../../../selectors'
 import type {FetchStatus} from '../../../../types'
@@ -40,6 +41,8 @@ type Props = ContainerProps & {
 const PAGE_SIZE = 10
 
 export default class RouteLayout extends Component<Props> {
+  messages = getComponentMessages('RouteLayout')
+
   componentWillMount () {
     const {fetchRouteDetails, fetchRoutes, fetchStatus, version} = this.props
     const {namespace} = version
@@ -117,13 +120,14 @@ export default class RouteLayout extends Component<Props> {
       <div>
         {allRoutes !== null && allRoutes.data !== null && <Row>
           <Col xs={12} md={6}>
-            <label htmlFor='route_name'>Route:</label>
+            <label htmlFor='route_name'>{this.messages('route')}</label>
             <Select
               id='route_name'
+              // $FlowFixMe: Flow does not recognize null check for allRoutes.data
               options={allRoutes.data.map((r, index) => ({...r, index}))}
               labelKey={'route_name'}
               valueKey={'route_id'}
-              placeholder={'Jump to a Route'}
+              placeholder={this.messages('jumpToRoute')}
               // value={routeFilter}
               onChange={this._onSelectRoute} />
           </Col>
@@ -139,7 +143,7 @@ export default class RouteLayout extends Component<Props> {
 
         {error &&
           <Alert bsStyle='danger'>
-            An error occurred while trying to fetch the data
+            {this.messages('errorOccurred')}
           </Alert>
         }
 
@@ -160,10 +164,7 @@ export default class RouteLayout extends Component<Props> {
               </ListGroup>
               {numPages > 1 &&
                 <div>
-                  <Pagination
-                    bsSize='small'
-                    // onSelect={(e) => console.log('yoyo')}
-                  >
+                  <Pagination bsSize='small'>
                     {paginationItems}
                   </Pagination>
                 </div>
@@ -185,6 +186,8 @@ class RouteRow extends Pure {
     selectTab: string => void
   }
 
+  messages = getComponentMessages('RouteRow')
+
   _changePatternRouteFilter (tabToSelect: string) {
     const {namespace, patternRouteFilterChange, selectTab} = this.props
     patternRouteFilterChange(namespace, this.props.routeId)
@@ -232,17 +235,17 @@ class RouteRow extends Pure {
           </Col>
           <Col xs={12} md={2} style={{textAlign: 'center'}}>
             <Button onClick={this._onStopsClick}>
-              <h5>{numStops} Stops</h5>
+              <h5>{this.messages('stops').replace('%num%', numStops.toString())}</h5>
             </Button>
           </Col>
           <Col xs={12} md={2} style={{textAlign: 'center'}}>
             <Button onClick={this._onTripsClick}>
-              <h5>{numTrips} Trips</h5>
+              <h5>{this.messages('trips').replace('%num%', numTrips.toString())}</h5>
             </Button>
           </Col>
           <Col xs={12} md={2} style={{textAlign: 'center'}}>
             <Button onClick={this._onPatternsClick}>
-              <h5>{numPatterns} Patterns</h5>
+              <h5>{this.messages('patterns').replace('%num%', numPatterns.toString())}</h5>
             </Button>
           </Col>
         </Row>

From 6ae88c569c29f7cc671c675cdf13afcd89ad4021 Mon Sep 17 00:00:00 2001
From: "philip.cline" <philip.cline@ibigroup.com>
Date: Mon, 23 Oct 2023 10:38:04 -0700
Subject: [PATCH 3/4] refactor(RouteLayout): fix lint messages err

---
 i18n/english.yml                                          | 8 ++++----
 i18n/german.yml                                           | 8 ++++----
 i18n/polish.yml                                           | 8 ++++----
 lib/manager/components/reporter/components/RouteLayout.js | 8 ++++----
 4 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/i18n/english.yml b/i18n/english.yml
index 75bd98df5..1fa2ecc46 100644
--- a/i18n/english.yml
+++ b/i18n/english.yml
@@ -1156,10 +1156,10 @@ components:
     errorOccurred: An error occurred while trying to fetch the data
     jumpToRoute: Jump to a Route
     route: "Route:"
-  RouteRow:
-    patterns: "%num% Patterns"
-    stops: "%num% Stops"
-    trips: "%num% Trips"
+    RouteRow:
+      patterns: "%num% Patterns"
+      stops: "%num% Stops"
+      trips: "%num% Trips"
   SelectFileModal:
     ok: OK
     cancel: Cancel
diff --git a/i18n/german.yml b/i18n/german.yml
index 10cd74353..f92d152a7 100644
--- a/i18n/german.yml
+++ b/i18n/german.yml
@@ -1160,10 +1160,10 @@ components:
     errorOccurred: An error occurred while trying to fetch the data
     jumpToRoute: Jump to a Route
     route: "Route:"
-  RouteRow:
-    patterns: "%num% Patterns"
-    stops: "%num% Stops"
-    trips: "%num% Trips"
+    RouteRow:
+      patterns: "%num% Patterns"
+      stops: "%num% Stops"
+      trips: "%num% Trips"
   SelectFileModal:
     cancel: Abbrechen
     ok: OK
diff --git a/i18n/polish.yml b/i18n/polish.yml
index 1a9d38cfe..d576d705d 100644
--- a/i18n/polish.yml
+++ b/i18n/polish.yml
@@ -1144,10 +1144,10 @@ components:
     errorOccurred: An error occurred while trying to fetch the data
     jumpToRoute: Jump to a Route
     route: "Route:"
-  RouteRow:
-    patterns: "%num% Patterns"
-    stops: "%num% Stops"
-    trips: "%num% Trips"
+    RouteRow:
+      patterns: "%num% Patterns"
+      stops: "%num% Stops"
+      trips: "%num% Trips"
   SelectFileModal:
     cancel: Cancel
     ok: OK
diff --git a/lib/manager/components/reporter/components/RouteLayout.js b/lib/manager/components/reporter/components/RouteLayout.js
index 9cc6c0bfd..bddb84c1c 100644
--- a/lib/manager/components/reporter/components/RouteLayout.js
+++ b/lib/manager/components/reporter/components/RouteLayout.js
@@ -186,7 +186,7 @@ class RouteRow extends Pure {
     selectTab: string => void
   }
 
-  messages = getComponentMessages('RouteRow')
+  messages = getComponentMessages('RouteLayout')
 
   _changePatternRouteFilter (tabToSelect: string) {
     const {namespace, patternRouteFilterChange, selectTab} = this.props
@@ -235,17 +235,17 @@ class RouteRow extends Pure {
           </Col>
           <Col xs={12} md={2} style={{textAlign: 'center'}}>
             <Button onClick={this._onStopsClick}>
-              <h5>{this.messages('stops').replace('%num%', numStops.toString())}</h5>
+              <h5>{this.messages('RouteRow.stops').replace('%num%', numStops.toString())}</h5>
             </Button>
           </Col>
           <Col xs={12} md={2} style={{textAlign: 'center'}}>
             <Button onClick={this._onTripsClick}>
-              <h5>{this.messages('trips').replace('%num%', numTrips.toString())}</h5>
+              <h5>{this.messages('RouteRow.trips').replace('%num%', numTrips.toString())}</h5>
             </Button>
           </Col>
           <Col xs={12} md={2} style={{textAlign: 'center'}}>
             <Button onClick={this._onPatternsClick}>
-              <h5>{this.messages('patterns').replace('%num%', numPatterns.toString())}</h5>
+              <h5>{this.messages('RouteRow.patterns').replace('%num%', numPatterns.toString())}</h5>
             </Button>
           </Col>
         </Row>

From d74ef3ffa5e85f14507bea7c1032744e0a74753b Mon Sep 17 00:00:00 2001
From: "philip.cline" <philip.cline@ibigroup.com>
Date: Thu, 26 Oct 2023 14:53:22 -0400
Subject: [PATCH 4/4] refactor(RouteLayout): make click handler an event
 handler

---
 lib/manager/components/reporter/components/RouteLayout.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/lib/manager/components/reporter/components/RouteLayout.js b/lib/manager/components/reporter/components/RouteLayout.js
index bddb84c1c..865b1ead7 100644
--- a/lib/manager/components/reporter/components/RouteLayout.js
+++ b/lib/manager/components/reporter/components/RouteLayout.js
@@ -57,8 +57,9 @@ export default class RouteLayout extends Component<Props> {
     fetchRouteDetails(version.namespace)
   }
 
-  _onPaginationSelect = (value: number) => {
+  _onPaginationSelect = (e: SyntheticMouseEvent<HTMLSpanElement>) => {
     const {routeOffsetChange, version} = this.props
+    const value = +e.currentTarget.textContent
     routeOffsetChange({
       namespace: version.namespace,
       offset: (value - 1) * PAGE_SIZE
@@ -109,7 +110,7 @@ export default class RouteLayout extends Component<Props> {
         <Pagination.Item
           active={pageNum === activePage}
           key={pageNum}
-          onClick={(e) => this._onPaginationSelect(+e.target.text)}
+          onClick={this._onPaginationSelect}
         >
           {pageNum}
         </Pagination.Item>