From ed9026dd47daa6affc641b73a4e98254856d9cb6 Mon Sep 17 00:00:00 2001 From: Hannah Purcell Date: Fri, 18 Oct 2024 17:07:07 -0400 Subject: [PATCH] feat: Move detour text creation to state machine; allow edits --- .../src/components/detours/diversionPage.tsx | 48 ++++--------------- assets/src/models/createDetourMachine.ts | 44 ++++++++++++++++- .../detoursListPage.openDetour.test.tsx.snap | 30 +++++++++++- .../components/detours/diversionPage.test.tsx | 22 +++++++++ 4 files changed, 103 insertions(+), 41 deletions(-) diff --git a/assets/src/components/detours/diversionPage.tsx b/assets/src/components/detours/diversionPage.tsx index c22d3c844..c721c0cba 100644 --- a/assets/src/components/detours/diversionPage.tsx +++ b/assets/src/components/detours/diversionPage.tsx @@ -3,7 +3,6 @@ import React, { ComponentPropsWithoutRef, PropsWithChildren, useContext, - useEffect, useState, } from "react" import { DrawDetourPanel } from "./detourPanels/drawDetourPanel" @@ -113,8 +112,8 @@ export const DiversionPage = ({ : { input: useDetourProps.originalRoute } ) - const [textArea, setTextArea] = useState("") - + // I considered moving this to the statemachine, but + // this would disrupt existing Active Detours in prod const nearestIntersectionDirection = [ { instruction: "From " + nearestIntersection }, ] @@ -122,7 +121,8 @@ export const DiversionPage = ({ ? nearestIntersectionDirection.concat(directions) : undefined - const { route, routePattern, routePatterns } = snapshot.context + const { route, routePattern, routePatterns, editedDetourText } = + snapshot.context const routePatternsById = Object.fromEntries( routePatterns?.map((rp) => [rp.id, rp]) ?? [] ) @@ -137,36 +137,6 @@ export const DiversionPage = ({ ? displayFieldsFromRouteAndPattern(route, routePattern) : {} - useEffect(() => { - if (snapshot.matches({ "Detour Drawing": "Share Detour" })) { - setTextArea( - [ - `Detour ${routeName} ${routeDirection}`, - routeOrigin, - , - "Connection Points:", - connectionPoints?.start?.name ?? "N/A", - connectionPoints?.end?.name ?? "N/A", - , - `Missed Stops (${missedStops?.length}):`, - ...(missedStops?.map(({ name }) => name) ?? ["no stops"]), - , - "Turn-by-Turn Directions:", - ...(extendedDirections?.map((v) => v.instruction) ?? []), - ].join("\n") - ) - } - }, [ - snapshot, - routeName, - routeDirection, - routeOrigin, - extendedDirections, - missedStops, - connectionPoints?.start?.name, - connectionPoints?.end?.name, - ]) - const routes = useContext(RoutesContext) const epochNowInSeconds = useCurrentTimeSeconds() @@ -254,8 +224,10 @@ export const DiversionPage = ({ return ( + send({ type: "detour.share.edit-directions", detourText }) + } onActivateDetour={ inTestGroup(TestGroups.DetoursList) ? () => { @@ -339,7 +311,7 @@ export const DiversionPage = ({ } else if (snapshot.matches({ "Detour Drawing": "Active" })) { return ( { + const routeName = context.route?.name + const routeDirection = + context.routePattern && + context.route?.directionNames[ + context.routePattern.directionId + ] + const routeOrigin = context.routePattern?.name + const missedStops = context.finishedDetour?.missedStops + + const detourShape = + context.detourShape && isOk(context.detourShape) + ? context.detourShape.ok + : null + + return [ + `Detour ${routeName} ${routeDirection}`, + routeOrigin, + , + "Connection Points:", + context.finishedDetour?.connectionPoint?.start?.name ?? "N/A", + context.finishedDetour?.connectionPoint?.end?.name ?? "N/A", + , + `Missed Stops (${missedStops?.length}):`, + ...(missedStops?.map(({ name }) => name) ?? ["no stops"]), + , + "Turn-by-Turn Directions:", + "From " + context.nearestIntersection, + ...(detourShape?.directions?.map((v) => v.instruction) ?? []), + ].join("\n") + }, + }), }, }, "Share Detour": { @@ -490,6 +526,12 @@ export const createDetourMachine = setup({ "detour.share.open-activate-modal": { target: "Activating", }, + "detour.share.edit-directions": { + target: "Reviewing", + actions: assign({ + editedDetourText: ({ event }) => event.detourText, + }), + }, }, }, Activating: { diff --git a/assets/tests/components/detours/__snapshots__/detoursListPage.openDetour.test.tsx.snap b/assets/tests/components/detours/__snapshots__/detoursListPage.openDetour.test.tsx.snap index 5acd1397b..5b4c162d2 100644 --- a/assets/tests/components/detours/__snapshots__/detoursListPage.openDetour.test.tsx.snap +++ b/assets/tests/components/detours/__snapshots__/detoursListPage.openDetour.test.tsx.snap @@ -456,7 +456,20 @@ exports[`Detours Page: Open a Detour renders detour details in an open drawer on
+ > + Detour 1 Outbound +Route pattern From A1 - To B1 + +Connection Points: +N/A +N/A + +Missed Stops (undefined): +no stops + +Turn-by-Turn Directions: +From null +
{ ).toBeVisible() }) + test("'View Draft Detour' screen allows user to edit detour text", async () => { + const { container } = render() + + act(() => { + fireEvent.click(originalRouteShape.get(container)) + }) + + act(() => { + fireEvent.click(originalRouteShape.get(container)) + }) + + await userEvent.click(reviewDetourButton.get()) + + const input = screen.getByRole("textbox") as HTMLInputElement + + act(() => { + fireEvent.change(input, { target: { value: "Hello World" } }) + }) + + expect(input.value).toBe("Hello World") + }) + test("Attempting to close the page calls the onClose callback", async () => { const onClose = jest.fn()