🔥 Update Photos content when changing filters

src/routes/photos.svelte

@@ -32,6 +32,7 @@
     // Filters
     const defaultCountry = 'all'
     const defaultSort = 'latest'
+    const urlFiltersParams = new URLSearchParams()
     let filtered: boolean = false
     let filterCountry: any = $page.query.get('country') || defaultCountry
     let filterSort: string = $page.query.get('sort') || defaultSort
@@ -39,8 +40,9 @@
 
     // Pages related informations
     let currentPage: number = 1
-    let currentPhotosAmount: number = photos.length
     let ended: boolean
+    let currentPhotosAmount: number
+    $: currentPhotosAmount = photos.length
     $: ended = currentPhotosAmount === totalPhotos
 
 
@@ -57,16 +59,10 @@
 
         // Update URL filtering params from filter values
         if (filtered && filterCountry && filterSort) {
-            // urlFiltersParams.set('country', filterCountry)
-            // urlFiltersParams.set('sort', filterSort)
-            // goto(`${$page.path}?${urlFiltersParams.toString()}`, { keepfocus:true, replaceState:true, noscroll:true })
-
-            // TODO: Request photos from the country of choice
-            // loadPhotos()
-            console.log('load photos')
+            urlFiltersParams.set('country', filterCountry)
+            urlFiltersParams.set('sort', filterSort)
+            goto(`${$page.path}?${urlFiltersParams.toString()}`, { keepfocus:true, replaceState:true, noscroll:true })
         }
-
-        // console.log({ filtered, filterCountry, filterSort })
     }
 
 
@@ -123,7 +119,7 @@
     }
 
     // [function] Load photos helper
-    const loadPhotos = async (page?: number, params?: string) => {
+    const loadPhotos = async (page?: number) => {
         const res = fetchAPI(`
             query {
                 photos: photo (
@@ -300,7 +296,7 @@
             query {
                 photos: photo (
                     filter: {
-                        ${queryCountry ? `location: { country: { slug: { _eq: "${queryCountry}" }} },` : ''}
+                        ${queryCountry !== 'all' ? `location: { country: { slug: { _eq: "${queryCountry}" }} },` : ''}
                         status: { _eq: "published" },
                     },
                     sort: "${querySort === 'latest' ? '-' : ''}date_created",