Make selects and reset button reactive on Photos filters

src/components/molecules/Select.svelte

@@ -4,19 +4,27 @@
     interface Option {
         value: string
         name: string
+        default?: boolean
     }
 
     export let id: string
     export let name: string
-    export let base: Option
     export let options: Option[]
+    export let value: string = undefined
 
     const dispatch = createEventDispatcher()
+    const defaultOption = options.find(option => option.default)
+    const defaultOptionIndex = options.findIndex(option => option.default)
 
-    let current: number = 0
+    let current: number = defaultOptionIndex
     let currentOptionEl: HTMLElement
     $: currentOption = options[current]
 
+    // Redefine value from parent (when reset)
+    $: if (value === defaultOption.value) {
+        current = defaultOptionIndex
+    }
+
 
     /**
      * When changing select value
@@ -37,8 +45,8 @@
     </span>
 
     <select {name} {id} on:change={handleChange}>
-        {#each options as { value, name }}
+        {#each options as { value, name }, index}
-            <option {value}>
+            <option {value} selected={index === current}>
                 {name}
             </option>
         {/each}

src/routes/photos.svelte

@@ -1,33 +1,62 @@
 <script lang="ts">
     import { getContext } from 'svelte'
+    import { fly } from 'svelte/transition'
+    import { quartOut } from 'svelte/easing'
     // Components
     import Metas from '$components/Metas.svelte'
+    import IconEarth from '$components/atoms/IconEarth.svelte'
     import Button from '$components/atoms/Button.svelte'
+    import Image from '$components/atoms/Image.svelte'
+    import DiscoverText from '$components/atoms/DiscoverText.svelte'
+    import PostCard from '$components/molecules/PostCard.svelte'
+    import Select from '$components/molecules/Select.svelte'
     import Shop from '$components/organisms/Shop.svelte'
     import Newsletter from '$components/organisms/Newsletter.svelte'
-    import Image from '$components/atoms/Image.svelte';
-    import PostCard from '$components/molecules/PostCard.svelte';
 
     export let photos: any
 
     const { country: countries }: any = getContext('global')
 
-    let filtered: boolean = false
     let buttonReset: HTMLElement
     let buttonShuffle: HTMLElement
 
+    // Filters
+    const defaultCountry = 'all'
+    const defaultSort = 'latest'
+    let filtered: boolean = false
+    let filterCountry = defaultCountry
+    let filterSort = defaultSort
+
 
     /**
      * Select change events
      */
