From 5ac5d6803f32ab84c86870d4e5a1f3cebfe46a66 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Tue, 31 Mar 2020 10:35:51 +0200
Subject: [PATCH] Use Destructuring variables to avoid repetitions

- Easier to read and write
- Also fixes fullscreen when leaving the viewer, my bad
---
 src/molecules/Location.svelte   | 11 +++++++----
 src/molecules/Photo.svelte      | 33 +++++++++++++++++----------------
 src/molecules/Switcher.svelte   |  2 +-
 src/organisms/Carousel.svelte   | 32 +++++++++++++++++---------------
 src/organisms/Fullscreen.svelte | 10 ++++------
 5 files changed, 46 insertions(+), 42 deletions(-)

diff --git a/src/molecules/Location.svelte b/src/molecules/Location.svelte
index 4f108a8..0756d72 100644
--- a/src/molecules/Location.svelte
+++ b/src/molecules/Location.svelte
@@ -1,16 +1,19 @@
 <script>
     // Props
     export let location
+
+    // Variables
+    const { name, slug, country } = location
 </script>
 
 <div class="location">
-    <a href="/location/{location.country.slug}/{location.slug}" rel="prefetch" sapper-noscroll>
-        <img src={location.country.flag.full_url} alt="Flag of {location.country.name}">
+    <a href="/location/{country.slug}/{slug}" rel="prefetch" sapper-noscroll>
+        <img src={country.flag.full_url} alt="Flag of {country.name}">
         <div class="anim-mask mask-city">
-            <h3 class="location__city">{location.name}</h3>
+            <h3 class="location__city">{name}</h3>
         </div>
         <div class="anim-mask mask-country">
-            <p class="location__country style-caps">{location.country.name}</p>
+            <p class="location__country style-caps">{country.name}</p>
         </div>
     </a>
 </div>
diff --git a/src/molecules/Photo.svelte b/src/molecules/Photo.svelte
index 5722e8c..6f47074 100644
--- a/src/molecules/Photo.svelte
+++ b/src/molecules/Photo.svelte
@@ -17,8 +17,9 @@
     const defaultHeight = Math.ceil(defaultWidth / 1.5)
 
     // Reactive variables for location informations
-    const location = photo.location
-    const imgAlt = `${photo.name}, ${location.region}, ${location.country.name}`
+    const { name, date, location } = photo
+    const { private_hash } = photo.image
+    const imgAlt = `${name}, ${location.region}, ${location.country.name}`
     const photoHref = `/viewer/${location.country.slug}/${location.slug}/${photo.slug}`
 
     // Photo index
@@ -37,8 +38,8 @@
     <div class="photo__location wrap">
         <div class="wrapper">
             <h2 class="title-location">
-                <span>{photo.name.split(', ')[0]},</span>
-                <span>{photo.name.split(', ')[1]}</span>
+                <span>{name.split(', ')[0]},</span>
+                <span>{name.split(', ')[1]}</span>
             </h2>
             <p class="style-caps">{location.region}, {location.country.name}</p>
         </div>
