From 9965c9dec3f4e89c2613d82e8112e1bd368fee55 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Mon, 16 Mar 2020 12:57:53 +0100
Subject: [PATCH] Rework API calls and each loops

---
 src/molecules/InteractiveGlobe.svelte        | 10 +++++-----
 src/organisms/Carousel.svelte                |  6 +++++-
 src/routes/credits.svelte                    | 16 +++++++++-------
 src/routes/index.svelte                      |  9 +++++++--
 src/routes/location/[country]/[place].svelte |  9 ++++++++-
 src/utils/store.js                           |  3 ++-
 6 files changed, 36 insertions(+), 17 deletions(-)

diff --git a/src/molecules/InteractiveGlobe.svelte b/src/molecules/InteractiveGlobe.svelte
index 6c5c824..3a0f1d5 100644
--- a/src/molecules/InteractiveGlobe.svelte
+++ b/src/molecules/InteractiveGlobe.svelte
@@ -69,13 +69,13 @@
     <div class="wrap">
         <div class="globe__pins">
             {#if type !== 'part'}
-            {#each $locations as location}
-            <div class="pin pin--place" data-lat="{location.coordinates.lat}" data-lng="{location.coordinates.lng}">
-                <a href="/location/{location.country.slug}/{location.slug}" class="pin__dot" rel="prefetch">
+            {#each $locations as { name, slug, coordinates, country }}
+            <div class="pin pin--place" data-lat="{coordinates.lat}" data-lng="{coordinates.lng}">
+                <a href="/location/{country.slug}/{slug}" class="pin__dot" rel="prefetch">
                     <i class="pin__dot"></i>
                 </a>
-                <a href="/location/{location.country.slug}/{location.slug}" class="pin__name" rel="prefetch">
-                    <span>{location.name}</span>
+                <a href="/location/{country.slug}/{slug}" class="pin__name" rel="prefetch">
+                    <span>{name}</span>
                 </a>
             </div>
             {/each}
diff --git a/src/organisms/Carousel.svelte b/src/organisms/Carousel.svelte
index c34940a..bf9e982 100644
--- a/src/organisms/Carousel.svelte
+++ b/src/organisms/Carousel.svelte
@@ -98,7 +98,9 @@
     */
     onMount(() => {
         // Entering transition
-        animateIn(scope)
+        if (photos.length) {
+            animateIn(scope)
+        }
 
         // Hover function
         hover = event => {
@@ -129,6 +131,7 @@
 
 <svelte:window on:keydown={keyboardNav} />
 
+{#if photos.length}
 <div class="carousel"
     on:touchstart={swipeStart}
     on:touchend={swipeEnd}
@@ -208,3 +211,4 @@
         {/each}
     </ol>
 </div>
+{/if}
diff --git a/src/routes/credits.svelte b/src/routes/credits.svelte
index ef575e1..7d83a4f 100644
--- a/src/routes/credits.svelte
+++ b/src/routes/credits.svelte
@@ -50,25 +50,27 @@
             <p>{$site.credits_text}</p>
         </div>
 
+        {#if $site.credits_list}
         <div class="page__list page__part">
-            {#each $site.credits_list as category}
+            {#each $site.credits_list as { title, credits }}
             <div class="page__category">
-                <h2 class="title-category">{category.name}</h2>
-                {#each category.credits as person}
+                <h2 class="title-category">{title}</h2>
+                {#each credits as { name, role, website }, i}
                 <dl>
                     <dt class="style-location">
-                        {#if person.url}
-                        <LinkTranslate href={person.url} text={person.name} target="_blank" rel="noopener" />
+                        {#if website}
+                        <LinkTranslate href={website} text={name} target="_blank" rel="noopener" />
                         {:else}
-                        {person.name}
+                        {name}
                         {/if}
                     </dt>
-                    <dd class="style-caps style-caps style-caps--transparent">{person.role}</dd>
+                    <dd class="style-caps style-caps style-caps--transparent">{role}</dd>
                 </dl>
                 {/each}
             </div>
             {/each}
         </div>
+        {/if}
 
         <InteractiveGlobe type="part" />
     </div>
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index 2ade781..067f915 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -4,13 +4,18 @@
 	// Preload data
 	export async function preload (page, session) {
         // Load random photos
+        const fields = [
+            'id', 'name', 'image.private_hash',
+            'location.id', 'location.name', 'location.slug', 'location.country.name'
+        ]
+        const sort = '?'
         const limit = 5
-		const req = await this.fetch(`${apiEndpoints.rest}/items/photos?fields=id,name,image.*,location.*,location.country.name&sort=?&limit=${limit}`)
+        const req = await this.fetch(`${apiEndpoints.rest}/items/photos?fields=${fields.join()}&sort=${sort}&limit=${limit}`)
         const photos = await req.json()
 		if (req.ok) {
             return { photos: photos.data }
         }
-		this.error(404, 'Not found')
+        this.error(404, 'Not found')
 	}
 </script>
 
diff --git a/src/routes/location/[country]/[place].svelte b/src/routes/location/[country]/[place].svelte
index cacc45b..fd5a2af 100644
--- a/src/routes/location/[country]/[place].svelte
+++ b/src/routes/location/[country]/[place].svelte
@@ -4,7 +4,14 @@
     // Preload data
     export async function preload (page, session) {
         // Load photos
-        const req = await this.fetch(`${apiEndpoints.rest}/items/photos?fields=id,name,slug,date,image.*,location.*,location.country.*,created_on,modified_on&filter[location.slug][rlike]=%${page.params.place}%&limit=-1&sort=-created_on,name`)
+        const fields = [
+            'id', 'name', 'slug', 'date', 'image.*',
+            'location.id', 'location.name', 'location.region', 'location.country.name',
+            'created_on', 'modified_on'
+        ]
+        const sort = ['-created_on', 'name']
+        const limit = -1
+        const req = await this.fetch(`${apiEndpoints.rest}/items/photos?fields=${fields.join()}&filter[location.slug][rlike]=%${page.params.place}%&limit=${limit}&sort=${sort.join()}`)
         const photos = await req.json()
         if (req.ok) {
             return { photos: photos.data }
diff --git a/src/utils/store.js b/src/utils/store.js
index 19123c5..909725f 100644
--- a/src/utils/store.js
+++ b/src/utils/store.js
@@ -9,8 +9,9 @@ export const dev = process.env.NODE_ENV === 'development'
    Site related
 ========================================================================== */
 const apiEndpoint = dev ? 'http://api.housesof.localhost/how' : 'https://api.housesof.world/_'
+const apiAccessToken = 'NJk0urljsdSvApUDzWxGgoO6'
 export const apiEndpoints = {
-    gql: apiEndpoint + '/gql?access_token=NJk0urljsdSvApUDzWxGgoO6',
+    gql: `${apiEndpoint}/gql?access_token=${apiAccessToken}`,
     rest: apiEndpoint
 }