fix(ScheduleHours): First and Last Train Schedule Hours are now affec… (

#1872)

* fix(ScheduleHours): First and Last Train Schedule Hours are now affected by the selected direction

* Fixed typo and import

assets/ts/schedule/components/schedule-finder/daily-schedule/DailyScheduleSubway.tsx

@@ -7,7 +7,7 @@ import {
   isWeekend,
   parse
 } from "date-fns";
-import { concat, find, toLower } from "lodash";
+import { find, toLower } from "lodash";
 import React, { ReactElement, useEffect, useState } from "react";
 import ExpandableBlock from "../../../../components/ExpandableBlock";
 import {
@@ -16,7 +16,12 @@ import {
 } from "../../../../helpers/date";
 import useHoursOfOperation from "../../../../hooks/useHoursOfOperation";
 import RouteIcon from "../../../../projects/components/RouteIcon";
-import { DirectionId, Route, StopHours } from "../../../../__v3api";
+import {
+  DirectionId,
+  RapidTransitHours,
+  Route,
+  StopHours
+} from "../../../../__v3api";
 import {
   ScheduleNote,
   ServiceInSelector,
@@ -36,13 +41,13 @@ const findStopName = (
 
 const getHoursByStop = (
   stopId: string,
-  hours: StopHours[][] | StopHours[] | undefined
+  directionId: DirectionId,
+  hours: StopHours[][] | undefined
 ): StopHours | undefined => {
   if (!hours) {
     return undefined;
   }
-  const bothDirectionHours = concat(hours[0], hours[1]);
-  const stopHours = find(bothDirectionHours, h => h.parent_stop_id === stopId);
+  const stopHours = find(hours[directionId], h => h.parent_stop_id === stopId);
 
   return stopHours;
 };
@@ -108,7 +113,11 @@ const DailyScheduleSubway = ({
 
   const todayDate = stringToDateObject(today);
   const originStopName = findStopName(stopId, directionId, stops);
-  const hoursOfOperation = useHoursOfOperation(routeId);
+  // Hours will always be rapid transit hours when given a rapid tranist route id
+  // (Which all of the routes passed to this component would be)
+  const hoursOfOperation = useHoursOfOperation(
+    routeId
+  ) as RapidTransitHours | null;
 
   const { direction_destinations: directionDestinations } = route;
 
@@ -153,18 +162,19 @@ const DailyScheduleSubway = ({
   useEffect(() => {
     let hours;
     if (selectedSchedule === "weekday") {
-      hours = getHoursByStop(stopId, hoursOfOperation?.week);
+      hours = getHoursByStop(stopId, directionId, hoursOfOperation?.week);
     } else if (selectedSchedule === "saturday") {
-      hours = getHoursByStop(stopId, hoursOfOperation?.saturday);
+      hours = getHoursByStop(stopId, directionId, hoursOfOperation?.saturday);
     } else if (selectedSchedule === "sunday") {
-      hours = getHoursByStop(stopId, hoursOfOperation?.sunday);
+      hours = getHoursByStop(stopId, directionId, hoursOfOperation?.sunday);
     } else {
       // We need to select a special service
       const specialServiceHours = hoursOfOperation?.special_service;
 
       if (specialServiceHours) {
         hours = getHoursByStop(
           stopId,
+          directionId,
           specialServiceHours[
             selectedSchedule as keyof typeof specialServiceHours
           ]
@@ -176,7 +186,7 @@ const DailyScheduleSubway = ({
     );
     setFirstTrainHours(hours?.first_departure);
     setLastTrainHours(hours?.last_departure);
-  }, [selectedSchedule, hoursOfOperation, stopId]);
+  }, [selectedSchedule, hoursOfOperation, stopId, directionId]);
 
   return (
     <div>

assets/ts/schedule/components/schedule-finder/daily-schedule/__tests__/DailyScheduleSubwayTest.tsx

@@ -9,6 +9,7 @@ import { ServiceInSelector } from "../../../__schedule";
 import DailyScheduleSubway from "../DailyScheduleSubway";
 import * as hours from "../../../../../hooks/useHoursOfOperation";
 import { createReactRoot } from "../../../../../app/helpers/testUtils";
+import { render, screen } from "@testing-library/react";
 
 describe("DailyScheduleSubway", () => {
   beforeEach(() => {
@@ -48,6 +49,14 @@ describe("DailyScheduleSubway", () => {
         is_closed: false,
         zone: null
       }
+    ],
+    "1": [
+      {
+        id: "2",
+        name: "Stop 2",
+        is_closed: false,
+        zone: null
+      }
     ]
   };
 
@@ -445,4 +454,72 @@ describe("DailyScheduleSubway", () => {
     expect(wrapper.html()).toContain("Special Service");
     expect(wrapper.html()).toContain("Holiday 1, Dec 26 (Today)");
   });
+
+  it("should show different hours based on direction", () => {
+    jest.spyOn(hours, "default").mockImplementation(() => {
+      return {
+        week: [
+          [
+            {
+              stop_name: "Stop 1",
+              stop_id: "123",
+              parent_stop_id: "543",
+              last_departure: "2022-11-28T22:58:00-05:00",
+              first_departure: "2022-11-28T05:58:00-05:00",
+              is_terminus: false,
+              latitude: 1,
+              longitude: 1
+            }
+          ],
+          [
+            {
+              stop_name: "Stop 1",
+              stop_id: "123",
+              parent_stop_id: "543",
+              last_departure: "2022-11-28T20:34:00-05:00",
+              first_departure: "2022-11-28T08:22:00-05:00",
+              is_terminus: false,
+              latitude: 1,
+              longitude: 1
+            }
+          ]
+        ],
+        saturday: [[], []],
+        sunday: [[], []],
+        special_service: {}
+      };
+    });
+
+    render(
+      <DailyScheduleSubway
+        directionId={0}
+        stops={stopMap}
+        stopId={"543"}
+        routeId={"blue"}
+        route={route}
+        scheduleNote={null}
+        today="2022-11-28T14:14:14-05:00"
+        services={services}
+      />
+    );
+
+    expect(screen.getByText("5:58 AM"));
+    expect(screen.getByText("10:58 PM"));
+
+    render(
+      <DailyScheduleSubway
+        directionId={1}
+        stops={stopMap}
+        stopId={"543"}
+        routeId={"blue"}
+        route={route}
+        scheduleNote={null}
+        today="2022-11-28T14:14:14-05:00"
+        services={services}
+      />
+    );
+
+    expect(screen.getByText("8:22 AM"));
+    expect(screen.getByText("8:34 PM"));
+  });
 });