From c2677f9c646eb5195e82accebc15f17749d783f0 Mon Sep 17 00:00:00 2001
From: Wongspatt Pasadhika <94737324+uno-p-5@users.noreply.github.com>
Date: Tue, 23 Apr 2024 22:49:09 -0700
Subject: [PATCH] I hope this doesn't break prod

---
 components/search/Blurb.tsx | 23 +++++++++++++++++++----
 1 file changed, 19 insertions(+), 4 deletions(-)

diff --git a/components/search/Blurb.tsx b/components/search/Blurb.tsx
index 988f25d..2d09cc8 100644
--- a/components/search/Blurb.tsx
+++ b/components/search/Blurb.tsx
@@ -1,5 +1,6 @@
-import { CourseObject, FilterValues } from "./Search";
-import { format } from "date-fns";
+import React, { useEffect, useState } from 'react';
+import { CourseObject, FilterValues } from './Search';
+import { formatDistanceToNow } from 'date-fns';
 
 interface BlurbProps {
     filterData: (
@@ -14,7 +15,21 @@ interface BlurbProps {
 const Blurb = (props: BlurbProps) => {
     const { filterData, courses, lastUpdated, filterValues } = props;
 
-    const date = lastUpdated ? format(new Date(lastUpdated), "M/d") : "x";
+    const [timeAgo, setTimeAgo] = useState('');
+
+    useEffect(() => {
+        const updateRelativeTime = () => {
+            if (lastUpdated) {
+                const formattedTimeAgo = formatDistanceToNow(new Date(lastUpdated));
+                setTimeAgo(`${formattedTimeAgo} ago`);
+            }
+        };
+
+        updateRelativeTime(); // Update initially
+        const intervalId = setInterval(updateRelativeTime, 1000); // Update every second
+
+        return () => clearInterval(intervalId); // Cleanup on unmount
+    }, [lastUpdated]);
 
     return (
         <>
@@ -33,7 +48,7 @@ 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 last updated on {date}
+                        {"GE-Z's"} data was updated {lastUpdated ? timeAgo : '[oopsie, time not available :(]'}
                     </div>
                 </div>