Fix Photos page reactivity when changing country

src/routes/photos.svelte

@@ -8,6 +8,7 @@
     import dayjs from 'dayjs'
     import relativeTime from 'dayjs/plugin/relativeTime.js'
     import { map, lerp } from '$utils/functions'
+    import { getAssetUrlKey } from '$utils/helpers'
     // Components
     import Metas from '$components/Metas.svelte'
     import IconEarth from '$components/atoms/IconEarth.svelte'
@@ -28,7 +29,7 @@
     const { countries }: any = getContext('global')
 
     let buttonReset: HTMLElement
-    let buttonShuffle: HTMLElement
+    // let buttonShuffle: HTMLElement
     let scrollY: number
     let innerWidth: number, innerHeight: number
 
@@ -40,6 +41,7 @@
     let countryFlagId: string
     $: filtered = filterCountry !== defaultCountry || filterSort !== defaultSort
     $: latestPhoto = photos[0]
+    $: currentCountry = countries.find((country: any) => country.slug === filterCountry)
 
     // Pages related informations
     let currentPage: number = 1
@@ -61,23 +63,19 @@
     /**
      * Define URL params
      */
-    $: {
+    $: countryFlagId = currentCountry ? currentCountry.flag.id : undefined
-        // Define country flag from selection
-        if (filterCountry !== defaultCountry) {
-            countryFlagId = countries.find((country: any) => country.slug === filterCountry).flag.id
-        } else {
-            countryFlagId = undefined
-        }
 
-        // Update URL filtering params from filter values
+    // Update URL filtering params from filter values
-        if (browser) {
+    $: if (browser) {
-            urlFiltersParams.set('country', filterCountry)
+        urlFiltersParams.set('country', filterCountry)
-            urlFiltersParams.set('sort', filterSort)
+        urlFiltersParams.set('sort', filterSort)
-            goto(`${$page.path}?${urlFiltersParams.toString()}`, { replaceState: true, keepfocus: true, noscroll: true })
+
-        }
+        let path: string = `${$page.path}?${urlFiltersParams.toString()}`
+        goto(path, { replaceState: true, keepfocus: true, noscroll: true })
     }
 
 
+
     /**
      * Select change events
      */
@@ -164,7 +162,7 @@
 </script>
 
 <Metas
-    title="Photos"
+    title="Houses Of - {filterCountry === defaultCountry ? `Photos` : `Photos of ${currentCountry.name}`}"
     description=""
     image=""
 />

src/utils/helpers.ts

@@ -1,27 +1,6 @@
 import { API_URL } from '$utils/api'
 
 
-/**
- * Get a Directus asset URL from parameters
- */
-export const getAssetUrl = (
-    id: string,
-    width: number,
-    height: number,
-    quality?: number,
-    fit: string = 'inside',
-    format?: string
-) => {
-    let args = ''
-
-    // Add arguments to URL if specified
-    if (quality) args += `&quality=${quality}`
-    if (format) args += `&format=${format}`
-
-    return `${API_URL}/assets/${id}?width=${width}&height=${height}&fit=${fit}${args}`
-}
-
-
 /**
  * Get a Directus asset URL from parameters
  */
@@ -30,4 +9,25 @@ export const getAssetUrlKey = (
     key: string
 ) => {
     return `${API_URL}/assets/${id}?key=${key}`
-}
+}
+
+
+/**
+ * Get a Directus asset URL from parameters
+ */
+// export const getAssetUrl = (
+//     id: string,
+//     width: number,
+//     height: number,
+//     quality?: number,
+//     fit: string = 'inside',
+//     format?: string
+// ) => {
+//     let args = ''
+
+//     // Add arguments to URL if specified
+//     if (quality) args += `&quality=${quality}`
+//     if (format) args += `&format=${format}`
+
+//     return `${API_URL}/assets/${id}?width=${width}&height=${height}&fit=${fit}${args}`
+// }