Creepso/miru
1
0
Fork 0
mirror of https://github.com/ThaUnknown/miru.git synced 2026-03-11 22:15:35 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Update +page.svelte

Browse source 
Added snapshot functionality that retains the search parameters when leaving the page.

They are restored if the user navigates back via a back button.
This commit is contained in:
Chinu9891 2025-08-14 20:28:52 +01:00 committed by GitHub
parent dd7a54b3ad
commit 85a1efb1f4
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 24 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
src/routes/app/search/+page.svelte
View file

@ -6,11 +6,11 @@
import { onDestroy, tick } from 'svelte'
import MagnifyingGlass from 'svelte-radix/MagnifyingGlass.svelte'
import { toast } from 'svelte-sonner'
import { genres, years, seasons, formats, status, sort, onlist } from './values'
import type { Search } from '$lib/modules/anilist/queries'
import type { VariablesOf } from 'gql.tada'
import type { Snapshot } from '../$types'
import { replaceState } from '$app/navigation'
import { page } from '$app/stores'
@ -98,6 +98,21 @@
onList: [] as format[]
}
// take a 'snapshot' of the latest search right before leaving the page
// latest search is restored if user clicks back
export const snapshot: Snapshot = {
capture: () => ({
search: search,
inputText: inputText,
}),
restore: (value) => {
if (value) {
search = value.search;
inputText = value.inputText;
}
}
};
let pageNumber = 1
let inputText = ''
@ -122,7 +137,7 @@
trace = undefined
}
let media: Array<ReturnType<typeof client.search>> = []
let media: Array<ReturnType<typeof client.search>> = [];
// these are required, because #each key re-renders when the array changes, this doesnt repaint the ui, but re-triggers any active subscriptions
// and this re-runs the anilist queries as
@ -132,9 +147,9 @@
// handlers
function searchChanged (s: typeof search) {
pageNumber = 1
media = [searchQuery(filterEmpty(s), 1)]
function searchChanged(s: typeof search) {
pageNumber = 1;
media = [searchQuery(filterEmpty(s), 1)];
}
function searchQuery (filter: Partial<typeof search>, page: number) {
@ -234,7 +249,7 @@
let pressed = false
</script>
<div class='flex flex-col h-full overflow-y-auto overflow-x-clip -ml-14 pl-14 z-20 min-w-0 grow pointer-events-none' use:dragScroll use:infiniteScroll>
<div id="scroll" class='flex flex-col h-full overflow-y-auto overflow-x-clip -ml-14 pl-14 z-20 min-w-0 grow pointer-events-none' use:dragScroll use:infiniteScroll>
<div class='sticky top-0 z-20 px-2 sm:px-10 pointer-events-auto shrink-0 overflow-clip bg-black'>
<div class='flex flex-wrap pt-5'>
<div class='grid items-center min-w-44 flex-1 md:basis-auto md:w-1/4 p-2'>
@ -319,7 +334,9 @@
</button>
{/each}
</div>
</div>
<div class='flex flex-wrap md:px-7 justify-center pointer-events-auto'>
{#each media as query, i (i)}
{#if trace}
@ -329,4 +346,5 @@
{/if}
{/each}
</div>
</div>