[chore] Switch Homepage and Photos to page endpoints

src/routes/index.svelte

@@ -144,40 +144,4 @@
             </div>
         </div>
     </div>
-</PageTransition>
+</PageTransition>
-
-
-<script context="module" lang="ts">
-    import { fetchAPI } from '$utils/api'
-
-    /** @type {import('@sveltejs/kit').Load} */
-    export async function load ({ url, params, fetch, session, stuff }) {
-        const res = await fetchAPI(`
-            query {
-                photo (limit: 11, sort: ["-date_created"]) {
-                    slug
-                    title
-                    city
-                    location {
-                        name
-                        slug
-                        country {
-                            slug
-                            name
-                            flag { id }
-                        }
-                    }
-                    image { id }
-                }
-            }
-        `)
-
-        const { data } = res
-
-        return {
-            props: {
-                photos: data.photo,
-            }
-        }
-    }
-</script>

src/routes/index.ts

@@ -0,0 +1,39 @@
+import type { RequestEvent, RequestHandlerOutput } from '@sveltejs/kit'
+import { fetchAPI } from '$utils/api'
+
+export async function get({}: RequestEvent): Promise<RequestHandlerOutput> {
+    try {
+        const res = await fetchAPI(`
+            query {
+                photo (limit: 11, sort: ["-date_created"]) {
+                    slug
+                    title
+                    city
+                    location {
+                        name
+                        slug
+                        country {
+                            slug
+                            name
+                            flag { id }
+                        }
+                    }
+                    image { id }
+                }
+            }
+        `)
+
+        const { data } = res
+
+        return {
+            body: {
+                photos: data.photo
+            }
+        }
+
+    } catch (error) {
+        return {
+            status: 404,
+        }
+    }
+}

src/routes/photos.svelte

@@ -9,6 +9,7 @@
     import relativeTime from 'dayjs/plugin/relativeTime.js'
     import anime from 'animejs'
     import type { AnimeTimelineInstance } from 'animejs'
+    import { fetchAPI } from '$utils/api'
     import { map, lerp, throttle } from '$utils/functions'
     // Components
     import Metas from '$components/Metas.svelte'
@@ -50,20 +51,22 @@
     /**
      * Filters
      */
+    const defaultCountry: string = import.meta.env.VITE_FILTERS_DEFAULT_COUNTRY
+    const defaultSort: string = import.meta.env.VITE_FILTERS_DEFAULT_SORT
     const urlFiltersParams = new URLSearchParams()
     let filtered: boolean
     let filterCountry = $page.url.searchParams.get('country') || defaultCountry
     let filterSort = $page.url.searchParams.get('sort') || defaultSort
     let countryFlagId: string
     $: filtered = filterCountry !== defaultCountry || filterSort !== defaultSort
-    $: latestPhoto = photos[0]
+    $: latestPhoto = photos && photos[0]
     $: currentCountry = countries.find((country: any) => country.slug === filterCountry)
 
     // Pages related informations
     let currentPage = 1
     let ended: boolean
     let currentPhotosAmount: number
-    $: currentPhotosAmount = photos.length
+    $: currentPhotosAmount = photos && photos.length
     $: ended = currentPhotosAmount === totalPhotos
 
 
@@ -433,7 +436,7 @@
 
     <section class="photos__content" style="--margin-sides: {sideMargins}px;" bind:this={photosContentEl}>
         <div class="grid container">
