From 3bbfb8c5dd2b433db831c3c0bbe20a77ebbc93b5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Sat, 3 Aug 2024 12:03:25 +0200
Subject: [PATCH] fix: avoid freeze due to SK replaceState

---
 .../[country]/[location]/[photo]/+page.svelte | 34 +++++++++----------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/apps/website/src/routes/(site)/[country]/[location]/[photo]/+page.svelte b/apps/website/src/routes/(site)/[country]/[location]/[photo]/+page.svelte
index 5283011..a731633 100644
--- a/apps/website/src/routes/(site)/[country]/[location]/[photo]/+page.svelte
+++ b/apps/website/src/routes/(site)/[country]/[location]/[photo]/+page.svelte
@@ -4,7 +4,7 @@
 
 <script lang="ts">
     import { page, navigating } from '$app/stores'
-    import { goto, replaceState } from '$app/navigation'
+    import { goto } from '$app/navigation'
     import { tick } from 'svelte'
     import { fade, scale } from 'svelte/transition'
     import { quartOut } from 'svelte/easing'
@@ -24,19 +24,19 @@
     import ButtonCircle from '$components/atoms/ButtonCircle/ButtonCircle.svelte'
 
     let { data } = $props()
-    const { location, countPhotos, limit, offset }: { location: any, countPhotos: number, limit: number, offset: number } = data
+
+    let photos = $state<any[]>(data.photos)
+    let currentIndex = $state<number>(data.currentIndex)
 
     enum directions { PREV, NEXT }
 
     let innerWidth = $state<number>()
     let fullscreenEl = $state<HTMLElement>()
-    let photos = $state<any[]>(data.photos)
-    let currentIndex = $state(data.currentIndex)
-    let globalOffset = $state(offset)
+    let globalOffset = $state(data.offset)
     let isLoading = $state(false)
     let isFullscreen = $state(false)
-    let hasNext = $state(offset + limit < countPhotos)
-    let hasPrev = $state(offset > 0)
+    let hasNext = $state(data.offset + data.limit < data.countPhotos)
+    let hasPrev = $state(data.offset > 0)
 
     // Define if we can navigate depending on loading state, existing photos and index being first or last
     const canGoPrev = $derived(!isLoading && (hasNext || currentIndex !== photos.length - 1))
@@ -64,12 +64,12 @@
 
         // Change URL to current photo slug
         if (currentPhoto) {
-            replaceState('', $page.url.pathname.replace($page.params.photo, currentPhoto.slug))
+            window.history.replaceState(null, '', $page.url.pathname.replace($page.params.photo, currentPhoto.slug))
         }
     })
 
     // Define previous URL
-    const previousUrl = $derived($previousPage ? $previousPage : `/${location.country.slug}/${location.slug}`)
+    const previousUrl = $derived($previousPage ?? `/${data.location.country.slug}/${data.location.slug}`)
 
 
     /**
@@ -156,12 +156,12 @@
             body: `query {
                 photos: photo (
                     filter: {
-                        location: { slug: { _eq: "${location.slug}" }},
+                        location: { slug: { _eq: "${data.location.slug}" }},
                         id: { _${isPrev ? 'gt' : 'lt'}: ${id} },
                         status: { _eq: "published" },
                     },
                     sort: "${isPrev ? '' : '-'}id",
-                    limit: ${limit},
+                    limit: ${data.limit},
                 ) {
                     id
                     title
@@ -296,8 +296,8 @@
 
 {#if currentPhoto}
     <Metas
-        title="{currentPhoto.title} - Houses Of {location.name}"
-        description="Photo of a beautiful home from {location.name}, {location.country.name}"
+        title="{currentPhoto.title} - Houses Of {data.location.name}"
+        description="Photo of a beautiful home from {data.location.name}, {data.location.country.name}"
         image={getAssetUrlKey(currentPhoto.image.id, 'share')}
     />
 {/if}
@@ -321,8 +321,8 @@
 
         <div class="photo-page__carousel">
             <div
-                use:swipe
                 class="photo-page__images"
+                use:swipe
                 onswipe={handleSwipe}
                 ontap={toggleFullscreen}
             >
@@ -362,13 +362,13 @@
                 <h1 class="title-medium">{currentPhoto.title}</h1>
 
                 <div class="detail text-info">
-                    <a href="/{location.country.slug}/{location.slug}" data-sveltekit-noscroll>
+                    <a href="/{data.location.country.slug}/{data.location.slug}" data-sveltekit-noscroll>
                         <Icon class="icon" icon="map-pin" label="Map pin" />
                         <span>
                             {#if currentPhoto.city}
-                                {currentPhoto.city}, {location.name}, {location.country.name}
+                                {currentPhoto.city}, {data.location.name}, {data.location.country.name}
                             {:else}
-                                {location.name}, {location.country.name}
+                                {data.location.name}, {data.location.country.name}
                             {/if}
                         </span>
                     </a>