refactor: Make event cards a client component, fix rings

hackerspace-ntnu · Nov 14, 2024 · a528ed5 · a528ed5
1 parent b035055
commit a528ed5
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 13 deletions.
diff --git a/src/app/[locale]/(default)/events/page.tsx b/src/app/[locale]/(default)/events/page.tsx
@@ -26,13 +26,34 @@ export default async function EventsPage({
   const { locale } = await params;
   setRequestLocale(locale);
   const t = await getTranslations('events');
+  const tUi = await getTranslations('ui');
+
+  const translations = {
+    internal: tUi('internal'),
+    startsAt: t('startsAt'),
+    startedAt: t('startedAt'),
+    endsAt: t('endsAt'),
+    endedAt: t('endedAt'),
+  };
 
   return (
     <>
       <h1 className='my-4'>{t('title')}</h1>
       <h2 className='my-2'>{t('activeEvents')}</h2>
       {events.slice(0, 1).map((event) => (
-        <EventCard key={event.id} event={event} _active />
+        <EventCard
+          key={event.id}
+          wrapperClassName='block'
+          event={event}
+          t={{
+            detailsAboutEvent: t('detailsAboutEvent', {
+              eventName: event.title,
+            }),
+            photoOf: tUi('photoOf', { name: event.title }),
+            ...translations,
+          }}
+          _active
+        />
       ))}
       <h2 className='my-4'>{t('upcomingEvents')}</h2>
       <div className='grid grid-cols-1 gap-2 lg:grid-cols-2'>
@@ -42,6 +63,13 @@ export default async function EventsPage({
             event={event}
             wrapperClassName='lg:last:odd:col-span-2'
             cardClassName='h-full'
+            t={{
+              detailsAboutEvent: t('detailsAboutEvent', {
+                eventName: event.title,
+              }),
+              photoOf: tUi('photoOf', { name: event.title }),
+              ...translations,
+            }}
           />
         ))}
       </div>
@@ -53,6 +81,13 @@ export default async function EventsPage({
             event={event}
             wrapperClassName='lg:last:odd:col-span-2'
             cardClassName='h-full'
+            t={{
+              detailsAboutEvent: t('detailsAboutEvent', {
+                eventName: event.title,
+              }),
+              photoOf: tUi('photoOf', { name: event.title }),
+              ...translations,
+            }}
           />
         ))}
       </div>

diff --git a/src/components/events/EventCard.tsx b/src/components/events/EventCard.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import {
   Card,
   CardContent,
@@ -13,28 +15,34 @@ import { Link } from '@/lib/locale/navigation';
 import { cx } from '@/lib/utils';
 import type { events } from '@/mock-data/events';
 import { format } from 'date-fns';
-import { getTranslations } from 'next-intl/server';
 
 type EventCardProps = {
   event: (typeof events)[number];
   wrapperClassName?: string;
   cardClassName?: string;
   _active?: boolean;
+  t: {
+    detailsAboutEvent: string;
+    internal: string;
+    photoOf: string;
+    startsAt: string;
+    startedAt: string;
+    endsAt: string;
+    endedAt: string;
+  };
 };
 
 /**
  * A card for an event.
  * Only set the _active prop to true if you're testing active events.
  */
-async function EventCard({
+function EventCard({
   event,
   wrapperClassName,
   cardClassName,
+  t,
   _active,
 }: EventCardProps) {
-  const t = await getTranslations('events');
-  const tUi = await getTranslations('ui');
-
   const formattedStartDate = format(event.startTime, 'HH:mm, dd.MM.yyyy');
   const formattedEndDate = format(event.endTime, 'HH:mm, dd.MM.yyyy');
 
@@ -44,8 +52,11 @@ async function EventCard({
   return (
     <Link
       href={{ pathname: '/events/[id]', params: { id: event.id } }}
-      aria-label={t('detailsAboutEvent', { eventName: event.title })}
-      className={wrapperClassName}
+      aria-label={t.detailsAboutEvent}
+      className={cx(
+        'rounded-md ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+        wrapperClassName,
+      )}
     >
       <Card
         className={cx('flex flex-col text-center', cardClassName, {
@@ -57,7 +68,7 @@ async function EventCard({
           <CardDescription>{event.subheader}</CardDescription>
           {event.internal && (
             <Badge className='mx-auto w-fit rounded-full hover:bg-primary'>
-              {tUi('internal')}
+              {t.internal}
             </Badge>
           )}
         </CardHeader>
@@ -66,19 +77,18 @@ async function EventCard({
           <Avatar className='h-48 w-48'>
             <AvatarImage
               src='/event.webp'
-              alt={tUi('photoOf', { name: event.title })}
+              alt={t.photoOf}
               className='object-cover'
             />
           </Avatar>
         </CardContent>
         <CardFooter className='mt-auto flex-col'>
           <p>
-            {started ? <>{t('startedAt')}</> : <>{t('startsAt')}</>}{' '}
+            {started ? <>{t.startedAt}</> : <>{t.startsAt}</>}{' '}
             {formattedStartDate}
           </p>
           <p className='[&:not(:first-child)]:mt-2'>
-            {ended ? <>{t('endedAt')}</> : <>{t('endsAt')}</>}{' '}
-            {formattedEndDate}
+            {ended ? <>{t.endedAt}</> : <>{t.endsAt}</>} {formattedEndDate}
           </p>
         </CardFooter>
       </Card>