Shuttle loading state (#199)

* rename test file

* shuttle vehicles loading state

assets/src/components/shuttleMapPage.tsx

@@ -15,8 +15,8 @@ const findSelectedVehicle = (
 
 const ShuttleMapPage = ({}): ReactElement<HTMLDivElement> => {
   const [state] = useContext(StateDispatchContext)
-  const shuttles = useContext(ShuttleVehiclesContext)
-  const selectedShuttles = shuttles.filter(shuttle =>
+  const shuttles: Vehicle[] | null = useContext(ShuttleVehiclesContext)
+  const selectedShuttles: Vehicle[] = (shuttles || []).filter(shuttle =>
     state.selectedShuttleRunIds.includes(shuttle.runId!)
   )
   const selectedVehicle = findSelectedVehicle(

assets/src/components/shuttlePicker.tsx

@@ -4,6 +4,7 @@ import { StateDispatchContext } from "../contexts/stateDispatchContext"
 import { uniq } from "../helpers/array"
 import { RunId, Vehicle } from "../realtime"
 import { deselectShuttleRun, selectShuttleRun } from "../state"
+import Loading from "./loading"
 
 interface KnownShuttle {
   name: string
@@ -42,35 +43,50 @@ const KNOWN_RUN_IDS: RunId[] = KNOWN_SHUTTLES.map(
 )
 
 const ShuttlePicker = ({}): ReactElement<HTMLDivElement> => {
-  const shuttles: Vehicle[] = useContext(ShuttleVehiclesContext)
+  const shuttles: Vehicle[] | null = useContext(ShuttleVehiclesContext)
+
+  return (
+    <div className="m-route-picker">
+      {shuttles === null ? (
+        <Loading />
+      ) : (
+        <>
+          <div className="m-route-picker__label">Run #</div>
+          <ul className="m-route-picker__route-list">
+            <RunIdButtons shuttles={shuttles} />
+          </ul>
+        </>
+      )}
+    </div>
+  )
+}
+
+const RunIdButtons = ({ shuttles }: { shuttles: Vehicle[] }) => {
   const activeRunIds: RunId[] = uniq(shuttles
     .map(v => v.runId)
     .filter(runId => runId !== null) as RunId[])
 
   return (
-    <div className="m-route-picker">
-      <div className="m-route-picker__label">Run #</div>
-      <ul className="m-route-picker__route-list">
-        {KNOWN_SHUTTLES.map(knownShuttle => (
+    <>
+      {KNOWN_SHUTTLES.map(knownShuttle => (
+        <RunIdButton
+          key={knownShuttle.runId}
+          name={`${knownShuttle.name} ${formatRunId(knownShuttle.runId)}`}
+          runId={knownShuttle.runId}
+          isActive={activeRunIds.includes(knownShuttle.runId)}
+        />
+      ))}
+      {activeRunIds.map(runId =>
+        KNOWN_RUN_IDS.includes(runId) ? null : (
           <RunIdButton
-            key={knownShuttle.runId}
-            name={`${knownShuttle.name} ${formatRunId(knownShuttle.runId)}`}
-            runId={knownShuttle.runId}
-            isActive={activeRunIds.includes(knownShuttle.runId)}
+            key={runId}
+            name={formatRunId(runId)}
+            runId={runId}
+            isActive={true}
           />
-        ))}
-        {activeRunIds.map(runId =>
-          KNOWN_RUN_IDS.includes(runId) ? null : (
-            <RunIdButton
-              key={runId}
-              name={formatRunId(runId)}
-              runId={runId}
-              isActive={true}
-            />
-          )
-        )}
-      </ul>
-    </div>
+        )
+      )}
+    </>
   )
 }
 

assets/src/contexts/shuttleVehiclesContext.tsx

@@ -2,13 +2,13 @@ import React, { Context, createContext, ReactElement } from "react"
 import { Vehicle } from "../realtime"
 
 interface Props {
-  shuttles: Vehicle[]
+  shuttles: Vehicle[] | null
   children: ReactElement<HTMLElement>
 }
 
-export const ShuttleVehiclesContext: Context<Vehicle[]> = createContext(
-  [] as Vehicle[]
-)
+export const ShuttleVehiclesContext: Context<Vehicle[] | null> = createContext<
+  Vehicle[] | null
+>(null)
 
 export const ShuttleVehiclesProvider = ({ shuttles, children }: Props) => (
   <ShuttleVehiclesContext.Provider value={shuttles}>

assets/src/hooks/useShuttleVehicles.ts

@@ -4,7 +4,7 @@ import { VehicleData, vehicleFromData } from "../models/vehicleData"
 import { Vehicle } from "../realtime"
 
 interface State {
-  shuttles: Vehicle[]
+  shuttles: Vehicle[] | null
   channel?: Channel
 }
 
@@ -19,7 +19,7 @@ const reducer = (state: State, action: Action): State => {
 }
 
 const initialState: State = {
-  shuttles: [],
+  shuttles: null,
 }
 
 interface SetShuttlesAction {
@@ -76,7 +76,7 @@ const subscribe = (socket: Socket, dispatch: Dispatch<Action>): Channel => {
   return channel
 }
 
-const useShuttleVehicles = (socket: Socket | undefined): Vehicle[] => {
+const useShuttleVehicles = (socket: Socket | undefined): Vehicle[] | null => {
   const [state, dispatch] = useReducer(reducer, initialState)
   const { channel, shuttles } = state
   useEffect(() => {

assets/tests/components/__snapshots__/shuttlePicker.test.tsx.snap

@@ -87,3 +87,11 @@ exports[`ShuttlePicker renders 1`] = `
   </ul>
 </div>
 `;
+
+exports[`ShuttlePicker renders loading state 1`] = `
+<div
+  className="m-route-picker"
+>
+  loading...
+</div>
+`;

assets/tests/components/shuttlePicker.test.tsx

@@ -54,6 +54,15 @@ const vehicle: Vehicle = {
 }
 
 describe("ShuttlePicker", () => {
+  test("renders loading state", () => {
+    const tree = renderer.create(
+      <ShuttleVehiclesProvider shuttles={null}>
+        <ShuttlePicker />
+      </ShuttleVehiclesProvider>
+    )
+    expect(tree).toMatchSnapshot()
+  })
+
   test("renders", () => {
     /*
     999-0501: known, no active shuttles, unselected

assets/tests/hooks/useShuttleVehicles.test.ts

@@ -189,9 +189,9 @@ const shuttles: Vehicle[] = [
 ]
 
 describe("useShuttleVehicles", () => {
-  test("shuttle list is empty to start with", () => {
+  test("returns null while loading", () => {
     const { result } = renderHook(() => useShuttleVehicles(undefined))
-    expect(result.current).toEqual([])
+    expect(result.current).toEqual(null)
   })
 
   test("initializing the hook subscribes to the shuttles channel", () => {