From 887d4b6a82a29b846cc9d7bebc8f708998ad36ff Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Sun, 21 Nov 2021 19:47:34 +0100
Subject: [PATCH] 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
---
 src/routes/photos.svelte | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/src/routes/photos.svelte b/src/routes/photos.svelte
index 22dd470..47fda4b 100644
--- a/src/routes/photos.svelte
+++ b/src/routes/photos.svelte
@@ -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()
     }