[wip] Create photo detail page with informations

2021-10-16 22:32:13 +02:00
parent 9f41b33d6e
commit 62ddc32795
1 changed files with 111 additions and 1 deletions
--- a/src/routes/[country]/[location]/[photo].svelte
+++ b/src/routes/[country]/[location]/[photo].svelte
@@ -1 +1,111 @@
-photo page
+<script lang="ts">
+    import { page } from '$app/stores'
+    import dayjs from 'dayjs'
+    import advancedFormat from 'dayjs/plugin/advancedFormat.js'
+    // Components
+    import Image from '$components/atoms/Image.svelte'
+
+    export let photos: any[]
+    export let location: any
+    export let currentIndex: number
+
+    dayjs.extend(advancedFormat)
+
+    // let currentIndex: number = 0
+
+    // Find current photo from the slug
+    $: currentPhoto = photos.find((photo: any) => photo.slug === $page.params.photo)
+    $: currentPhotoIndex = photos.findIndex((photo: any) => photo.slug === $page.params.photo)
+
+
+    /**
+     * Go to next photo
+     */
+    const goToNext = () => {
+        currentIndex++
+    }
+
+
+    /**
+     * Go to previous photo
+     */
+    const goToPrevious = () => {
+        currentIndex--
+    }
+
+
+    /**
+     * Load photos
+     */
+</script>
+
+
+<h1>Title</h1>
+<p>{currentPhoto.title}</p>
+
+<h2>Location</h2>
+<p>{location.name}, {location.country.name}</p>
+<span style="vertical-align: middle;">&middot;</span>
+<time class="text-date" datetime={dayjs(currentPhoto.date_taken).format('YYYY-MM-DD')}>
+    {dayjs(currentPhoto.date_taken).format('MMMM, Do YYYY')}
+</time>
+
+<button on:click={goToPrevious}>Previous</button>
+<button on:click={goToNext}>Next</button>
+
+<Image
+    id={currentPhoto.image.id}
+    alt={currentPhoto.title}
+    sizes={{
+        small: { width: 500 },
+        medium: { width: 900 },
+        large: { width: 1440 },
+    }}
+    ratio={1.5}
+/>
+
+<p>index: {currentIndex + 1}</p>
+
+
+<script context="module" lang="ts">
+    import { fetchAPI } from '$utils/api'
+
+    export async function load ({ page, fetch, session, stuff }) {
+        const res = await fetchAPI(`
+            query {
+                photos: photo (
+                    filter: { location: { slug: { _eq: "${page.params.location}" }}},
+                    sort: "-date_created",
+                    limit: 9,
+                ) {
+                    title
+                    slug
+                    date_taken
+                    image {
+                        id
+                        title
+                    }
+                }
+
+                location (filter: { slug: { _eq: "${page.params.location}" }}) {
+                    name
+                    slug
+                    country { name }
+                }
+            }
+        `)
+
+        const { data } = res
+
+        // Find photo's index
+        const currentIndex = data.photos.findIndex((photo: any) => photo.slug === page.params.photo)
+
+        return {
+            props: {
+                photos: data.photos,
+                location: data.location[0],
+                currentIndex,
+            }
+        }
+    }
+</script>