refactor: add types for DUP widgets

assets/src/apps/v2/bus_eink.tsx

@@ -22,7 +22,7 @@ import OneMedium from "Components/v2/eink/flex/one_medium";
 import Placeholder from "Components/v2/placeholder";
 import NormalHeader from "Components/v2/eink/bus_normal_header";
 import FareInfoFooter from "Components/v2/eink/fare_info_footer";
-import NormalDepartures from "Components/v2/departures/normal_departures";
+import Departures from "Components/v2/departures";
 import EvergreenContent from "Components/v2/evergreen_content";
 import {
   LOADING_LAYOUT,
@@ -55,7 +55,7 @@ const TYPE_TO_COMPONENT = {
   placeholder: Placeholder,
   fare_info_footer: FareInfoFooter,
   normal_header: NormalHeader,
-  departures: NormalDepartures,
+  departures: Departures,
   alert: MediumFlexAlert,
   full_body_alert: FullBodyTopScreenAlert,
   evergreen_content: EvergreenContent,

assets/src/apps/v2/bus_shelter.tsx

@@ -34,7 +34,7 @@ import TwoMedium from "Components/v2/bus_shelter/flex/two_medium";
 import Placeholder from "Components/v2/placeholder";
 import LinkFooter from "Components/v2/bus_shelter/link_footer";
 import NormalHeader from "Components/v2/lcd/normal_header";
-import NormalDepartures from "Components/v2/departures/normal_departures";
+import Departures from "Components/v2/departures";
 import LcdSubwayStatus from "Components/v2/subway_status/lcd_subway_status";
 
 import EvergreenContent from "Components/v2/evergreen_content";
@@ -60,7 +60,7 @@ const TYPE_TO_COMPONENT = {
   placeholder: Placeholder,
   link_footer: LinkFooter,
   normal_header: NormalHeader,
-  departures: NormalDepartures,
+  departures: Departures,
   subway_status: LcdSubwayStatus,
   alert: FlexZoneAlert,
   full_body_alert: FullBodyAlert,

assets/src/apps/v2/busway.tsx

@@ -24,7 +24,7 @@ import TakeoverScreen from "Components/v2/takeover_screen";
 import Placeholder from "Components/v2/placeholder";
 
 import NormalHeader from "Components/v2/lcd/normal_header";
-import NormalDepartures from "Components/v2/departures/normal_departures";
+import Departures from "Components/v2/departures";
 
 import NoData from "Components/v2/lcd/no_data";
 import DeparturesNoData from "Components/v2/lcd/departures_no_data";
@@ -38,7 +38,7 @@ const TYPE_TO_COMPONENT = {
   takeover: TakeoverScreen,
   placeholder: Placeholder,
   normal_header: NormalHeader,
-  departures: NormalDepartures,
+  departures: Departures,
   no_data: NoData,
   page_load_no_data: PageLoadNoData,
   departures_no_data: DeparturesNoData,

assets/src/apps/v2/dup.tsx

@@ -16,7 +16,7 @@ import NormalScreen, {
   NormalSimulation,
 } from "Components/v2/dup/normal_screen";
 import NormalHeader from "Components/v2/dup/normal_header";
-import NormalDepartures from "Components/v2/dup/departures/normal_departures";
+import Departures from "Components/v2/dup/departures";
 import MultiScreenPage from "Components/v2/multi_screen_page";
 import Viewport from "Components/v2/dup/viewport";
 import EvergreenContent from "Components/v2/evergreen_content";
@@ -54,7 +54,7 @@ const TYPE_TO_COMPONENT = {
   body_split_one: splitRotationFromPropNames(SplitBody, "one"),
   body_split_two: splitRotationFromPropNames(SplitBody, "two"),
   normal_header: NormalHeader,
-  departures: NormalDepartures,
+  departures: Departures,
   evergreen_content: EvergreenContent,
   partial_alert: PartialAlert,
   takeover_alert: TakeoverAlert,
@@ -73,24 +73,15 @@ const responseMapper: ResponseMapper = (apiResponse) => {
     case "failure":
       return {
         rotation_one: {
-          full_rotation: {
-            type: "no_data",
-            include_header: true,
-          },
+          full_rotation: { type: "no_data" },
           type: "rotation_takeover_one",
         },
         rotation_two: {
-          full_rotation: {
-            type: "no_data",
-            include_header: true,
-          },
+          full_rotation: { type: "no_data" },
           type: "rotation_takeover_two",
         },
         rotation_zero: {
-          full_rotation: {
-            type: "no_data",
-            include_header: true,
-          },
+          full_rotation: { type: "no_data" },
           type: "rotation_takeover_zero",
         },
         type: "screen_normal",

assets/src/apps/v2/gl_eink.tsx

@@ -22,7 +22,7 @@ import OneMedium from "Components/v2/eink/flex/one_medium";
 import Placeholder from "Components/v2/placeholder";
 import FareInfoFooter from "Components/v2/eink/fare_info_footer";
 import NormalHeader from "Components/v2/eink/gl_normal_header";
-import NormalDepartures from "Components/v2/departures/normal_departures";
+import Departures from "Components/v2/departures";
 import LineMap from "Components/v2/gl_eink_double/line_map";
 import EvergreenContent from "Components/v2/evergreen_content";
 import NoData from "Components/v2/eink/no_data";
@@ -59,7 +59,7 @@ const TYPE_TO_COMPONENT = {
   placeholder: Placeholder,
   fare_info_footer: FareInfoFooter,
   normal_header: NormalHeader,
-  departures: NormalDepartures,
+  departures: Departures,
   alert: MediumFlexAlert,
   full_body_alert: FullBodyTopScreenAlert,
   line_map: LineMap,

assets/src/apps/v2/solari_large.tsx

@@ -13,15 +13,15 @@ import NormalScreen from "Components/v2/solari_large/normal_screen";
 import TakeoverScreen from "Components/v2/takeover_screen";
 import Placeholder from "Components/v2/placeholder";
 import NormalHeader from "Components/v2/lcd/normal_header";
-import NormalDepartures from "Components/v2/departures/normal_departures";
+import Departures from "Components/v2/departures";
 import MultiScreenPage from "Components/v2/multi_screen_page";
 
 const TYPE_TO_COMPONENT = {
   normal: NormalScreen,
   takeover: TakeoverScreen,
   placeholder: Placeholder,
   normal_header: NormalHeader,
-  departures: NormalDepartures,
+  departures: Departures,
 };
 
 const App = (): JSX.Element => {

assets/src/components/v2/departures/normal_departures.tsx → assets/src/components/v2/departures.tsx

@@ -7,18 +7,18 @@ import React, {
 } from "react";
 import weakKey from "weak-key";
 
-import NormalSection from "./normal_section";
-import NoticeSection from "./notice_section";
-import { Section, trimSections, toFoldedSection } from "./section";
+import NormalSection from "./departures/normal_section";
+import NoticeSection from "./departures/notice_section";
+import { Section, trimSections, toFoldedSection } from "./departures/section";
 
 import { warn } from "Util/sentry";
 import { hasOverflowY } from "Util/util";
 
-type NormalDepartures = {
+type Departures = {
   sections: Section[];
 };
 
-const NormalDepartures: ComponentType<NormalDepartures> = ({ sections }) => {
+const Departures: ComponentType<Departures> = ({ sections }) => {
   const ref = useRef<HTMLDivElement>(null);
   const initialSections = useMemo(
     () => sections.map(toFoldedSection),
@@ -57,4 +57,4 @@ const NormalDepartures: ComponentType<NormalDepartures> = ({ sections }) => {
   );
 };
 
-export default NormalDepartures;
+export default Departures;

assets/src/components/v2/departures/departure_row.tsx

@@ -1,11 +1,9 @@
 import React, { ComponentType } from "react";
 
-import RoutePill, { Pill } from "Components/v2/departures/route_pill";
-import Destination from "Components/v2/departures/destination";
-import DepartureTimes, {
-  TimeWithCrowding,
-} from "Components/v2/departures/departure_times";
-import DepartureAlerts from "Components/v2/departures/departure_alerts";
+import RoutePill, { Pill } from "./route_pill";
+import Destination from "./destination";
+import DepartureTimes, { TimeWithCrowding } from "./departure_times";
+import DepartureAlerts from "./departure_alerts";
 
 type DepartureRow = {
   id: string;

assets/src/components/v2/departures/departure_time.tsx

@@ -24,7 +24,10 @@ const TimestampDepartureTime = ({ hour, minute }) => {
 type DepartureTime =
   | (TextDeparture & { type: "text" })
   | (MinutesDeparture & { type: "minutes" })
-  | (TimestampDeparture & { type: "timestamp" });
+  | (TimestampDeparture & { type: "timestamp" })
+  // Note: `overnight` is only produced in the DUP code path, and so is only
+  // supported in the DUP version of this component.
+  | { type: "overnight" };
 
 interface TextDeparture {
   text: string;
@@ -35,6 +38,10 @@ interface MinutesDeparture {
 interface TimestampDeparture {
   hour: number;
   minute: number;
+  // Note: `am_pm` fields are currently only supported by the DUP version of
+  // this component, but are always present in departures serialization.
+  am_pm: string;
+  show_am_pm: boolean;
 }
 
 const DepartureTime: ComponentType<DepartureTime> = ({ type, ...data }) => {

assets/src/components/v2/departures/departure_times.tsx

@@ -1,13 +1,14 @@
 import React, { ComponentType } from "react";
 
-import DepartureTime from "Components/v2/departures/departure_time";
-import DepartureCrowding, {
-  CrowdingLevel,
-} from "Components/v2/departures/departure_crowding";
+import DepartureTime from "./departure_time";
+import DepartureCrowding, { CrowdingLevel } from "./departure_crowding";
 
 export type TimeWithCrowding = {
   id: string;
   time: DepartureTime;
+  // Note: `scheduled_time` is currently only supported by the DUP version of
+  // `DepartureTime`, but is always present in departures serialization.
+  scheduled_time?: DepartureTime;
   crowding: CrowdingLevel | null;
 };
 

assets/src/components/v2/departures/header.tsx

@@ -4,10 +4,10 @@ import Arrow45 from "Images/svgr_bundled/Arrow-45-no-padding.svg";
 
 type CardinalDirection = "n" | "ne" | "e" | "se" | "s" | "sw" | "w" | "nw";
 
-export interface Props {
+type Header = {
   title: string | null;
   arrow: CardinalDirection | null;
-}
+};
 
 const DirectionArrow = ({ arrow }: { arrow: CardinalDirection }) => (
   <Arrow45
@@ -23,7 +23,7 @@ const DirectionArrow = ({ arrow }: { arrow: CardinalDirection }) => (
   />
 );
 
-const Header = ({ title, arrow }: Props) => {
+const Header = ({ title, arrow }: Header) => {
   return (
     <header className="departures-header">
       {(title || arrow) && <span>{title}</span>}

assets/src/components/v2/departures/normal_section.tsx

@@ -3,7 +3,7 @@ import weakKey from "weak-key";
 
 import DepartureRow from "./departure_row";
 import NoticeRow from "./notice_row";
-import Header, { type Props as HeaderProps } from "./header";
+import Header from "./header";
 import LaterDepartures, { MIN_LATER_DEPARTURES } from "./later_departures";
 
 export type Layout = {
@@ -19,13 +19,13 @@ export type Row =
 
 export type NormalSection = {
   layout: Layout;
-  header: HeaderProps;
+  header: Header;
   rows: Row[];
 };
 
 export type FoldedNormalSection = {
   layout: Layout;
-  header: HeaderProps;
+  header: Header;
   rows: FoldedRows;
 };
 

assets/src/components/v2/dup/departures.tsx

@@ -0,0 +1,43 @@
+import React, { ComponentType } from "react";
+
+import { type Section as SectionBase } from "Components/v2/departures/section";
+import NormalSection from "./departures/normal_section";
+import NoticeSection from "Components/v2/departures/notice_section";
+import HeadwaySection from "./departures/headway_section";
+import NoDataSection from "./departures/no_data_section";
+import OvernightSection from "./departures/overnight_section";
+
+type Section =
+  | SectionBase
+  | (HeadwaySection & { type: "headway_section" })
+  | (NoDataSection & { type: "no_data_section" })
+  | (OvernightSection & { type: "overnight_section" });
+
+interface Props {
+  sections: Section[];
+}
+
+const Departures: ComponentType<Props> = ({ sections }) => {
+  return (
+    <div className="departures-container">
+      <div className="departures">
+        {sections.map((section, i) => {
+          switch (section.type) {
+            case "normal_section":
+              return <NormalSection {...section} key={i} />;
+            case "notice_section":
+              return <NoticeSection {...section} key={i} />;
+            case "headway_section":
+              return <HeadwaySection {...section} key={i} />;
+            case "no_data_section":
+              return <NoDataSection {...section} key={i} />;
+            case "overnight_section":
+              return <OvernightSection {...section} key={i} />;
+          }
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default Departures;

assets/src/components/v2/dup/departures/departure_row.tsx

@@ -1,25 +1,24 @@
-import React from "react";
+import React, { ComponentType } from "react";
 
+import type DepartureRowBase from "Components/v2/departures/departure_row";
 import RoutePill from "Components/v2/departures/route_pill";
-import Destination from "Components/v2/dup/departures/destination";
-import DepartureTimes from "Components/v2/dup/departures/departure_times";
+import Destination from "./destination";
+import DepartureTimes from "./departure_times";
 
-const DepartureRow = ({
+interface Props extends DepartureRowBase {
+  currentPage: number;
+}
+
+const DepartureRow: ComponentType<Props> = ({
   headsign,
   route,
   times_with_crowding: timesWithCrowding,
   currentPage,
 }) => {
-  const routeText = Number(route.text);
   return (
     <div className="departure-row">
       <div className="departure-row__route">
-        <RoutePill
-          pill={{
-            ...route,
-            size: isNaN(routeText) || routeText > 200 ? "small" : "large",
-          }}
-        />
+        <RoutePill pill={route} />
       </div>
       <div className="departure-row__destination">
         <Destination {...headsign} currentPage={currentPage} />