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