From 89c55c17e2094db599cb141c6caad2315a4ebf42 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Sat, 23 Oct 2021 15:32:49 +0200
Subject: [PATCH] Bind Select's value to make it simpler and more reactive

---
 src/components/molecules/Select.svelte | 23 +++++++++--------------
 src/style/pages/_photos.scss           |  4 ++--
 2 files changed, 11 insertions(+), 16 deletions(-)

diff --git a/src/components/molecules/Select.svelte b/src/components/molecules/Select.svelte
index 5bb8d64..c11f4c3 100644
--- a/src/components/molecules/Select.svelte
+++ b/src/components/molecules/Select.svelte
@@ -15,16 +15,13 @@
 
     const dispatch = createEventDispatcher()
     const defaultOption = options.find(option => option.default)
-    const defaultOptionIndex = options.findIndex(option => option.default)
-    const selectedOptionIndex = options.findIndex(option => option.selected)
 
-    let current: number = selectedOptionIndex
-    let currentOptionEl: HTMLElement
-    $: currentOption = options[current]
+    let selected = value || options[0].value
+    $: currentOption = options.find(option => option.value === selected)
 
     // Redefine value from parent (when reset)
     $: if (value === defaultOption.value) {
-        current = defaultOptionIndex
+        selected = defaultOption.value
     }
 
 
@@ -32,23 +29,21 @@
      * When changing select value
      */
     const handleChange = ({ target: { value }}: any) => {
-        current = options.findIndex(option => option.value === value)
+        const option = options.find(option => option.value === value)
 
         // Dispatch event to parent
-        dispatch('change', options[current].value)
+        dispatch('change', option.value)
     }
 </script>
 
 <div class="select">
     <slot />
 
-    <span bind:this={currentOptionEl}>
-        {currentOption.name}
-    </span>
+    <span>{currentOption.name}</span>
 
-    <select {name} {id} on:change={handleChange}>
-        {#each options as { value, name }, index}
-            <option {value} selected={index === current}>
+    <select {name} {id} bind:value={selected} on:change={handleChange}>
+        {#each options as { value, name }}
+            <option {value} selected={value === selected}>
                 {name}
             </option>
         {/each}
diff --git a/src/style/pages/_photos.scss b/src/style/pages/_photos.scss
index 06c1b18..ba75472 100644
--- a/src/style/pages/_photos.scss
+++ b/src/style/pages/_photos.scss
@@ -122,7 +122,7 @@
                     opacity: 0;
                     position: absolute;
                     top: 0;
-                    left: 0;
+                    left: 8px;
                     width: 100%;
                     height: 100%;
                     cursor: pointer;
@@ -321,8 +321,8 @@
                 bottom: 0;
                 right: 0;
                 border-top-left-radius: 8px;
-                opacity: 0;
                 pointer-events: none;
+                opacity: 0;
                 transform: translate3d(12%, 23%, 0) rotate(-5deg);
                 transition: opacity 0.4s var(--ease-quart), transform 1.0s var(--ease-quart);
             }