tweak: Sort active detours by activation time (#2947)

* tweak: Sort active detours by activation time * tweak: scootch sorting to api data parser
mbta · Jan 30, 2025 · f10aea6 · f10aea6
1 parent f0f5336
commit f10aea6
Show file tree

Hide file tree

Showing 3 changed files with 258 additions and 1 deletion.
diff --git a/assets/src/models/detoursList.ts b/assets/src/models/detoursList.ts
@@ -71,7 +71,9 @@ export type GroupedDetoursData = Infer<typeof GroupedDetoursData>
 export const groupedDetoursFromData = (
   groupedDetours: GroupedDetoursData
 ): GroupedSimpleDetours => ({
-  active: groupedDetours.active.map(simpleDetourFromActivatedData),
+  active: groupedDetours.active
+    .map(simpleDetourFromActivatedData)
+    .sort((a, b) => b.activatedAt.getTime() - a.activatedAt.getTime()),
   draft: groupedDetours.draft.map((detour) => simpleDetourFromData(detour)),
   past: groupedDetours.past.map((detour) => simpleDetourFromData(detour)),
 })
diff --git a/assets/tests/components/detours/__snapshots__/detourListPage.test.tsx.snap b/assets/tests/components/detours/__snapshots__/detourListPage.test.tsx.snap
@@ -1,5 +1,207 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`DetourListPage orders active detour list by activatedAt value 1`] = `
+<body>
+  <div>
+    <div
+      class="c-detour-list-page h-100 overflow-y-auto p-0 p-md-4 bg-white"
+    >
+      <div
+        class="d-flex mt-3 mt-md-0 mb-3 mx-3 mx-md-0"
+      >
+        <h2
+          class="my-auto fw-semibold fs-1 me-3 text-nowrap"
+        >
+          Active detours
+        </h2>
+        <svg
+          aria-hidden="true"
+          class="c-detour-list-page__header-icon my-auto me-1"
+          fill="currentColor"
+          height="16"
+          viewBox="0 0 16 16"
+          width="16"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0M2.04 4.326c.325 1.329 2.532 2.54 3.717 3.19.48.263.793.434.743.484q-.121.12-.242.234c-.416.396-.787.749-.758 1.266.035.634.618.824 1.214 1.017.577.188 1.168.38 1.286.983.082.417-.075.988-.22 1.52-.215.782-.406 1.48.22 1.48 1.5-.5 3.798-3.186 4-5 .138-1.243-2-2-3.5-2.5-.478-.16-.755.081-.99.284-.172.15-.322.279-.51.216-.445-.148-2.5-2-1.5-2.5.78-.39.952-.171 1.227.182.078.099.163.208.273.318.609.304.662-.132.723-.633.039-.322.081-.671.277-.867.434-.434 1.265-.791 2.028-1.12.712-.306 1.365-.587 1.579-.88A7 7 0 1 1 2.04 4.327Z"
+          />
+        </svg>
+        <span
+          class="c-detour-list-page__header-visibility my-auto"
+        >
+          All Skate users
+        </span>
+      </div>
+      <table
+        class="mb-5 c-detours-table table table-active-detour table-hover"
+      >
+        <thead
+          class="u-hide-for-mobile"
+        >
+          <tr>
+            <th
+              class="px-3 py-4"
+            >
+              Route and direction
+            </th>
+            <th
+              class="px-3 py-4 u-hide-for-mobile"
+            >
+              Starting Intersection
+            </th>
+            <th
+              class="px-3 py-4 u-hide-for-mobile"
+            >
+              On detour since
+            </th>
+            <th
+              class="px-3 py-4 u-hide-for-mobile"
+            >
+              Est. Duration
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td
+              class="align-middle p-3"
+            >
+              <div
+                class="d-flex"
+              >
+                <div
+                  class="c-route-pill c-route-pill--bus"
+                >
+                  3
+                </div>
+                <div
+                  class="c-detours-table__route-info-text d-inline-block"
+                >
+                  <div
+                    class="pb-1 fs-4 fw-semibold"
+                  >
+                    Headsign 3
+                  </div>
+                  <div
+                    class="c-detours-table__route-info-direction fs-6"
+                  >
+                    Inbound
+                  </div>
+                </div>
+              </div>
+            </td>
+            <td
+              class="align-middle p-3 u-hide-for-mobile"
+            >
+              Street A3 & Avenue B3
+            </td>
+            <td
+              class="align-middle p-3 u-hide-for-mobile"
+            >
+              23 hours ago
+            </td>
+            <td
+              class="align-middle p-3 u-hide-for-mobile"
+            >
+              2 hours
+            </td>
+          </tr>
+          <tr>
+            <td
+              class="align-middle p-3"
+            >
+              <div
+                class="d-flex"
+              >
+                <div
+                  class="c-route-pill c-route-pill--bus"
+                >
+                  1
+                </div>
+                <div
+                  class="c-detours-table__route-info-text d-inline-block"
+                >
+                  <div
+                    class="pb-1 fs-4 fw-semibold"
+                  >
+                    Headsign 1
+                  </div>
+                  <div
+                    class="c-detours-table__route-info-direction fs-6"
+                  >
+                    Inbound
+                  </div>
+                </div>
+              </div>
+            </td>
+            <td
+              class="align-middle p-3 u-hide-for-mobile"
+            >
+              Street A1 & Avenue B1
+            </td>
+            <td
+              class="align-middle p-3 u-hide-for-mobile"
+            >
+              54 hours ago
+            </td>
+            <td
+              class="align-middle p-3 u-hide-for-mobile"
+            >
+              2 hours
+            </td>
+          </tr>
+          <tr>
+            <td
+              class="align-middle p-3"
+            >
+              <div
+                class="d-flex"
+              >
+                <div
+                  class="c-route-pill c-route-pill--bus"
+                >
+                  2
+                </div>
+                <div
+                  class="c-detours-table__route-info-text d-inline-block"
+                >
+                  <div
+                    class="pb-1 fs-4 fw-semibold"
+                  >
+                    Headsign 2
+                  </div>
+                  <div
+                    class="c-detours-table__route-info-direction fs-6"
+                  >
+                    Inbound
+                  </div>
+                </div>
+              </div>
+            </td>
+            <td
+              class="align-middle p-3 u-hide-for-mobile"
+            >
+              Street A2 & Avenue B2
+            </td>
+            <td
+              class="align-middle p-3 u-hide-for-mobile"
+            >
+              84 hours ago
+            </td>
+            <td
+              class="align-middle p-3 u-hide-for-mobile"
+            >
+              2 hours
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</body>
+`;
+
 exports[`DetourListPage renders detour list page for dispatchers 1`] = `
 <body>
   <div>

diff --git a/assets/tests/components/detours/detourListPage.test.tsx b/assets/tests/components/detours/detourListPage.test.tsx
@@ -9,6 +9,8 @@ import { render, screen, waitFor } from "@testing-library/react"
 import getTestGroups from "../../../src/userTestGroups"
 import { TestGroups } from "../../../src/userInTestGroup"
 import { byRole } from "testing-library-selector"
+import { groupedDetoursFromData } from "../../../src/models/detoursList"
+import { activeDetourDataFactory } from "../../factories/detourListFactory"
 
 jest.useFakeTimers().setSystemTime(new Date("2024-08-29T20:00:00"))
 
@@ -201,4 +203,55 @@ describe("DetourListPage", () => {
     expect(screen.queryByText("No active detours.")).not.toBeInTheDocument()
     expect(screen.queryByText("No closed detours.")).not.toBeInTheDocument()
   })
+
+  test("orders active detour list by activatedAt value", async () => {
+    jest.mocked(getTestGroups).mockReturnValue([TestGroups.DetoursList])
+
+    jest.mocked(fetchDetours).mockResolvedValue(
+      Ok(
+        groupedDetoursFromData({
+          active: [
+            activeDetourDataFactory.build({
+              details: {
+                // Drafted third
+                id: 8,
+                // Updated second
+                updated_at: 1724876500,
+              },
+              // Activated second
+              activated_at: new Date(1724766392000),
+            }),
+            activeDetourDataFactory.build({
+              details: {
+                // Drafted second
+                id: 7,
+                // Updated third
+                updated_at: 1724876600,
+              },
+              // Activated first
+              activated_at: new Date(1724656392000),
+            }),
+            activeDetourDataFactory.build({
+              details: {
+                // Drafted first
+                id: 1,
+                // Updated first
+                updated_at: 1724876400,
+              },
+              // Activated third
+              activated_at: new Date(1724876392000),
+            }),
+          ],
+          draft: [],
+          past: [],
+        })
+      )
+    )
+
+    const { baseElement } = render(<DetourListPage />)
+
+    await screen.findAllByText(/Headsign/)
+
+    expect(baseElement).toMatchSnapshot()
+  })
 })