[chore] Switch rest of page endpoints

package.json

@@ -30,8 +30,8 @@
     "@sveltejs/adapter-vercel": "^1.0.0-next.56",
     "@sveltejs/kit": "next",
     "@types/animejs": "^3.1.4",
-    "@typescript-eslint/eslint-plugin": "^5.26.0",
+    "@typescript-eslint/eslint-plugin": "^5.27.0",
-    "@typescript-eslint/parser": "^5.26.0",
+    "@typescript-eslint/parser": "^5.27.0",
     "eslint": "^8.16.0",
     "eslint-plugin-svelte3": "^4.0.0",
     "sass": "^1.52.1",

pnpm-lock.yaml

@@ -6,8 +6,8 @@ specifiers:
   '@sveltejs/adapter-vercel': ^1.0.0-next.56
   '@sveltejs/kit': next
   '@types/animejs': ^3.1.4
-  '@typescript-eslint/eslint-plugin': ^5.26.0
+  '@typescript-eslint/eslint-plugin': ^5.27.0
-  '@typescript-eslint/parser': ^5.26.0
+  '@typescript-eslint/parser': ^5.27.0
   animejs: ^3.2.1
   dayjs: ^1.11.2
   embla-carousel: ^6.2.0
@@ -36,8 +36,8 @@ devDependencies:
   '@sveltejs/adapter-vercel': 1.0.0-next.56
   '@sveltejs/kit': 1.0.0-next.345_sass@1.52.1+svelte@3.48.0
   '@types/animejs': 3.1.4
-  '@typescript-eslint/eslint-plugin': 5.26.0_hzuh7e2up357pvq3mkokjvu2lq
+  '@typescript-eslint/eslint-plugin': 5.27.0_dszb5tb7atwkjjijmmov4qhi7i
-  '@typescript-eslint/parser': 5.26.0_xztl6dhthcahlo6akmb2bmjmle
+  '@typescript-eslint/parser': 5.27.0_xztl6dhthcahlo6akmb2bmjmle
   eslint: 8.16.0
   eslint-plugin-svelte3: 4.0.0_vypdqzeyqutkgs6qzc7qod4c64
   sass: 1.52.1
@@ -257,8 +257,8 @@ packages:
       '@types/node': 17.0.36
     dev: true
 