@@ -49,28 +50,28 @@
             <a href={photoHref} sapper-noscroll>
                 <picture class="photo__picture">
                     {#if layout === 'list'}
-                    <source media="(min-width: 992px)" data-srcset={getThumbnail(photo.image.private_hash, 1300)}>
-                    <source media="(min-width: 768px)" data-srcset={getThumbnail(photo.image.private_hash, 992)}>
-                    <source media="(min-width: 500px)" data-srcset={getThumbnail(photo.image.private_hash, 650)}>
-                    <source media="(min-width: 300px)" data-srcset={getThumbnail(photo.image.private_hash, 400)}>
+                    <source media="(min-width: 992px)" srcset={getThumbnail(private_hash, 1300)}>
+                    <source media="(min-width: 768px)" srcset={getThumbnail(private_hash, 992)}>
+                    <source media="(min-width: 500px)" srcset={getThumbnail(private_hash, 650)}>
+                    <source media="(min-width: 300px)" srcset={getThumbnail(private_hash, 400)}>
                     <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/+HRfwAJmQPS6gISLwAAAABJRU5ErkJggg=="
-                        data-src="{getThumbnail(photo.image.private_hash, 900)}"
+                        data-src="{getThumbnail(private_hash, 900)}"
                         alt={imgAlt}
                         width={defaultWidth} height={defaultHeight}
                         class="lazyload"
                     >
 
                     {:else}
-                    <source media="(min-width: 992px)" srcset={getThumbnail(photo.image.private_hash, 1300)}>
-                    <source media="(min-width: 768px)" srcset={getThumbnail(photo.image.private_hash, 992)}>
-                    <source media="(min-width: 500px)" srcset={getThumbnail(photo.image.private_hash, 650)}>
-                    <source media="(min-width: 300px)" srcset={getThumbnail(photo.image.private_hash, 400)}>
-                    <img src="{getThumbnail(photo.image.private_hash, 900)}" alt={imgAlt} width={defaultWidth} height={defaultHeight}>
+                    <source media="(min-width: 992px)" srcset={getThumbnail(private_hash, 1300)}>
+                    <source media="(min-width: 768px)" srcset={getThumbnail(private_hash, 992)}>
+                    <source media="(min-width: 500px)" srcset={getThumbnail(private_hash, 650)}>
+                    <source media="(min-width: 300px)" srcset={getThumbnail(private_hash, 400)}>
+                    <img src="{getThumbnail(private_hash, 900)}" alt={imgAlt} width={defaultWidth} height={defaultHeight}>
                     {/if}
                 </picture>
             </a>
-            <time class="photo__date" datetime={formatDate(photo.date, 'DATETIME')}>
-                {formatDate(photo.date, 'FULL')}
+            <time class="photo__date" datetime={formatDate(date, 'DATETIME')}>
+                {formatDate(date, 'FULL')}
             </time>
             <div class="photo__number">
                 <span>{photoIndex}</span>
diff --git a/src/molecules/Switcher.svelte b/src/molecules/Switcher.svelte
index 2c33533..b8005e5 100644
--- a/src/molecules/Switcher.svelte
+++ b/src/molecules/Switcher.svelte
@@ -8,7 +8,7 @@
     export let type = ''
     export let radius = 32
 
-    // Location variables
+    // Variables
     let location
     let locationName
     let locationOf
diff --git a/src/organisms/Carousel.svelte b/src/organisms/Carousel.svelte
index d399d8c..3e3e7a5 100644
--- a/src/organisms/Carousel.svelte
+++ b/src/organisms/Carousel.svelte
@@ -25,6 +25,8 @@
     let scope
     let swiped
     let currentIndex = 0
+
+    // Reactive variables from currentIndex
     $: currentPhoto = photos[currentIndex] || null
     $: prevPhoto = photos[currentIndex - 1] || photos[photos.length - 1]
     $: nextPhoto = photos[currentIndex + 1] || photos[0]
@@ -140,18 +142,18 @@
     <div class="wrap">
         <div class="gallery">
             <div class="gallery__images">
-                {#each photos as photo, index}
+                {#each photos as { id, name, location, image }, index}
                 <picture class="gallery__photo"
-                    class:gallery__photo--prev={photo === prevPhoto}
-                    class:gallery__photo--active={photo === currentPhoto}
-                    class:gallery__photo--next={photo === nextPhoto}
+                    class:gallery__photo--prev={id === prevPhoto.id}
+                    class:gallery__photo--active={id === currentPhoto.id}
+                    class:gallery__photo--next={id === nextPhoto.id}
                     on:click={openFullscreen}
                 >
-                    <source media="(min-width: 968px)" srcset={getThumbnail(photo.image.private_hash, 1400)}>
-                    <source media="(min-width: 800px)" srcset={getThumbnail(photo.image.private_hash, 900)}>
-                    <source media="(min-width: 500px)" srcset={getThumbnail(photo.image.private_hash, 600)}>
-                    <source media="(min-width: 300px)" srcset={getThumbnail(photo.image.private_hash, 400)}>
-                    <img src="{getThumbnail(photo.image.private_hash, 900)}" alt="{photo.name}, {photo.location.name}, {photo.location.country.name}">
+                    <source media="(min-width: 968px)" srcset={getThumbnail(image.private_hash, 1400)}>
+                    <source media="(min-width: 800px)" srcset={getThumbnail(image.private_hash, 900)}>
+                    <source media="(min-width: 500px)" srcset={getThumbnail(image.private_hash, 600)}>
+                    <source media="(min-width: 300px)" srcset={getThumbnail(image.private_hash, 400)}>
+                    <img src="{getThumbnail(image.private_hash, 900)}" alt="{name}, {location.name}, {location.country.name}">
                 </picture>
                 {/each}
             </div>
@@ -185,15 +187,15 @@
 
         <div class="carousel__infos">
             <div class="carousel__locations">
-                {#each photos as photo, index}
+                {#each photos as { id, name, location }, index}
                 <div class="carousel__location style-location"
-                    class:carousel__location--prev={photo === prevPhoto}
-                    class:carousel__location--active={photo === currentPhoto}
-                    class:carousel__location--next={photo === nextPhoto}
+                    class:carousel__location--prev={id === prevPhoto.id}
+                    class:carousel__location--active={id === currentPhoto.id}
+                    class:carousel__location--next={id === nextPhoto.id}
                 >
-                    <p class="street">{photo.name}</p>
+                    <p class="street">{name}</p>
                     <p class="state style-caps style-caps--transparent">
-                        {photo.location.name}, {photo.location.country.name}
+                        {location.name}, {location.country.name}
                     </p>
                 </div>
                 {/each}
diff --git a/src/organisms/Fullscreen.svelte b/src/organisms/Fullscreen.svelte
index a4dffac..67b549a 100644
--- a/src/organisms/Fullscreen.svelte
+++ b/src/organisms/Fullscreen.svelte
@@ -16,10 +16,7 @@
     let closed = false
 
     // Wait for fullscreen store value
-    $: {
-        if ($fullscreen) openFullscreen($fullscreen)
-        else closeFullscreen()
-    }
+    $: if ($fullscreen) openFullscreen($fullscreen)
 
 
     /*
@@ -27,13 +24,14 @@
     */
     // Open fullscreen
     const openFullscreen = throttle(currentPhoto => {
+        const { name, image, location } = currentPhoto
         loading = true
 
         if (!open) {
             const img = document.createElement('img')
             const imgContainer = scope.querySelector('.fullscreen__image')
-            img.src = getThumbnail(currentPhoto.image.private_hash, null, 1600, 'crop', 80)
-            img.alt = `${currentPhoto.name}, ${currentPhoto.location.name}, ${currentPhoto.location.country.name}`
+            img.src = getThumbnail(image.private_hash, null, 1600, 'crop', 80)
+            img.alt = `${name}, ${location.name}, ${location.country.name}`
             img.width = 2400
             img.height = 1600
             imgContainer.append(img)