fix venue filtering bug, hide venues with no upcoming events, show message if no upcoming events

web/src/components/events/EventContainer.tsx

@@ -82,18 +82,19 @@ export const EventContainer = ({
     Filtering on a venue with no upcoming events will work,
     and in that case it's included in the dropdown
    */
-  const venueSlugsWithUpcomingEvents = events
+  const venueSlugsWithUpcomingEvents = unique(
-    .map((x) => x.occurrences)
+    events
-    .flat()
+      .map((x) => x.occurrences)
-    .filter((x) => x.venue?.__typename === "VenuePage")
+      .flat()
-    .map((x) => x.venue?.slug)
+      .filter((x) => x.venue?.__typename === "VenuePage")
-    .filter((x) => typeof x === "string");
+      .map((x) => x.venue?.slug)
+      .filter((x) => typeof x === "string")
+  );
   const filterableVenues = venues
-    .map((x) =>
+    .filter(
-      venues.find(
+      (x) => venueSlugsWithUpcomingEvents.includes(x.slug) || x.slug === venue
-        (haystack) => haystack.slug === x.slug || haystack.slug === venue
-      )
     )
+    .map((x) => venues.find((haystack) => haystack.slug === x.slug))
     .filter((x) => x !== undefined) as VenueFragment[];
 
   const filteredEvents = events
@@ -186,6 +187,11 @@ export const EventContainer = ({
 };
 
 const EventList = ({ events }: { events: EventFragment[] }) => {
+  if (events.length === 0) {
+    return (
+      <div className={styles.noEvents}>Ingen kommende arrangementer.</div>
+    );
+  }
   return (
     <ul className={styles.eventList}>
       {events.map((event) => (

web/src/components/events/EventFilter.tsx

@@ -123,11 +123,13 @@ export const EventFilterExplained = ({
 
   let text = "";
   if (category && organizer && venue) {
-    text = `${category.name} arrangert av ${organizer.name} ${venue.preposition} ${venue.title}`;
+    text = `${category.name} av ${organizer.name} ${venue.preposition} ${venue.title}`;
   } else if (category && organizer) {
-    text = `${category.name} arrangert av ${organizer.name}`;
+    text = `${category.name} av ${organizer.name}`;
+  } else if (category && venue) {
+    text = `${category.name} ${venue.preposition} ${venue.title}`;
   } else if (category) {
-    text = `Kategori: ${category.name}`;
+    text = `${category.name}`;
   } else if (organizer && venue) {
     text = `Arrangeres av ${organizer.name} ${venue.preposition} ${venue.title}`;
   } else if (organizer) {

web/src/components/events/eventContainer.module.scss

@@ -2,6 +2,10 @@
   //margin: calc(var(--spacing-sitepadding-block)*-1) calc(var(--spacing-sitepadding-inline)*-1);
 }
 
+.noEvents {
+  padding-bottom: var(--spacing-sitepadding-block);
+}
+
 .eventList {
   padding: var(--spacing-sitepadding-block) 0;
   display: grid;