From 0fde39e37a5a25a2bfe2a26eb4ab184985eaf344 Mon Sep 17 00:00:00 2001 From: Kayla Firestack Date: Wed, 8 Nov 2023 12:16:49 -0500 Subject: [PATCH] feat(ts/hooks/usePanelState): add `setTabMode` API --- assets/src/components/app.tsx | 18 +++- assets/src/components/rightPanel.tsx | 42 +++----- assets/src/hooks/usePanelState.ts | 6 ++ assets/src/state/pagePanelState.ts | 14 +++ assets/tests/components/rightPanel.test.tsx | 95 +++---------------- .../tests/testHelpers/usePanelStateMocks.tsx | 1 + 6 files changed, 65 insertions(+), 111 deletions(-) diff --git a/assets/src/components/app.tsx b/assets/src/components/app.tsx index 29c9cc8bfb..b298f40bc2 100644 --- a/assets/src/components/app.tsx +++ b/assets/src/components/app.tsx @@ -27,6 +27,8 @@ import MapPage from "./mapPage" import SearchPage from "./searchPage" import { OpenView, isPagePath } from "../state/pagePanelState" import { usePanelStateFromStateDispatchContext } from "../hooks/usePanelState" +import PropertiesPanel from "./propertiesPanel" +import { isVehicleInScheduledService } from "../models/vehicle" export const AppRoutes = () => { useAppcues() @@ -36,6 +38,8 @@ export const AppRoutes = () => { const { setPath, + setTabMode, + closeView, currentView: { openView, selectedVehicleOrGhost, vppTabMode }, } = usePanelStateFromStateDispatchContext() @@ -73,8 +77,18 @@ export const AppRoutes = () => { <> + ) : undefined + } /> } diff --git a/assets/src/components/rightPanel.tsx b/assets/src/components/rightPanel.tsx index d0db93b130..ce4cec436c 100644 --- a/assets/src/components/rightPanel.tsx +++ b/assets/src/components/rightPanel.tsx @@ -1,42 +1,30 @@ -import React, { ReactElement } from "react" -import { Ghost, Vehicle } from "../realtime.d" +import React, { ReactElement, ReactNode } from "react" import NotificationDrawer from "./notificationDrawer" -import PropertiesPanel from "./propertiesPanel" import SwingsView from "./swingsView" import { OpenView } from "../state/pagePanelState" -import { usePanelStateFromStateDispatchContext } from "../hooks/usePanelState" -import { TabMode } from "./propertiesPanel/tabPanels" import LateView from "./lateView" -const RightPanel = ({ - selectedVehicleOrGhost, - initialTab, -}: { - selectedVehicleOrGhost?: Vehicle | Ghost | null - initialTab?: TabMode -}): ReactElement | null => { - const { - currentView: { openView }, - closeView, - } = usePanelStateFromStateDispatchContext() +type RightPanelProps = { + openView: OpenView + propertiesPanel?: ReactNode +} - if (selectedVehicleOrGhost) { - return ( - - ) - } else if (openView === OpenView.Swings) { +const RightPanel = ({ + openView, + propertiesPanel, +}: RightPanelProps): ReactElement | null => { + if (propertiesPanel !== undefined) { + return <>{propertiesPanel} + } + if (openView === OpenView.Swings) { return } else if (openView === OpenView.Late) { return } else if (openView === OpenView.NotificationDrawer) { return - } else { - return null } + + return null } export default RightPanel diff --git a/assets/src/hooks/usePanelState.ts b/assets/src/hooks/usePanelState.ts index ea8aee8297..c2ba46f15a 100644 --- a/assets/src/hooks/usePanelState.ts +++ b/assets/src/hooks/usePanelState.ts @@ -53,6 +53,12 @@ export const usePanelStateForViewState = ( }) } }, + setTabMode(tabMode: TabMode) { + dispatch({ + type: "SET_TAB_MODE", + payload: { tabMode }, + }) + }, openVehiclePropertiesPanel: (vehicle: VehicleType, initialView?: TabMode) => dispatch({ type: "SELECT_VEHICLE", diff --git a/assets/src/state/pagePanelState.ts b/assets/src/state/pagePanelState.ts index 747302f923..dc9b3c20b6 100644 --- a/assets/src/state/pagePanelState.ts +++ b/assets/src/state/pagePanelState.ts @@ -99,6 +99,14 @@ const openViewPanelReducer = ( vppTabMode, } } + case "SET_TAB_MODE": { + return state.selectedVehicleOrGhost + ? { + ...state, + vppTabMode: action.payload.tabMode, + } + : state + } case "OPEN_NOTIFICATION_DRAWER": return openView === OpenView.NotificationDrawer ? state @@ -183,6 +191,7 @@ export type PanelViewAction = // Vehicles | SelectVehicleAction | SelectVehicleFromNotificationAction + | SetVppTabMode // Views | OpenNotificationDrawerAction | OpenSwingsViewAction @@ -195,6 +204,11 @@ interface SetCurrentPath { path: PagePath } +interface SetVppTabMode { + type: "SET_TAB_MODE" + payload: { tabMode: TabMode } +} + interface SelectVehicleAction { type: "SELECT_VEHICLE" payload: { diff --git a/assets/tests/components/rightPanel.test.tsx b/assets/tests/components/rightPanel.test.tsx index c795b31ffb..0874cc21c9 100644 --- a/assets/tests/components/rightPanel.test.tsx +++ b/assets/tests/components/rightPanel.test.tsx @@ -5,19 +5,14 @@ import { BrowserRouter } from "react-router-dom" import "@testing-library/jest-dom/jest-globals" import renderer from "react-test-renderer" import RightPanel from "../../src/components/rightPanel" -import { StateDispatchProvider } from "../../src/contexts/stateDispatchContext" -import { State } from "../../src/state" import * as dateTime from "../../src/util/dateTime" import ghostFactory from "../factories/ghost" import vehicleFactory from "../factories/vehicle" -import stateFactory from "../factories/applicationState" import { RunFactory } from "../factories/run" import { OpenView } from "../../src/state/pagePanelState" -import { viewFactory } from "../factories/pagePanelStateFactory" const ghost = ghostFactory.build({ runId: "ghostrun-1" }) -const vehicle = vehicleFactory.build() jest .spyOn(dateTime, "now") @@ -30,7 +25,7 @@ describe("rightPanel", () => { const tree = renderer .create( - + ) .toJSON() @@ -40,112 +35,48 @@ describe("rightPanel", () => { test("shows a selected vehicle", () => { const { id: runId } = RunFactory.build() const vehicle = vehicleFactory.build({ runId }) - const state = stateFactory.build({ - view: viewFactory - .currentState({ selectedVehicleOrGhost: vehicle }) - .build(), - }) const result = render( - - - - - + {vehicle.runId!}} + /> ) expect(result.queryByRole("button", { name: vehicle.runId! })).toBeVisible() }) test("shows a selected ghost", () => { - const state: State = stateFactory.build({ - view: viewFactory - .currentState({ - selectedVehicleOrGhost: ghost, - }) - .build(), - }) const result = render( - - - - - + ) expect(result.queryByText(ghost.runId!)).toBeVisible() }) test("shows notification drawer", () => { - const state: State = stateFactory.build({ - view: viewFactory - .currentState({ - openView: OpenView.NotificationDrawer, - }) - .build(), - }) - const result = render( - - - - - - ) + const result = render() expect(result.getByText("Notifications")).toBeVisible() }) test("prefers VPP to notification drawer", () => { - const state: State = stateFactory.build({ - view: viewFactory - .withVehicle() - .currentState({ - openView: OpenView.NotificationDrawer, - }) - .build(), - }) const result = render( - - - - - + ) expect(result.queryByText("Vehicles")).toBeVisible() expect(result.queryByText("Notifications")).toBeNull() }) test("shows swings view", () => { - const state: State = stateFactory.build({ - view: viewFactory - .currentState({ - openView: OpenView.Swings, - }) - .build(), - }) - const result = render( - - - - - - ) + const result = render() expect(result.queryByText("Swings")).toBeVisible() }) test("prefers VPP to swings view", () => { - const state: State = stateFactory.build({ - view: viewFactory - .currentState({ - selectedVehicleOrGhost: vehicle, - openView: OpenView.Swings, - }) - .build(), - }) const result = render( - - - - - + ) expect(result.queryByText("Vehicles")).toBeVisible() expect(result.queryByText("Swings")).toBeNull() diff --git a/assets/tests/testHelpers/usePanelStateMocks.tsx b/assets/tests/testHelpers/usePanelStateMocks.tsx index 2575b25df9..c135839301 100644 --- a/assets/tests/testHelpers/usePanelStateMocks.tsx +++ b/assets/tests/testHelpers/usePanelStateMocks.tsx @@ -14,6 +14,7 @@ export function mockUsePanelState( openNotificationDrawer: jest.fn(), openLateView: jest.fn(), openSwingsView: jest.fn(), + setTabMode: jest.fn(), ...(values || {}), })