format meetup dates

packages/site/package.json

@@ -20,6 +20,7 @@
     "@tailwindcss/forms": "^0.5.4",
     "@tailwindcss/typography": "^0.5.9",
     "astro": "^2.9.0",
+    "date-fns": "^2.30.0",
     "tailwindcss": "^3.3.3"
   },
   "devDependencies": {

packages/site/src/components/MeetupCard.astro

@@ -1,4 +1,5 @@
 ---
+import { formatDate } from '../utils';
 const {
   name,
   description,
@@ -10,6 +11,7 @@ const {
   signupLink,
   slug,
 } = Astro.props;
+const formattedDate = formatDate(date);
 ---
 
 <div class="m-auto max-w-2xl overflow-hidden bg-white shadow sm:rounded-lg">
@@ -74,7 +76,7 @@ const {
         <dd
           class="mt-1 font-semibold leading-6 text-gray-700 sm:col-span-2 sm:mt-0"
         >
-          {date}
+          {formattedDate}
         </dd>
       </div>
       <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">

packages/site/src/components/MeetupListItem.astro

@@ -1,6 +1,6 @@
 ---
-import { getRandomLogonumber } from '../utils';
-const { name, time, location, organizer, slug } = Astro.props;
+import { getRandomLogonumber, formatDate } from '../utils';
+const { name, date, location, organizer, slug } = Astro.props;
 // TODO: green light for near future, yellow for far future
 // red for cancelled, gray for past
 
@@ -34,7 +34,7 @@ const devLogoNum = getRandomLogonumber();
             <p
               class="text-sm font-semibold text-gray-900 first-letter:leading-6"
             >
-              {time}
+              {formatDate(date)}
             </p>
             <div class="mt-1 flex items-center gap-x-1.5">
               <p class="text-xs leading-5 text-gray-500">{location}</p>

packages/site/src/components/MeetupPageCard.astro

@@ -1,4 +1,5 @@
 ---
+import { formatDate } from '../utils';
 const meetupProps = Astro.props;
 const {
   location,
@@ -99,7 +100,7 @@ const { Content } = await meetupProps.meetup.render();
             <dd
               class="mt-1 font-semibold leading-6 text-gray-700 sm:col-span-2 sm:mt-0"
             >
-              {date}
+              {formatDate(date)}
             </dd>
           </div>
           <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">

packages/site/src/pages/meetups/index.astro

@@ -24,7 +24,7 @@ meetups.sort((a: any, b: any) => {
               <MeetupListItem
                 name={meetup.data.title}
                 location={meetup.data.location}
-                time={meetup.data.date}
+                date={meetup.data.date}
                 organizer={meetup.data.organizer}
                 slug={meetup.slug}
               />

packages/site/src/utils.ts

@@ -1,3 +1,5 @@
+import format from 'date-fns/format/index.js';
+
 // place any helper functions here
 export type Meetup = {
   data: {
@@ -45,22 +47,18 @@ export const getRandomLogonumber = () => {
 
 export const parseMeetupDate = (date: string) => {
   if (!date) return -1;
-  if (Date.parse(date) > 0) return Date.parse(date);
-  else {
-    const parsedDate = date.split(' ');
-    const [year, month, day] = parsedDate[0]
-      .split('-')
-      .map((str) => parseInt(str));
-    const [hour, minute] = parsedDate[1].split(':').map((str) => parseInt(str));
-    return new Date(year, month - 1, day, hour, minute).getTime();
+  if (Date.parse(date) > 0) {
+    if (date.endsWith('GMT')) {
+      date = date.concat('+0300');
+    }
+    return Date.parse(date);
+  } else {
+    throw Error('Invalid date format');
   }
 };
 
 export const formatDate = (date: string) => {
-  const parsedDate = new Date(parseMeetupDate(date));
-  return `${parsedDate.getDate()}.${
-    parsedDate.getMonth() + 1
-  }.${parsedDate.getFullYear()}`;
+  return format(parseMeetupDate(date), 'dd.MM.yyyy HH:mm');
 };
 
 export const getNextMeetup = (meetups: Meetup[]) => {

packages/site/test/utils.test.ts

@@ -79,7 +79,7 @@ test('date parsing works in user format', () => {
   expect(parsedDate).toBeDefined();
   expect(parsedDate).not.toBeNull();
   if (parsedDate) {
-    expect(new Date(parsedDate).toDateString()).toBe('Fri Aug 25 2023');
+    expect(new Date(parsedDate).toLocaleString()).toBe('8/25/2023, 8:00:00 PM');
   }
 });
 
@@ -89,9 +89,7 @@ test('date parsing works in system format', () => {
   expect(parsedDate).toBeDefined();
   expect(parsedDate).not.toBeNull();
   if (parsedDate) {
-    expect(new Date(parsedDate).toUTCString()).toBe(
-      'Wed, 13 Sep 2023 16:30:00 GMT',
-    );
+    expect(new Date(parsedDate).toLocaleString()).toBe('9/13/2023, 4:30:00 PM');
   }
 });
 
@@ -150,7 +148,10 @@ test('short the description text', () => {
   );
 });
 
-test('format meetup dates', () => {
-  expect(formatDate('Wed, 13 Sep 2023 16:30:00 GMT')).toBe('13.9.2023');
-  expect(formatDate('2023-10-17')).toBe('17.10.2023');
+test('format meetup system date', () => {
+  expect(formatDate('Wed, 13 Sep 2023 16:30:00 GMT')).toBe('13.09.2023 16:30');
+});
+
+test('format meetup user date', () => {
+  expect(formatDate('2023-10-17 19:00')).toBe('17.10.2023 19:00');
 });