group date pills when days are consecutive

web/src/components/events/EventItem.tsx

@@ -8,9 +8,14 @@ import {
   EventFragment,
   getFutureOccurrences,
 } from "@/lib/event";
-import { formatDate, formatExtendedDateTime } from "@/lib/date";
+import {
+  formatDate,
+  formatDateRange,
+  formatExtendedDateTime,
+  groupConsecutiveDates,
+} from "@/lib/date";
 
-const DATES_TO_SHOW = 2;
+const DATE_PILLS_TO_SHOW = 2;
 
 export const EventItem = ({
   event,
@@ -22,8 +27,11 @@ export const EventItem = ({
   size?: "small" | "medium" | "large";
 }) => {
   const futureOccurrences = getFutureOccurrences(event);
+  const groupedOccurrences = groupConsecutiveDates(
+    futureOccurrences.map((occurrence) => occurrence.start)
+  );
   const numOccurrences = event?.occurrences?.length ?? 0;
-  const nextOccurrence = numOccurrences ? futureOccurrences[0] : null;
+  const nextOccurrence = numOccurrences ? groupedOccurrences[0] : null;
   const featuredImage: any = event.featuredImage;
 
   return (
@@ -46,15 +54,15 @@ export const EventItem = ({
       <div className={styles.time}>
         {mode === "list" && nextOccurrence && (
           <div className={styles.dates}>
-            {futureOccurrences.slice(0, DATES_TO_SHOW).map((occurrence) => (
-              <span key={occurrence.id} className={styles.datePill}>
-                {formatDate(occurrence.start, "d. MMMM")}
+            {groupedOccurrences.slice(0, DATE_PILLS_TO_SHOW).map((group) => (
+              <span key={group[0]} className={styles.datePill}>
+                {formatDateRange(group)}
               </span>
             ))}
-            {futureOccurrences.length > DATES_TO_SHOW && (
-              <span className={styles.moreDates}>{`+${
-                futureOccurrences.length - DATES_TO_SHOW
-              }`}</span>
+            {groupedOccurrences.length > DATE_PILLS_TO_SHOW && (
+              <span className={styles.moreDates}>{`+${groupedOccurrences
+                .slice(DATE_PILLS_TO_SHOW)
+                .reduce((sum, group) => sum + group.length, 0)}`}</span>
             )}
           </div>
         )}