From 8aa3ddfe35411dcff622adb61cc7549450a2160e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= Date: Sat, 9 Oct 2021 22:24:37 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A5=20Load=20new=20photos=20on=20Locat?= =?UTF-8?q?ion=20page?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/routes/[country]/[location]/index.svelte | 113 +++++++++++++++++-- src/routes/photos.svelte | 2 +- src/style/pages/_location.scss | 32 +++--- 3 files changed, 117 insertions(+), 30 deletions(-) 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') + } + }
@@ -56,7 +120,7 @@ {/each}

· -

+

Updated @@ -105,16 +169,17 @@

-
@@ -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, } } } diff --git a/src/routes/photos.svelte b/src/routes/photos.svelte index 2b8a4ac..fdc94ad 100644 --- a/src/routes/photos.svelte +++ b/src/routes/photos.svelte @@ -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 diff --git a/src/style/pages/_location.scss b/src/style/pages/_location.scss index 9e00b64..7cc0087 100644 --- a/src/style/pages/_location.scss +++ b/src/style/pages/_location.scss @@ -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; + } } - } } \ No newline at end of file