flayks/housesof
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

fix: avoid freeze due to SK replaceState

Browse Source
This commit is contained in:
Félix Péault
2024-08-03 12:03:25 +02:00
parent 5989252010
commit 3bbfb8c5dd
1 changed files with 17 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
apps/website/src/routes/(site)/[country]/[location]/[photo]/+page.svelte
View File

@@ -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>