From 8b0de919d89cb81b77af47f10937435a8cc318ad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Fri, 8 Oct 2021 23:33:41 +0200
Subject: [PATCH] [wip] Make Select filters reactive

---
 src/routes/photos.svelte | 56 +++++++++++++++++++++++++++++++---------
 1 file changed, 44 insertions(+), 12 deletions(-)

diff --git a/src/routes/photos.svelte b/src/routes/photos.svelte
index d6e70ac..eedb77c 100644
--- a/src/routes/photos.svelte
+++ b/src/routes/photos.svelte
@@ -1,4 +1,7 @@
 <script lang="ts">
+    import { browser } from '$app/env'
+    import { page } from '$app/stores'
+    import { goto } from '$app/navigation'
     import { getContext } from 'svelte'
     import { fly } from 'svelte/transition'
     import { quartOut } from 'svelte/easing'
@@ -28,13 +31,32 @@
     let filterSort: string = defaultSort
     let countryFlagId: string
 
-    // Define country flag from selection
+    // Define URL params
+    let urlFiltersParams: URLSearchParams
+    if (browser) {
+        urlFiltersParams = new URLSearchParams(window.location.pathname)
+    }
+
     $: {
+        // Define country flag from selection
         if (filterCountry !== defaultCountry) {
             countryFlagId = countries.find((country: any) => country.slug === filterCountry).flag.id
         } else {
             countryFlagId = undefined
         }
+
+        // Update URL filtering params from filter values
+        // if (filtered && filterCountry && filterSort) {
+        //     urlFiltersParams.set('country', filterCountry)
+        //     urlFiltersParams.set('sort', filterSort)
+        //     goto(`${$page.path}?${urlFiltersParams.toString()}`, { noscroll: true })
+
+        //     // TODO: Request photos from the country of choice
+        //     // loadPhotos()
+        //     console.log('load photos')
+        // }
+
+        console.log({ filtered, filterCountry, filterSort })
     }
 
 
@@ -43,22 +65,16 @@
      */
     // Country select
     const handleCountryChange = ({ detail: value }) => {
-        console.log(value)
+        console.log('country change:', value)
         filtered = true
         filterCountry = value
-
-        // TODO: Request photos from the country of choice
-        // TODO: Change URL query sort=value
     }
 
     // Sort select
     const handleSortChange = ({ detail: value }) => {
-        console.log(value)
+        console.log('sort change:', value)
         filtered = true
         filterSort = value
-
-        // TODO: Request photos sorted by the choice
-        // TODO: Change URL query sort=value
     }
 
 
@@ -69,18 +85,34 @@
         filtered = false
         filterCountry = defaultCountry
         filterSort = defaultSort
-
-        // TODO: Change URL query sort=defaultSort and country=defaultCountry
+        goto($page.path, { replaceState: true, noscroll: true })
     }
 
 
     /**
-     * Load more photos from CTA
+     * Load photos
      */
+    // Load more photos from CTA
     const loadMorePhotos = () => {
         console.log('load more photos')
         // TODO: Append more photos from API including options and page
     }
+
+    // Load photos
+    const loadPhotos = async (page?: number, params?: string) => {
+        const res = fetchAPI(`
+            query {
+                photo (limit: 11, sort: ["-date_created"]) {
+                    image {
+                        id
+                        title
+                    }
+                }
+            }
+        `)
+        const { data } = await res
+        console.log(data)
+    }
 </script>
 
 <Metas