-    // Location select
+    // Country select
-    const handleLocationChange = ({ detail: value }) => {
+    const handleCountryChange = ({ detail: value }) => {
         console.log(value)
+        filtered = true
+        filterCountry = value
+
+        // TODO: Request photos from the country of choice
     }
 
     // Sort select
     const handleSortChange = ({ detail: value }) => {
         console.log(value)
+        filtered = true
+        filterSort = value
+
+        // TODO: Request photos sorted by the choice
+    }
+
+
+    /**
+     * Reset filters
+     */
+    const resetFiltered = () => {
+        filtered = false
+        filterCountry = defaultCountry
+        filterSort = defaultSort
     }
 </script>
 
@@ -50,16 +79,16 @@
                 <ul>
                     <li>
                         <Select
-                            name="location" id="filter_location"
+                            name="country" id="filter_country"
-                            base={{ value: 'all', name: 'Worldwide' }}
                             options={[
-                                { value: 'all', name: 'Worldwide' },
+                                { value: 'all', name: 'Worldwide', default: true },
                                 ...countries.map(({ slug, name }) => ({
                                     value: slug,
-                                    name
+                                    name,
                                 }))
                             ]}
-                            on:change={handleLocationChange}
+                            on:change={handleCountryChange}
+                            value={filterCountry}
                         >
                             <img src="/images/icons/earth.svg" alt="Earth">
                         </Select>
@@ -67,14 +96,16 @@
                     <li>
                         <Select
                             name="sort" id="filter_sort"
-                            base={{ value: 'all', name: 'Worldwide' }}
                             options={[
-                                { value: 'latest', name: 'Latest photos' },
+                                { value: 'latest', name: 'Latest photos', default: true },
                                 { value: 'oldest', name: 'Oldest photos' },
                             ]}
                             on:change={handleSortChange}
+                            value={filterSort}
                         >
-                            <img src="/images/icons/sort.svg" alt="Sort">
+                            <svg class="icon" width="24" height="24" viewBox="0 0 24 24" fill="#fff" xmlns="http://www.w3.org/2000/svg" aria-label="Sort icon">
+                                <path fill-rule="evenodd" clip-rule="evenodd" d="M15.878 15.93h-4.172c-.638 0-1.153.516-1.153 1.154 0 .639.515 1.154 1.153 1.154h4.172c.638 0 1.153-.515 1.153-1.154a1.152 1.152 0 0 0-1.153-1.153Zm3.244-5.396h-7.405c-.639 0-1.154.515-1.154 1.153 0 .639.515 1.154 1.154 1.154h7.405c.639 0 1.154-.515 1.154-1.154a1.145 1.145 0 0 0-1.154-1.153Zm3.244-5.408h-10.65c-.638 0-1.153.515-1.153 1.154 0 .639.515 1.154 1.154 1.154h10.65c.638 0 1.153-.515 1.153-1.154 0-.639-.515-1.154-1.154-1.154ZM7.37 20.679V3.376c0-.145-.03-.289-.082-.433a1.189 1.189 0 0 0-.628-.618 1.197 1.197 0 0 0-.886 0 1.045 1.045 0 0 0-.36.237c-.01 0-.01 0-.021.01L.82 7.145a1.156 1.156 0 0 0 0 1.638 1.156 1.156 0 0 0 1.637 0l2.596-2.596v11.7l-2.596-2.595a1.156 1.156 0 0 0-1.637 0 1.156 1.156 0 0 0 0 1.638l4.573 4.573c.103.103.237.185.37.247.135.062.289.082.433.082h.02c.145 0 .3-.03.433-.093a1.14 1.14 0 0 0 .629-.628.987.987 0 0 0 .092-.432Z" />
+                            </svg>
                         </Select>
                     </li>
                 </ul>
@@ -82,12 +113,17 @@
 
             <div class="filter__actions">
                 {#if filtered}
-                    <button class="reset button-link" bind:this={buttonReset}>
+                    <button class="reset button-link" bind:this={buttonReset}
+                        on:click={resetFiltered}
+                        transition:fly={{ y: 4, duration: 600, easing: quartOut }}
+                    >
                         Reset
                     </button>
                 {/if}
                 <button class="shuffle" bind:this={buttonShuffle}>
-                    <img src="/images/icons/shuffle.svg" alt="">
+                    <svg width="14" height="14" viewBox="0 0 14 14" fill="#3C0576" xmlns="http://www.w3.org/2000/svg" aria-label="Shuffle icon">
+                        <path fill-rule="evenodd" clip-rule="evenodd" d="M10.8168 13.7928C10.565 13.5166 10.565 13.0688 10.8168 12.7925L11.6371 11.8927C10.0729 11.7978 8.9174 11.2494 8.00077 10.4379C7.01752 9.56747 6.3426 8.41893 5.73606 7.382L5.72202 7.358C5.10114 6.29653 4.5499 5.35411 3.79106 4.65375C3.05738 3.97661 2.10408 3.50731 0.644748 3.50731C0.288663 3.50731 0 3.19063 0 2.8C0 2.40936 0.288666 2.09269 0.644751 2.09269C2.39889 2.0927 3.64837 2.6734 4.62121 3.57126C5.53188 4.41176 6.17567 5.5133 6.76119 6.51514L6.82133 6.61801C7.44316 7.68108 8.01476 8.63254 8.81058 9.33707C9.55258 9.99396 10.5204 10.4595 11.9721 10.491L10.8168 9.22362C10.565 8.9474 10.565 8.49956 10.8168 8.22333C11.0686 7.94711 11.4768 7.94711 11.7286 8.22333L13.8112 10.5079C14.0629 10.7842 14.0629 11.232 13.8112 11.5082L11.7286 13.7928C11.4768 14.0691 11.0686 14.0691 10.8168 13.7928ZM10.8168 5.77667C10.565 5.50045 10.565 5.0526 10.8168 4.77638L11.972 3.50905C10.5204 3.54053 9.55258 4.00608 8.81058 4.66297C8.50789 4.93094 8.23764 5.23463 7.98472 5.5666C7.73665 5.18234 7.48128 4.77156 7.2176 4.37967C7.45664 4.09011 7.71575 3.81442 8.00077 3.5621C8.9174 2.75061 10.0729 2.2022 11.6371 2.10738L10.8168 1.20745C10.565 0.931231 10.565 0.483387 10.8168 0.207166C11.0686 -0.0690553 11.4768 -0.0690553 11.7286 0.207166L13.8112 2.49177C14.0629 2.768 14.0629 3.21584 13.8112 3.49206L11.7286 5.77667C11.4768 6.05289 11.0686 6.05289 10.8168 5.77667ZM0 11.2C0 11.5907 0.288666 11.9073 0.644751 11.9073C2.39889 11.9073 3.64837 11.3266 4.62121 10.4288C4.82778 10.2381 5.02061 10.034 5.20215 9.82074C5.03927 9.5548 4.88613 9.293 4.73943 9.0422L4.73621 9.0367C4.647 8.88418 4.56006 8.73561 4.47456 8.59108C4.26231 8.86556 4.03764 9.11871 3.79106 9.34629C3.05738 10.0234 2.10408 10.4927 0.644748 10.4927C0.288663 10.4927 0 10.8094 0 11.2Z" />
+                    </svg>
                 </button>
             </div>
         </div>
@@ -96,7 +132,7 @@
     <section class="photos__content">
         <div class="grid container">
             <div class="photos__grid">
-                {#each Array(21) as _}
+                {#each Array(22 * 2) as _}
                     <div class="photo shadow-photo">
                         <a href="/country/location/photo-slug">
                             <Image id="5a45ba18-7b78-48e0-a299-302b1ea9b77b" width={1200} height={800} alt="image" />
@@ -118,7 +154,7 @@
             <div class="grid-modules">
                 <div class="wrap">
                     <Shop />
-                    <Newsletter />
+                    <Newsletter theme="light" />
                 </div>
             </div>
         </div>