-  /@typescript-eslint/eslint-plugin/5.26.0_hzuh7e2up357pvq3mkokjvu2lq:
+  /@typescript-eslint/eslint-plugin/5.27.0_dszb5tb7atwkjjijmmov4qhi7i:
-    resolution: {integrity: sha512-oGCmo0PqnRZZndr+KwvvAUvD3kNE4AfyoGCwOZpoCncSh4MVD06JTE8XQa2u9u+NX5CsyZMBTEc2C72zx38eYA==}
+    resolution: {integrity: sha512-DDrIA7GXtmHXr1VCcx9HivA39eprYBIFxbQEHI6NyraRDxCGpxAFiYQAT/1Y0vh1C+o2vfBiy4IuPoXxtTZCAQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       '@typescript-eslint/parser': ^5.0.0
@@ -268,10 +268,10 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/parser': 5.26.0_xztl6dhthcahlo6akmb2bmjmle
+      '@typescript-eslint/parser': 5.27.0_xztl6dhthcahlo6akmb2bmjmle
-      '@typescript-eslint/scope-manager': 5.26.0
+      '@typescript-eslint/scope-manager': 5.27.0
-      '@typescript-eslint/type-utils': 5.26.0_xztl6dhthcahlo6akmb2bmjmle
+      '@typescript-eslint/type-utils': 5.27.0_xztl6dhthcahlo6akmb2bmjmle
-      '@typescript-eslint/utils': 5.26.0_xztl6dhthcahlo6akmb2bmjmle
+      '@typescript-eslint/utils': 5.27.0_xztl6dhthcahlo6akmb2bmjmle
       debug: 4.3.4
       eslint: 8.16.0
       functional-red-black-tree: 1.0.1
@@ -284,8 +284,8 @@ packages:
       - supports-color
     dev: true
 
-  /@typescript-eslint/parser/5.26.0_xztl6dhthcahlo6akmb2bmjmle:
+  /@typescript-eslint/parser/5.27.0_xztl6dhthcahlo6akmb2bmjmle:
-    resolution: {integrity: sha512-n/IzU87ttzIdnAH5vQ4BBDnLPly7rC5VnjN3m0xBG82HK6rhRxnCb3w/GyWbNDghPd+NktJqB/wl6+YkzZ5T5Q==}
+    resolution: {integrity: sha512-8oGjQF46c52l7fMiPPvX4It3u3V3JipssqDfHQ2hcR0AeR8Zge+OYyKUCm5b70X72N1qXt0qgHenwN6Gc2SXZA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
@@ -294,9 +294,9 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/scope-manager': 5.26.0
+      '@typescript-eslint/scope-manager': 5.27.0
-      '@typescript-eslint/types': 5.26.0
+      '@typescript-eslint/types': 5.27.0
-      '@typescript-eslint/typescript-estree': 5.26.0_typescript@4.7.2
+      '@typescript-eslint/typescript-estree': 5.27.0_typescript@4.7.2
       debug: 4.3.4
       eslint: 8.16.0
       typescript: 4.7.2
@@ -304,16 +304,16 @@ packages:
       - supports-color
     dev: true
 
-  /@typescript-eslint/scope-manager/5.26.0:
+  /@typescript-eslint/scope-manager/5.27.0:
-    resolution: {integrity: sha512-gVzTJUESuTwiju/7NiTb4c5oqod8xt5GhMbExKsCTp6adU3mya6AGJ4Pl9xC7x2DX9UYFsjImC0mA62BCY22Iw==}
+    resolution: {integrity: sha512-VnykheBQ/sHd1Vt0LJ1JLrMH1GzHO+SzX6VTXuStISIsvRiurue/eRkTqSrG0CexHQgKG8shyJfR4o5VYioB9g==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dependencies:
-      '@typescript-eslint/types': 5.26.0
+      '@typescript-eslint/types': 5.27.0
-      '@typescript-eslint/visitor-keys': 5.26.0
+      '@typescript-eslint/visitor-keys': 5.27.0
     dev: true
 
-  /@typescript-eslint/type-utils/5.26.0_xztl6dhthcahlo6akmb2bmjmle:
+  /@typescript-eslint/type-utils/5.27.0_xztl6dhthcahlo6akmb2bmjmle:
-    resolution: {integrity: sha512-7ccbUVWGLmcRDSA1+ADkDBl5fP87EJt0fnijsMFTVHXKGduYMgienC/i3QwoVhDADUAPoytgjbZbCOMj4TY55A==}
+    resolution: {integrity: sha512-vpTvRRchaf628Hb/Xzfek+85o//zEUotr1SmexKvTfs7czXfYjXVT/a5yDbpzLBX1rhbqxjDdr1Gyo0x1Fc64g==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: '*'
@@ -322,7 +322,7 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/utils': 5.26.0_xztl6dhthcahlo6akmb2bmjmle
+      '@typescript-eslint/utils': 5.27.0_xztl6dhthcahlo6akmb2bmjmle
       debug: 4.3.4
       eslint: 8.16.0
       tsutils: 3.21.0_typescript@4.7.2
@@ -331,13 +331,13 @@ packages:
       - supports-color
     dev: true
 
-  /@typescript-eslint/types/5.26.0:
+  /@typescript-eslint/types/5.27.0:
-    resolution: {integrity: sha512-8794JZFE1RN4XaExLWLI2oSXsVImNkl79PzTOOWt9h0UHROwJedNOD2IJyfL0NbddFllcktGIO2aOu10avQQyA==}
+    resolution: {integrity: sha512-lY6C7oGm9a/GWhmUDOs3xAVRz4ty/XKlQ2fOLr8GAIryGn0+UBOoJDWyHer3UgrHkenorwvBnphhP+zPmzmw0A==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dev: true
 
-  /@typescript-eslint/typescript-estree/5.26.0_typescript@4.7.2:
+  /@typescript-eslint/typescript-estree/5.27.0_typescript@4.7.2:
-    resolution: {integrity: sha512-EyGpw6eQDsfD6jIqmXP3rU5oHScZ51tL/cZgFbFBvWuCwrIptl+oueUZzSmLtxFuSOQ9vDcJIs+279gnJkfd1w==}
+    resolution: {integrity: sha512-QywPMFvgZ+MHSLRofLI7BDL+UczFFHyj0vF5ibeChDAJgdTV8k4xgEwF0geFhVlPc1p8r70eYewzpo6ps+9LJQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       typescript: '*'
@@ -345,8 +345,8 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/types': 5.26.0
+      '@typescript-eslint/types': 5.27.0
-      '@typescript-eslint/visitor-keys': 5.26.0
+      '@typescript-eslint/visitor-keys': 5.27.0
       debug: 4.3.4
       globby: 11.1.0
       is-glob: 4.0.3
@@ -357,16 +357,16 @@ packages:
       - supports-color
     dev: true
 
-  /@typescript-eslint/utils/5.26.0_xztl6dhthcahlo6akmb2bmjmle:
+  /@typescript-eslint/utils/5.27.0_xztl6dhthcahlo6akmb2bmjmle:
-    resolution: {integrity: sha512-PJFwcTq2Pt4AMOKfe3zQOdez6InIDOjUJJD3v3LyEtxHGVVRK3Vo7Dd923t/4M9hSH2q2CLvcTdxlLPjcIk3eg==}
+    resolution: {integrity: sha512-nZvCrkIJppym7cIbP3pOwIkAefXOmfGPnCM0LQfzNaKxJHI6VjI8NC662uoiPlaf5f6ymkTy9C3NQXev2mdXmA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
     dependencies:
       '@types/json-schema': 7.0.11
-      '@typescript-eslint/scope-manager': 5.26.0
+      '@typescript-eslint/scope-manager': 5.27.0
-      '@typescript-eslint/types': 5.26.0
+      '@typescript-eslint/types': 5.27.0
-      '@typescript-eslint/typescript-estree': 5.26.0_typescript@4.7.2
+      '@typescript-eslint/typescript-estree': 5.27.0_typescript@4.7.2
       eslint: 8.16.0
       eslint-scope: 5.1.1
       eslint-utils: 3.0.0_eslint@8.16.0
@@ -375,11 +375,11 @@ packages:
       - typescript
     dev: true
 
-  /@typescript-eslint/visitor-keys/5.26.0:
+  /@typescript-eslint/visitor-keys/5.27.0:
-    resolution: {integrity: sha512-wei+ffqHanYDOQgg/fS6Hcar6wAWv0CUPQ3TZzOWd2BLfgP539rb49bwua8WRAs7R6kOSLn82rfEu2ro6Llt8Q==}
+    resolution: {integrity: sha512-46cYrteA2MrIAjv9ai44OQDUoCZyHeGIc4lsjCUX2WT6r4C+kidz1bNiR4017wHOPUythYeH+Sc7/cFP97KEAA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dependencies:
-      '@typescript-eslint/types': 5.26.0
+      '@typescript-eslint/types': 5.27.0
       eslint-visitor-keys: 3.3.0
     dev: true
 
@@ -2256,7 +2256,7 @@ packages:
   /wide-align/1.1.5:
     resolution: {integrity: sha512-eDMORYaPNZ4sQIuuYPDHdQvf4gyCF9rEEV/yPxGfwPkRodwEgiMUUXTx/dex+Me0wxx53S+NgUHaP7y3MGlDmg==}
     dependencies:
-      string-width: 4.2.3
+      string-width: 1.0.2
     dev: true
 
   /word-wrap/1.2.3:

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

@@ -6,6 +6,7 @@
     import { scale } from 'svelte/transition'
     import { quartOut } from 'svelte/easing'
     import { getAssetUrlKey } from '$utils/helpers'
+    import { fetchAPI } from '$utils/api'
     import { previousPage } from '$utils/stores'
     import { throttle } from '$utils/functions'
     import { swipe } from '$utils/interactions/swipe'
@@ -399,91 +400,3 @@
         </div>
     {/if}
 </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 }) {
-        // Get the first photo ID
-        const firstPhoto = await fetchAPI(`
-            query {
-                photo: photo (search: "${params.photo}") {
-                    id
-                }
-            }
-        `)
-        const firstPhotoId = firstPhoto?.data?.photo[0]?.id
-        // TODO: use same request for both queries (photo.id)
-        const photosBeforeFirst = await fetchAPI(`
-            query {
-                count: photo_aggregated (
-                    filter: {
-                        id: { _gt: ${firstPhotoId} },
-                        location: { slug: { _eq: "${params.location}" }},
-                        status: { _eq: "published" },
-                    },
-                    sort: "-id",
-                ) {
-                    count {
-                        id
-                    }
-                }
-            }
-        `)
-        // Define offset from the current count
-        const offset = Math.max(photosBeforeFirst?.data?.count[0]?.count.id - 5, 0)
-        const limit = 10
-        const res = await fetchAPI(`
-            query {
-                photos: photo (
-                    filter: {
-                        location: { slug: { _eq: "${params.location}" }}
-                        status: { _eq: "published" },
-                    },
-                    sort: "-date_created",
-                    limit: ${limit},
-                    offset: ${offset},
-                ) {
-                    id
-                    title
-                    slug
-                    date_taken
-                    image {
-                        id
-                        title
-                    }
-                    city
-                }
-
-                location (filter: { slug: { _eq: "${params.location}" }}) {
-                    name
-                    slug
-                    country {
-                        name
-                        slug
-                    }
-                }
-            }
-        `)
-
-        const { data } = res
-        const location = stuff.locations.find((location: any) => location.slug === params.location)
-        const totalPhotos = stuff.countTotalPhotosByLocation.find((total: any) => total.group.location === Number(location.id)).count.id
-
-        // Find photo's index
-        const currentIndex = data.photos.findIndex((photo: any) => photo.slug === params.photo)
-
-        return {
-            props: {
-                photos: data.photos,
-                location: data.location[0],
-                currentIndex,
-                countPhotos: totalPhotos,
-                limit,
-                offset,
-            }
-        }
-    }
-</script>

src/routes/[country]/[location]/[photo].ts

@@ -0,0 +1,95 @@
+import type { RequestEvent, RequestHandlerOutput } from '@sveltejs/kit'
+import { fetchAPI } from '$utils/api'
+
+export async function get({ params }: RequestEvent): Promise<RequestHandlerOutput> {
+    try {
+        // Get the first photo ID
+        const firstPhoto = await fetchAPI(`
+            query {
+                photo (search: "${params.photo}") {
+                    id
+                }
+            }
+        `)
+        const firstPhotoId = firstPhoto?.data?.photo[0]?.id
+
+        // TODO: use same request for both queries (photo.id)
+        const photosBeforeFirst = await fetchAPI(`
+            query {
+                count: photo_aggregated (
+                    filter: {
+                        id: { _gt: ${firstPhotoId} },
+                        location: { slug: { _eq: "${params.location}" }},
+                        status: { _eq: "published" },
+                    },
+                    sort: "-id",
+                ) {
+                    count {
+                        id
+                    }
+                }
+            }
+        `)
+
+        // Define offset from the current count
+        const offset = Math.max(photosBeforeFirst?.data?.count[0]?.count.id - 5, 0)
+        const limit = 10
+
+        const res = await fetchAPI(`
+            query {
+                photos: photo (
+                    filter: {
+                        location: { slug: { _eq: "${params.location}" }}
+                        status: { _eq: "published" },
+                    },
+                    sort: "-date_created",
+                    limit: ${limit},
+                    offset: ${offset},
+                ) {
+                    id
+                    title
+                    slug
+                    date_taken
+                    image {
+                        id
+                        title
+                    }
+                    city
+                }
+
+                location (filter: { slug: { _eq: "${params.location}" }}) {
+                    id
+                    name
+                    slug
+                    country {
+                        name
+                        slug
+                    }
+                }
+
+                total_published: photo_aggregated (filter: { location: { slug: { _eq: "${params.location}" }}}) {
+                    count { location }
+                }
+            }
+        `)
+
+        const { data } = res
+        const currentIndex = data.photos.findIndex((photo: any) => photo.slug === params.photo)
+
+        return {
+            body: {
+                photos: data.photos,
+                location: data.location[0],
+                currentIndex,
+                countPhotos: data.total_published[0].count.location,
+                limit,
+                offset,
+            }
+        }
+    } catch (error) {
+        return {
+            status: 404,
+            body: error,
+        }
+    }
+}

src/routes/[country]/[location]/index.svelte

@@ -7,6 +7,7 @@
     import dayjs from 'dayjs'
     import relativeTime from 'dayjs/plugin/relativeTime.js'
     import { getAssetUrlKey } from '$utils/helpers'
+    import { fetchAPI } from '$utils/api'
     import { DURATION } from '$utils/contants'
     // Components
     import Metas from '$components/Metas.svelte'
@@ -349,74 +350,3 @@
         </div>
     {/if}
 </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 { location } = params
-
-        const res = await fetchAPI(`
-            query {
-                location (
-                    filter: {
-                        slug: { _eq: "${location}" },
-                        status: { _eq: "published" },
-                    }
-                ) {
-                    id
-                    name
-                    slug
-                    description
-                    date_updated
-                    illustration_desktop { id }
-                    illustration_desktop_2x { id }
-                    illustration_mobile { id }
-                    credits {
-                        credit_id {
-                            name
-                            website
-                        }
-                    }
-                    country { name }
-                    has_poster
-                }
-
-                photos: photo (
-                    filter: {
-                        location: { slug: { _eq: "${location}" }}
-                    },
-                    sort: "-date_created",
-                    limit: ${import.meta.env.VITE_LIST_AMOUNT},
-                    page: 1,
-                ) {
-                    title
-                    slug
-                    city
-                    image {
-                        id
-                        title
-                    }
-                    date_taken
-                    date_created
-                }
-
-                total_published: photo_aggregated (filter: { location: { slug: { _eq: "${location}" }}}) {
-                    count { location }
-                }
-            }
-        `)
-
-        const { data } = res
-
-        return {
-            props: {
-                location: data.location[0],
-                photos: data.photos,
-                totalPhotos: data.photos.length ? data.total_published[0].count.location : 0,
-            }
-        }
-    }
-</script>

src/routes/[country]/[location]/index.ts

@@ -0,0 +1,76 @@
+import type { RequestEvent, RequestHandlerOutput } from '@sveltejs/kit'
+import { fetchAPI } from '$utils/api'
+
+export async function get({ params }: RequestEvent): Promise<RequestHandlerOutput> {
+    try {
+        const { location } = params
+
+        // Query
+        const res = await fetchAPI(`
+            query {
+                location (
+                    filter: {
+                        slug: { _eq: "${location}" },
+                        status: { _eq: "published" },
+                    }
+                ) {
+                    id
+                    name
+                    slug
+                    description
+                    date_updated
+                    illustration_desktop { id }
+                    illustration_desktop_2x { id }
+                    illustration_mobile { id }
+                    credits {
+                        credit_id {
+                            name
+                            website
+                        }
+                    }
+                    country { name }
+                    has_poster
+                }
+
+                photos: photo (
+                    filter: {
+                        location: { slug: { _eq: "${location}" }}
+                    },
+                    sort: "-date_created",
+                    limit: ${import.meta.env.VITE_LIST_AMOUNT},
+                    page: 1,
+                ) {
+                    title
+                    slug
+                    city
+                    image {
+                        id
+                        title
+                    }
+                    date_taken
+                    date_created
+                }
+
+                # Total
+                total_published: photo_aggregated (filter: { location: { slug: { _eq: "${location}" }}}) {
+                    count { location }
+                }
+            }
+        `)
+
+        const { data } = res
+
+        return {
+            body: {
+                location: data.location[0],
+                photos: data.photos,
+                totalPhotos: data.photos.length ? data.total_published[0].count.location : 0,
+            }
+        }
+    } catch (error) {
+        return {
+            status: 404,
+            body: error,
+        }
+    }
+}

src/routes/credits.svelte

@@ -149,44 +149,3 @@
 
     <InteractiveGlobe type="cropped" />
 </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 {
-                credits {
-                    text
-                    list
-                }
-
-                credit (filter: { status: { _eq: "published" }}) {
-                    name
-                    website
-                    location {
-                        location_id (filter: { status: { _eq: "published" }}) {
-                            name
-                            slug
-                            country {
-                                slug
-                                flag {
-                                    id
-                                }
-                            }
-                        }
-                    }
-                }
-            }
-        `)
-        const { data } = res
-
-        return {
-            props: {
-                data,
-            }
-        }
-    }
-</script>

src/routes/credits.ts

@@ -0,0 +1,45 @@
+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 {
+                credits {
+                    text
+                    list
+                }
+
+                credit (filter: { status: { _eq: "published" }}) {
+                    name
+                    website
+                    location {
+                        location_id (filter: { status: { _eq: "published" }}) {
+                            name
+                            slug
+                            country {
+                                slug
+                                flag {
+                                    id
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        `)
+
+        const { data } = res
+
+        return {
+            body: {
+                data
+            }
+        }
+    } catch (error) {
+        return {
+            status: 404,
+            body: error,
+        }
+    }
+}

src/routes/index.ts

@@ -30,10 +30,10 @@ export async function get({}: RequestEvent): Promise<RequestHandlerOutput> {
                 photos: data.photo
             }
         }
-
     } catch (error) {
         return {
             status: 404,
+            body: error,
         }
     }
 }

src/routes/photos.ts

@@ -72,6 +72,7 @@ export async function get({ url }: RequestEvent): Promise<RequestHandlerOutput>
     } catch (error) {
         return {
             status: 404,
+            body: error,
         }
     }
 }