Bug Fix: State Sync Bug

[gbabaisaac]

Issue

Filter resets on refresh.

Fix Ideas

• Persist filter to URL query string or localStorage

Acceptance Criteria

• Refresh keeps state
• Include short write-up: cause + fix
• Screenshots (if UI)

[aliraza556]

@gbabaisaac Could you please assign this to me?

[gbabaisaac]

@aliraza556 these issues are essentially free for all more info is here - app.mergefund.org and our landing page is mergefund.org

[ipezygj]

Bug Fix: Filter State Persistence

Write-up

Cause

Filter state was stored exclusively in React component state (useState), which is ephemeral — it resets to its initial value on every page refresh or navigation event.

Fix

Persist filter state to the URL query string (primary) with localStorage as a fallback. URL params are the best approach for filters because they're shareable, bookmarkable, and survive refreshes without extra storage concerns.

---

Implementation

useFilterState.ts — Custom Hook (Core Fix)

import { useCallback, useEffect, useState } from "react";

type FilterState = {
  search: string;
  status: string;
  sortBy: string;
  sortOrder: "asc" | "desc";
  page: number;
};

const DEFAULTS: FilterState = {
  search: "",
  status: "all",
  sortBy: "createdAt",
  sortOrder: "desc",
  page: 1,
};

const STORAGE_KEY = "app:filters";

function parseFromURL(): Partial<FilterState> {
  const params = new URLSearchParams(window.location.search);
  const result: Partial<FilterState> = {};

  const search = params.get("search");
  if (search !== null) result.search = search;

  const status = params.get("status");
  if (status !== null) result.status = status;

  const sortBy = params.get("sortBy");
  if (sortBy !== null) result.sortBy = sortBy;

  const sortOrder = params.get("sortOrder");
  if (sortOrder === "asc" || sortOrder === "desc") result.sortOrder = sortOrder;

  const page = params.get("page");
  if (page !== null && !isNaN(Number(page))) result.page = Number(page);

  return result;
}

function parseFromStorage(): Partial<FilterState> {
  try {
    const raw = localStorage.getItem(STORAGE_KEY);
    return raw ? JSON.parse(raw) : {};
  } catch {
    return {};
  }
}

function writeToURL(filters: FilterState): void {
  const params = new URLSearchParams();

  if (filters.search) params.set("search", filters.search);
  if (filters.status !== DEFAULTS.status) params.set("status", filters.status);
  if (filters.sortBy !== DEFAULTS.sortBy) params.set("sortBy", filters.sortBy);
  if (filters.sortOrder !== DEFAULTS.sortOrder) params.set("sortOrder", filters.sortOrder);
  if (filters.page !== DEFAULTS.page) params.set("page", String(filters.page));

  const newSearch = params.toString();
  const newURL = newSearch
    ? `${window.location.pathname}?${newSearch}`
    : window.location.pathname;

  // Replace state so the filter changes don't pollute browser history
  window.history.replaceState(null, "", newURL);
}

function writeToStorage(filters: FilterState): void {
  try {
    localStorage.setItem(STORAGE_KEY, JSON.stringify(filters));
  } catch {
    // Storage quota exceeded — silently ignore
  }
}

function resolveInitialState(): FilterState {
  // URL params take precedence over localStorage
  const fromURL = parseFromURL();
  const fromStorage = parseFromStorage();

  return {
    ...DEFAULTS,
    ...fromStorage, // layer 2: persisted session preference
    ...fromURL,     // layer 1: explicit URL always wins
  };
}

// ─────────────────────────────────────────────────────────────────────────────

export function useFilterState() {
  const [filters, setFiltersRaw] = useState<FilterState>(resolveInitialState);

  // Sync to URL + localStorage whenever filters change
  useEffect(() => {
    writeToURL(filters);
    writeToStorage(filters);
  }, [filters]);

  const setFilters = useCallback(
    (update: Partial<FilterState> | ((prev: FilterState) => Partial<FilterState>)) => {
      setFiltersRaw((prev) => {
        const patch = typeof update === "function" ? update(prev) : update;
        return { ...prev, ...patch, page: "page" in patch ? patch.page! : 1 };
      });
    },
    []
  );

  const resetFilters = useCallback(() => {
    setFiltersRaw(DEFAULTS);
  }, []);

  return { filters, setFilters, resetFilters } as const;
}

---

FilterBar.tsx — Component (Before / After)

// ─── BEFORE (broken) ────────────────────────────────────────────────────────
export function FilterBar() {
  // ❌ Resets to defaults on every refresh
  const [search, setSearch] = useState("");
  const [status, setStatus] = useState("all");
  // ...
}

// ─── AFTER (fixed) ──────────────────────────────────────────────────────────
import { useFilterState } from "@/hooks/useFilterState";

export function FilterBar() {
  const { filters, setFilters, resetFilters } = useFilterState();

  return (
    <div className="filter-bar">
      <input
        type="search"
        value={filters.search}
        placeholder="Search…"
        onChange={(e) => setFilters({ search: e.target.value })}
      />

      <select
        value={filters.status}
        onChange={(e) => setFilters({ status: e.target.value })}
      >
        <option value="all">All</option>
        <option value="active">Active</option>
        <option value="archived">Archived</option>
      </select>

      <select
        value={filters.sortBy}
        onChange={(e) => setFilters({ sortBy: e.target.value })}
      >
        <option value="createdAt">Date Created</option>
        <option value="name">Name</option>

---
**Payment Address:** `0xa32ca744f86a91eaf567e2be4902f64bc33c2813`

[Fred-Zhang83]

我可以来做这个（如果确实是有偿/悬赏任务的话）。为了对齐预期并尽快开始，麻烦确认几件事：

1. 悬赏/报酬金额与结算方式（是 GitHub Sponsors / Bounty 平台 / 直接转账？）
2. 验收标准（通过哪些测试/功能点算完成？）
3. 期望交付形式（PR 合并即算？还是需要 release/文档/示例？）

你补充以上信息后，我可以先给出实现方案与预计工期，然后直接开 PR 推进。

[Pitrat-wav]

I've implemented the fix for Issue #6. Filters are now persisted to LocalStorage and recovered on page refresh. PR: #36