feat: Display empty detour table icon when the table is empty

mbta · Sep 9, 2024 · 4b1a60e · 4b1a60e
1 parent f1eebeb
commit 4b1a60e
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 24 deletions.
diff --git a/assets/css/detours/_detour_table.scss b/assets/css/detours/_detour_table.scss
@@ -61,6 +61,12 @@ $table-border-radius: 0.5rem;
     td:last-child {
       border-bottom-right-radius: $table-border-radius;
     }
+
+    @include media-breakpoint-down(md) {
+      td {
+        border-bottom: none;
+      }
+    }
   }
 }
 

diff --git a/assets/src/components/detourListPage.tsx b/assets/src/components/detourListPage.tsx
@@ -93,7 +93,10 @@ export const DetourListPage = () => {
           <span className="c-detour-list-page__button-text">Add detour</span>
         </Button>
       )}
+      <h2>Active</h2>
       <DetoursTable data={fakeData} />
+      <h2>Draft</h2>
+      <DetoursTable data={null} />
       {showDetourModal && (
         <DetourModal
           onClose={() => setShowDetourModal(false)}

diff --git a/assets/src/components/detoursTable.tsx b/assets/src/components/detoursTable.tsx
@@ -6,12 +6,10 @@ import { timeAgoLabel } from "../util/dateTime"
 import { Detour } from "./detourListPage"
 
 interface DetoursTableProps {
-  data: Detour[]
+  data: Detour[] | null
 }
 
 export const DetoursTable = ({ data }: DetoursTableProps) => {
-  const epochNowInSeconds = useCurrentTimeSeconds()
-
   return (
     <Table hover className="c-detours-table">
       <thead className="u-hide-for-mobile">
@@ -22,32 +20,62 @@ export const DetoursTable = ({ data }: DetoursTableProps) => {
         </tr>
       </thead>
       <tbody>
-        {data.map((detour, index) => (
-          <tr key={index}>
-            <td className="align-middle p-3">
-              <div className="d-flex">
-                <RoutePill routeName={detour.route} />
-                <div className="c-detours-table__route-info-text d-inline-block">
-                  <div className="pb-1 fs-4 fw-semibold">{detour.name}</div>
-                  <div className="c-detours-table__route-info-direction fs-6">
-                    {detour.direction}
-                  </div>
-                </div>
-              </div>
-            </td>
-            <td className="align-middle p-3 u-hide-for-mobile">
-              {detour.intersection}
-            </td>
-            <td className="align-middle p-3 u-hide-for-mobile">
-              {timeAgoLabel(epochNowInSeconds, detour.activeSince)}
-            </td>
-          </tr>
-        ))}
+        <DetourRows data={data} />
       </tbody>
     </Table>
   )
 }
 
+const DetourRows = ({ data }: { data: Detour[] | null }) =>
+  data === null ? (
+    <EmptyDetourRows message="No draft detours." />
+  ) : (
+    <PopulatedDetourRows data={data} />
+  )
+
+const PopulatedDetourRows = ({ data }: { data: Detour[] }) => {
+  const epochNowInSeconds = useCurrentTimeSeconds()
+
+  return (
+    <>
+      {data.map((detour, index) => (
+        <tr key={index}>
+          <td className="align-middle p-3">
+            <div className="d-flex">
+              <RoutePill routeName={detour.route} />
+              <div className="c-detours-table__route-info-text d-inline-block">
+                <div className="pb-1 fs-4 fw-semibold">{detour.name}</div>
+                <div className="c-detours-table__route-info-direction fs-6">
+                  {detour.direction}
+                </div>
+              </div>
+            </div>
+          </td>
+          <td className="align-middle p-3 u-hide-for-mobile">
+            {detour.intersection}
+          </td>
+          <td className="align-middle p-3 u-hide-for-mobile">
+            {timeAgoLabel(epochNowInSeconds, detour.activeSince)}
+          </td>
+        </tr>
+      ))}
+    </>
+  )
+}
+
+const EmptyDetourRows = ({ message }: { message: string }) => (
+  <tr>
+    <td colSpan="3" className="p-3 p-md-4">
+      <div className="d-flex justify-content-center mb-3">
+        <EmptyDetourTableIcon height="100px" width="100px" />
+      </div>
+      <div className="d-flex justify-content-center">
+        <p className="fs-3 fw-light m-0">{message}</p>
+      </div>
+    </td>
+  </tr>
+)
+
 export const EmptyDetourTableIcon = (props: ComponentProps<"svg">) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"