From b990f944cac5f294b53ae7b942331de85e3b30eb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Sat, 22 Aug 2020 19:53:50 +0200
Subject: [PATCH] Add City field to photos

Used for regions/wider locations
---
 src/molecules/Photo.svelte                   |  6 +-
 src/routes/_layout.svelte                    | 60 +-------------------
 src/routes/location/[country]/[place].svelte |  5 +-
 src/utils/mainQuery.js                       | 58 +++++++++++++++++++
 4 files changed, 66 insertions(+), 63 deletions(-)
 create mode 100644 src/utils/mainQuery.js

diff --git a/src/molecules/Photo.svelte b/src/molecules/Photo.svelte
index b025aca..4795181 100644
--- a/src/molecules/Photo.svelte
+++ b/src/molecules/Photo.svelte
@@ -15,9 +15,9 @@
     const defaultHeight = Math.ceil(defaultWidth / 1.5)
 
     // Location related
-    const { name, date, location } = photo
+    const { name, date, location, city } = photo
     const { private_hash } = photo.image
-    const imgAlt = `${name}, ${location.region}, ${location.country.name}`
+    const imgAlt = `${name}, ${city ? city : location.region}, ${location.country.name}`
     const nameSplit = name.split(', ')
 
     // Photo index
@@ -44,7 +44,7 @@
                 </span>
                 {/each}
             </h2>
-            <p class="style-caps">{location.region}, {location.country.name}</p>
+            <p class="style-caps">{city ? city : location.region}, {location.country.name}</p>
         </div>
     </div>
 
diff --git a/src/routes/_layout.svelte b/src/routes/_layout.svelte
index 4e66a19..9c95d45 100644
--- a/src/routes/_layout.svelte
+++ b/src/routes/_layout.svelte
@@ -1,4 +1,6 @@
 <script context="module">
+    import mainQuery from 'utils/mainQuery'
+
     export async function preload (page, session) {
         await this.fetch(apiEndpoints.gql, {
             method: 'post',
@@ -6,63 +8,7 @@
                 'Content-Type': 'application/json',
                 'Authorization': 'bearer ' + process.env.CONFIG.API_TOKEN
             },
-            body: JSON.stringify({ query: `{
-                site {
-                    data {
-                        description
-                        explore_globe
-                        explore_list
-                        photos_per_page
-                        instagram
-                        seo_name
-                        seo_title_default
-                        seo_description_default
-                        seo_share_image { full_url }
-                        credits_text
-                        credits_list
-                        newsletter_text
-                        newsletter_subtitle
-                        newsletter_url
-                    }
-                }
-                continents {
-                    data {
-                        id
-                        name
-                        rotation_position
-                    }
-                }
-                countries {
-                    data {
-                        id
-                        name
-                        slug
-                        flag { full_url title }
-                        continent { id name }
-                    }
-                }
-                locations (filter: { status_eq: "published" }) {
-                    data {
-                        id
-                        name
-                        slug
-                        region
-                        country { id name slug }
-                        description
-                        close
-                        coordinates
-                        illu_desktop { full_url }
-                        illu_desktop_2x { full_url }
-                        illu_mobile { full_url }
-                    }
-                }
-                photos (filter: { status_eq: "published" }) {
-                    data {
-                        created_on
-                        location { id }
-                    }
-                }
-            }`})
+            body: JSON.stringify({ query: mainQuery })
         })
             .then(res => res.json())
             .then(res => {
diff --git a/src/routes/location/[country]/[place].svelte b/src/routes/location/[country]/[place].svelte
index 3ffed5c..d4a9b78 100644
--- a/src/routes/location/[country]/[place].svelte
+++ b/src/routes/location/[country]/[place].svelte
@@ -7,7 +7,7 @@
         const fields = [
             'id', 'name', 'slug', 'date', 'image.private_hash',
             'location.id', 'location.name', 'location.slug', 'location.region',
-            'location.country.name', 'location.country.slug',
+            'location.country.name', 'location.country.slug', 'city',
             'created_on', 'modified_on'
         ].join(',')
         const sort = ['-created_on', 'name'].join(',')
@@ -73,7 +73,6 @@
     ** Pagination
     */
     let photosPerPage = $site.photos_per_page
-    let currentIndex = photosPerPage
 
     // Hide photos by default
     photos.forEach((photo, index) => photo.hidden = (index + 1 > photosPerPage) ? true : false)
@@ -190,7 +189,7 @@
 
         {#if photos}
         <div class="photos__view wrap">
-            {#each paginatedPhotos as photo, index}
+            {#each paginatedPhotos as photo}
             <Photo {photo} index={photos.length - photos.indexOf(photo)} />
             {/each}
         </div>
diff --git a/src/utils/mainQuery.js b/src/utils/mainQuery.js
new file mode 100644
index 0000000..18fa31b
--- /dev/null
+++ b/src/utils/mainQuery.js
@@ -0,0 +1,58 @@
+export default `{
+    site {
+        data {
+            description
+            explore_globe
+            explore_list
+            photos_per_page
+            instagram
+            seo_name
+            seo_title_default
+            seo_description_default
+            seo_share_image { full_url }
+            credits_text
+            credits_list
+            newsletter_text
+            newsletter_subtitle
+            newsletter_url
+        }
+    }
+    continents {
+        data {
+            id
+            name
+            rotation_position
+        }
+    }
+    countries {
+        data {
+            id
+            name
+            slug
+            flag { full_url title }
+            continent { id name }
+        }
+    }
+    locations (filter: { status_eq: "published" }) {
+        data {
+            id
+            name
+            slug
+            region
+            country { id name slug }
+            description
+            close
+            coordinates
+            illu_desktop { full_url }
+            illu_desktop_2x { full_url }
+            illu_mobile { full_url }
+        }
+    }
+    photos (filter: { status_eq: "published" }) {
+        data {
+            created_on
+            location { id }
+            city
+        }
+    }
+}`
\ No newline at end of file