feat: Add timestamp and author to detour modal header

mbta · Sep 23, 2024 · e2a7e51 · e2a7e51
1 parent b1bcaf5
commit e2a7e51
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 9 deletions.
diff --git a/assets/css/_diversion_page.scss b/assets/css/_diversion_page.scss
@@ -9,10 +9,6 @@
     "map" 80vh
     / 1fr;
 
-  &__header {
-    grid-area: heading;
-  }
-
   &__panel {
     grid-area: panel;
   }
@@ -92,8 +88,15 @@
 
 .l-diversion-page__header {
   display: flex;
-  justify-content: flex-end;
   align-items: center;
+  padding-left: 1rem;
+
+  &-details {
+    margin-right: 1.125rem;
+  }
+  button {
+    margin-left: auto;
+  }
 }
 
 .l-diversion-page__header,

diff --git a/assets/src/components/detourListPage.tsx b/assets/src/components/detourListPage.tsx
@@ -18,7 +18,7 @@ export const DetourListPage = () => {
   })
   const detours = result && isOk(result) && result.ok
 
-  const { result: stateOfDetourModal } = useApiCall({
+  const { result: detour } = useApiCall({
     apiCall: useCallback(async () => {
       if (detourId === undefined) {
         return undefined
@@ -34,7 +34,7 @@ export const DetourListPage = () => {
       if (isErr(snapshot)) {
         return undefined
       }
-      return snapshot.ok
+      return detourResponse
     }, [detourId]),
   })
 
@@ -83,13 +83,19 @@ export const DetourListPage = () => {
        * to ensure that either there's no `detourId` selected (i.e. make a new detour)
        * or the state has been successfully fetched from the api
        */}
-      {showDetourModal && (!detourId || stateOfDetourModal) && (
+      {showDetourModal && (!detourId || detour) && (
         <DetourModal
           onClose={onCloseDetour}
           show
           originalRoute={{}}
           key={detourId ?? ""}
-          {...(stateOfDetourModal ? { snapshot: stateOfDetourModal } : {})}
+          {...(detour
+            ? {
+                snapshot: detour.ok.state,
+                author: detour.ok.author,
+                updatedAt: detour.ok.updatedAt,
+              }
+            : {})}
         />
       )}
     </div>

diff --git a/assets/src/components/detours/diversionPage.tsx b/assets/src/components/detours/diversionPage.tsx
@@ -23,6 +23,9 @@ import inTestGroup, { TestGroups } from "../../userInTestGroup"
 import { ActiveDetourPanel } from "./activeDetourPanel"
 import { PastDetourPanel } from "./pastDetourPanel"
 import userInTestGroup from "../../userInTestGroup"
+import { useCurrentTimeSeconds } from "../../hooks/useCurrentTime"
+import { timeAgoLabel } from "../../util/dateTime"
+import { DetourStatus, timestampLabelFromStatus } from "../detoursTable"
 
 const displayFieldsFromRouteAndPattern = (
   route: Route,
@@ -56,6 +59,8 @@ interface DiversionPageFromInput {
 interface DiversionPageFromSnapshot {
   /** A _validated_ snapshot from which to initialize {@linkcode createDetourMachine} with */
   snapshot: Snapshot<unknown>
+  author: string
+  updatedAt: number
 }
 
 export type DiversionPageStateProps =
@@ -161,6 +166,17 @@ export const DiversionPage = ({
   ])
 
   const routes = useContext(RoutesContext)
+  const epochNowInSeconds = useCurrentTimeSeconds()
+
+  const timestampLabelFromMachineState = (): string => {
+    if (snapshot.matches({ "Detour Drawing": "Active" })) {
+      return timestampLabelFromStatus(DetourStatus.Active)
+    } else if (snapshot.matches({ "Detour Drawing": "Past" })) {
+      return timestampLabelFromStatus(DetourStatus.Closed)
+    } else {
+      return timestampLabelFromStatus(DetourStatus.Draft)
+    }
+  }
 
   return (
     <>
@@ -175,6 +191,20 @@ export const DiversionPage = ({
               : "text-bg-light",
           ])}
         >
+          {"snapshot" in useDetourProps ? (
+            <>
+              <span className="l-diversion-page__header-details">
+                <strong className="font-m-semi me-2">
+                  {timestampLabelFromMachineState()}
+                </strong>
+                {timeAgoLabel(epochNowInSeconds, useDetourProps.updatedAt)}
+              </span>
+              <span className="l-diversion-page__header-details">
+                <strong className="font-m-semi me-2">Created by</strong>
+                {useDetourProps.author}
+              </span>
+            </>
+          ) : null}
           <CloseButton className="p-4" onClick={onClose} />
         </header>