🔥 Load new photos on Location page

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')
+        }
+    }
 </script>
 
 <main class="location-page">
@@ -56,7 +120,7 @@
                         {/each}
                     </p>
                     &middot;
-                    <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">{currentPhotosAmount}</span>
-                <span class="current">1</span>
                 <span>/</span>
-                <span class="total">1</span>
+                <span class="total">{totalPhotos}</span>
             </div>
-            <p class="pagination__more">
+            {#if !ended}
-                See more photos
+                <p class="pagination__more">See more photos</p>
-            </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,
             }
         }
     }

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

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 {
+            p {
-                position: absolute;
-                color: $color-secondary-bright;
-                font-size: rem(40px);
-                font-family: $font-serif;
-                top: 50%;
-                left: 8%;
                 display: block;
-                width: 100%;
+                margin: 16px auto 0;
-                transform: translateY(-50%);
                 text-align: center;
-                letter-spacing: normal;
+                font-family: $font-sans;
-                font-weight: 400;
-            }
-            &__more {
-                display: block;
-                margin-top: 16px;
-                color: $color-gray;
                 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;
+            }
         }
-    }
 }