fix: move timepoints fetch to ScheduleController

Author: meagharty

assets/src/api.ts

@@ -1,8 +1,11 @@
 import "whatwg-fetch"
 import appData from "./appData"
-import { Block, Run } from "./minischedule"
+import { ScheduleBlock, ScheduleRun } from "./minischedule"
 import { reload } from "./models/browser"
-import { blockFromData, runFromData } from "./models/minischeduleData"
+import {
+  scheduleBlockFromData,
+  scheduleRunFromData,
+} from "./models/minischeduleData"
 import { SwingData, swingsFromData } from "./models/swingsData"
 import { NotificationId, NotificationState, RunId } from "./realtime"
 import {
@@ -411,26 +414,28 @@ export const fetchTimepointsForRoute = (
 export const fetchScheduleRun = (
   tripId: TripId,
   runId: RunId | null
-): Promise<Run | null> => {
+): Promise<ScheduleRun | null> => {
   if (runId) {
     return apiCall({
       url: `/api/schedule/run?trip_id=${tripId}&run_id=${runId}`,
-      parser: nullableParser(runFromData),
+      parser: nullableParser(scheduleRunFromData),
       defaultResult: null,
     })
   } else {
     return apiCall({
       url: `/api/schedule/run?trip_id=${tripId}`,
-      parser: nullableParser(runFromData),
+      parser: nullableParser(scheduleRunFromData),
       defaultResult: null,
     })
   }
 }
 
-export const fetchScheduleBlock = (tripId: TripId): Promise<Block | null> =>
+export const fetchScheduleBlock = (
+  tripId: TripId
+): Promise<ScheduleBlock | null> =>
   apiCall({
     url: `/api/schedule/block?trip_id=${tripId}`,
-    parser: nullableParser(blockFromData),
+    parser: nullableParser(scheduleBlockFromData),
     defaultResult: null,
   })
 

assets/src/components/propertiesPanel/minischedule.tsx

@@ -26,10 +26,11 @@ import {
 } from "../../hooks/useMinischedule"
 import {
   AsDirected,
-  Block,
   Break,
   Piece,
   Run,
+  ScheduleRun,
+  ScheduleBlock,
   Time,
   Trip,
 } from "../../minischedule"
@@ -59,68 +60,77 @@ import Loading from "../loading"
 import { currentRouteTab } from "../../models/routeTab"
 import { isVehicleInScheduledService } from "../../models/vehicle"
 import inTestGroup, { TestGroups } from "../../userInTestGroup"
-import { useTimepointsByIdForRoute } from "../../hooks/useTimepoints"
 
 export interface Props {
   vehicleOrGhost: VehicleInScheduledService | Ghost
 }
 
 export const MinischeduleRun = ({ vehicleOrGhost }: Props): ReactElement => {
-  const run: Run | null | undefined = useMinischeduleRun(
+  const run: ScheduleRun | null | undefined = useMinischeduleRun(
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     vehicleOrGhost.tripId!,
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     vehicleOrGhost.runId!
   )
-  const timepoints = useTimepointsByIdForRoute(vehicleOrGhost.routeId)
 
   return (
-    <Minischedule
-      runOrBlock={run}
-      vehicleOrGhost={vehicleOrGhost}
-      timepoints={timepoints}
-      view="run"
-    />
+    <Minischedule runOrBlock={run} vehicleOrGhost={vehicleOrGhost} view="run" />
   )
 }
 
 export const MinischeduleBlock = ({ vehicleOrGhost }: Props): ReactElement => {
-  const block: Block | null | undefined = useMinischeduleBlock(
+  const block: ScheduleBlock | null | undefined = useMinischeduleBlock(
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     vehicleOrGhost.tripId!
   )
-  const timepoints = useTimepointsByIdForRoute(vehicleOrGhost.routeId)
 
   return (
     <Minischedule
       runOrBlock={block}
       vehicleOrGhost={vehicleOrGhost}
-      timepoints={timepoints}
       view="block"
     />
   )
 }
 
+const activitiesFromRunOrBlock = (runOrBlock: ScheduleBlock | ScheduleRun) => {
+  if ("run" in runOrBlock) {
+    return runOrBlock.run.activities
+  }
+  return runOrBlock.block.pieces
+}
+
+const idFromRunOrBlock = (runOrBlock: ScheduleBlock | ScheduleRun) => {
+  if ("run" in runOrBlock) {
+    return runOrBlock.run.id
+  }
+  return runOrBlock.block.id
+}
+
+const runFromRunOrBlock = (runOrBlock: ScheduleBlock | ScheduleRun) => {
+  if ("run" in runOrBlock) {
+    return runOrBlock.run
+  }
+  return undefined
+}
+
 export const Minischedule = ({
   runOrBlock,
   vehicleOrGhost,
-  timepoints,
   view,
 }: {
-  runOrBlock: Run | Block | null | undefined
+  runOrBlock: ScheduleRun | ScheduleBlock | null | undefined
   vehicleOrGhost: VehicleInScheduledService | Ghost
-  timepoints: TimepointNameById | null
   view: "run" | "block"
 }) => {
   const [showPast, setShowPast] = useState<boolean>(false)
 
-  if (runOrBlock === undefined || timepoints === null) {
+  if (runOrBlock === undefined) {
     return <Loading />
   } else if (runOrBlock === null) {
     return view === "run" ? <>No run found</> : <>No block found</>
   } else {
-    const activities: (Piece | Break)[] =
-      (runOrBlock as Run).activities || (runOrBlock as Block).pieces
+    const activities: (Piece | Break)[] = activitiesFromRunOrBlock(runOrBlock)
     const activeIndex = getActiveIndex(
       activities,
       vehicleOrGhost.tripId,
@@ -135,9 +145,13 @@ export const Minischedule = ({
       >
         <Header
           label={view === "run" ? "Run" : "Block"}
-          value={runOrBlock.id}
+          value={idFromRunOrBlock(runOrBlock)}
         />
-        {view === "run" ? <DutyDetails run={runOrBlock as Run} /> : null}
+        {view === "run" ? (
+          <DutyDetails
+            run={runFromRunOrBlock(runOrBlock) as ScheduleRun["run"]}
+          />
+        ) : null}
         <DeparturePointHeader />
         <PastToggle showPast={showPast} setShowPast={setShowPast} />
         <div>
@@ -150,7 +164,7 @@ export const Minischedule = ({
                 pieceIndex={index}
                 activeIndex={activeIndex}
                 key={activity.startTime}
-                timepoints={timepoints}
+                timepoints={runOrBlock.timepoints}
               />
             ) : (
               <BreakRow

assets/src/hooks/useMinischedule.ts

@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react"
 import { fetchScheduleBlock, fetchScheduleRun } from "../api"
-import { Block, Run } from "../minischedule"
+import { ScheduleBlock, ScheduleRun, Run } from "../minischedule"
 import { TripId } from "../schedule"
 import { RunId } from "../realtime"
 import { equalByElements } from "../helpers/array"
@@ -12,12 +12,14 @@ import { equalByElements } from "../helpers/array"
 export const useMinischeduleRun = (
   tripId: TripId,
   runId: RunId
-): Run | null | undefined => {
-  const [run, setRun] = useState<Run | null | undefined>(undefined)
+): ScheduleRun | null | undefined => {
+  const [scheduleRun, setScheduleRun] = useState<
+    ScheduleRun | null | undefined
+  >(undefined)
   useEffect(() => {
-    fetchScheduleRun(tripId, runId).then(setRun)
+    fetchScheduleRun(tripId, runId).then(setScheduleRun)
   }, [tripId, runId])
-  return run
+  return scheduleRun
 }
 
 /**
@@ -35,9 +37,13 @@ export const useMinischeduleRuns = (
   }
 
   useEffect(() => {
-    Promise.all(
-      currentTripIds.map((tripId) => fetchScheduleRun(tripId, null))
-    ).then(setRuns)
+    Promise.all(currentTripIds.map((tripId) => fetchScheduleRun(tripId, null)))
+      .then((scheduleRuns) =>
+        scheduleRuns.map((scheduleRun) =>
+          scheduleRun !== null ? scheduleRun.run : null
+        )
+      )
+      .then(setRuns)
   }, [currentTripIds])
 
   return runs
@@ -49,10 +55,12 @@ export const useMinischeduleRuns = (
  */
 export const useMinischeduleBlock = (
   tripId: TripId
-): Block | null | undefined => {
-  const [block, setBlock] = useState<Block | null | undefined>(undefined)
+): ScheduleBlock | null | undefined => {
+  const [scheduledBlock, setScheduledBlock] = useState<
+    ScheduleBlock | null | undefined
+  >(undefined)
   useEffect(() => {
-    fetchScheduleBlock(tripId).then(setBlock)
+    fetchScheduleBlock(tripId).then(setScheduledBlock)
   }, [tripId])
-  return block
+  return scheduledBlock
 }

assets/src/minischedule.d.ts

@@ -5,6 +5,7 @@ import {
   RouteId,
   StopId,
   TimepointId,
+  TimepointNameById,
   TripId,
   ViaVariant,
 } from "./schedule"
@@ -21,6 +22,16 @@ export interface Block {
   pieces: Piece[]
 }
 
+export interface ScheduleRun {
+  run: Run
+  timepoints: TimepointNameById
+}
+
+export interface ScheduleBlock {
+  block: Block
+  timepoints: TimepointNameById
+}
+
 export interface Break {
   breakType: string
   startTime: Time

assets/src/models/minischeduleData.ts

@@ -4,6 +4,8 @@ import {
   Break,
   Piece,
   Run,
+  ScheduleBlock,
+  ScheduleRun,
   StopTime,
   Time,
   Trip,
@@ -14,13 +16,25 @@ import {
   DirectionId,
   RouteId,
   StopId,
+  Timepoint,
   TimepointId,
+  TimepointNameById,
   TripId,
   ViaVariant,
 } from "../schedule"
 
 type ActivityData = BreakData | PieceData
 
+interface ScheduleRunData {
+  run: RunData
+  timepoints: Timepoint[]
+}
+
+interface ScheduleBlockData {
+  block: BlockData
+  timepoints: Timepoint[]
+}
+
 interface RunData {
   id: RunId
   activities: ActivityData[]
@@ -82,18 +96,39 @@ const isBreakData = (
 ): activityData is BreakData =>
   Object.prototype.hasOwnProperty.call(activityData, "break_type")
 
-export const runFromData = (runData: RunData): Run => ({
-  id: runData.id,
-  activities: runData.activities.map((activityData) =>
+export const scheduleRunFromData = (
+  scheduleRunData: ScheduleRunData
+): ScheduleRun => ({
+  run: runFromData(scheduleRunData),
+  timepoints: timepointsFromData(scheduleRunData),
+})
+
+const runFromData = ({ run }: ScheduleRunData): Run => ({
+  id: run.id,
+  activities: run.activities.map((activityData) =>
     isBreakData(activityData)
       ? breakFromData(activityData)
       : pieceFromData(activityData)
   ),
 })
 
-export const blockFromData = (blockData: BlockData): Block => ({
-  id: blockData.id,
-  pieces: blockData.pieces.map(pieceFromData),
+const timepointsFromData = ({
+  timepoints,
+}: ScheduleRunData | ScheduleBlockData): TimepointNameById =>
+  new Map(
+    timepoints.map((timepoint: Timepoint) => [timepoint.id, timepoint.name])
+  )
+
+export const scheduleBlockFromData = (
+  scheduleBlockData: ScheduleBlockData
+): ScheduleBlock => ({
+  block: blockFromData(scheduleBlockData),
+  timepoints: timepointsFromData(scheduleBlockData),
+})
+
+export const blockFromData = ({ block }: ScheduleBlockData): Block => ({
+  id: block.id,
+  pieces: block.pieces.map(pieceFromData),
 })
 
 const breakFromData = (breakData: BreakData): Break => ({