diff --git a/src/routes/[country]/[location]/index.svelte b/src/routes/[country]/[location]/index.svelte
index 4706b61..933307c 100644
--- a/src/routes/[country]/[location]/index.svelte
+++ b/src/routes/[country]/[location]/index.svelte
@@ -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')
+ }
+ }
+
Updated
@@ -105,16 +169,17 @@
- See more photos
- See more photos You've seen it all!