Manually go to filtered url with urls on Photos

Using a reactive variable would trigger the `goto` by coming to the page and cause issues
This commit is contained in:
2021-11-21 19:47:34 +01:00
parent 77bd85b408
commit 887d4b6a82

View File

@@ -1,6 +1,5 @@
<script lang="ts">
import { page } from '$app/stores'
import { browser } from '$app/env'
import { goto } from '$app/navigation'
import { getContext, onMount } from 'svelte'
import { fade, fly } from 'svelte/transition'
@@ -85,16 +84,11 @@
$: countryFlagId = currentCountry ? currentCountry.flag.id : undefined
// Update URL filtering params from filter values
$: if (browser) {
const applyFilters = () => {
urlFiltersParams.set('country', filterCountry)
urlFiltersParams.set('sort', filterSort)
let path = `${$page.path}?${urlFiltersParams.toString()}`
console.log(path)
// TODO: Load new params properly?
// 1. How to properly navigate to new page / 2. Avoid scrolling to top (from global __layout)
// Feels like it calls the url multiple times
goto(path, { replaceState: true, keepfocus: true, noscroll: true })
}
@@ -126,12 +120,14 @@
const handleCountryChange = ({ detail: value }) => {
filterCountry = value === defaultCountry ? defaultCountry : value
currentPage = 1
applyFilters()
}
// Sort select
const handleSortChange = ({ detail: value }) => {
filterSort = value === defaultSort ? defaultSort : value
currentPage = 1
applyFilters()
}
// Reset filters
@@ -139,6 +135,7 @@
filterCountry = defaultCountry
filterSort = defaultSort
currentPage = 1
applyFilters()
}