From 2fe3842c6b7975bd8340f9ab14655f88727fbd85 Mon Sep 17 00:00:00 2001
From: Carter <35710697+cmintey@users.noreply.github.com>
Date: Mon, 29 Jul 2024 20:18:56 -0500
Subject: [PATCH] Only fetch item once (#127)

* add a refresh button for item fetching

* update button ids
---
 src/lib/components/wishlists/ItemForm.svelte | 59 ++++++++++++++------
 1 file changed, 43 insertions(+), 16 deletions(-)

diff --git a/src/lib/components/wishlists/ItemForm.svelte b/src/lib/components/wishlists/ItemForm.svelte
index dec21a4..2015131 100644
--- a/src/lib/components/wishlists/ItemForm.svelte
+++ b/src/lib/components/wishlists/ItemForm.svelte
@@ -10,7 +10,7 @@
 
     $: form = $page.form;
     let loading = false;
-    let urlChanged = false;
+    let urlFetched = false;
     const toastStore = getToastStore();
 
     const formatPrice = (price: number | null, currency: string | null) => {
@@ -40,7 +40,7 @@
     };
 
     const getInfo = async () => {
-        if (data.url && urlChanged) {
+        if (data.url && !urlFetched) {
             loading = true;
             const url = extractUrl(data.url);
             const res = await fetch(`/api/product?url=${url}`);
@@ -54,7 +54,7 @@
                 triggerToast();
             }
             loading = false;
-            urlChanged = false;
+            urlFetched = true;
         }
     };
 </script>
@@ -62,20 +62,47 @@
 <div class="grid grid-cols-1 gap-4 md:grid-cols-6">
     <label class="col-span-1 md:col-span-6" for="url">
         <span>Item URL</span>
-        <div class="input-group grid-cols-[auto_1fr]">
-            <div class="input-group-shim">
-                <iconify-icon icon="ion:bag-handle"></iconify-icon>
+        <div class="flex flex-row space-x-4">
+            <div class="input-group grid-cols-[auto_1fr_auto]">
+                <div class="input-group-shim">
+                    <iconify-icon icon="ion:bag-handle"></iconify-icon>
+                </div>
+                <input
+                    id="url"
+                    name="url"
+                    class="input"
+                    placeholder="Enter a URL to fetch the item data"
+                    type="url"
+                    bind:value={data.url}
+                    on:focusout={() => getInfo()}
+                />
+                {#if data.url}
+                    <button
+                        id="reset-field"
+                        tabindex="-1"
+                        type="button"
+                        on:click={() => (data.url = null)}
+                        on:keypress|preventDefault
+                    >
+                        <iconify-icon icon="ion:close-circle" />
+                    </button>
+                {/if}
             </div>
-            <input
-                id="url"
-                name="url"
-                class="input"
-                placeholder="Enter a URL to fetch the item data"
-                type="url"
-                bind:value={data.url}
-                on:focusout={() => getInfo()}
-                on:change={() => (urlChanged = true)}
-            />
+            {#if data.url}
+                <button
+                    id="refresh-item"
+                    class="variant-ghost-primary btn btn-icon"
+                    tabindex="-1"
+                    type="button"
+                    on:click|preventDefault={() => {
+                        urlFetched = false;
+                        getInfo();
+                    }}
+                    on:keypress|preventDefault
+                >
+                    <iconify-icon icon="ion:refresh" />
+                </button>
+            {/if}
         </div>
     </label>