feat: 🎸 add product images

.routify/config.js

@@ -8,5 +8,5 @@ module.exports = {
   noHashScroll: false,
   distDir: 'dist',
   extensions: ['svelte', 'html', 'svx', 'md'],
-  started: '2021-03-13T19:43:58.513Z',
+  started: '2021-03-13T19:53:15.239Z',
 };

.routify/routes.js

@@ -1,10 +1,10 @@
 /**
  * @roxi/routify 2.7.3
- * File generated Sat Mar 13 2021 19:44:00 GMT+0000 (Greenwich Mean Time)
+ * File generated Sat Mar 13 2021 19:53:16 GMT+0000 (Greenwich Mean Time)
  */
 
 export const __version = '2.7.3';
-export const __timestamp = '2021-03-13T19:44:00.017Z';
+export const __timestamp = '2021-03-13T19:53:16.741Z';
 
 //buildRoutes
 import { buildClientTree } from '@roxi/routify/runtime/buildRoutes';

README.md

@@ -47,8 +47,8 @@ Travis CI handles the deployment pipeline deploying when a commit on master is t
 - [ ] figure out variants/ multi choice products
 - [ ] classes
 - [ ] testing
-- [ ] style the site
 - [ ] storybook
+- [ ] style the site
 - [ ] use prod stripe api key
 - [ ] promotions
 

src/components/CategoryView/CategoryView.svelte

@@ -19,19 +19,19 @@
   };
 
   onMount(async () => {
-    if (!($categories.hasOwnProperty('Id') && $categories.Id !== '')) {
-      refreshSetCategories(categoryId);
+    if ($categories.hasOwnProperty('Id') && $categories.Id === '') {
+      await refreshSetCategories(categoryId);
     }
   });
 
   $: refreshSetCategories(categoryId);
 </script>
 
-{#if $categories.hasOwnProperty('Id') || $categories.Id !== ''}
+{#if $categories.hasOwnProperty('Id') && $categories.Id !== ''}
   {#if $categories.Id !== JEWELLERY_CATEGORY}
     <h1>{$categories.Id}</h1>
     <h1>{$categories.Name}</h1>
-    {#if $categories.Children.length > 0}
+    {#if $categories.Children && $categories.Children.length > 0}
       {#each $categories.Children as cat}
         <button on:click={() => categoryFn(cat)}> {cat.Name} </button>
       {/each}

src/components/LoadingSpinner/LoadingSpinner.svelte

@@ -2,15 +2,15 @@
   .lds-ring {
     display: inline-block;
     position: relative;
-    width: 80px;
-    height: 80px;
+    width: 30px;
+    height: 30px;
   }
   .lds-ring div {
     box-sizing: border-box;
     display: block;
     position: absolute;
-    width: 64px;
-    height: 64px;
+    width: 34px;
+    height: 34px;
     margin: 8px;
     border: 8px solid black;
     border-radius: 50%;

src/components/SearchProducts/SearchProducts.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
+  import { onMount } from 'svelte';
   import SingleProduct from '@/components/SingleProduct/SingleProduct.svelte';
+  import LoadingSpinner from '../LoadingSpinner/LoadingSpinner.svelte';
   import { products } from '@/stores/products';
   import { refreshProducts } from '@/libs/requests';
 
   import type { Product } from '@/types/product';
-  import LoadingSpinner from '../LoadingSpinner/LoadingSpinner.svelte';
-  import { onMount } from 'svelte';
 
   let searchValue: string = '';
   let loading: boolean = false;

src/components/SingleProduct/SingleProduct.svelte

@@ -13,6 +13,11 @@
 </style>
 
 <div class="container">
+  {#each product.ProductImages as _, idx}
+    <img
+      src={`https://enki.imgix.net/${product.Id}-${idx}`}
+      alt={`${product.Id} image number ${idx + 1} of ${product.ProductImages.length}`} />
+  {/each}
   <button>
     {`${product.Name} -- ${product.Id} -- ${product.SalePrice} -- ${product.ProductImages[0]}`}
   </button>