From 9416df11a36b30206f95ad6f57ea736e38859757 Mon Sep 17 00:00:00 2001
From: Jonas Braathen <jonas@ponas.no>
Date: Mon, 5 Aug 2024 20:58:56 +0200
Subject: [PATCH] collapse yearmonths that are two months ahead by default in
 event calendar

---
 web/src/components/events/EventContainer.tsx  | 65 +++++++++++--------
 .../events/eventContainer.module.scss         |  4 ++
 2 files changed, 41 insertions(+), 28 deletions(-)

diff --git a/web/src/components/events/EventContainer.tsx b/web/src/components/events/EventContainer.tsx
index 984714b..e71622f 100644
--- a/web/src/components/events/EventContainer.tsx
+++ b/web/src/components/events/EventContainer.tsx
@@ -118,7 +118,11 @@ export const EventContainer = ({
     <div className={styles.events}>
       <div className={styles.eventWrapper}>
         <div className={styles.displayOptions}>
-          <button onClick={() => setMode(null)} className="button toggler hasIcon" data-active={mode === "list"}>
+          <button
+            onClick={() => setMode(null)}
+            className="button toggler hasIcon"
+            data-active={mode === "list"}
+          >
             <span>Vis liste</span>
             <Icon type="list" />
           </button>
@@ -194,43 +198,48 @@ const CalendarDay = ({
 );
 
 const EventCalendar = ({ events }: { events: EventFragment[] }) => {
-  const [showAll, setShowAll] = useState(false);
-
   const futureSingularEvents = getSingularEvents(events).filter(
     (x) => x.occurrence?.start && isTodayOrFuture(x.occurrence.start)
   );
   const eventsByDate = organizeEventsInCalendar(futureSingularEvents);
   const yearMonths = Object.keys(eventsByDate);
-  const visibleYearMonths = showAll ? yearMonths : yearMonths.slice(0, 2);
+  const [visibleYearMonths, setVisibleYearMonths] = useState(
+    yearMonths.slice(0, 2)
+  );
+
+  const toggleYearMonth = (yearMonth: string) => {
+    if (visibleYearMonths.includes(yearMonth)) {
+      setVisibleYearMonths(visibleYearMonths.filter((x) => x != yearMonth));
+    } else {
+      setVisibleYearMonths([...visibleYearMonths, yearMonth]);
+    }
+  };
 
   return (
     <>
       <div className={styles.eventCalendar}>
-        {Object.keys(eventsByDate)
-          .filter((yearMonth) => visibleYearMonths.includes(yearMonth))
-          .map((yearMonth) => (
-            <div key={yearMonth} className={styles.calendarYearMonth}>
-              <h2>{formatYearMonth(yearMonth)}</h2>
-              {Object.keys(eventsByDate[yearMonth]).map((week) => (
-                <div key={week} className={styles.calendarWeek}>
-                  {Object.keys(eventsByDate[yearMonth][week]).map((day) => (
-                    <CalendarDay
-                      key={day}
-                      day={day}
-                      events={eventsByDate[yearMonth][week][day]}
-                    />
-                  ))}
-                </div>
-              ))}
-            </div>
-          ))}
+        {Object.keys(eventsByDate).map((yearMonth) => (
+          <div
+            key={yearMonth}
+            className={styles.calendarYearMonth}
+            data-collapsed={!visibleYearMonths.includes(yearMonth)}
+            onClick={() => toggleYearMonth(yearMonth)}
+          >
+            <h2>{formatYearMonth(yearMonth)}</h2>
+            {Object.keys(eventsByDate[yearMonth]).map((week) => (
+              <div key={week} className={styles.calendarWeek}>
+                {Object.keys(eventsByDate[yearMonth][week]).map((day) => (
+                  <CalendarDay
+                    key={day}
+                    day={day}
+                    events={eventsByDate[yearMonth][week][day]}
+                  />
+                ))}
+              </div>
+            ))}
+          </div>
+        ))}
       </div>
-      {!showAll && yearMonths.length > 2 && (
-        <button onClick={() => setShowAll(true)} className="button">
-          <span>Vis alt</span>
-          <Icon />
-        </button>
-      )}
     </>
   );
 };
diff --git a/web/src/components/events/eventContainer.module.scss b/web/src/components/events/eventContainer.module.scss
index b3df39a..3ea6e46 100644
--- a/web/src/components/events/eventContainer.module.scss
+++ b/web/src/components/events/eventContainer.module.scss
@@ -50,6 +50,10 @@
       text-transform: capitalize;
     }
   }
+
+  &[data-collapsed=true] > .calendarWeek {
+    display: none;
+  }
 }
 
 .calendarWeek {