Feat: add footer countdown to pickup/dropoff stops (#26)

* move LiveText to components * feat: add arriving in live countdown as suggested by reddit user ParaMike46 * bump version to 0.7.11
david-abell · Apr 11, 2024 · 80fefcd · 80fefcd
1 parent e9566bb
commit 80fefcd
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 21 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "irish-buses",
-  "version": "0.7.10",
+  "version": "0.7.11",
   "type": "module",
   "scripts": {
     "dev": "next dev",

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -2,6 +2,7 @@ import {
   formatReadableDelay,
   getDelayStatus,
   getDelayedTime,
+  getDifferenceInSeconds,
   isPastArrivalTime,
 } from "@/lib/timeHelpers";
 import { TripUpdate } from "@/types/realtime";
@@ -38,7 +39,7 @@ function Footer({
   const [count, setCount] = useState<number>(0);
   useInterval(() => {
     setCount(count + 1);
-  }, 15000);
+  }, 1000);
 
   const lastStopId = useMemo(() => {
     if (!!destination) return "";
@@ -122,6 +123,14 @@ function Footer({
     !!dropOffArrivalTime &&
     isPastArrivalTime(realtimeDropOffArrivalTime ?? dropOffArrivalTime);
 
+  const liveTextArrivalTime = isPastPickup
+    ? realtimeDropOffArrivalTime
+    : realtimePickupArrivalTime;
+
+  const liveTextContent = liveTextArrivalTime
+    ? formatReadableDelay(getDifferenceInSeconds(liveTextArrivalTime), true)
+    : "";
+
   return (
     <div className="absolute bottom-0 z-[1000] mx-auto min-h-[6rem] w-full overflow-x-auto p-4 lg:max-w-7xl lg:px-10">
       <div className="rounded-lg bg-background/90 p-4">
@@ -147,24 +156,33 @@ function Footer({
                     )}
                   </p>
 
-                  <p
-                    className={
-                      dropOffDelayStatus === "early"
-                        ? "text-green-700 dark:text-green-500"
-                        : dropOffDelayStatus === "late"
-                          ? "text-red-700 dark:text-red-500"
-                          : ""
-                    }
-                  >
-                    <span className="whitespace-nowrap">
-                      {dropOffDelay ?? ""}
-                    </span>{" "}
-                    {isPastDropOff
-                      ? "Completed"
-                      : isPastPickup
-                        ? dropOffDelayStatus
-                        : pickupDelayStatus}
-                  </p>
+                  {!!trip && (
+                    <p>
+                      {isPastDropOff ? (
+                        "Completed"
+                      ) : isPastPickup ? (
+                        <span>
+                          Dropping off {dropOffDelayStatus} in{" "}
+                          {liveTextContent ?? ""}
+                        </span>
+                      ) : (
+                        <span>
+                          Picking up {pickupDelayStatus} in{" "}
+                          <span
+                            className={`whitespace-nowrap ${
+                              dropOffDelayStatus === "early"
+                                ? "text-green-700 dark:text-green-500"
+                                : dropOffDelayStatus === "late"
+                                  ? "text-red-700 dark:text-red-500"
+                                  : ""
+                            }`}
+                          >
+                            {liveTextContent ?? ""}
+                          </span>
+                        </span>
+                      )}
+                    </p>
+                  )}
                 </div>
               }
             </AccordionTrigger>

diff --git a/src/components/ui/LiveText.tsx → src/components/LiveText.tsx b/src/components/ui/LiveText.tsx → src/components/LiveText.tsx
diff --git a/src/components/Map/Bus.tsx b/src/components/Map/Bus.tsx
@@ -13,7 +13,7 @@ import { useInterval } from "usehooks-ts";
 import { Stop, StopTime } from "@prisma/client";
 import { Position } from "@turf/helpers";
 import { TripUpdate } from "@/types/realtime";
-import LiveText, { LiveTextColor } from "../ui/LiveText";
+import LiveText, { LiveTextColor } from "../LiveText";
 import LiveVehicleTooltip from "./LiveVehicleTooltip";
 
 type Props = {