fixup: add index attribute to stops in list

mbta · Sep 28, 2023 · 559e74c · 559e74c
1 parent 6d7ff5f
commit 559e74c
Show file tree

Hide file tree

Showing 10 changed files with 55 additions and 24 deletions.
diff --git a/apps/site/assets/ts/app/helpers/testUtils.ts b/apps/site/assets/ts/app/helpers/testUtils.ts
@@ -1,6 +1,18 @@
 /* eslint-disable */
 import toJson, { Json } from "enzyme-to-json";
 import { ReactWrapper } from "enzyme";
+import {
+  IndexedRouteStop,
+  StopTree
+} from "../../schedule/components/__schedule";
+
+export const testRouteStopListFromStopTree = (
+  tree: StopTree
+): IndexedRouteStop[] =>
+  Object.values(tree.byId).map((node, index) => ({
+    ...node.value,
+    routeIndex: index
+  }));
 
 export const createReactRoot = (): void => {
   document.body.innerHTML =

diff --git a/apps/site/assets/ts/schedule/components/ScheduleDirection.tsx b/apps/site/assets/ts/schedule/components/ScheduleDirection.tsx
@@ -4,7 +4,8 @@ import {
   RoutePatternsByDirection,
   EnhancedRoutePattern,
   StopTree,
-  RouteStop
+  RouteStop,
+  IndexedRouteStop
 } from "./__schedule";
 import ScheduleDirectionMenu from "./direction/ScheduleDirectionMenu";
 import ScheduleDirectionButton from "./direction/ScheduleDirectionButton";
@@ -81,9 +82,12 @@ export const fetchLineData = (
       })
       .then(({ stop_tree, route_stop_lists }) => {
         const stopTree = stop_tree ? fromStopTreeData(stop_tree) : null;
+        const routeStopListsWithIndices: IndexedRouteStop[][] = (route_stop_lists as RouteStop[][]).map(
+          rs_list => rs_list.map((rs, index) => ({ ...rs, routeIndex: index }))
+        );
         dispatch({
           type: "FETCH_COMPLETE",
-          payload: { stopTree, routeStopLists: route_stop_lists }
+          payload: { stopTree, routeStopLists: routeStopListsWithIndices }
         });
       })
       // @ts-ignore