-            {#if photos.length}
+            {#if photos}
                 <div class="photos__grid" bind:this={photosGridEl}>
                     {#each photos as { id, image, slug, location, title, city }, index (id)}
                         <figure class="photo shadow-photo">
@@ -499,83 +502,4 @@
             </div>
         </div>
     </section>
-</PageTransition>
+</PageTransition>
-
-
-<script context="module" lang="ts">
-    import { fetchAPI } from '$utils/api'
-
-    // Default filters values
-    const defaultCountry = String(import.meta.env.VITE_FILTERS_DEFAULT_COUNTRY)
-    const defaultSort = String(import.meta.env.VITE_FILTERS_DEFAULT_SORT)
-
-    /** @type {import('@sveltejs/kit').Load} */
-    export async function load ({ url, params, fetch, session, stuff }) {
-        // Query parameters
-        const queryCountry = url.searchParams.get('country') || defaultCountry
-        const querySort = url.searchParams.get('sort') || defaultSort
-
-        const res = await fetchAPI(`
-            query {
-                photos: photo (
-                    filter: {
-                        ${queryCountry !== 'all' ? `location: { country: { slug: { _eq: "${queryCountry}" }}},` : ''}
-                        status: { _eq: "published" },
-                    },
-                    sort: "${querySort === 'latest' ? '-' : ''}date_created",
-                    limit: ${import.meta.env.VITE_GRID_AMOUNT},
-                    page: 1,
-                ) {
-                    id
-                    title
-                    slug
-                    image {
-                        id
-                        title
-                    }
-                    location {
-                        slug
-                        name
-                        region
-                        country {
-                            slug
-                            name
-                            flag { id }
-                        }
-                    }
-                    city
-                    date_created
-                }
-
-                country: country (
-                    filter: {
-                        slug: { _eq: "${queryCountry}" },
-                        status: { _eq: "published" },
-                    },
-                ) {
-                    slug
-                }
-
-                # Total
-                total_published: photo_aggregated {
-                    count { id }
-                }
-            }
-        `)
-
-        const { data } = res
-
-        // Calculate total of photos (if default or specific)
-        const totalPhotos = queryCountry === 'all'
-            ? data.total_published[0].count.id
-            : stuff.countries.find((country: any) => country.slug === queryCountry).count
-
-        return {
-            props: {
-                photos: data.photos,
-                filteredCountryExists: data.country.length > 0,
-                totalPhotos,
-            }
-        }
-    }
-</script>

src/routes/photos.ts

@@ -0,0 +1,77 @@
+import type { RequestEvent, RequestHandlerOutput } from '@sveltejs/kit'
+import { fetchAPI } from '$utils/api'
+
+// Default filters values
+const defaultCountry = String(import.meta.env.VITE_FILTERS_DEFAULT_COUNTRY)
+const defaultSort = String(import.meta.env.VITE_FILTERS_DEFAULT_SORT)
+
+export async function get({ url }: RequestEvent): Promise<RequestHandlerOutput> {
+    try {
+        // Query parameters
+        const queryCountry = url.searchParams.get('country') || defaultCountry
+        const querySort = url.searchParams.get('sort') || defaultSort
+
+        // Query
+        const res = await fetchAPI(`
+            query {
+                photos: photo (
+                    filter: {
+                        ${queryCountry !== 'all' ? `location: { country: { slug: { _eq: "${queryCountry}" }}},` : ''}
+                        status: { _eq: "published" },
+                    },
+                    sort: "${querySort === 'latest' ? '-' : ''}date_created",
+                    limit: ${import.meta.env.VITE_GRID_AMOUNT},
+                    page: 1,
+                ) {
+                    id
+                    title
+                    slug
+                    image {
+                        id
+                        title
+                    }
+                    location {
+                        slug
+                        name
+                        region
+                        country {
+                            slug
+                            name
+                            flag { id }
+                        }
+                    }
+                    city
+                    date_created
+                }
+
+                country: country (
+                    filter: {
+                        slug: { _eq: "${queryCountry}" },
+                        status: { _eq: "published" },
+                    },
+                ) {
+                    slug
+                }
+
+                # Total
+                total_published: photo_aggregated ${queryCountry !== 'all' ? `(filter: { location: { country: { slug: { _eq: "${queryCountry}" }}}})` : ''} {
+                    count { id }
+                }
+            }
+        `)
+
+        const { data } = res
+
+        return {
+            body: {
+                photos: data.photos,
+                filteredCountryExists: data.country.length > 0,
+                totalPhotos: data.total_published[0].count.id,
+            }
+        }
+    } catch (error) {
+        return {
+            status: 404,
+        }
+    }
+}