fix: 🐛 load jewellery products with search component

.routify/config.js

@@ -13,5 +13,5 @@ module.exports = {
     "svx",
     "md"
   ],
-  "started": "2021-01-05T15:47:29.802Z"
+  "started": "2021-01-05T16:06:04.404Z"
 }

.routify/routes.js

@@ -1,11 +1,11 @@
 
 /**
  * @roxi/routify 2.7.3
- * File generated Tue Jan 05 2021 15:47:31 GMT+0000 (Greenwich Mean Time)
+ * File generated Tue Jan 05 2021 16:06:05 GMT+0000 (Greenwich Mean Time)
  */
 
 export const __version = "2.7.3"
-export const __timestamp = "2021-01-05T15:47:31.768Z"
+export const __timestamp = "2021-01-05T16:06:05.703Z"
 
 //buildRoutes
 import { buildClientTree } from "@roxi/routify/runtime/buildRoutes"

src/components/SearchJewellery/SearchJewellery.svelte

@@ -1,8 +1,26 @@
 <script lang="ts">
   import { jewellery } from '../../stores/jewellery';
-  let searchValue: string;
+  import { onMount } from 'svelte';
+  let searchValue: string = '';
   let results: any[] = [];
 
+  const fetchJewelleryProducts = async () => {
+    try {
+      const response = await fetch(
+        `${process.env.SERVER_URL}/jewellery-products`
+      );
+      const parsedResult = await response.json();
+      return parsedResult;
+    } catch (err) {
+      console.error('fetching jewellery products failed', err);
+    }
+  };
+
+  onMount(async () => {
+    const data = await fetchJewelleryProducts();
+    jewellery.set(data);
+  });
+
   const searchJewelleryForValue = (event: Event) =>
     event.target.value === ''
       ? []
@@ -19,8 +37,10 @@
 </form>
 
 <ul>
+  {#if searchValue != ''}
+  <h1>Total matches: {results.length}</h1>
+  {/if}
   {#each results as match}
-    <h1>Total matches: {results.length}</h1>
     <h1>{match.Name}</h1>
     <h1>CategoryId: {match.CategoryId}</h1>
     <h1>Product Id: {match.Id}</h1>

src/pages/online-shop/[category].svelte

@@ -2,34 +2,11 @@
   import { params, goto } from '@roxi/routify';
   import { onMount } from 'svelte';
   import { categories } from '../../stores/categories';
-  import { jewellery } from '../../stores/jewellery';
   import ProductView from '../../components/ProductView/ProductView.svelte';
   import SearchJewellery from '../../components/SearchJewellery/SearchJewellery.svelte';
 
   export let category: string;
 
-  const isCategoryJewellery = async (id: string) => {
-    try {
-      if (id === '1821413') {
-        const data = await fetchJewelleryProducts();
-        saveJewelleryToStore(data);
-      }
-    } catch (err) {
-      console.error('fetching jewellery products failed', err);
-    }
-  };
-
-  const saveJewelleryToStore = (parsedJewelleryResult: any) =>
-    jewellery.set(parsedJewelleryResult);
-
-  const fetchJewelleryProducts = async () => {
-    const response = await fetch(
-      `${process.env.SERVER_URL}/jewellery-products`
-    );
-    const parsedResult = await response.json();
-    return parsedResult;
-  };
-
   const fetchCategoryById = async (id: string) => {
     const response = await fetch(`${process.env.SERVER_URL}/category?id=${id}`);
     const parsedResult = JSON.parse(await response.json());
@@ -44,7 +21,6 @@
       } catch (err) {
         console.error('fetching category failed', err);
       }
-      await isCategoryJewellery(category);
     }
   });
 </script>