add ClientEventTime

src/components/events/ClientEventTime.tsx

@@ -0,0 +1,34 @@
+'use client';
+//import react
+import React from 'react';
+import { format } from 'date-fns';
+
+//ensures startTime and endTime are Date types
+interface ClientEventTimeProps {
+  startTime: Date; // start time of event in UTC
+  endTime: Date; // end time of event in UTC
+}
+
+const ClientEventTime: React.FC<ClientEventTimeProps> = ({
+  startTime,
+  endTime,
+}) => {
+  //convert the startTime from UTC to the users local time with the Date object
+  //tolocalestring gives the date and time formatted according to users local time
+  const localStartTime = new Date(startTime).toLocaleString(undefined, {
+    timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+  });
+  //same
+  const localEndTime = new Date(endTime).toLocaleString(undefined, {
+    timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+  });
+
+  //resturn span element that dispalys local start and end time
+  return (
+    <span>
+      {localStartTime} - {localEndTime}
+    </span>
+  );
+};
+//export it
+export default ClientEventTime;

src/components/events/EventCard.tsx

@@ -1,4 +1,5 @@
 'use server';
+
 import { format, isSameDay } from 'date-fns';
 import Image from 'next/image';
 import Link from 'next/link';
@@ -7,6 +8,7 @@ import { type RouterOutputs } from '@src/trpc/shared';
 import EventLikeButton from '../EventLikeButton';
 import { getServerAuthSession } from '@src/server/auth';
 import dynamic from 'next/dynamic';
+import ClientEventTime from './ClientEventTime'; //importing new component
 
 const EventTimeAlert = dynamic(() => import('./EventTimeAlert'), {
   ssr: false,
@@ -50,14 +52,14 @@ const HorizontalCard = async ({
             </Link>{' '}
             •<wbr />
             <span className="text-blue-primary">
-              {format(event.startTime, 'E, MMM d, p')}
-              {isSameDay(event.startTime, event.endTime) ? (
-                <> - {format(event.endTime, 'p')}</>
-              ) : (
-                <> - {format(event.endTime, 'E, MMM d, p')}</>
-              )}
+              {/* Use the ClientEventTime component here */}
+              <ClientEventTime
+                startTime={event.startTime} //ClientEventTime logic
+                endTime={event.endTime}
+              />
             </span>
           </h4>
+
           <p className="line-clamp-3 overflow-clip text-ellipsis text-xs font-bold">
             {event.description}
           </p>
@@ -112,16 +114,11 @@ const VerticalCard = async ({
             </Link>
             <div>
               <span className="text-blue-primary">
-                {format(event.startTime, 'E, MMM d, p')}
-                {isSameDay(event.startTime, event.endTime) ? (
-                  <> - {format(event.endTime, 'p')}</>
-                ) : (
-                  <>
-                    {' '}
-                    - <br />
-                    {format(event.endTime, 'E, MMM d, p')}
-                  </>
-                )}
+                {/* Use the ClientEventTime component here */}
+                <ClientEventTime
+                  startTime={event.startTime}
+                  endTime={event.endTime}
+                />
               </span>
             </div>
           </h4>