pls dont break prod (v2)

laurelin60 · Apr 25, 2024 · ae8bd10 · ae8bd10
1 parent 6a05c98
commit ae8bd10
Showing 1 changed file with 17 additions and 7 deletions.
diff --git a/components/search/Blurb.tsx b/components/search/Blurb.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { CourseObject, FilterValues } from "./Search";
-import { formatDistanceToNow } from "date-fns";
+import { intervalToDuration } from "date-fns";
 
 interface BlurbProps {
     filterData: (
@@ -20,10 +20,7 @@ const Blurb = (props: BlurbProps) => {
     useEffect(() => {
         const updateRelativeTime = () => {
             if (lastUpdated) {
-                const formattedTimeAgo = formatDistanceToNow(
-                    new Date(lastUpdated),
-                );
-                setTimeAgo(`${formattedTimeAgo} ago`);
+                setTimeAgo(formatTimeSince(lastUpdated));
             }
         };
 
@@ -33,6 +30,19 @@ const Blurb = (props: BlurbProps) => {
         return () => clearInterval(intervalId);
     }, [lastUpdated]);
 
+    function formatTimeSince(dateTimestamp) {
+        const duration = intervalToDuration({ start: new Date(dateTimestamp), end: new Date() });
+        const parts = [];
+        if (duration.years) parts.push(duration.years + " year" + (duration.years !== 1 ? "s" : ""));
+        if (duration.months) parts.push(duration.months + " month" + (duration.months !== 1 ? "s" : ""));
+        if (duration.days) parts.push(duration.days + " day" + (duration.days !== 1 ? "s" : ""));
+        if (duration.hours) parts.push(duration.hours + " hour" + (duration.hours !== 1 ? "s" : ""));
+        if (duration.minutes) parts.push(duration.minutes + " minute" + (duration.minutes !== 1 ? "s" : ""));
+        if (duration.seconds) parts.push(duration.seconds + " second" + (duration.seconds !== 1 ? "s" : ""));
+
+        return parts.join(", ") + " ago";
+    }
+
     return (
         <>
             <div className="mt-4 flex flex-col gap-y-2 md:mt-8 md:gap-y-4">
@@ -50,8 +60,8 @@ const Blurb = (props: BlurbProps) => {
                     </div>
 
                     <div className="flex text-sm font-light text-gray md:justify-end md:text-base">
-                        {"GE-Z's"} data was updated{" "}
-                        {lastUpdated ? timeAgo : "x"}
+                        {"GE-Z's"} data was last updated{" "}
+                        {lastUpdated ? timeAgo : "not available"}
                     </div>
                 </div>