From d9708c5bfec0bf3c656d47e0a8490bb358d44903 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Tue, 12 Nov 2024 15:01:36 +0100
Subject: [PATCH] fix: bring back updated data on Photos page

---
 .../src/routes/(site)/photos/+page.svelte     | 45 +++++++++++--------
 1 file changed, 26 insertions(+), 19 deletions(-)

diff --git a/apps/website/src/routes/(site)/photos/+page.svelte b/apps/website/src/routes/(site)/photos/+page.svelte
index 6be5614..0c640f0 100644
--- a/apps/website/src/routes/(site)/photos/+page.svelte
+++ b/apps/website/src/routes/(site)/photos/+page.svelte
@@ -4,7 +4,7 @@
     import { PUBLIC_FILTERS_DEFAULT_COUNTRY, PUBLIC_FILTERS_DEFAULT_SORT, PUBLIC_GRID_INCREMENT } from '$env/static/public'
     import { page, navigating } from '$app/stores'
     import { goto } from '$app/navigation'
-    import { getContext } from 'svelte'
+    import { getContext, onMount } from 'svelte'
     import { fly } from 'svelte/transition'
     import { quartOut as quartOutSvelte } from 'svelte/easing'
     import dayjs from 'dayjs'
@@ -29,9 +29,9 @@
 
     let { data } = $props()
 
-    let photos = $state<any[]>(data.photos)
+    let photos = $state<any[]>([...data.photos])
     const totalPhotos = $derived<number>(data.totalPhotos)
-    const { filteredCountryExists, settings }: {  filteredCountryExists: boolean, settings: any } = data
+    const { filteredCountryExists, settings }: { filteredCountryExists: boolean, settings: any } = data
     const { countries, locations }: any = getContext('global')
 
     dayjs.extend(relativeTime)
@@ -73,15 +73,13 @@
     /**
      * Handle URL query params
      */
-    const countryFlagId = $derived(currentCountry ? currentCountry.flag.id : undefined)
-
     // Update URL filtering params from filter values
     const applyFilters = () => {
         urlFiltersParams.set('country', filterCountry)
         urlFiltersParams.set('sort', filterSort)
 
-        let path = `${$page.url.pathname}?${urlFiltersParams.toString()}`
-        goto(path, { replaceState: true, keepFocus: true, noScroll: true })
+        const path = `${$page.url.pathname}?${urlFiltersParams.toString()}`
+        goto(path, { keepFocus: true, replaceState: true, noScroll: true })
     }
 
 
@@ -109,14 +107,14 @@
      * Filters change events
      */
     /** Country select */
-    const handleCountryChange = ({ detail: value }) => {
+    const handleCountryChange = (value: string) => {
         filterCountry = value === defaultCountry ? defaultCountry : value
         currentPage = 1
         applyFilters()
     }
 
     /** Sort select */
-    const handleSortChange = ({ detail: value }) => {
+    const handleSortChange = (value: string) => {
         filterSort = value === defaultSort ? defaultSort : value
         currentPage = 1
         applyFilters()
@@ -197,6 +195,13 @@
     }
 
 
+    // Workaround: Reactive photos based on data
+    $effect(() => {
+        if (data.photos && data.photos !== photos) {
+            photos = data.photos
+        }
+    })
+
     $effect(() => {
         /**
          * Observers
@@ -233,6 +238,16 @@
         existingPhotos.forEach(el => observerPhotos.observe(el))
 
 
+        // Destroy
+        return () => {
+            // Disconnect observers
+            observerPhotos && observerPhotos.disconnect()
+            mutationPhotos && mutationPhotos.disconnect()
+        }
+    })
+
+
+    onMount(() => {
         /**
          * Animations
          */
@@ -256,14 +271,6 @@
 
         // Run animation
         requestAnimationFrame(animation.play)
-
-
-        // Destroy
-        return () => {
-            // Disconnect observers
-            observerPhotos && observerPhotos.disconnect()
-            mutationPhotos && mutationPhotos.disconnect()
-        }
     })
 </script>
 
@@ -307,10 +314,10 @@
                             onchange={handleCountryChange}
                             value={filterCountry}
                         >
-                            {#if countryFlagId}
+                            {#if currentCountry?.flag?.id}
                                 <Image
                                     class="icon"
-                                    id={countryFlagId}
+                                    id={currentCountry?.flag?.id}
                                     sizeKey="square-small"
                                     width={26} height={26}
                                     alt="{filterCountry} flag"