feat: group trip suggestions by date

rosvik · Jan 14, 2025 · 649581f · 649581f
1 parent c22377a
commit 649581f
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 30 deletions.
diff --git a/src/Trips/TripsPage.tsx b/src/Trips/TripsPage.tsx
@@ -1,22 +1,23 @@
-import { Fragment } from "react";
+import { Fragment, useCallback, useEffect, useState, useRef } from "react";
 import { Feature, Leg, TripPattern } from "../types";
 import { ActionPanel, Action, Color, List, Icon } from "@raycast/api";
 import { fetchTrip } from "../api";
-import { useCallback, useEffect, useState } from "react";
 import {
   getTransportIcon,
   formatAsClock,
   formatTimeDifferenceAsClock,
   formatMetersToHuman,
   formatDestinationDisplay,
+  formatAsDate,
 } from "../utils";
 
 type Props = {
   origin: Feature;
   destination: Feature;
 };
 export default function TripsPage({ origin, destination }: Props) {
-  const [trips, setTrips] = useState<TripPattern[]>([]);
+  const trips = useRef<TripPattern[]>([]);
+  const [groupedTrips, setGroupedTrips] = useState<GroupedTrips>({});
   const [isLoading, setIsLoading] = useState(true);
   const [pageCursor, setPageCursor] = useState("");
   const [isDetailVisible, setDetailVisible] = useState(false);
@@ -29,8 +30,8 @@ export default function TripsPage({ origin, destination }: Props) {
       pageCursor,
     })
       .then((data) => {
-        const newTrips = trips?.concat(data.trip.tripPatterns);
-        setTrips(newTrips);
+        trips.current = trips.current?.concat(data.trip.tripPatterns);
+        setGroupedTrips(groupTripsByDate(trips.current));
         setPageCursor(data.trip.nextPageCursor);
       })
       .finally(() => setIsLoading(false));
@@ -46,31 +47,34 @@ export default function TripsPage({ origin, destination }: Props) {
       isShowingDetail={isDetailVisible}
       searchBarPlaceholder={`From ${origin.properties.name} to ${destination.properties.name}...`}
     >
-      {trips?.map((trip, idx) => (
-        <List.Item
-          detail={<List.Item.Detail metadata={<TripDetails trip={trip} />}></List.Item.Detail>}
-          actions={
-            <ActionPanel>
-              <Action
-                title="Toggle Details"
-                onAction={() => {
-                  setDetailVisible(!isDetailVisible);
-                }}
-              />
-              <Action
-                title="Load More"
-                // TODO: Remove this in favor of `pagination` returned from
-                // using the built-in useFetch/usePromise:
-                // https://developers.raycast.com/utilities/react-hooks/usefetch#pagination
-                onAction={getTrips}
-              />
-            </ActionPanel>
-          }
-          title={`${formatAsClock(trip.expectedStartTime)} - ${formatAsClock(trip.expectedEndTime)}`}
-          // TODO: subtitle => "Little warning triangle if service disruptions are present"
-          accessories={getTripAccessories(trip, isDetailVisible)}
-          key={idx}
-        />
+      {Object.entries(groupedTrips).map(([date, trips]) => (
+        <List.Section title={date === new Date().toDateString() ? "Today" : date} key={date}>
+          {trips.map((trip, idx) => (
+            <List.Item
+              detail={<List.Item.Detail metadata={<TripDetails trip={trip} />}></List.Item.Detail>}
+              actions={
+                <ActionPanel>
+                  <Action
+                    title="Toggle Details"
+                    onAction={() => {
+                      setDetailVisible(!isDetailVisible);
+                    }}
+                  />
+                  <Action
+                    title="Load More"
+                    // TODO: Remove this in favor of `pagination` returned from
+                    // using the built-in useFetch/usePromise:
+                    // https://developers.raycast.com/utilities/react-hooks/usefetch#pagination
+                    onAction={getTrips}
+                  />
+                </ActionPanel>
+              }
+              title={`${formatAsClock(trip.expectedStartTime)} - ${formatAsClock(trip.expectedEndTime)}`}
+              accessories={getTripAccessories(trip, isDetailVisible)}
+              key={idx}
+            />
+          ))}
+        </List.Section>
       ))}
     </List>
   );
@@ -101,6 +105,17 @@ const TripDetails = ({ trip }: { trip: TripPattern }) => {
   );
 };
 
+type GroupedTrips = Record<string, TripPattern[]>;
+const groupTripsByDate = (trips: TripPattern[]) => {
+  let grouped: Record<string, TripPattern[]> = {};
+  trips.forEach((trip) => {
+    const date = formatAsDate(trip.expectedStartTime);
+    grouped[date] = [...(grouped[date] || []), trip];
+  });
+  return grouped;
+};
+
+// TODO: Should add a warning triangle if service disruptions are present
 const getTripAccessories = (
   trip: TripPattern,
   isDetailsVisible: boolean,

diff --git a/src/utils.ts b/src/utils.ts
@@ -120,6 +120,11 @@ export function formatAsClock(isoString: string) {
   return `${padTime(d.getHours())}:${padTime(d.getMinutes())}`;
 }
 
+export function formatAsDate(isoString: string) {
+  const d = new Date(isoString);
+  return d.toDateString();
+}
+
 export function formatMillisecondsToHuman(ms: number) {
   const totalSeconds = Math.ceil(ms / 1000);
   const minutes = Math.floor(totalSeconds / 60) % 60;