show past dates in event date list

web/src/components/events/DateList.tsx

@@ -12,7 +12,6 @@ import styles from "./dateList.module.scss";
 import Link from "next/link";
 
 const DateListItem = ({ occurrence }: { occurrence: EventOccurrence }) => {
-  const dateFormat = "EEEE d. MMMM yyyy";
   const timeFormat = "'kl.' HH:mm";
   const wholeCastle = occurrence.venue?.slug === "hele-huset";
 
@@ -43,24 +42,26 @@ const DateListItem = ({ occurrence }: { occurrence: EventOccurrence }) => {
 };
 
 export const DateList = ({ event }: { event: EventFragment }) => {
-  const [showPast, setShowPast] = useState(false);
-
-  const futureOccurrences = event.occurrences
-    .filter((occurrence) => isTodayOrFuture(occurrence.start))
-    .sort((a, b) => compareDates(a.start, b.start));
-  const pastOccurrences = event.occurrences
-    .filter((occurrence) => !isTodayOrFuture(occurrence.start))
-    .sort((a, b) => compareDates(a.start, b.start));
-
-  // TODO: events occurring once
-  // TODO: end date/time?
-  // TODO: past occurrences?
-
   const [showAllDates, setShowAllDates] = useState(false);
   function toggleDates() {
     setShowAllDates(!showAllDates);
   }
 
+  const oneOff = event.occurrences.length === 1;
+  const showToggle = event.occurrences.length > 4;
+  const futureOccurrences = event.occurrences
+    .filter((occurrence) => isTodayOrFuture(occurrence.start))
+    .sort((a, b) => compareDates(a.start, b.start));
+
+  let visibleOccurrences = [];
+  if (oneOff || showAllDates || event.occurrences.length <= 4) {
+    visibleOccurrences = event.occurrences;
+  } else {
+    visibleOccurrences = futureOccurrences.slice(0, 4);
+  }
+
+  // TODO: end date/time?
+
   return (
     <div className={styles.dateWrapper}>
       <div className={`${styles.header} suphead`}>
@@ -69,42 +70,23 @@ export const DateList = ({ event }: { event: EventFragment }) => {
         <span>Sted</span>
       </div>
       <ul className={styles.dateList} data-showall={showAllDates}>
-        {futureOccurrences.map((occurrence) => (
+        {visibleOccurrences.map((occurrence) => (
           <DateListItem
             key={occurrence.id}
             occurrence={occurrence as EventOccurrence}
           />
         ))}
       </ul>
-      {futureOccurrences.length > 4 && (
+      {showToggle && (
         <div className={styles.showMore}>
           <button onClick={() => toggleDates()} className="button tertiary">
             {!showAllDates && (
-              <span>Vis alle kommende datoer ({futureOccurrences.length})</span>
+              <span>Vis alle datoer ({event.occurrences.length})</span>
             )}
             {showAllDates && <span>Vis færre datoer</span>}
           </button>
         </div>
       )}
-      {/* <div onClick={() => setShowPast(!showPast)}>
-        {showPast ? "Skjul" : "Vis"} tidligere
-      </div>
-      {showPast && (
-        <>
-          <h2 className="circlehead">
-            <span className="circle"></span>
-            <span className="circle"></span>
-            <span className="circle"></span>
-            Tidligere datoer{" "}
-            <span className="number">({pastOccurrences.length})</span>
-          </h2>
-          <ul className={styles.dateList}>
-            {pastOccurrences.map((occurrence) => (
-              <DateListItem key={occurrence.id} occurrence={occurrence} />
-            ))}
-          </ul>
-        </>
-      )} */}
     </div>
   );
 };