web: allow filtering on venues and organizers with no upcoming events, reset filter if invalid

web/src/components/events/EventContainer.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useEffect } from "react";
 import {
   useQueryState,
   parseAsStringLiteral,
@@ -71,7 +72,8 @@ export const EventContainer = ({
 
   /*
     Allow filtering on all organizers that have upcoming events
-    Filtering on an organizer with no upcoming events will work, but be hidden from dropdown
+    Filtering on an organizer with no upcoming events will work,
+    and in that case it's included in the dropdown
   */
   const uniqueOrganizers: string[] = unique(
     events
@@ -82,9 +84,20 @@ export const EventContainer = ({
       .filter((x) => typeof x === "string" && x !== "")
   );
   const filterableOrganizers = uniqueOrganizers
-    .map((slug) => eventOrganizers.find((haystack) => haystack.slug === slug))
+    .map((slug) =>
+      eventOrganizers.find(
+        (haystack) => haystack.slug === slug || haystack.slug == organizer
+      )
+    )
     .filter((x) => x !== undefined) as EventOrganizer[];
 
+  /* Reset organizer if slug is invalid */
+  useEffect(() => {
+    if (!eventOrganizers.find((haystack) => haystack.slug === organizer)) {
+      setOrganizer(null);
+    }
+  }, [eventOrganizers, organizer]);
+
   /*
     Allow filtering on all venues that have upcoming events
     Filtering on a venue with no upcoming events will work,
@@ -105,6 +118,13 @@ export const EventContainer = ({
     .map((x) => venues.find((haystack) => haystack.slug === x.slug))
     .filter((x) => x !== undefined) as VenueFragment[];
 
+  /* Reset venue if slug is invalid */
+  useEffect(() => {
+    if (!venues.find((haystack) => haystack.slug === venue)) {
+      setVenue(null);
+    }
+  }, [venues, venue]);
+
   const filteredEvents = events
     .filter(
       (x) =>

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

@@ -3,7 +3,6 @@
 }
 
 .noEvents {
-  padding-top: var(--spacing-sitepadding-block);
   padding-bottom: var(--spacing-sitepadding-block);
 }