From 4df9cdedd6046d6cf52ec17671b146e0654b4cca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Mon, 4 Oct 2021 13:05:39 +0200
Subject: [PATCH] Make custom Selects reactive

---
 src/components/molecules/Select.svelte | 46 +++++++++++++++++++
 src/routes/photos.svelte               | 62 ++++++++++++++++++++------
 2 files changed, 94 insertions(+), 14 deletions(-)
 create mode 100644 src/components/molecules/Select.svelte

diff --git a/src/components/molecules/Select.svelte b/src/components/molecules/Select.svelte
new file mode 100644
index 0000000..fd6e7c0
--- /dev/null
+++ b/src/components/molecules/Select.svelte
@@ -0,0 +1,46 @@
+<script lang="ts">
+    import { createEventDispatcher } from 'svelte';
+
+    interface Option {
+        value: string
+        name: string
+    }
+
+    export let id: string
+    export let name: string
+    export let base: Option
+    export let options: Option[]
+
+    const dispatch = createEventDispatcher()
+
+    let current: number = 0
+    let currentOptionEl: HTMLElement
+    $: currentOption = options[current]
+
+
+    /**
+     * When changing select value
+     */
+    const handleChange = ({ target: { value }}: any) => {
+        current = options.findIndex(option => option.value === value)
+
+        // Dispatch event to parent
+        dispatch('change', options[current].value)
+    }
+</script>
+
+<div class="select">
+    <slot />
+
+    <span bind:this={currentOptionEl}>
+        {currentOption.name}
+    </span>
+
+    <select {name} {id} on:change={handleChange}>
+        {#each options as { value, name }}
+            <option {value}>
+                {name}
+            </option>
+        {/each}
+    </select>
+</div>
\ No newline at end of file
diff --git a/src/routes/photos.svelte b/src/routes/photos.svelte
index 29758c0..a2da598 100644
--- a/src/routes/photos.svelte
+++ b/src/routes/photos.svelte
@@ -4,12 +4,31 @@
     import Metas from '$components/Metas.svelte'
     import Button from '$components/atoms/Button.svelte'
     import DiscoverText from '$components/atoms/DiscoverText.svelte'
+    import Select from '$components/molecules/Select.svelte'
     import Shop from '$components/organisms/Shop.svelte'
     import Newsletter from '$components/organisms/Newsletter.svelte'
 
     export let photos: any
 
     const { country: countries }: any = getContext('global')
+
+    let filtered: boolean = false
+    let buttonReset: HTMLElement
+    let buttonShuffle: HTMLElement
+
+
+    /**
+     * Select change events
+     */
+    // Location select
+    const handleLocationChange = ({ detail: value }) => {
+        console.log(value)
+    }
+
+    // Sort select
+    const handleSortChange = ({ detail: value }) => {
+        console.log(value)
+    }
 </script>
 
 <Metas
@@ -30,29 +49,44 @@
             <div class="filter__bar">
                 <ul>
                     <li>
-                        <div class="select">
+                        <Select
+                            name="location" id="filter_location"
+                            base={{ value: 'all', name: 'Worldwide' }}
+                            options={[
+                                { value: 'all', name: 'Worldwide' },
+                                ...countries.map(({ slug, name }) => ({
+                                    value: slug,
+                                    name
+                                }))
+                            ]}
+                            on:change={handleLocationChange}
+                        >
                             <img src="/images/icons/earth.svg" alt="Earth">
-                            <span>Worldwide</span>
-                            <select name="location" id="filter_location">
-                                <option value="worldwide">Worldwide</option>
-                            </select>
-                        </div>
+                        </Select>
                     </li>
                     <li>
-                        <div class="select">
+                        <Select
+                            name="sort" id="filter_sort"
+                            base={{ value: 'all', name: 'Worldwide' }}
+                            options={[
+                                { value: 'latest', name: 'Latest photos' },
+                                { value: 'oldest', name: 'Oldest photos' },
+                            ]}
+                            on:change={handleSortChange}
+                        >
                             <img src="/images/icons/sort.svg" alt="Sort">
-                            <span>Worldwide</span>
-                            <select name="location" id="filter_location">
-                                <option value="worldwide">Worldwide</option>
-                            </select>
-                        </div>
+                        </Select>
                     </li>
                 </ul>
             </div>
 
             <div class="filter__actions">
-                <a href="#">Reset</a>
-                <button class="shuffle">
+                {#if filtered}
+                    <button class="reset button-link" bind:this={buttonReset}>
+                        Reset
+                    </button>
+                {/if}
+                <button class="shuffle" bind:this={buttonShuffle}>
                     <img src="/images/icons/shuffle.svg" alt="">
                 </button>
             </div>