From 80fefcd345ca0852d6a5343e575eef3662b87234 Mon Sep 17 00:00:00 2001
From: David Abell <79927957+david-abell@users.noreply.github.com>
Date: Thu, 11 Apr 2024 13:24:52 +0100
Subject: [PATCH] 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
---
 package.json                         |  2 +-
 src/components/Footer.tsx            | 56 ++++++++++++++++++----------
 src/components/{ui => }/LiveText.tsx |  0
 src/components/Map/Bus.tsx           |  2 +-
 4 files changed, 39 insertions(+), 21 deletions(-)
 rename src/components/{ui => }/LiveText.tsx (100%)

diff --git a/package.json b/package.json
index 5959e8d..2abb2ac 100644
--- 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
index 4f5baa3..2b42bef 100644
--- 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 b/src/components/LiveText.tsx
similarity index 100%
rename from src/components/ui/LiveText.tsx
rename to src/components/LiveText.tsx
diff --git a/src/components/Map/Bus.tsx b/src/components/Map/Bus.tsx
index 4e2fb6c..a745318 100644
--- 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 = {