@@ -205,7 +209,7 @@ const ScheduleDirection = ({
 
   const routeStopList =
     lineState.data && lineState.data.routeStopLists
-      ? (lineState.data.routeStopLists as RouteStop[][]).find(
+      ? (lineState.data.routeStopLists as IndexedRouteStop[][]).find(
           rsList => !!rsList.find(rs => rs.branch === state.routePattern.name)
         ) || []
       : [];

diff --git a/apps/site/assets/ts/schedule/components/__schedule.d.ts b/apps/site/assets/ts/schedule/components/__schedule.d.ts
@@ -115,6 +115,10 @@ export interface RouteStop {
   closed_stop_info: ClosedStopInfo | null;
 }
 
+export interface IndexedRouteStop extends RouteStop {
+  routeIndex: number;
+}
+
 export interface SimpleStopMap {
   [key: string]: SimpleStop[];
 }

diff --git a/apps/site/assets/ts/schedule/components/__tests__/ScheduleDirectionTest.tsx b/apps/site/assets/ts/schedule/components/__tests__/ScheduleDirectionTest.tsx
@@ -1,7 +1,8 @@
 import React from "react";
 import {
   createReactRoot,
-  enzymeToJsonWithoutProps
+  enzymeToJsonWithoutProps,
+  testRouteStopListFromStopTree
 } from "../../../app/helpers/testUtils";
 import { mount } from "enzyme";
 import {
@@ -33,7 +34,7 @@ const { stop_tree } = (lineDiagramData as unknown) as {
   stop_tree: StopTreeData;
 };
 const stopTree: StopTree = fromStopTreeData(stop_tree);
-const testRouteStopList = Object.values(stopTree.byId).map(node => node.value);
+const testRouteStopList = testRouteStopListFromStopTree(stopTree);
 
 const route = {
   type: 3,
@@ -546,7 +547,7 @@ describe("fetchLineData", () => {
       () =>
         new Promise((resolve: Function) =>
           resolve({
-            json: () => lineDiagramData,
+            json: () => ({ stop_tree, route_stop_lists: [] }),
             ok: true,
             status: 200,
             statusText: "OK"
@@ -563,7 +564,7 @@ describe("fetchLineData", () => {
       });
       expect(spy).toHaveBeenCalledWith({
         type: "FETCH_COMPLETE",
-        payload: { stopTree }
+        payload: { stopTree, routeStopLists: [] }
       });
     });
   });

diff --git a/apps/site/assets/ts/schedule/components/line-diagram/LineDiagram.tsx b/apps/site/assets/ts/schedule/components/line-diagram/LineDiagram.tsx
@@ -8,7 +8,12 @@ import { isSubwayRoute } from "../../../models/route";
 import { Alert, DirectionId, Route } from "../../../__v3api";
 import { getCurrentState, storeHandler } from "../../store/ScheduleStore";
 import { changeOrigin } from "../ScheduleLoader";
-import { RouteStop, SelectedOrigin, StopTree } from "../__schedule";
+import {
+  IndexedRouteStop,
+  RouteStop,
+  SelectedOrigin,
+  StopTree
+} from "../__schedule";
 import { createStopTreeCoordStore } from "./graphics/useTreeStopPositions";
 import LineDiagramWithStops from "./LineDiagramWithStops";
 import StopCard from "./StopCard";
@@ -17,7 +22,7 @@ import { alertsByStop } from "../../../models/alert";
 interface Props {
   stopTree: StopTree | null;
   route: Route;
-  routeStopList: RouteStop[];
+  routeStopList: IndexedRouteStop[];
   directionId: DirectionId;
   alerts: Alert[];
 }

diff --git a/apps/site/assets/ts/schedule/components/line-diagram/LineDiagramWithStops.tsx b/apps/site/assets/ts/schedule/components/line-diagram/LineDiagramWithStops.tsx
@@ -8,7 +8,7 @@ import {
 } from "../../../helpers/stop-tree";
 import { hasPredictionTime } from "../../../models/prediction";
 import { Alert, DirectionId, Route } from "../../../__v3api";
-import { RouteStop, StopId, StopTree } from "../__schedule";
+import { IndexedRouteStop, RouteStop, StopId, StopTree } from "../__schedule";
 import { Diagram, SimpleDiagram } from "./graphics/Diagram";
 import useTreeStopPositions, { RefMap } from "./graphics/useTreeStopPositions";
 import ExpandableBranch from "./ExpandableBranch";
@@ -18,7 +18,7 @@ import { alertsByStop } from "../../../models/alert";
 
 interface Props {
   stopTree: StopTree | null;
-  routeStopList: RouteStop[];
+  routeStopList: IndexedRouteStop[];
   route: Route;
   directionId: DirectionId;
   alerts: Alert[];
@@ -312,10 +312,9 @@ const LineDiagramWithStops = ({
             />
           ) : (
             <>
-              {routeStopList.map((routeStop, index) => (
+              {routeStopList.map(routeStop => (
                 <StopCard
-                  // eslint-disable-next-line react/no-array-index-key
-                  key={`stop-card-${index}-${routeStop.id}`}
+                  key={`stop-card-${routeStop.routeIndex}`}
                   stopTree={null}
                   routeStopList={routeStopList}
                   stopId={routeStop.id}

diff --git a/apps/site/assets/ts/schedule/components/line-diagram/__tests__/LineDiagramTest.tsx b/apps/site/assets/ts/schedule/components/line-diagram/__tests__/LineDiagramTest.tsx
@@ -10,6 +10,7 @@ import * as ScheduleStore from "../../../store/ScheduleStore";
 import { fireEvent, render, screen, waitFor } from "@testing-library/react";
 import * as store from "../../../store/ScheduleStore";
 import userEvent from "@testing-library/user-event";
+import { testRouteStopListFromStopTree } from "../../../../app/helpers/testUtils";
 
 const stopTree: StopTree = {
   byId: {
@@ -48,7 +49,7 @@ const stopTree: StopTree = {
   },
   startingNodes: ["a"]
 };
-const testRouteStopList = Object.values(stopTree.byId).map(node => node.value);
+const testRouteStopList = testRouteStopListFromStopTree(stopTree);
 const route = {
   type: 3 as RouteType,
   name: "route 1",

diff --git a/apps/site/assets/ts/schedule/components/line-diagram/__tests__/LineDiagramWithStopsTest.tsx b/apps/site/assets/ts/schedule/components/line-diagram/__tests__/LineDiagramWithStopsTest.tsx
@@ -9,6 +9,7 @@ import { cloneDeep } from "lodash";
 import * as simpleLiveData from "./lineDiagramData/live-data.json";
 import { LiveDataByStop } from "../__line-diagram";
 import { Alert, InformedEntitySet, RouteType } from "../../../../__v3api";
+import { testRouteStopListFromStopTree } from "../../../../app/helpers/testUtils";
 
 const stopTree: StopTree = {
   byId: {
@@ -148,7 +149,7 @@ const stopTree: StopTree = {
   startingNodes: ["a1", "b1", "c1"]
 };
 
-const testRouteStopList = Object.values(stopTree.byId).map(node => node.value);
+const testRouteStopList = testRouteStopListFromStopTree(stopTree);
 const store = UseTreeStopPositions.createStopTreeCoordStore(stopTree);
 
 const route = {

diff --git a/apps/site/assets/ts/schedule/components/line-diagram/__tests__/StopCardTest.tsx b/apps/site/assets/ts/schedule/components/line-diagram/__tests__/StopCardTest.tsx
@@ -18,6 +18,7 @@ import StopCard from "../StopCard";
 import { LiveData } from "../__line-diagram";
 import { render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
+import { testRouteStopListFromStopTree } from "../../../../app/helpers/testUtils";
 
 const stopTree: StopTree = {
   byId: {
@@ -90,7 +91,7 @@ const stopTree: StopTree = {
   startingNodes: ["a"]
 };
 const store = createStopTreeCoordStore(stopTree);
-const testRouteStopList = Object.values(stopTree.byId).map(node => node.value);
+const testRouteStopList = testRouteStopListFromStopTree(stopTree);
 
 const alertA: Alert = {
   id: "MOCK-ALERT-A",

diff --git a/apps/site/assets/ts/schedule/components/line-diagram/graphics/Diagram.tsx b/apps/site/assets/ts/schedule/components/line-diagram/graphics/Diagram.tsx
@@ -13,7 +13,12 @@ import {
 } from "../../../../helpers/stop-tree";
 import { isAGreenLineRoute } from "../../../../models/route";
 import { Alert, DirectionId, Route } from "../../../../__v3api";
-import { RouteStop, StopId, StopTree } from "../../__schedule";
+import {
+  IndexedRouteStop,
+  RouteStop,
+  StopId,
+  StopTree
+} from "../../__schedule";
 import { diagramWidth } from "../line-diagram-helpers";
 import VehicleIcons from "../VehicleIcons";
 import { LiveDataByStop } from "../__line-diagram";
@@ -97,7 +102,7 @@ const LiveVehicleIconSet = ({
 };
 
 interface SimpleProps {
-  routeStopList: RouteStop[];
+  routeStopList: IndexedRouteStop[];
   route: Route;
   directionId: DirectionId;
   alerts: Alert[];
@@ -114,8 +119,7 @@ const SimpleDiagram = ({
   <>
     {routeStopList.map((routeStop, index) => (
       <LiveVehicleIconSet
-        // eslint-disable-next-line react/no-array-index-key
-        key={`${index}-${routeStop.id}`}
+        key={`vehicle-set-${routeStop.routeIndex}`}
         isStart={index === 0}
         stop={routeStop}
         liveData={liveData}
@@ -150,9 +154,8 @@ const SimpleDiagram = ({
       })}
 
       {/* Draw circles for each stop */
-      routeStopList.map((routeStop, index) => (
-        // eslint-disable-next-line react/no-array-index-key
-        <Stop key={`${index}-${routeStop.id}`} stopId={routeStop.id} />
+      routeStopList.map(routeStop => (
+        <Stop key={`stop-${routeStop.routeIndex}`} stopId={routeStop.id} />
       ))}
     </svg>
   </>