move event filter reset button, don't hide filters when resetting

web/src/components/events/EventContainer.tsx

@@ -54,6 +54,10 @@ export const EventContainer = ({
     setVenue(null);
   };
 
+  const onResetFilters = (e: React.MouseEvent<HTMLButtonElement>) => {
+    resetFilters();
+  };
+
   /* Allow filtering on all categories that are configured to be shown */
   const filterableCategories = eventCategories.filter((x) => x.showInFilters);
 
@@ -139,6 +143,12 @@ export const EventContainer = ({
             <span>Vis kalender</span>
             <Icon type="calendar" />
           </button>
+          {(category || organizer || venue) && (
+            <button onClick={onResetFilters} className="button tertiary">
+              <span>Vis alle</span>
+              <Icon type="noFilter" />
+            </button>
+          )}
           <button onClick={toggleFilter} className="button tertiary">
             <span>Filter</span>
             <Icon type="filter" />

web/src/components/events/EventFilter.tsx

@@ -14,8 +14,6 @@ export const EventFilter = ({
   venues,
   activeVenue,
   setVenue,
-  resetFilters,
-  toggleVisibility,
   isVisible,
 }: {
   eventCategories: EventCategory[];
@@ -27,8 +25,6 @@ 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>) => {
@@ -39,10 +35,6 @@ 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}>
@@ -53,9 +45,7 @@ export const EventFilter = ({
             {eventCategories
               .filter((x) => x.showInFilters)
               .map((category) => (
-                <li
+                <li key={category.slug}>
-                  key={category.slug}
-                >
                   <button
                     className="button toggler"
                     data-active={activeCategory === category.slug}
@@ -105,14 +95,6 @@ export const EventFilter = ({
             ))}
           </select>
         </div>
-        {(activeCategory || activeOrganizer || activeVenue) && (
-          <div className={styles.filterItem}>
-            <button onClick={onResetFilters} className="button tertiary">
-              <span>Vis alle</span>
-              <Icon type="noFilter" />
-            </button>
-          </div>
-        )}
       </div>
     </div>
   );