Rework API calls and each loops

src/molecules/InteractiveGlobe.svelte

@@ -69,13 +69,13 @@
     <div class="wrap">
         <div class="globe__pins">
             {#if type !== 'part'}
-            {#each $locations as location}
+            {#each $locations as { name, slug, coordinates, country }}
-            <div class="pin pin--place" data-lat="{location.coordinates.lat}" data-lng="{location.coordinates.lng}">
+            <div class="pin pin--place" data-lat="{coordinates.lat}" data-lng="{coordinates.lng}">
-                <a href="/location/{location.country.slug}/{location.slug}" class="pin__dot" rel="prefetch">
+                <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">
+                <a href="/location/{country.slug}/{slug}" class="pin__name" rel="prefetch">
-                    <span>{location.name}</span>
+                    <span>{name}</span>
                 </a>
             </div>
             {/each}

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}

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>
+                <h2 class="title-category">{title}</h2>
-                {#each category.credits as person}
+                {#each credits as { name, role, website }, i}
                 <dl>
                     <dt class="style-location">
-                        {#if person.url}
+                        {#if website}
-                        <LinkTranslate href={person.url} text={person.name} target="_blank" rel="noopener" />
+                        <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>

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>
 

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 }

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
 }