💄 feat(components/pages/talk): show conference dates

Author: ythecombinator

src/components/pages/talk/events-section-item.tsx

@@ -1,7 +1,10 @@
 import { FunctionComponent, PropsWithChildren } from 'react';
+import { BsFillCalendarEventFill } from 'react-icons/bs';
 import { CgWebsite } from 'react-icons/cg';
 import { FaMapMarkedAlt, FaYoutube, FaSpeakerDeck } from 'react-icons/fa';
 
+import { FormattedDate } from 'utils/date';
+
 import CardOutlined from 'components/shared/card-outlined';
 import CardOutlinedListItem from 'components/shared/card-outlined-list-item';
 import Link from 'components/shared/link';
@@ -14,9 +17,10 @@ export type EventsSectionItemProps = {
   // Event
   eventName: string;
   eventLocation: string;
-  eventStartingDate: string;
-  eventEndingDate: string;
+  eventStartingDate: FormattedDate;
+  eventEndingDate: FormattedDate;
   eventWebsite: string;
+  isSingleDayEvent: boolean;
   // Session
   sessionAudience: string;
   sessionLanguage: string;
@@ -35,6 +39,9 @@ const EventsSectionItem: FunctionComponent<
   const {
     eventName,
     eventLocation,
+    isSingleDayEvent,
+    eventStartingDate,
+    eventEndingDate,
     eventWebsite,
     sessionSlides,
     sessionRecording,
@@ -47,6 +54,23 @@ const EventsSectionItem: FunctionComponent<
           {eventLocation}
         </CardOutlinedListItem>
 
+        <CardOutlinedListItem
+          icon={<BsFillCalendarEventFill size={20} aria-hidden />}
+        >
+          <time dateTime={eventStartingDate.raw}>
+            {eventStartingDate.formatted}
+          </time>
+
+          {!isSingleDayEvent && (
+            <>
+              {'-'}
+              <time dateTime={eventEndingDate.raw}>
+                {eventEndingDate.formatted}
+              </time>
+            </>
+          )}
+        </CardOutlinedListItem>
+
         <CardOutlinedListItem icon={<CgWebsite size={20} aria-hidden />}>
           <Link href={eventWebsite} rel="nofollow">
             Check their website

src/services/talks-content-service.ts

@@ -21,7 +21,7 @@ import { DeepNonNullable } from 'utility-types';
 
 import ContentfulService from 'services/contentful-service';
 
-import { formatDate } from 'utils/date';
+import { formatDate, isSingleDayTimeSpan } from 'utils/date';
 import { toIndexableCollection } from 'utils/search';
 
 const contentfulServiceInstance = ContentfulService.getInstance();
@@ -223,8 +223,18 @@ const sessionTransformer = (session: DeepNonNullable<Session>) => ({
   eventName: session.event?.name,
   eventLocation: locationTransformer(session.event?.city),
   eventWebsite: session.event?.website,
-  eventStartingDate: formatters.date(session.event?.startingDate),
-  eventEndingDate: formatters.date(session.event?.endingDate),
+  eventStartingDate: {
+    raw: session.event?.startingDate,
+    formatted: formatters.date(session.event?.startingDate),
+  },
+  eventEndingDate: {
+    raw: session.event?.endingDate,
+    formatted: formatters.date(session.event?.endingDate),
+  },
+  isSingleDayEvent: isSingleDayTimeSpan(
+    session.event?.startingDate,
+    session.event?.endingDate
+  ),
   sessionAudience: formatters.audience(session.audience),
   sessionLanguage: formatters.language(session.language),
   sessionOnline: session.online,

src/utils/date.ts

@@ -6,3 +6,15 @@ export const formatDate = (dateString: string) =>
     day: 'numeric',
     year: 'numeric',
   }).format(new Date(dateString));
+
+export const isSingleDayTimeSpan = (
+  startingDate: string,
+  endingDate: string
+) => {
+  return formatDate(startingDate) === formatDate(endingDate);
+};
+
+export type FormattedDate = {
+  raw: string;
+  formatted: string;
+};