From bee59dab9045ec8be428265072e9aed983cbd673 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Sun, 26 Sep 2021 23:36:58 +0200
Subject: [PATCH] Query Location page content

---
 src/routes/[country]/[location].svelte        |  1 -
 .../[country]/[location]/[photo].svelte       |  1 +
 src/routes/[country]/[location]/index.svelte  | 65 +++++++++++++++++++
 3 files changed, 66 insertions(+), 1 deletion(-)
 delete mode 100644 src/routes/[country]/[location].svelte
 create mode 100644 src/routes/[country]/[location]/[photo].svelte
 create mode 100644 src/routes/[country]/[location]/index.svelte

diff --git a/src/routes/[country]/[location].svelte b/src/routes/[country]/[location].svelte
deleted file mode 100644
index 12fd75f..0000000
--- a/src/routes/[country]/[location].svelte
+++ /dev/null
@@ -1 +0,0 @@
-<h1>Hello location</h1>
\ No newline at end of file
diff --git a/src/routes/[country]/[location]/[photo].svelte b/src/routes/[country]/[location]/[photo].svelte
new file mode 100644
index 0000000..fb67c2f
--- /dev/null
+++ b/src/routes/[country]/[location]/[photo].svelte
@@ -0,0 +1 @@
+photo page
\ No newline at end of file
diff --git a/src/routes/[country]/[location]/index.svelte b/src/routes/[country]/[location]/index.svelte
new file mode 100644
index 0000000..4406bd8
--- /dev/null
+++ b/src/routes/[country]/[location]/index.svelte
@@ -0,0 +1,65 @@
+<script lang="ts">
+    import { page } from '$app/stores'
+    // Components
+    import Image from '$components/atoms/Image.svelte'
+
+    export let data: any
+    export let photos: any
+
+    const { params } = $page
+</script>
+
+<h1>Hello {data.name}</h1>
+
+{#each photos as { image: { id, title }, slug }}
+    <div class="photo">
+        <a href="/{params.country}/{params.location}/{slug}">
+            <Image
+                id={id}
+                alt="{title}, {data.name}"
+                width={1000}
+                height={600}
+                format="webp"
+            />
+        </a>
+    </div>
+{/each}
+
+
+<script context="module" lang="ts">
+    import { fetchAPI } from '$utils/api'
+
+    export async function load ({ page, session, fetch, context }) {
+        const { location } = page.params
+
+        const res = await fetchAPI(`
+            query {
+                location (filter: { slug: { _eq: "${location}" } }) {
+                    name
+                    slug
+                    description
+                    date_updated
+                }
+
+                photo (filter: { location: { slug: { _eq: "${location}" } }}) {
+                    title
+                    slug
+                    date_taken
+                    image {
+                        id
+                        title
+                    }
+                }
+            }
+        `)
+
+        const { data } = res
+
+        return {
+            props: {
+                data: data.location[0],
+                photos: data.photo,
+            }
+        }
+    }
+</script>
\ No newline at end of file