peter/siftlode
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor(filters): stop mirroring filters into the URL; localStorage is canonical

Browse source 
Filters/sort/search/scope were written to the address bar on every change (a leftover
from sharing reproducible examples), giving two sources of truth. Make localStorage the
single source: drop the automatic syncUrl from setFilters/setPage. A "Share view" link
still hydrates filters on first load, after which the query is stripped from the URL
(stripUrlParams) so it stays clean. syncUrl is replaced by shareUrl (builds the link on
demand); the serializer now also round-trips scope.
This commit is contained in:
npeter83 2026-06-15 12:29:43 +02:00
parent 581719401e
commit 3e90fe2e5b
2 changed files with 30 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

16
frontend/src/App.tsx
View file

@ -10,7 +10,7 @@ import {
saveLocalTheme,
type ThemePrefs,
} from "./lib/theme";
import { hasFilterParams, paramsToFilters, readPage, syncUrl, type Page } from "./lib/urlState";
import { hasFilterParams, paramsToFilters, readPage, stripUrlParams, type Page } from "./lib/urlState";
import {
loadLayout,
normalizeLayout,
@ -85,12 +85,10 @@ export default function App() {
function setFilters(next: FeedFilters) {
setFiltersState(next);
localStorage.setItem(FILTERS_KEY, JSON.stringify(next));
syncUrl(next, page);
}
function setPage(next: Page) {
setPageState(next);
syncUrl(filters, next);
}
function setSidebarLayout(next: SidebarLayout) {
@ -101,8 +99,16 @@ export default function App() {
useEffect(() => applyTheme(theme), [theme]);
// Reflect the initial filters + page into the address bar so the URL is always shareable.
useEffect(() => syncUrl(filters, page), []); // eslint-disable-line react-hooks/exhaustive-deps
// Filters live in localStorage, not the address bar. If we arrived via a "Share view"
// link, its params have already hydrated the initial state — persist them and strip the
// query so the URL stays clean from here on.
useEffect(() => {
const params = new URLSearchParams(window.location.search);
if (hasFilterParams(params) || params.has("page")) {
localStorage.setItem(FILTERS_KEY, JSON.stringify(filters));
stripUrlParams();
}
}, []); // eslint-disable-line react-hooks/exhaustive-deps
const meQuery = useQuery({ queryKey: ["me"], queryFn: api.me });