Add "Clear filters" option

Neon-20 · May 29, 2024 · abbe47f · abbe47f
1 parent cb08b75
commit abbe47f
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 3 deletions.
diff --git a/apps/web/ui/analytics/toggle.tsx b/apps/web/ui/analytics/toggle.tsx
@@ -1,4 +1,8 @@
-import { INTERVAL_DATA, INTERVAL_DISPLAYS } from "@/lib/analytics/constants";
+import {
+  INTERVAL_DATA,
+  INTERVAL_DISPLAYS,
+  VALID_ANALYTICS_FILTERS,
+} from "@/lib/analytics/constants";
 import { validDateRangeForPlan } from "@/lib/analytics/utils";
 import useDomains from "@/lib/swr/use-domains";
 import useTags from "@/lib/swr/use-tags";
@@ -294,6 +298,11 @@ export default function Toggle() {
                       del: key,
                     })
                   }
+                  onRemoveAll={() =>
+                    queryParams({
+                      del: ["domain", "linkId", ...VALID_ANALYTICS_FILTERS],
+                    })
+                  }
                 />
               )}
               {!isPublicStatsPage && key && <SharePopover />}

diff --git a/packages/ui/src/filter/filter-select.tsx b/packages/ui/src/filter/filter-select.tsx
@@ -1,6 +1,6 @@
 import { cn } from "@dub/utils";
 import { Command } from "cmdk";
-import { Check, ChevronDown, ListFilter } from "lucide-react";
+import { Check, ChevronDown, FilterX, ListFilter } from "lucide-react";
 import {
   CSSProperties,
   ReactNode,
@@ -20,6 +20,7 @@ type FilterSelectProps = {
   filters: Filter[];
   onSelect: (key: string, value: string) => void;
   onRemove: (key: string) => void;
+  onRemoveAll?: () => void;
   activeFilters?: {
     key: Filter["key"];
     value: FilterOption["value"];
@@ -32,6 +33,7 @@ export function FilterSelect({
   filters,
   onSelect,
   onRemove,
+  onRemoveAll,
   activeFilters,
   children,
   className,
@@ -128,6 +130,19 @@ export function FilterSelect({
                       onSelect={() => openFilter(filter.key)}
                     />
                   ))}
+                  {onRemoveAll && activeFilters?.length !== 0 && (
+                    <>
+                      <Command.Separator className="my-2 border-b border-gray-100" />
+                      <FilterButton
+                        icon={FilterX}
+                        label="Clear filters"
+                        onSelect={() => {
+                          onRemoveAll();
+                          setIsOpen(false);
+                        }}
+                      />
+                    </>
+                  )}
                   <NoMatches />
                 </Command.List>
               ) : (
@@ -208,7 +223,7 @@ function FilterButton({
   label,
   right,
   onSelect,
-}: (Filter | FilterOption) & {
+}: Omit<Filter | FilterOption, "key" | "value"> & {
   right?: ReactNode;
   onSelect: () => void;
 }) {