🔥 Load new photos on Location page
This commit is contained in:
@@ -10,13 +10,77 @@
|
||||
import Image from '$components/atoms/Image.svelte'
|
||||
|
||||
export let data: any
|
||||
export let photos: any
|
||||
export let photos: any[]
|
||||
export let lastUpdated: string
|
||||
export let totalPhotos: number
|
||||
|
||||
dayjs.extend(advancedFormat)
|
||||
dayjs.extend(relativeTime)
|
||||
|
||||
const { params } = $page
|
||||
let descriptionEl: HTMLElement
|
||||
let currentPage: number = 1
|
||||
let ended: boolean
|
||||
let currentPhotosAmount: number
|
||||
$: currentPhotosAmount = photos.length
|
||||
$: ended = currentPhotosAmount === totalPhotos
|
||||
|
||||
|
||||
/**
|
||||
* Load photos
|
||||
*/
|
||||
// Load more photos from CTA
|
||||
const loadMorePhotos = async () => {
|
||||
// Append more photos from API
|
||||
const newPhotos: any = await loadPhotos(currentPage + 1)
|
||||
|
||||
if (newPhotos) {
|
||||
photos = [...photos, ...newPhotos]
|
||||
|
||||
// Define actions if the number of new photos is the expected ones
|
||||
if (newPhotos.length === Number(import.meta.env.VITE_LIST_INCREMENT)) {
|
||||
// Increment the current page
|
||||
currentPage++
|
||||
}
|
||||
|
||||
// Increment the currently visible amount of photos
|
||||
currentPhotosAmount += newPhotos.length
|
||||
}
|
||||
}
|
||||
|
||||
// [function] Load photos helper
|
||||
const loadPhotos = async (page?: number) => {
|
||||
const res = fetchAPI(`
|
||||
query {
|
||||
photos: photo (
|
||||
filter: {
|
||||
location: { slug: { _eq: "${params.location}" }},
|
||||
status: { _eq: "published" },
|
||||
},
|
||||
sort: "-date_created",
|
||||
limit: ${import.meta.env.VITE_LIST_INCREMENT},
|
||||
page: ${page},
|
||||
) {
|
||||
title
|
||||
slug
|
||||
image {
|
||||
id
|
||||
title
|
||||
}
|
||||
date_taken
|
||||
date_created
|
||||
}
|
||||
}
|
||||
`)
|
||||
const { data: { photos }} = await res
|
||||
|
||||
if (photos) {
|
||||
// Return new photos
|
||||
return photos
|
||||
} else {
|
||||
throw new Error('Error while loading new photos')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<main class="location-page">
|
||||
@@ -56,7 +120,7 @@
|
||||
{/each}
|
||||
</p>
|
||||
·
|
||||
<p class="text-label" title={dayjs(photos[0].date_created).format('DD/MM/YYYY')}>
|
||||
<p class="text-label" title={dayjs(photos[0].date_created).format('DD/MM/YYYY, hh:mm')}>
|
||||
Updated <time datetime={dayjs(photos[0].date_created).format('YYYY-MM-DD')}>
|
||||
{dayjs().to(dayjs(photos[0].date_created))}
|
||||
</time>
|
||||
@@ -105,16 +169,17 @@
|
||||
</section>
|
||||
|
||||
<section class="location-page__next">
|
||||
<div class="pagination" role="button">
|
||||
<div class="pagination" role="button" on:click={!ended && loadMorePhotos} disabled={ended ? ended : undefined}>
|
||||
<div class="pagination__progress">
|
||||
<span class="pagination__page">page</span>
|
||||
<span class="current">1</span>
|
||||
<span class="current">{currentPhotosAmount}</span>
|
||||
<span>/</span>
|
||||
<span class="total">1</span>
|
||||
<span class="total">{totalPhotos}</span>
|
||||
</div>
|
||||
<p class="pagination__more">
|
||||
See more photos
|
||||
</p>
|
||||
{#if !ended}
|
||||
<p class="pagination__more">See more photos</p>
|
||||
{:else}
|
||||
<p>You've seen it all!</p>
|
||||
{/if}
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
@@ -128,7 +193,13 @@
|
||||
|
||||
const res = await fetchAPI(`
|
||||
query {
|
||||
location (filter: { slug: { _eq: "${location}" } }) {
|
||||
location (
|
||||
filter: {
|
||||
slug: { _eq: "${location}" },
|
||||
status: { _eq: "published" },
|
||||
},
|
||||
limit: ${import.meta.env.VITE_LIST_AMOUNT},
|
||||
) {
|
||||
name
|
||||
slug
|
||||
description
|
||||
@@ -144,7 +215,14 @@
|
||||
}
|
||||
}
|
||||
|
||||
photo (filter: { location: { slug: { _eq: "${location}" } }}) {
|
||||
photos: photo (
|
||||
filter: {
|
||||
location: { slug: { _eq: "${location}" }}
|
||||
},
|
||||
sort: "-date_created",
|
||||
limit: ${import.meta.env.VITE_LIST_AMOUNT},
|
||||
page: 1,
|
||||
) {
|
||||
title
|
||||
slug
|
||||
image {
|
||||
@@ -154,6 +232,15 @@
|
||||
date_taken
|
||||
date_created
|
||||
}
|
||||
|
||||
total_published: photo (
|
||||
filter: {
|
||||
status: { _eq: "published" },
|
||||
location: { slug: { _eq: "${location}" }}
|
||||
}
|
||||
) {
|
||||
id
|
||||
}
|
||||
}
|
||||
`)
|
||||
|
||||
@@ -162,7 +249,9 @@
|
||||
return {
|
||||
props: {
|
||||
data: data.location[0],
|
||||
photos: data.photo,
|
||||
photos: data.photos,
|
||||
totalPhotos: data.total_published.length,
|
||||
lastUpdated: data.photos[0].date_created,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
import Shop from '$components/organisms/Shop.svelte'
|
||||
import Newsletter from '$components/organisms/Newsletter.svelte'
|
||||
|
||||
export let photos: any
|
||||
export let photos: any[]
|
||||
export let lastUpdated: string
|
||||
export let totalPhotos: number
|
||||
export let filteredCountryExists: boolean
|
||||
|
||||
@@ -144,12 +144,15 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Next photos section
|
||||
&__next {
|
||||
margin-top: -120px;
|
||||
padding: 240px 0 104px;
|
||||
background-color: $color-tertiary;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
// Pagination
|
||||
.pagination {
|
||||
position: relative;
|
||||
display: block;
|
||||
@@ -171,29 +174,24 @@
|
||||
margin: 0 -10px;
|
||||
}
|
||||
}
|
||||
&__page {
|
||||
position: absolute;
|
||||
color: $color-secondary-bright;
|
||||
font-size: rem(40px);
|
||||
font-family: $font-serif;
|
||||
top: 50%;
|
||||
left: 8%;
|
||||
p {
|
||||
display: block;
|
||||
width: 100%;
|
||||
transform: translateY(-50%);
|
||||
margin: 16px auto 0;
|
||||
text-align: center;
|
||||
letter-spacing: normal;
|
||||
font-weight: 400;
|
||||
}
|
||||
&__more {
|
||||
display: block;
|
||||
margin-top: 16px;
|
||||
color: $color-gray;
|
||||
font-family: $font-sans;
|
||||
text-transform: uppercase;
|
||||
color: $color-text;
|
||||
letter-spacing: 0.1em;
|
||||
font-weight: 400;
|
||||
font-size: rem(14px);
|
||||
}
|
||||
&__more {
|
||||
color: $color-secondary;
|
||||
}
|
||||
|
||||
// Disabled state
|
||||
&[disabled] {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user