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:
@@ -1,6 +1,5 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { page } from '$app/stores'
|
import { page } from '$app/stores'
|
||||||
import { browser } from '$app/env'
|
|
||||||
import { goto } from '$app/navigation'
|
import { goto } from '$app/navigation'
|
||||||
import { getContext, onMount } from 'svelte'
|
import { getContext, onMount } from 'svelte'
|
||||||
import { fade, fly } from 'svelte/transition'
|
import { fade, fly } from 'svelte/transition'
|
||||||
@@ -85,16 +84,11 @@
|
|||||||
$: countryFlagId = currentCountry ? currentCountry.flag.id : undefined
|
$: countryFlagId = currentCountry ? currentCountry.flag.id : undefined
|
||||||
|
|
||||||
// Update URL filtering params from filter values
|
// Update URL filtering params from filter values
|
||||||
$: if (browser) {
|
const applyFilters = () => {
|
||||||
urlFiltersParams.set('country', filterCountry)
|
urlFiltersParams.set('country', filterCountry)
|
||||||
urlFiltersParams.set('sort', filterSort)
|
urlFiltersParams.set('sort', filterSort)
|
||||||
|
|
||||||
let path = `${$page.path}?${urlFiltersParams.toString()}`
|
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 })
|
goto(path, { replaceState: true, keepfocus: true, noscroll: true })
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -126,12 +120,14 @@
|
|||||||
const handleCountryChange = ({ detail: value }) => {
|
const handleCountryChange = ({ detail: value }) => {
|
||||||
filterCountry = value === defaultCountry ? defaultCountry : value
|
filterCountry = value === defaultCountry ? defaultCountry : value
|
||||||
currentPage = 1
|
currentPage = 1
|
||||||
|
applyFilters()
|
||||||
}
|
}
|
||||||
|
|
||||||
// Sort select
|
// Sort select
|
||||||
const handleSortChange = ({ detail: value }) => {
|
const handleSortChange = ({ detail: value }) => {
|
||||||
filterSort = value === defaultSort ? defaultSort : value
|
filterSort = value === defaultSort ? defaultSort : value
|
||||||
currentPage = 1
|
currentPage = 1
|
||||||
|
applyFilters()
|
||||||
}
|
}
|
||||||
|
|
||||||
// Reset filters
|
// Reset filters
|
||||||
@@ -139,6 +135,7 @@
|
|||||||
filterCountry = defaultCountry
|
filterCountry = defaultCountry
|
||||||
filterSort = defaultSort
|
filterSort = defaultSort
|
||||||
currentPage = 1
|
currentPage = 1
|
||||||
|
applyFilters()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user