fix: search reset

src/components/templates/LevelList.svelte

@@ -12,21 +12,27 @@
   import LevelListItem from '@organisms/levels/list/LevelListItem.svelte';
   import PageContainer from '@atoms/common/PageContainer.svelte';
   import { onDestroy, onMount } from 'svelte';
-  import { createInfiniteQuery } from '@tanstack/svelte-query';
+  import { createInfiniteQuery, getQueryClientContext } from '@tanstack/svelte-query';
   import VirtualList from '../utils/VirtualList.svelte';
   import LoadingSpinner from '../atoms/common/LoadingSpinner.svelte';
 
   let randomSeed: Writable<number | null> = writable(null);
 
+  let mounted = false;
+
   const pageSize = 30;
 
-  const query = createInfiniteQuery({
+  let query = createInfiniteQuery({
     queryKey: ['levels'],
     queryFn: ({ pageParam }) => fetchPage(pageParam),
     initialPageParam: 0,
-    getNextPageParam: (_lastPage, page) => page.length
+    getNextPageParam: (lastPage, pages) => {
+      return lastPage.length === pageSize ? pages.length + 1 : null;
+    }
   });
 
+  const queryClient = getQueryClientContext();
+
   // $: addItems = async (start = 0) => {
   //   if (loading) return;
   //   loading = true;
@@ -59,7 +65,7 @@
       query: analyzed.normal.trim(),
 
       offset: start,
-      amount: '25',
+      amount: pageSize,
 
       includeTags: settings.filter.tags.include.join(','),
       excludeTags: settings.filter.tags.exclude.join(',')
@@ -135,11 +141,16 @@
 
   $: reset = async () => {
     $randomSeed = null;
+
+    queryClient.resetQueries({
+      queryKey: ['levels']
+    });
   };
 
   let timeout: number | null = null;
 
-  searchSettingStore.subscribe(() => {
+  const unsubscribeSettings = searchSettingStore.subscribe(() => {
+    if (!mounted) return;
     if (browser) {
       if (timeout) {
         clearTimeout(timeout);
@@ -150,7 +161,9 @@
     }
   });
 
-  let mounted = false;
+  onDestroy(() => {
+    unsubscribeSettings();
+  });
 
   $: {
     if (browser && mounted) {

src/routes/+layout.svelte

@@ -99,7 +99,13 @@
 
   const gtagContent = getGtagContent();
 
-  const queryClient = new QueryClient();
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        enabled: browser
+      }
+    }
+  });
 
   onMount(() => {
     if (partyTownScriptEl) {

src/stores/localStorage.ts

@@ -0,0 +1,25 @@
+import { browser } from '$app/environment';
+import { writable, type Writable } from 'svelte/store';
+
+export function createLocalStorage<T>(name: string, defaultValue: T): Writable<T> {
+  const w = writable(defaultValue);
+
+  if (!browser) return w;
+
+  const data = localStorage.getItem(name);
+
+  if (data) {
+    try {
+      const parsed = JSON.parse(data);
+      w.set(parsed as T);
+    } catch (e) {
+      console.warn(`Failed to load data from local stroage key ${name}`);
+    }
+  }
+
+  w.subscribe((v) => {
+    localStorage.setItem(name, JSON.stringify(v));
+  });
+
+  return w;
+}

src/stores/search.ts

@@ -1,5 +1,6 @@
 import { parseSearchString, SearchStringAnalyzer } from '@/utils/search';
-import { derived, writable } from 'svelte/store';
+import { derived } from 'svelte/store';
+import { createLocalStorage } from './localStorage';
 
 type Filters = {
   tags: {
@@ -57,7 +58,10 @@ export const defaultSearchSettings = (): SearchSettings => ({
   }
 });
 
-export const searchSettingStore = writable<SearchSettings>(defaultSearchSettings());
+export const searchSettingStore = createLocalStorage<SearchSettings>(
+  'searchSettings',
+  defaultSearchSettings()
+);
 
 export const parsedQuery = derived(searchSettingStore, (values) => {
   return new SearchStringAnalyzer(parseSearchString(values.query));