From 53505c0a5b3b96b14acda12b5683d9bbd75b4453 Mon Sep 17 00:00:00 2001
From: Ben Senescu <44480372+bensenescu@users.noreply.github.com>
Date: Thu, 9 Apr 2026 16:43:47 -0400
Subject: [PATCH] fix: fix runtime error when clearing backlinks filter (#105)

---
 .../backlinks/BacklinksFilterPanel.tsx        |  1 +
 .../backlinks/backlinksFilterTypes.ts         |  6 +-
 .../features/backlinks/useBacklinksFilters.ts | 63 ++++++++++---------
 3 files changed, 39 insertions(+), 31 deletions(-)

diff --git a/src/client/features/backlinks/BacklinksFilterPanel.tsx b/src/client/features/backlinks/BacklinksFilterPanel.tsx
index 3ba5193..fc908cc 100644
--- a/src/client/features/backlinks/BacklinksFilterPanel.tsx
+++ b/src/client/features/backlinks/BacklinksFilterPanel.tsx
@@ -324,6 +324,7 @@ export function BacklinksFilterPanel({
           ) : null}
         </div>
         <button
+          type="button"
           className="btn btn-xs btn-ghost gap-1"
           onClick={current.reset}
           disabled={current.activeFilterCount === 0}
diff --git a/src/client/features/backlinks/backlinksFilterTypes.ts b/src/client/features/backlinks/backlinksFilterTypes.ts
index a391951..0091732 100644
--- a/src/client/features/backlinks/backlinksFilterTypes.ts
+++ b/src/client/features/backlinks/backlinksFilterTypes.ts
@@ -7,9 +7,9 @@ export type BacklinksTabFilterValues = {
   maxLinkAuthority: string;
   minSpamScore: string;
   maxSpamScore: string;
-  linkType: "" | "dofollow" | "nofollow";
-  hideLost: "" | "true";
-  hideBroken: "" | "true";
+  linkType: string;
+  hideLost: string;
+  hideBroken: string;
 };
 
 export type ReferringDomainsFilterValues = {
diff --git a/src/client/features/backlinks/useBacklinksFilters.ts b/src/client/features/backlinks/useBacklinksFilters.ts
index 4245d55..479d8b6 100644
--- a/src/client/features/backlinks/useBacklinksFilters.ts
+++ b/src/client/features/backlinks/useBacklinksFilters.ts
@@ -12,72 +12,79 @@ import { countActiveFilters } from "./backlinksFiltering";
 
 const STORAGE_KEY_PREFIX = "backlinks-filters:";
 
+type FilterValues = Record<string, string>;
+
 function isRecord(value: unknown): value is Record<string, unknown> {
   return typeof value === "object" && value !== null;
 }
 
-function loadFromStorage<T extends Record<string, string>>(
-  tab: string,
-  fallback: T,
-): T {
+function loadFromStorage<T extends FilterValues>(tab: string, fallback: T): T {
+  const fallbackClone = { ...fallback };
+
   try {
     const raw = localStorage.getItem(`${STORAGE_KEY_PREFIX}${tab}`);
-    if (!raw) return fallback;
+    if (!raw) return fallbackClone;
+
     const parsed: unknown = JSON.parse(raw);
-    if (!isRecord(parsed)) return fallback;
-    const result = { ...fallback };
-    for (const key of Object.keys(fallback)) {
-      const val = parsed[key];
-      if (typeof val === "string") {
-        (result as Record<string, string>)[key] = val;
+    if (!isRecord(parsed)) return fallbackClone;
+
+    const result = { ...fallbackClone };
+    for (const key in fallback) {
+      const value = parsed[key];
+      if (typeof value === "string") {
+        Object.assign(result, { [key]: value });
       }
     }
+
     return result;
   } catch {
-    return fallback;
+    return fallbackClone;
   }
 }
 
-function saveToStorage(tab: string, values: Record<string, string>) {
+function saveToStorage(tab: string, values: FilterValues) {
   try {
     localStorage.setItem(`${STORAGE_KEY_PREFIX}${tab}`, JSON.stringify(values));
   } catch {
-    // storage full — silently ignore
+    // storage full - silently ignore
   }
 }
 
-function useTabFilterForm<T extends Record<string, string>>(
-  tab: string,
-  emptyValues: T,
-) {
-  const form = useForm({ defaultValues: loadFromStorage(tab, emptyValues) });
-  const values = useStore(form.store, (s) => s.values);
+function useTabFilters<T extends FilterValues>(tab: string, emptyValues: T) {
+  const [defaultValues] = useState<T>(() =>
+    loadFromStorage(tab, { ...emptyValues }),
+  );
+  const form = useForm({ defaultValues });
+  const values = useStore(form.store, (state) => state.values);
 
   useEffect(() => {
     saveToStorage(tab, values);
   }, [tab, values]);
 
   const reset = useCallback(() => {
-    form.reset(emptyValues);
-  }, [form, emptyValues]);
+    form.reset({ ...emptyValues }, { keepDefaultValues: true });
+  }, [emptyValues, form]);
 
-  const activeFilterCount = countActiveFilters(values);
-
-  return { form, values, reset, activeFilterCount };
+  return {
+    form,
+    values,
+    reset,
+    activeFilterCount: countActiveFilters(values),
+  };
 }
 
 export function useBacklinksFilters() {
   const [showFilters, setShowFilters] = useState(false);
 
-  const backlinks = useTabFilterForm<BacklinksTabFilterValues>(
+  const backlinks = useTabFilters<BacklinksTabFilterValues>(
     "backlinks",
     EMPTY_BACKLINKS_FILTERS,
   );
-  const domains = useTabFilterForm<ReferringDomainsFilterValues>(
+  const domains = useTabFilters<ReferringDomainsFilterValues>(
     "domains",
     EMPTY_REFERRING_DOMAINS_FILTERS,
   );
-  const pages = useTabFilterForm<TopPagesFilterValues>(
+  const pages = useTabFilters<TopPagesFilterValues>(
     "pages",
     EMPTY_TOP_PAGES_FILTERS,
   );