refactor: Use date-fns for dates

hackerspace-ntnu · Nov 10, 2024 · 024069b · 024069b
1 parent c3ccccb
commit 024069b
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 57 deletions.
diff --git a/src/app/[locale]/(default)/events/[id]/layout.tsx b/src/app/[locale]/(default)/events/[id]/layout.tsx
@@ -12,7 +12,7 @@ export default async function EventDetailsLayout({
       <Button variant='secondary' aria-label='Back to Events' asChild>
         <Link href='/events' className='flex gap-2'>
           <ArrowLeftIcon aria-hidden='true' />
-          <span>{t('backToEvents')}</span>
+          {t('backToEvents')}
         </Link>
       </Button>
       {children}

diff --git a/src/app/[locale]/(default)/events/[id]/page.tsx b/src/app/[locale]/(default)/events/[id]/page.tsx
@@ -1,34 +1,27 @@
 import { getTranslations, setRequestLocale } from 'next-intl/server';
+import { CalendarIcon, MapPinIcon } from 'lucide-react';
+import { notFound } from 'next/navigation';
+import { format, isSameDay } from 'date-fns';
 
 import { Avatar, AvatarImage } from '@/components/ui/Avatar';
 import { Badge } from '@/components/ui/Badge';
 import { Separator } from '@/components/ui/Separator';
 // TODO: Must be replaced with actual events
 import { events } from '@/mock-data/events';
-import { CalendarIcon, MapPinIcon } from 'lucide-react';
-import { notFound } from 'next/navigation';
 
 export async function generateMetadata({
   params,
 }: {
-  params: Promise<{ locale: string }>;
+  params: Promise<{ locale: string; id: string }>;
 }) {
-  const { locale } = await params;
-  const t = await getTranslations({ locale, namespace: 'layout' });
+  const { locale, id } = await params;
+  const event = events.find((event) => event.id.toString() === id);
 
   return {
-    title: t('events'),
+    title: `${event?.title}`,
   };
 }
 
-function datesOnSameDay(date1: Date, date2: Date) {
-  return (
-    date1.getUTCFullYear() === date2.getUTCFullYear() &&
-    date1.getUTCMonth() === date2.getUTCMonth() &&
-    date1.getUTCDay() === date2.getUTCDay()
-  );
-}
-
 export default async function EventDetailsPage({
   params,
 }: {
@@ -43,16 +36,10 @@ export default async function EventDetailsPage({
 
   const startDate = new Date(event.startTime);
   const endDate = new Date(event.endTime);
-  const timeOptions = {
-    hour: '2-digit',
-    minute: '2-digit',
-    hour12: false,
-  } as const;
 
-  const formattedStartTime = startDate.toLocaleTimeString(locale, timeOptions);
-  const formattedEndTime = endDate.toLocaleTimeString(locale, timeOptions);
-  const formattedStartDay = startDate.toLocaleDateString(locale);
-  const formattedEndDay = endDate.toLocaleDateString(locale);
+  const formattedRange = isSameDay(startDate, endDate)
+    ? `${format(startDate, 'HH:mm')} - ${format(endDate, 'HH:mm, dd.MM.yyyy')}`
+    : `${format(startDate, 'HH:mm, dd/MM/yyyy')} - ${format(endDate, 'HH:mm, dd.MM.yyyy')}`;
 
   return (
     <>
@@ -64,19 +51,7 @@ export default async function EventDetailsPage({
         )}
         <div className='flex items-center gap-2'>
           <CalendarIcon className='h-8 w-8' />
-          {
-            /* Specify the day if the event starts and ends on different days */
-            datesOnSameDay(startDate, endDate) ? (
-              <span>
-                {formattedStartTime} - {formattedEndTime}, {formattedStartDay}
-              </span>
-            ) : (
-              <span>
-                {formattedStartTime}, {formattedStartDay} - {formattedEndTime},{' '}
-                {formattedEndDay}
-              </span>
-            )
-          }
+          {formattedRange}
         </div>
         <div className='flex items-center gap-2'>
           <MapPinIcon className='h-8 w-8' />

diff --git a/src/components/events/EventCard.tsx b/src/components/events/EventCard.tsx
@@ -11,6 +11,7 @@ import { Avatar, AvatarImage } from '@/components/ui/Avatar';
 import { Badge } from '@/components/ui/Badge';
 import { Link } from '@/lib/locale/navigation';
 import { cx } from '@/lib/utils';
+import { format } from 'date-fns';
 import { getTranslations } from 'next-intl/server';
 
 type EventCardProps = {
@@ -36,24 +37,8 @@ async function EventCard(props: EventCardProps) {
   const t = await getTranslations('events');
   const tUi = await getTranslations('ui');
 
-  const dateOptions = {
-    hour: '2-digit',
-    minute: '2-digit',
-    hour12: false,
-  } as const;
-
-  // For example "18:00", same for end time
-  const formattedStartTime = props.startTime.toLocaleTimeString(
-    props.locale,
-    dateOptions,
-  );
-  // For example "22/8/2024" or "22.8.2024", same for end date
-  const formattedStartDate = props.startTime.toLocaleDateString(props.locale);
-  const formattedEndTime = props.endTime.toLocaleTimeString(
-    props.locale,
-    dateOptions,
-  );
-  const formattedEndDate = props.endTime.toLocaleDateString(props.locale);
+  const formattedStartDate = format(props.startTime, 'HH:mm, dd.MM.yyyy');
+  const formattedEndDate = format(props.endTime, 'HH:mm, dd.MM.yyyy');
 
   const started = props.startTime < new Date() || props._active;
   const ended = props.endTime < new Date();
@@ -91,11 +76,11 @@ async function EventCard(props: EventCardProps) {
         <CardFooter className='mt-auto flex-col gap-2'>
           <span>
             {started ? <>{t('startedAt')}</> : <>{t('startsAt')}</>}{' '}
-            {formattedStartTime}, {formattedStartDate}
+            {formattedStartDate}
           </span>
           <span>
             {ended ? <>{t('endedAt')}</> : <>{t('endsAt')}</>}{' '}
-            {formattedEndTime}, {formattedEndDate}
+            {formattedEndDate}
           </span>
         </CardFooter>
       </Card>