refactor(StationAmenityCard): consolidate elevator/escalator logic (#…

…1977)

* refactor(StationAmenityCard): consolidate elevator/escalator logic

* format

assets/js/fixedsticky.js

@@ -7,11 +7,9 @@ export default function($) {
     $(".fixedsticky").fixedsticky("destroy");
     $(".fixedsticky").fixedsticky();
   }
-  window.addEventListener(
-    "load",
-    () => window.nextTick(fixedsticky),
-    { passive: true }
-  );
+  window.addEventListener("load", () => window.nextTick(fixedsticky), {
+    passive: true
+  });
   document.addEventListener(
     "shown.bs.collapse",
     () => window.nextTick(fixedsticky),

assets/js/google-translate.js

@@ -27,8 +27,7 @@ const languages = [
   ["vi", "Vietnamese"]
 ];
 
-export default () =>
-  window.addEventListener("load", handleTranslation);
+export default () => window.addEventListener("load", handleTranslation);
 
 // await reading the google translate component
 const handleTranslation = () =>

assets/ts/stop/__tests__/components/StationInformationTest.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { render, screen } from "@testing-library/react";
 import StationInformation from "../../components/StationInformation";
 import { customStop } from "../helpers";
+import { Facility } from "../../../__v3api";
 
 const stationStop = customStop({
   name: "First Station",
@@ -17,11 +18,25 @@ const busStop = customStop({
   accessibility: ["accessible"],
   "has_fare_machine?": false
 });
+const facilities = [
+  {
+    id: "esc1",
+    attributes: { short_name: "Escalator 1", type: "ESCALATOR" }
+  } as Facility,
+  {
+    id: "elv100",
+    attributes: { short_name: "Elevator 100", type: "ELEVATOR" }
+  } as Facility
+];
 
 describe("StationInformation", () => {
   it("should have headings", () => {
     render(
-      <StationInformation stop={stationStop} alerts={[]} facilities={[]} />
+      <StationInformation
+        stop={stationStop}
+        alerts={[]}
+        facilities={facilities}
+      />
     );
     expect(
       screen.queryByRole("heading", { name: "Station Information" })

assets/ts/stop/__tests__/components/amenities/Access-Amenities-HelpersTest.tsx

@@ -32,19 +32,19 @@ const alert1: Alert = {
 
 describe("availabilityMessage", () => {
   it("should return 'View available facilityType' if at least one is available", () => {
-    expect(availabilityMessage(1, 2, "elevators")).toEqual(
+    expect(availabilityMessage(1, 2, "Elevator")).toEqual(
       "View available elevators."
     );
   });
 
   it("should renturn 'This station does not have facilityType' if total facilities is 0", () => {
-    expect(availabilityMessage(0, 0, "escalators")).toEqual(
+    expect(availabilityMessage(0, 0, "Escalator")).toEqual(
       "This station does not have escalators."
     );
   });
 
   it("should renturn 'All facilityType are currently out of order.' if all facilities have alerts", () => {
-    expect(availabilityMessage(2, 2, "elevators")).toEqual(
+    expect(availabilityMessage(2, 2, "Elevator")).toEqual(
       "All elevators are currently out of order."
     );
   });

assets/ts/stop/__tests__/components/amenities/EscalatorsAmenityCardTest.tsx → assets/ts/stop/__tests__/components/amenities/StationAmenityCardTest.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { render, screen } from "@testing-library/react";
-import EscalatorsAmenityCard from "../../../components/amenities/EscalatorsAmenityCard";
+import StationAmenityCard from "../../../components/amenities/StationAmenityCard";
 import { Facility, Alert, InformedEntity } from "../../../../__v3api";
 
 const facility1: Facility = {
@@ -19,24 +19,26 @@ const alert1: Alert = {
   active_period: [["2020-09-10 08:00", "2020-09-10 20:00"]]
 } as Alert;
 
-describe("EscalatorsAmenityCard", () => {
+describe("StationAmenityCard", () => {
   it("should render the title", () => {
     render(
-      <EscalatorsAmenityCard
+      <StationAmenityCard
         stopName="TestStop"
         alerts={[]}
-        escalatorFacilities={[facility1]}
+        facilities={[facility1]}
+        facilityType="Escalator"
       />
     );
     expect(screen.getByText("Escalators")).toBeDefined();
   });
 
   it("should render 'View available escalators.' if at least one is working", () => {
     render(
-      <EscalatorsAmenityCard
+      <StationAmenityCard
         stopName="TestStop"
         alerts={[]}
-        escalatorFacilities={[facility1]}
+        facilities={[facility1]}
+        facilityType="Escalator"
       />
     );
     expect(screen.getByText("View available escalators.")).toBeDefined();
@@ -45,10 +47,11 @@ describe("EscalatorsAmenityCard", () => {
 
   it("should render 'All escalators are currently out of order.' if none are working", () => {
     render(
-      <EscalatorsAmenityCard
+      <StationAmenityCard
         stopName="TestStop"
         alerts={[alert1]}
-        escalatorFacilities={[facility1]}
+        facilities={[facility1]}
+        facilityType="Escalator"
       />
     );
     expect(
@@ -59,10 +62,11 @@ describe("EscalatorsAmenityCard", () => {
 
   it("should render 'This station does not have escalators.' if there are none", () => {
     render(
-      <EscalatorsAmenityCard
+      <StationAmenityCard
         stopName="TestStop"
         alerts={[]}
-        escalatorFacilities={[]}
+        facilities={[]}
+        facilityType="Escalator"
       />
     );
     expect(

assets/ts/stop/components/StationInformation.tsx

@@ -4,10 +4,9 @@ import { Alert, Facility, Stop } from "../../__v3api";
 import ExternalMapLink from "./ExternalMapLink";
 import ParkingAmenityCard from "./amenities/ParkingAmenityCard";
 import BikeStorageAmenityCard from "./amenities/BikeStorageAmenityCard";
-import ElevatorsAmenityCard from "./amenities/ElevatorsAmenityCard";
-import EscalatorsAmenityCard from "./amenities/EscalatorsAmenityCard";
 import AccessibilityAmenityCard from "./amenities/AccessibilityAmenityCard";
 import FareSalesAmenityCard from "./amenities/FareSalesAmenityCard";
+import StationAmenityCard from "./amenities/StationAmenityCard";
 import {
   alertsByActivity,
   alertsByFacility,
@@ -24,20 +23,12 @@ const StationInformation = ({
   facilities: Facility[];
 }): ReactElement<HTMLElement> => {
   const isStation = isStopAStation(stop);
-
-  const facilitiesByType = new Map<string, Facility[]>();
-
-  facilities.forEach((facility: Facility) => {
-    const { type } = facility.attributes;
-    if (facilitiesByType.has(type)) {
-      facilitiesByType.get(type)?.push(facility);
-    } else {
-      facilitiesByType.set(type, [facility]);
-    }
-  });
-
-  const elevators = facilitiesByType.get("ELEVATOR") || [];
-  const escalators = facilitiesByType.get("ESCALATOR") || [];
+  const elevators = facilities.filter(
+    ({ attributes }) => attributes.type === "ELEVATOR"
+  );
+  const escalators = facilities.filter(
+    ({ attributes }) => attributes.type === "ESCALATOR"
+  );
 
   return (
     <div>
@@ -67,21 +58,17 @@ const StationInformation = ({
         {isStation && (
           <>
             <h3 className="hidden-md-up">Getting around the station</h3>
-            <ElevatorsAmenityCard
+            <StationAmenityCard
               stopName={stop.name}
-              alerts={alertsByFacility(
-                elevators !== undefined ? elevators : [],
-                alerts
-              )}
-              elevatorFacilities={elevators}
+              alerts={alertsByFacility(elevators, alerts)}
+              facilities={elevators}
+              facilityType="Elevator"
             />
-            <EscalatorsAmenityCard
+            <StationAmenityCard
               stopName={stop.name}
-              alerts={alertsByFacility(
-                escalators !== undefined ? escalators : [],
-                alerts
-              )}
-              escalatorFacilities={escalators}
+              alerts={alertsByFacility(escalators, alerts)}
+              facilities={escalators}
+              facilityType="Escalator"
             />
           </>
         )}