add button for disabling all filters

web/src/components/events/EventContainer.tsx

@@ -43,6 +43,12 @@ export const EventContainer = ({
   const [organizer, setOrganizer] = useQueryState("organizer", parseAsString);
   const [venue, setVenue] = useQueryState("venue", parseAsString);
 
+  const resetFilters = () => {
+    setCategory(null)
+    setOrganizer(null)
+    setVenue(null)
+  }
+
   /* Allow filtering on all categories that are configured to be shown */
   const filterableCategories = eventCategories.filter((x) => x.showInFilters);
 
@@ -138,6 +144,8 @@ export const EventContainer = ({
           venues={filterableVenues}
           setVenue={setVenue}
           activeVenue={venue}
+          resetFilters={resetFilters}
+          toggleVisibility={toggleFilter}
           isVisible={showFilter}
         />
         <EventFilterExplained
@@ -155,8 +163,6 @@ export const EventContainer = ({
   );
 };
 
-const ActiveFilterExplained = ({})
-
 const EventList = ({ events }: { events: EventFragment[] }) => {
   return (
     <ul className={styles.eventList}>

web/src/components/events/EventFilter.tsx

@@ -2,6 +2,7 @@ import { EventCategory, EventOrganizer } from "@/lib/event";
 
 import styles from "./eventFilter.module.scss";
 import { VenueFragment } from "@/gql/graphql";
+import Icon from "../general/Icon";
 
 export const EventFilter = ({
   eventCategories,
@@ -13,6 +14,8 @@ export const EventFilter = ({
   venues,
   activeVenue,
   setVenue,
+  resetFilters,
+  toggleVisibility,
   isVisible,
 }: {
   eventCategories: EventCategory[];
@@ -24,6 +27,8 @@ export const EventFilter = ({
   venues: VenueFragment[];
   activeVenue: string | null;
   setVenue: (slug: string | null) => void;
+  resetFilters: () => void;
+  toggleVisibility: () => void;
   isVisible: boolean;
 }) => {
   const onOrganizerSelect = (e: React.ChangeEvent<HTMLSelectElement>) => {
@@ -34,6 +39,10 @@ export const EventFilter = ({
     const venue = e.target.value;
     setVenue(venue === "" ? null : venue);
   };
+  const onResetFilters = (e: React.MouseEvent<HTMLButtonElement>) => {
+    resetFilters();
+    toggleVisibility();
+  };
 
   return (
     <div className={styles.eventFilter} data-show={isVisible}>
@@ -101,6 +110,14 @@ export const EventFilter = ({
             </select>
           </div>
         </div>
+        {(activeCategory || activeOrganizer || activeVenue) && (
+          <div className={styles.filterItem}>
+            <button onClick={onResetFilters} className="button tertiary">
+              <span>Vis alle</span>
+              <Icon />
+            </button>
+          </div>
+        )}
       </div>
     </div>
   );