chore: update nextjs and filter render on client side

components/results-filters.tsx

@@ -72,14 +72,26 @@ function DateFilterPicker({
 export function ResultsFilters({
   formId,
   filters,
+  onFiltersChange,
 }: {
   formId: string;
   filters: ResultFilters;
+  onFiltersChange?: (filters: ResultFilters) => void;
 }) {
   const router = useRouter();
   const [values, setValues] = useState(filters);
   const base = `/admin/form/${formId}/result`;
 
+  const updateValues = (
+    update: (current: ResultFilters) => ResultFilters
+  ) => {
+    setValues((current) => {
+      const next = update(current);
+      onFiltersChange?.(next);
+      return next;
+    });
+  };
+
   const filterQuery = useMemo(() => {
     const params = new URLSearchParams();
     if (values.q) params.set("q", values.q);
@@ -103,6 +115,7 @@ export function ResultsFilters({
   }, [filters]);
 
   useEffect(() => {
+    if (onFiltersChange) return;
     if (filterQuery === appliedQuery) return;
 
     const timeout = window.setTimeout(() => {
@@ -112,7 +125,7 @@ export function ResultsFilters({
     }, 350);
 
     return () => window.clearTimeout(timeout);
-  }, [appliedQuery, base, filterQuery, router]);
+  }, [appliedQuery, base, filterQuery, onFiltersChange, router]);
 
   return (
     <div className="flex flex-col gap-3">
@@ -120,7 +133,7 @@ export function ResultsFilters({
         <Input
           value={values.q}
           onChange={(event) =>
-            setValues((current) => ({ ...current, q: event.target.value }))
+            updateValues((current) => ({ ...current, q: event.target.value }))
           }
           placeholder="Search name or Discord ID"
           aria-label="Search responses"
@@ -128,7 +141,7 @@ export function ResultsFilters({
         <Select
           value={values.edited}
           onValueChange={(edited: ResultFilters["edited"]) =>
-            setValues((current) => ({ ...current, edited }))
+            updateValues((current) => ({ ...current, edited }))
           }
         >
           <SelectTrigger className="w-full lg:w-40" aria-label="Edit status">
@@ -149,7 +162,7 @@ export function ResultsFilters({
               ResultFilters["sort"],
               ResultFilters["direction"],
             ];
-            setValues((current) => ({ ...current, sort, direction }));
+            updateValues((current) => ({ ...current, sort, direction }));
           }}
         >
           <SelectTrigger className="w-full lg:w-44" aria-label="Sort responses">
@@ -168,14 +181,14 @@ export function ResultsFilters({
           label="From date"
           value={values.dateFrom}
           onChange={(dateFrom) =>
-            setValues((current) => ({ ...current, dateFrom }))
+            updateValues((current) => ({ ...current, dateFrom }))
           }
         />
         <DateFilterPicker
           label="Through date"
           value={values.dateTo}
           onChange={(dateTo) =>
-            setValues((current) => ({ ...current, dateTo }))
+            updateValues((current) => ({ ...current, dateTo }))
           }
         />
         <Button variant="outline" asChild>
@@ -189,11 +202,32 @@ export function ResultsFilters({
         filters.edited !== "all" ||
         filters.dateFrom ||
         filters.dateTo) && (
-        <Button variant="ghost" size="sm" className="self-start" asChild>
-          <a href={base}>
-            <X data-icon="inline-start" />
-            Clear filters
-          </a>
+        <Button
+          variant="ghost"
+          size="sm"
+          className="self-start"
+          asChild={!onFiltersChange}
+          onClick={onFiltersChange ? () => updateValues(() => ({
+            q: "",
+            page: 1,
+            sort: "submittedAt",
+            direction: "desc",
+            edited: "all",
+            dateFrom: "",
+            dateTo: "",
+          })) : undefined}
+        >
+          {onFiltersChange ? (
+            <span>
+              <X data-icon="inline-start" />
+              Clear filters
+            </span>
+          ) : (
+            <a href={base}>
+              <X data-icon="inline-start" />
+              Clear filters
+            </a>
+          )}
         </Button>
       )}
     </div>