🚧 Migrate to new SvelteKit routing system

A bit annoying but for the best I guess?

src/routes/[country]/[location]/+page.server.ts

@@ -1,4 +1,5 @@
-import type { RequestEvent, RequestHandlerOutput } from '@sveltejs/kit'
+import { error } from '@sveltejs/kit'
+import type { PageServerLoad } from './$types'
 import { fetchAPI } from '$utils/api'
 
 export const photoFields = `
@@ -14,7 +15,7 @@ export const photoFields = `
     date_created
 `
 
-export async function GET ({ params }: RequestEvent): Promise<RequestHandlerOutput> {
+export const load: PageServerLoad = async ({ params }) => {
     try {
         const { location: slug } = params
 
@@ -76,27 +77,20 @@ export async function GET ({ params }: RequestEvent): Promise<RequestHandlerOutp
                 }
             }
         `)
+
         const { data: { location: location, photos, total_published, product }} = res
 
         if (!location.length || location.length && params.country !== location[0].country.slug) {
-            return {
-                status: 404,
-                body: Error("This location is not available… yet!"),
-            }
+            throw error(404, "This location is not available… yet!")
         }
 
         return {
-            body: {
-                location: location[0],
-                photos,
-                totalPhotos: photos.length ? total_published[0].count.location : 0,
-                product: product[0],
-            }
-        }
-    } catch (error) {
-        return {
-            status: 404,
-            body: error,
+            location: location[0],
+            photos,
+            totalPhotos: photos.length ? total_published[0].count.location : 0,
+            product: product[0],
         }
+    } catch (err) {
+        throw error(500, err)
     }
 }

src/routes/[country]/[location]/+page.svelte

@@ -4,14 +4,15 @@
 
 <script lang="ts">
     import { page, navigating } from '$app/stores'
+    import type { PageData, Errors } from './$types'
     import { onMount } from 'svelte'
-    import { timeline } from 'motion'
+    import { stagger, timeline } from 'motion'
     import dayjs from 'dayjs'
-    import relativeTime from 'dayjs/plugin/relativeTime.js'
+    import relativeTime from 'dayjs/plugin/relativeTime'
     import { quartOut } from '$animations/easings'
     import { fetchAPI, getAssetUrlKey } from '$utils/api'
     import { DELAY } from '$utils/contants'
-    import { photoFields } from '.'
+    import { photoFields } from './+page.server'
     // Components
     import Metas from '$components/Metas.svelte'
     import PageTransition from '$components/PageTransition.svelte'
@@ -23,14 +24,14 @@
     import NewsletterModule from '$components/organisms/NewsletterModule.svelte'
     import ShopModule from '$components/organisms/ShopModule.svelte'
 
-    export let location: any
-    export let photos: any[]
-    export let totalPhotos: number
-    export let product: any = undefined
-
-    dayjs.extend(relativeTime)
+    export let data: PageData
+    export let errors: Errors
 
     const { params } = $page
+    let { photos }: { photos: any[] } = data
+    const { location, totalPhotos, product = undefined }: { location: any, totalPhotos: number, product: any } = data
+
+    dayjs.extend(relativeTime)
 
     let introEl: HTMLElement
     let photosListEl: HTMLElement
@@ -152,6 +153,7 @@
                 y: ['110%', 0],
             }, {
                 at: 0.2,
+                delay: stagger(0.4)
             }],
 
             // Illustration

src/routes/[country]/[location]/[photo]/+page.server.ts

@@ -1,7 +1,8 @@
-import type { RequestEvent, RequestHandlerOutput } from '@sveltejs/kit'
+import { error } from '@sveltejs/kit'
+import type { PageServerLoad } from './$types'
 import { fetchAPI } from '$utils/api'
 
-export async function GET ({ params }: RequestEvent): Promise<RequestHandlerOutput> {
+export const load: PageServerLoad = async ({ params }) => {
     try {
         // Get the first photo ID
         const firstPhoto = await fetchAPI(`
@@ -75,10 +76,11 @@ export async function GET ({ params }: RequestEvent): Promise<RequestHandlerOutp
         `)
 
         const { data } = res
-        const currentIndex = data.photos.findIndex((photo: any) => photo.slug === params.photo)
 
-        return {
-            body: {
+        if (data) {
+            const currentIndex = data.photos.findIndex((photo: any) => photo.slug === params.photo)
+
+            return {
                 photos: data.photos,
                 location: data.location[0],
                 currentIndex,
@@ -87,10 +89,7 @@ export async function GET ({ params }: RequestEvent): Promise<RequestHandlerOutp
                 offset,
             }
         }
-    } catch (error) {
-        return {
-            status: 404,
-            body: error,
-        }
+    } catch (err) {
+        throw error(500, err)
     }
 }

src/routes/[country]/[location]/[photo]/+page.svelte

@@ -1,11 +1,12 @@
 <style lang="scss">
-    @import "../../../style/pages/viewer";
+    @import "../../../../style/pages/viewer";
 </style>
 
 <script lang="ts">
     import { browser } from '$app/env'
     import { page, navigating } from '$app/stores'
     import { goto } from '$app/navigation'
+    import type { PageData, Errors } from './$types'
     import { onMount, tick } from 'svelte'
     import { fade, scale } from 'svelte/transition'
     import { quartOut } from 'svelte/easing'
@@ -25,12 +26,11 @@
     import IconArrow from '$components/atoms/IconArrow.svelte'
     import ButtonCircle from '$components/atoms/ButtonCircle.svelte'
 
-    export let photos: any[]
-    export let location: any
-    export let currentIndex: number
-    export let countPhotos: number
-    export let limit: number
-    export let offset: number
+    export let data: PageData
+    export let errors: Errors
+
+    let { photos, currentIndex }: { photos: any[], currentIndex: number } = data
+    const { location, countPhotos, limit, offset }: { location: any, countPhotos: number, limit: number, offset: number } = data
 
     enum directions { PREV, NEXT }