Merge branch 'develop' into JUP-61-club-search-page

src/components/events/EventTimeAlert.tsx

@@ -6,10 +6,12 @@ import {
   differenceInMinutes,
 } from 'date-fns';
 import { type ReactNode } from 'react';
+import { useState, useEffect } from 'react';
 
 type EventTimeAlertProps = {
   event: SelectEvent;
 };
+
 type BaseProps = { children: ReactNode; className?: string };
 const Base = ({ children, className }: BaseProps) => {
   return (
@@ -22,12 +24,23 @@ const Base = ({ children, className }: BaseProps) => {
     </div>
   );
 };
+
 const EventTimeAlert = ({ event }: EventTimeAlertProps) => {
-  const now = new Date();
+  const [now, setNow] = useState(Date.now());
+
+  useEffect(() => {
+    const intervalId = setInterval(() => {
+      setNow(Date.now());
+    }, 1000);
+
+    return () => clearInterval(intervalId);
+  }, []);
+
   const start = event.startTime;
   const hourDiff = differenceInHours(start, now);
-  if (event.startTime.getTime() < Date.now()) {
-    if (event.endTime.getTime() < Date.now()) {
+
+  if (event.startTime.getTime() < now) {
+    if (event.endTime.getTime() < now) {
       return <Base className="bg-red-600">over :(</Base>;
     } else {
       return <Base className="bg-green-600">NOW</Base>;