From eb026cabad500b61376f8a588ce51a7c80e90d89 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Sat, 23 Oct 2021 15:34:28 +0200
Subject: [PATCH] Fix Photos page reactivity when changing country

---
 src/routes/photos.svelte | 28 ++++++++++++-------------
 src/utils/helpers.ts     | 44 ++++++++++++++++++++--------------------
 2 files changed, 35 insertions(+), 37 deletions(-)

diff --git a/src/routes/photos.svelte b/src/routes/photos.svelte
index 2ee4e29..accc973 100644
--- a/src/routes/photos.svelte
+++ b/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
      */
-    $: {
-        // Define country flag from selection
-        if (filterCountry !== defaultCountry) {
-            countryFlagId = countries.find((country: any) => country.slug === filterCountry).flag.id
-        } else {
-            countryFlagId = undefined
-        }
+    $: countryFlagId = currentCountry ? currentCountry.flag.id : undefined
 
-        // Update URL filtering params from filter values
-        if (browser) {
-            urlFiltersParams.set('country', filterCountry)
-            urlFiltersParams.set('sort', filterSort)
-            goto(`${$page.path}?${urlFiltersParams.toString()}`, { replaceState: true, keepfocus: true, noscroll: true })
-        }
+    // Update URL filtering params from filter values
+    $: if (browser) {
+        urlFiltersParams.set('country', filterCountry)
+        urlFiltersParams.set('sort', filterSort)
+
+        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=""
 />
diff --git a/src/utils/helpers.ts b/src/utils/helpers.ts
index f7796dd..667482c 100644
--- a/src/utils/helpers.ts
+++ b/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}`
-}
\ No newline at end of file
+}
+
+
+/**
+ * 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}`
+// }
\ No newline at end of file