From e8925f6721863e42becb13be05857171c5850633 Mon Sep 17 00:00:00 2001 From: Hannah Purcell Date: Wed, 23 Oct 2024 13:35:58 -0400 Subject: [PATCH 01/12] =?UTF-8?q?feat:=20Add=20connectionPoints=20and=20mi?= =?UTF-8?q?ssedStops=20to=20the=20=E2=80=9CReview=20Detour=E2=80=9D=20pane?= =?UTF-8?q?l?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../detourPanels/detourFinishedPanel.tsx | 16 ++++++- .../src/components/detours/diversionPage.tsx | 5 ++ .../detoursListPage.openDetour.test.tsx.snap | 46 +++++++++++++++++++ 3 files changed, 66 insertions(+), 1 deletion(-) diff --git a/assets/src/components/detours/detourPanels/detourFinishedPanel.tsx b/assets/src/components/detours/detourPanels/detourFinishedPanel.tsx index 48415537d..886a51f28 100644 --- a/assets/src/components/detours/detourPanels/detourFinishedPanel.tsx +++ b/assets/src/components/detours/detourPanels/detourFinishedPanel.tsx @@ -2,11 +2,18 @@ import React, { PropsWithChildren } from "react" import { Button, Form } from "react-bootstrap" import * as BsIcons from "../../../helpers/bsIcons" import { Panel } from "../diversionPage" -import { CopyButton } from "../detourPanelComponents" +import { + ConnectionPoints, + CopyButton, + MissedStops, +} from "../detourPanelComponents" +import { Stop } from "../../../schedule" interface DetourFinishedPanelProps extends PropsWithChildren { onNavigateBack: () => void detourText: string + connectionPoints?: [string, string] + missedStops?: Stop[] onChangeDetourText: (value: string) => void onActivateDetour?: () => void } @@ -14,6 +21,8 @@ interface DetourFinishedPanelProps extends PropsWithChildren { export const DetourFinishedPanel = ({ onNavigateBack, detourText, + connectionPoints, + missedStops, onChangeDetourText, onActivateDetour, children, @@ -44,6 +53,11 @@ export const DetourFinishedPanel = ({ resize: "none", }} /> + + {connectionPoints && ( + + )} + {missedStops && } diff --git a/assets/src/components/detours/diversionPage.tsx b/assets/src/components/detours/diversionPage.tsx index 713cd197c..2ee6bee6a 100644 --- a/assets/src/components/detours/diversionPage.tsx +++ b/assets/src/components/detours/diversionPage.tsx @@ -261,6 +261,11 @@ export const DiversionPage = ({ +
+

+ Connection Points +

+
    +
    + N/A +
    +
    + N/A +
    +
+
+
+

+ Connection Points +

+
    +
    + N/A +
    +
    + N/A +
    +
+
Date: Wed, 23 Oct 2024 13:51:12 -0400 Subject: [PATCH 02/12] tweak: Rename detourText to copyableDetourText, fix typo --- .../components/detours/detourPanels/activeDetourPanel.tsx | 6 +++--- .../detours/detourPanels/detourFinishedPanel.tsx | 8 ++++---- .../components/detours/detourPanels/pastDetourPanel.tsx | 6 +++--- assets/src/components/detours/diversionPage.tsx | 6 +++--- .../detours/activeDetourPanel.stories.tsx | 4 ++-- .../detours/detourFinishedPanel.stories.tsx | 2 +- .../skate-components/detours/pastDetourPanel.stories.tsx | 4 ++-- 7 files changed, 18 insertions(+), 18 deletions(-) diff --git a/assets/src/components/detours/detourPanels/activeDetourPanel.tsx b/assets/src/components/detours/detourPanels/activeDetourPanel.tsx index da968189c..579fca95f 100644 --- a/assets/src/components/detours/detourPanels/activeDetourPanel.tsx +++ b/assets/src/components/detours/detourPanels/activeDetourPanel.tsx @@ -17,7 +17,7 @@ import { import inTestGroup, { TestGroups } from "../../../userInTestGroup" export interface ActiveDetourPanelProps extends PropsWithChildren { - detourText: string + copyableDetourText: string directions?: DetourDirection[] connectionPoints?: [string, string] missedStops?: Stop[] @@ -30,7 +30,7 @@ export interface ActiveDetourPanelProps extends PropsWithChildren { } export const ActiveDetourPanel = ({ - detourText, + copyableDetourText, directions, connectionPoints, missedStops, @@ -63,7 +63,7 @@ export const ActiveDetourPanel = ({ {backButton} {/* TODO: temporary test group until I get the copy logic hooked up */} {inTestGroup(TestGroups.CopyButton) && ( - + )} diff --git a/assets/src/components/detours/detourPanels/detourFinishedPanel.tsx b/assets/src/components/detours/detourPanels/detourFinishedPanel.tsx index 886a51f28..522eaab97 100644 --- a/assets/src/components/detours/detourPanels/detourFinishedPanel.tsx +++ b/assets/src/components/detours/detourPanels/detourFinishedPanel.tsx @@ -11,7 +11,7 @@ import { Stop } from "../../../schedule" interface DetourFinishedPanelProps extends PropsWithChildren { onNavigateBack: () => void - detourText: string + copyableDetourText: string connectionPoints?: [string, string] missedStops?: Stop[] onChangeDetourText: (value: string) => void @@ -20,7 +20,7 @@ interface DetourFinishedPanelProps extends PropsWithChildren { export const DetourFinishedPanel = ({ onNavigateBack, - detourText, + copyableDetourText, connectionPoints, missedStops, onChangeDetourText, @@ -30,7 +30,7 @@ export const DetourFinishedPanel = ({

View Draft Detour

- + @@ -46,7 +46,7 @@ export const DetourFinishedPanel = ({ onChangeDetourText(value)} className="flex-grow-1 mb-3" style={{ diff --git a/assets/src/components/detours/detourPanels/pastDetourPanel.tsx b/assets/src/components/detours/detourPanels/pastDetourPanel.tsx index a9b9b0010..6765d33f4 100644 --- a/assets/src/components/detours/detourPanels/pastDetourPanel.tsx +++ b/assets/src/components/detours/detourPanels/pastDetourPanel.tsx @@ -13,7 +13,7 @@ import { import inTestGroup, { TestGroups } from "../../../userInTestGroup" export interface PastDetourPanelProps { - detourText: string + copyableDetourText: string directions?: DetourDirection[] connectionPoints: [string, string] missedStops?: Stop[] @@ -25,7 +25,7 @@ export interface PastDetourPanelProps { } export const PastDetourPanel = ({ - detourText, + copyableDetourText, directions, connectionPoints, missedStops, @@ -40,7 +40,7 @@ export const PastDetourPanel = ({

View Past Detour

{/* TODO: temporary test group until I get the copy logic hooked up */} {inTestGroup(TestGroups.CopyButton) && ( - + )} diff --git a/assets/src/components/detours/diversionPage.tsx b/assets/src/components/detours/diversionPage.tsx index 2ee6bee6a..ad45bad4f 100644 --- a/assets/src/components/detours/diversionPage.tsx +++ b/assets/src/components/detours/diversionPage.tsx @@ -260,7 +260,7 @@ export const DiversionPage = ({ return ( Date: Wed, 23 Oct 2024 13:59:07 -0400 Subject: [PATCH 03/12] feat: Put directions text in state machine to allow edits --- assets/src/models/createDetourMachine.ts | 24 +++++++++++++++++++++++- 1 file changed, 23 insertions(+), 1 deletion(-) diff --git a/assets/src/models/createDetourMachine.ts b/assets/src/models/createDetourMachine.ts index 35ebec8a3..f420dc4ce 100644 --- a/assets/src/models/createDetourMachine.ts +++ b/assets/src/models/createDetourMachine.ts @@ -1,7 +1,7 @@ import { setup, assign, fromPromise, ActorLogicFrom, InputFrom } from "xstate" import { RoutePatternId, ShapePoint } from "../schedule" import { Route, RouteId, RoutePattern } from "../schedule" -import { Ok, Result } from "../util/result" +import { isOk, Ok, Result } from "../util/result" import { FetchDetourDirectionsError, fetchDetourDirections, @@ -30,6 +30,8 @@ export const createDetourMachine = setup({ finishedDetour: FinishedDetour | undefined | null + editedDirections?: string + selectedDuration?: string selectedReason?: string }, @@ -66,6 +68,7 @@ export const createDetourMachine = setup({ | { type: "detour.edit.place-waypoint-on-route"; location: ShapePoint } | { type: "detour.edit.place-waypoint"; location: ShapePoint } | { type: "detour.edit.undo" } + | { type: "detour.share.edit-directions"; detourText: string } | { type: "detour.share.copy-detour"; detourText: string } | { type: "detour.share.open-activate-modal" } | { @@ -472,6 +475,19 @@ export const createDetourMachine = setup({ onDone: { target: "Share Detour", + actions: assign({ + editedDirections: ({ context }) => { + const detourShape = + context.detourShape && isOk(context.detourShape) + ? context.detourShape.ok + : null + + return [ + "From " + context.nearestIntersection, + ...(detourShape?.directions?.map((v) => v.instruction) ?? []), + ].join("\n") + }, + }), }, }, "Share Detour": { @@ -490,6 +506,12 @@ export const createDetourMachine = setup({ "detour.share.open-activate-modal": { target: "Activating", }, + "detour.share.edit-directions": { + target: "Reviewing", + actions: assign({ + editedDirections: ({ event }) => event.detourText, + }), + }, }, }, Activating: { From 8f881d0e739205f3fe7ff7c4a4c2e198e2f00188 Mon Sep 17 00:00:00 2001 From: Hannah Purcell Date: Wed, 23 Oct 2024 14:00:26 -0400 Subject: [PATCH 04/12] feat: Split apart copyable text and editable text in diversionPage --- .../detourPanels/detourFinishedPanel.tsx | 5 +- .../src/components/detours/diversionPage.tsx | 58 +++++++------------ 2 files changed, 26 insertions(+), 37 deletions(-) diff --git a/assets/src/components/detours/detourPanels/detourFinishedPanel.tsx b/assets/src/components/detours/detourPanels/detourFinishedPanel.tsx index 522eaab97..a098938d6 100644 --- a/assets/src/components/detours/detourPanels/detourFinishedPanel.tsx +++ b/assets/src/components/detours/detourPanels/detourFinishedPanel.tsx @@ -12,6 +12,7 @@ import { Stop } from "../../../schedule" interface DetourFinishedPanelProps extends PropsWithChildren { onNavigateBack: () => void copyableDetourText: string + editableDirections: string connectionPoints?: [string, string] missedStops?: Stop[] onChangeDetourText: (value: string) => void @@ -21,6 +22,7 @@ interface DetourFinishedPanelProps extends PropsWithChildren { export const DetourFinishedPanel = ({ onNavigateBack, copyableDetourText, + editableDirections, connectionPoints, missedStops, onChangeDetourText, @@ -44,9 +46,10 @@ export const DetourFinishedPanel = ({ Edit +

Directions

onChangeDetourText(value)} className="flex-grow-1 mb-3" style={{ diff --git a/assets/src/components/detours/diversionPage.tsx b/assets/src/components/detours/diversionPage.tsx index ad45bad4f..21c1b84bf 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,6 @@ export const DiversionPage = ({ : { input: useDetourProps.originalRoute } ) - const [textArea, setTextArea] = useState("") - const nearestIntersectionDirection = [ { instruction: "From " + nearestIntersection }, ] @@ -122,7 +119,8 @@ export const DiversionPage = ({ ? nearestIntersectionDirection.concat(directions) : undefined - const { route, routePattern, routePatterns } = snapshot.context + const { route, routePattern, routePatterns, editedDirections } = + snapshot.context const routePatternsById = Object.fromEntries( routePatterns?.map((rp) => [rp.id, rp]) ?? [] ) @@ -137,35 +135,20 @@ 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, + const copyableDetourText = [ + `Detour ${routeName} ${routeDirection}`, routeOrigin, - extendedDirections, - missedStops, - connectionPoints?.start?.name, - connectionPoints?.end?.name, - ]) + , + "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") const routes = useContext(RoutesContext) const epochNowInSeconds = useCurrentTimeSeconds() @@ -260,13 +243,16 @@ export const DiversionPage = ({ return ( + send({ type: "detour.share.edit-directions", detourText }) + } onActivateDetour={ inTestGroup(TestGroups.DetoursList) ? () => { @@ -350,7 +336,7 @@ export const DiversionPage = ({ } else if (snapshot.matches({ "Detour Drawing": "Active" })) { return ( Date: Wed, 23 Oct 2024 14:00:52 -0400 Subject: [PATCH 05/12] tweak: Style to force minimum textArea height --- assets/css/_diversion_page.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/assets/css/_diversion_page.scss b/assets/css/_diversion_page.scss index 464e3629a..9a1c0881a 100644 --- a/assets/css/_diversion_page.scss +++ b/assets/css/_diversion_page.scss @@ -116,6 +116,10 @@ flex: 1 1 0; overflow-y: auto; } + + .form-control { + min-height: 200px; + } } .c-diversion-panel__origin, From 46c2e19d6b473f0b112cb33214e7b4b8e62367e4 Mon Sep 17 00:00:00 2001 From: Hannah Purcell Date: Wed, 23 Oct 2024 14:09:31 -0400 Subject: [PATCH 06/12] test: update stories and test --- .../detours/activeDetourPanel.stories.tsx | 15 ------------- .../detours/pastDetourPanel.stories.tsx | 15 ------------- .../components/detours/diversionPage.test.tsx | 22 +++++++++++++++++++ 3 files changed, 22 insertions(+), 30 deletions(-) diff --git a/assets/stories/skate-components/detours/activeDetourPanel.stories.tsx b/assets/stories/skate-components/detours/activeDetourPanel.stories.tsx index 7ad590cae..ff4bd91b3 100644 --- a/assets/stories/skate-components/detours/activeDetourPanel.stories.tsx +++ b/assets/stories/skate-components/detours/activeDetourPanel.stories.tsx @@ -5,26 +5,11 @@ import { ActiveDetourPanel } from "../../../src/components/detours/detourPanels/ import { stopFactory } from "../../../tests/factories/stop" const defaultText = [ - "Detour:", - "66 Harvard via Allston from", - "Andrew Station", - "Outbound", - "", - "Turn-by-Turn Directions:", "Start at Centre St & John St", "Right on John St", "Left on Abbotsford Rd", "Right on Boston St", "Regular Route", - "", - "Connection Points:", - "Centre St & John St", - "Boston St", - "", - "Missed Stops (3):", - "Example St @ Sample Ave", - "Example St opp Random Way", - "Example St @ Fake Blvd", ].join("\n") const meta = { diff --git a/assets/stories/skate-components/detours/pastDetourPanel.stories.tsx b/assets/stories/skate-components/detours/pastDetourPanel.stories.tsx index 75d788126..54940ddbc 100644 --- a/assets/stories/skate-components/detours/pastDetourPanel.stories.tsx +++ b/assets/stories/skate-components/detours/pastDetourPanel.stories.tsx @@ -5,26 +5,11 @@ import { PastDetourPanel } from "../../../src/components/detours/detourPanels/pa import { stopFactory } from "../../../tests/factories/stop" const defaultText = [ - "Detour:", - "66 Harvard via Allston from", - "Andrew Station", - "Outbound", - "", - "Turn-by-Turn Directions:", "Start at Centre St & John St", "Right on John St", "Left on Abbotsford Rd", "Right on Boston St", "Regular Route", - "", - "Connection Points:", - "Centre St & John St", - "Boston St", - "", - "Missed Stops (3):", - "Example St @ Sample Ave", - "Example St opp Random Way", - "Example St @ Fake Blvd", ].join("\n") const meta = { diff --git a/assets/tests/components/detours/diversionPage.test.tsx b/assets/tests/components/detours/diversionPage.test.tsx index f18f82465..b4b7c5388 100644 --- a/assets/tests/components/detours/diversionPage.test.tsx +++ b/assets/tests/components/detours/diversionPage.test.tsx @@ -1313,6 +1313,28 @@ describe("DiversionPage", () => { ).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 HTMLTextAreaElement + + const startText = `From null` + + await userEvent.type(input, "\nHello World!") + + expect(input.value).toBe(startText + "\nHello World!") + }) + test("Attempting to close the page calls the onClose callback", async () => { const onClose = jest.fn() From e14e24e213a231a20e76acc28b9d75476945d68f Mon Sep 17 00:00:00 2001 From: Hannah Purcell Date: Wed, 23 Oct 2024 14:13:51 -0400 Subject: [PATCH 07/12] tweak: update test snapshot --- .../detoursListPage.openDetour.test.tsx.snap | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) 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 5d8801458..fb6fc697d 100644 --- a/assets/tests/components/detours/__snapshots__/detoursListPage.openDetour.test.tsx.snap +++ b/assets/tests/components/detours/__snapshots__/detoursListPage.openDetour.test.tsx.snap @@ -453,10 +453,17 @@ exports[`Detours Page: Open a Detour renders detour details in an open drawer on Edit +

+ Directions +

@@ -1252,10 +1259,17 @@ exports[`Detours Page: Open a Detour renders detour details modal to match mocke Edit +

+ Directions +

From 3d59ab0da1b969915c0f1a31a5df8075197b0380 Mon Sep 17 00:00:00 2001 From: Hannah Purcell Date: Wed, 23 Oct 2024 14:22:05 -0400 Subject: [PATCH 08/12] tweak: Updated storybook story --- .../detours/detourFinishedPanel.stories.tsx | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/assets/stories/skate-components/detours/detourFinishedPanel.stories.tsx b/assets/stories/skate-components/detours/detourFinishedPanel.stories.tsx index 85f3872a6..856e43a06 100644 --- a/assets/stories/skate-components/detours/detourFinishedPanel.stories.tsx +++ b/assets/stories/skate-components/detours/detourFinishedPanel.stories.tsx @@ -26,6 +26,12 @@ const defaultText = [ "Harvard Ave @ Commonwealth Ave", ].join("\n") +const turnByTurn = [ + "From Harvard St & Babcock St", + "Right on Babcock St.", + "Regular Route", +].join("\n") + const meta = { component: DetourFinishedPanel, parameters: { @@ -34,6 +40,7 @@ const meta = { }, args: { copyableDetourText: defaultText, + editableDirections: turnByTurn, }, // The bootstrap CSS reset is supposed to set box-sizing: border-box by // default, we should be able to remove this after that is added From ace274e778ca98611f82e84aebd0cf1d305c5525 Mon Sep 17 00:00:00 2001 From: Hannah Purcell Date: Thu, 24 Oct 2024 17:03:34 -0400 Subject: [PATCH 09/12] tweak: Make an auto-resizing textarea Co-authored-by: Kayla Firestack --- assets/css/_autosized_textarea.scss | 28 ++++++++++++++++++ assets/css/_diversion_page.scss | 4 --- assets/css/app.scss | 1 + .../detourPanels/detourFinishedPanel.tsx | 29 +++++++++++++------ .../detoursListPage.openDetour.test.tsx.snap | 28 +++++++++++------- 5 files changed, 67 insertions(+), 23 deletions(-) create mode 100644 assets/css/_autosized_textarea.scss diff --git a/assets/css/_autosized_textarea.scss b/assets/css/_autosized_textarea.scss new file mode 100644 index 000000000..4b4290e2c --- /dev/null +++ b/assets/css/_autosized_textarea.scss @@ -0,0 +1,28 @@ +.c-autosized-textarea { + display: grid; + // The main area that the textarea and the "'Sizer" occupy + grid-template-areas: "slot"; + + &::after, // "Sizer" + > textarea { + grid-area: slot; + } + + &::after { + content: attr(data-replicated-value) " "; + white-space: pre-wrap; + visibility: hidden; + } + > textarea { + resize: none; + overflow: hidden; + } + &::after, + > textarea { + border: 1px solid $list-group-border-color; + padding: 0.5rem; + font: inherit; + margin-bottom: 1rem; + line-height: 1.5rem; + } +} diff --git a/assets/css/_diversion_page.scss b/assets/css/_diversion_page.scss index 9a1c0881a..464e3629a 100644 --- a/assets/css/_diversion_page.scss +++ b/assets/css/_diversion_page.scss @@ -116,10 +116,6 @@ flex: 1 1 0; overflow-y: auto; } - - .form-control { - min-height: 200px; - } } .c-diversion-panel__origin, diff --git a/assets/css/app.scss b/assets/css/app.scss index 3ad6dbded..7c4ec1f07 100644 --- a/assets/css/app.scss +++ b/assets/css/app.scss @@ -31,6 +31,7 @@ $vpp-location-padding: 1rem; @import "leaflet"; @import "skate_ui"; +@import "autosized_textarea"; @import "basic_notification_modal"; @import "circle_x_icon"; @import "card"; diff --git a/assets/src/components/detours/detourPanels/detourFinishedPanel.tsx b/assets/src/components/detours/detourPanels/detourFinishedPanel.tsx index a098938d6..c21d6d64e 100644 --- a/assets/src/components/detours/detourPanels/detourFinishedPanel.tsx +++ b/assets/src/components/detours/detourPanels/detourFinishedPanel.tsx @@ -47,15 +47,26 @@ export const DetourFinishedPanel = ({

Directions

- onChangeDetourText(value)} - className="flex-grow-1 mb-3" - style={{ - resize: "none", - }} - /> + {/* + We need a way to let the form area take up exactly the space of its content + (to avoid double scrollbars). We used this approach: + https://css-tricks.com/the-cleanest-trick-for-autogrowing-textareas + + The result is that the Form.Control has an invisible twin that helps the + wrapper grow to the appropriate size, and then the Form.Control likewise + assumes that space. All formatting between the Form.Control and the ::after + pseudo-element must be identical: border, padding, margin, font. + */} +
+ onChangeDetourText(value)} + /> +
{connectionPoints && ( 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 fb6fc697d..020cea298 100644 --- a/assets/tests/components/detours/__snapshots__/detoursListPage.openDetour.test.tsx.snap +++ b/assets/tests/components/detours/__snapshots__/detoursListPage.openDetour.test.tsx.snap @@ -458,12 +458,16 @@ exports[`Detours Page: Open a Detour renders detour details in an open drawer on > Directions - + +
@@ -1264,12 +1268,16 @@ exports[`Detours Page: Open a Detour renders detour details modal to match mocke > Directions - + +
From 434b872a3e3aadb0a8051e48087d5d60f0f53ab6 Mon Sep 17 00:00:00 2001 From: Hannah Purcell Date: Fri, 25 Oct 2024 09:07:31 -0400 Subject: [PATCH 10/12] tweak: Active and Past detours to use editedDirections --- assets/src/components/detours/diversionPage.tsx | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/assets/src/components/detours/diversionPage.tsx b/assets/src/components/detours/diversionPage.tsx index 21c1b84bf..d81b329b9 100644 --- a/assets/src/components/detours/diversionPage.tsx +++ b/assets/src/components/detours/diversionPage.tsx @@ -49,6 +49,10 @@ const displayFieldsFromRouteAndPattern = ( return { routeName, routeDirection, routeOrigin, routeDescription, shape } } +const parseIntoDirectionsList = (directions: string) => { + return directions.split("\n").map((direction) => ({ instruction: direction })) +} + interface DiversionPageFunctions { onClose: () => void } @@ -337,7 +341,11 @@ export const DiversionPage = ({ return ( Date: Mon, 28 Oct 2024 11:46:50 -0400 Subject: [PATCH 11/12] fix: If editedDirections doesn't exist (because currently already active / past), fall back to extendDirections --- assets/src/components/detours/diversionPage.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/assets/src/components/detours/diversionPage.tsx b/assets/src/components/detours/diversionPage.tsx index d81b329b9..8ff249060 100644 --- a/assets/src/components/detours/diversionPage.tsx +++ b/assets/src/components/detours/diversionPage.tsx @@ -344,7 +344,7 @@ export const DiversionPage = ({ directions={ editedDirections ? parseIntoDirectionsList(editedDirections) - : undefined + : extendedDirections } connectionPoints={[ connectionPoints?.start?.name ?? "N/A", @@ -389,7 +389,7 @@ export const DiversionPage = ({ directions={ editedDirections ? parseIntoDirectionsList(editedDirections) - : undefined + : extendedDirections } connectionPoints={[ connectionPoints?.start?.name ?? "N/A", From 6d67a15ebfcacce6f1bb6300ddb6b9fa5ad0fa09 Mon Sep 17 00:00:00 2001 From: Hannah Purcell Date: Mon, 28 Oct 2024 17:27:00 -0400 Subject: [PATCH 12/12] tweak: comment to indicate need for fallback --- assets/src/components/detours/diversionPage.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/assets/src/components/detours/diversionPage.tsx b/assets/src/components/detours/diversionPage.tsx index 8ff249060..058e7769e 100644 --- a/assets/src/components/detours/diversionPage.tsx +++ b/assets/src/components/detours/diversionPage.tsx @@ -344,7 +344,8 @@ export const DiversionPage = ({ directions={ editedDirections ? parseIntoDirectionsList(editedDirections) - : extendedDirections + : // Include fallback if editedDirections was not initialized on an older detour + extendedDirections } connectionPoints={[ connectionPoints?.start?.name ?? "N/A", @@ -389,7 +390,8 @@ export const DiversionPage = ({ directions={ editedDirections ? parseIntoDirectionsList(editedDirections) - : extendedDirections + : // Include fallback if editedDirections was not initialized on an older detour + extendedDirections } connectionPoints={[ connectionPoints?.start?.name ?? "N/A",