From 60a1b1d3d93568f874134dc8496589497d45a7cb Mon Sep 17 00:00:00 2001
From: Jonas Braathen <jonas@ponas.no>
Date: Sat, 10 Aug 2024 15:05:50 +0200
Subject: [PATCH] count events per yearmonth in calendar

---
 web/src/components/events/EventContainer.tsx | 40 +++++++++++++-------
 1 file changed, 26 insertions(+), 14 deletions(-)

diff --git a/web/src/components/events/EventContainer.tsx b/web/src/components/events/EventContainer.tsx
index 3c70a46..e052ce3 100644
--- a/web/src/components/events/EventContainer.tsx
+++ b/web/src/components/events/EventContainer.tsx
@@ -265,20 +265,32 @@ const EventCalendar = ({ events }: { events: EventFragment[] }) => {
   return (
     <>
       <div className={styles.eventCalendar}>
-        {Object.keys(eventsByDate).map((yearMonth) => (
-          <div
-            key={yearMonth}
-            className={styles.calendarYearMonth}
-            data-collapsed={!visibleYearMonths.includes(yearMonth)}
-          >
-            <h2 onClick={() => toggleYearMonth(yearMonth)}>
-              {formatYearMonth(yearMonth)} <span className={styles.eventCounter}>({Object.keys(eventsByDate[yearMonth]).length})</span>
-            </h2>
-            {Object.keys(eventsByDate[yearMonth]).map((week) => (
-              <CalendarWeek key={week} days={eventsByDate[yearMonth][week]} />
-            ))}
-          </div>
-        ))}
+        {Object.keys(eventsByDate).map((yearMonth) => {
+          const eventCount = Object.values(eventsByDate[yearMonth]).reduce(
+            (yearMonthSum, week) =>
+              yearMonthSum +
+              Object.values(week).reduce(
+                (weekSum, day) => weekSum + day.length,
+                0
+              ),
+            0
+          );
+          return (
+            <div
+              key={yearMonth}
+              className={styles.calendarYearMonth}
+              data-collapsed={!visibleYearMonths.includes(yearMonth)}
+            >
+              <h2 onClick={() => toggleYearMonth(yearMonth)}>
+                {formatYearMonth(yearMonth)}{" "}
+                <span className={styles.eventCounter}>({eventCount})</span>
+              </h2>
+              {Object.keys(eventsByDate[yearMonth]).map((week) => (
+                <CalendarWeek key={week} days={eventsByDate[yearMonth][week]} />
+              ))}
+            </div>
+          );
+        })}
       </div>
     </>
   );