refactor: 💡 move tags fetch to server and only if needed (#31)

README.md

@@ -15,175 +15,10 @@ The server which handles syncing data between the epos system and the website ca
 - [Playwright](https://playwright.dev/)
 - [Stripe](https://stripe.com/en-gb) (to handle payments)
 - [Vitest](https://vitest.dev/)
-- [Travis CI](https://www.travis-ci.com/)
+- [Argo CD](https://argo-cd.readthedocs.io/en/stable/)
 - Husky
 - [Plausible](https://plausible.io/) (for analytics)
 
-## Source Structure
-
-The project is a SSR app.
-
-```
-src/app.d.ts
-src/app.html
-src/hooks.server.ts
-src/lib
-├── components
-│   ├── AddToBasket
-│   │   ├── AddToBasket.svelte
-│   │   └── AddToBasket.test.ts
-│   ├── BackToTop
-│   │   └── BackToTop.svelte
-│   ├── Banner
-│   │   └── Banner.svelte
-│   ├── Basket
-│   │   ├── Basket.svelte
-│   │   └── Basket.test.ts
-│   ├── BasketCounter
-│   │   ├── BasketCounter.svelte
-│   │   └── BasketCounter.test.ts
-│   ├── Breadcrumbs
-│   │   ├── Breadcrumbs.svelte
-│   │   └── Breadcrumbs.test.ts
-│   ├── CategoryView
-│   │   ├── CategoryView.svelte
-│   │   └── CategoryView.test.ts
-│   ├── Checkout
-│   │   ├── Checkout.svelte
-│   │   ├── Checkout.test.ts
-│   │   └── createCheckoutSession.ts
-│   ├── DetailedSingleProduct
-│   │   ├── DetailedSingleProduct.svelte
-│   │   └── DetailedSingleProduct.test.ts
-│   ├── Footer
-│   │   └── Footer.svelte
-│   ├── Hamburger
-│   │   └── Hamburger.svelte
-│   ├── Header
-│   │   └── Header.svelte
-│   ├── Hex
-│   │   ├── Hex.svelte
-│   │   └── Hex.test.ts
-│   ├── HexGrid
-│   │   ├── HexGrid.svelte
-│   │   └── HexGrid.test.ts
-│   ├── Image
-│   │   ├── ImageLoader.svelte
-│   │   ├── Image.svelte
-│   │   └── IntersectionObserver.svelte
-│   ├── JewelleryView
-│   │   ├── JewelleryView.svelte
-│   │   └── JewelleryView.test.ts
-│   ├── LoadingSpinner
-│   │   └── LoadingSpinner.svelte
-│   ├── MailChimpSubscribe
-│   │   └── MailChimpSubscribe.svelte
-│   ├── MobileClose
-│   │   └── MobileClose.svelte
-│   ├── ProductView
-│   │   ├── ProductView.svelte
-│   │   └── ProductView.test.ts
-│   ├── ScrollDown
-│   │   └── ScrollDown.svelte
-│   ├── SearchProducts
-│   │   └── SearchProducts.svelte
-│   ├── SingleProduct
-│   │   ├── SingleProduct.svelte
-│   │   └── SingleProduct.test.ts
-│   ├── Svg
-│   │   ├── AboutUs.svelte
-│   │   ├── Classes.svelte
-│   │   ├── GroupClass.svelte
-│   │   ├── JewelleryServices.svelte
-│   │   ├── OnlineShop.svelte
-│   │   └── WeddingRings.svelte
-│   ├── SwipeImage
-│   │   └── SwipeImage.svelte
-│   ├── TagFlex
-│   │   └── TagFlex.svelte
-│   └── TagView
-│       ├── TagView.svelte
-│       └── TagView.test.ts
-├── stores
-│   ├── basket.ts
-│   ├── categories.ts
-│   └── products.ts
-├── types
-│   ├── base.ts
-│   ├── basketProduct.ts
-│   ├── category.ts
-│   ├── isCategory.ts
-│   ├── isTag.ts
-│   ├── product.ts
-│   └── tag.ts
-└── utils
-    ├── basket.test.ts
-    ├── basket.ts
-    ├── clickOutside.ts
-    ├── consts.js
-    ├── gridCalc.ts
-    ├── lazyAction.ts
-    ├── requests.test.ts
-    ├── requests.ts
-    ├── search.test.ts
-    └── search.ts
-src/routes
-├── about
-│   └── +page.svelte
-├── classes
-│   ├── beginners
-│   │   └── +page.svelte
-│   ├── +page.svelte
-│   ├── +page.ts
-│   └── wedding-rings
-│       └── +page.svelte
-├── contact
-│   ├── +page.svelte
-│   └── +page.ts
-├── +error.svelte
-├── +layout.server.ts
-├── +layout.svelte
-├── +page.svelte
-├── payment
-│   └── success
-│       ├── +page.svelte
-│       └── +page.ts
-├── privacy-policy
-│   ├── +page.svelte
-│   └── +page.ts
-├── repairs
-│   └── +page.svelte
-├── shop
-│   ├── basket
-│   │   ├── +page.svelte
-│   │   └── +page.ts
-│   ├── category
-│   │   └── [category]
-│   │       ├── +page.svelte
-│   │       └── +page.ts
-│   ├── +layout.svelte
-│   ├── +page.svelte
-│   ├── +page.ts
-│   ├── product
-│   │   └── [product]
-│   │       ├── +page.svelte
-│   │       └── +page.ts
-│   ├── search
-│   │   ├── +page.svelte
-│   │   └── +page.ts
-│   └── tag
-│       └── [typetag]
-│           ├── +page.svelte
-│           └── +page.ts
-├── sitemap.xml
-│   └── +server.ts
-└── terms-and-conditions
-    └── +page.svelte
-src/sitemap.xml
-
-51 directories, 99 files
-```
-
 We lean on functional programming at the boundaries which is why you find the `requests.ts` written with the `fp-ts` library.
 
 ### Component Structure
@@ -230,6 +65,12 @@ The site pulls optimized images from a public gcloud bucket. Everything in the b
 
 To upload images to products and categories, via a ui see this [service](https://github.com/jaskaransarkaria/enki-upload-photos)
 
+The hashes for the images are pulled from different places for products and categories.
+
+For products the hash is in the image url key in the ProductImages Object.
+
+For categories the hash is added to the category description.
+
 ## CI/ CD
 
 Argo CD handles the deployment pipeline deploying when a commit on main is tagged with the an incremented semver eg. v01.02.03

src/lib/components/CategoryView/CategoryView.svelte

@@ -7,13 +7,15 @@
 
   import type { Category } from "$lib/types/category";
   import type { Product } from "$lib/types/product";
+  import type { Tag } from "$lib/types/tag";
   import type { BaseFn } from "$lib/types/base";
 
   export let categoryFn: BaseFn;
   export let showBreadcrumbs = true;
   export let categoryToShow: Category | undefined;
   export let productArr: readonly Product[];
   export let whitelistedUserAgent: boolean;
+  export let tags: readonly Tag[];
 
   const removeVariantCategories = (categories: Category[]) =>
     categories?.filter((cat) => cat.NominalCode === "CATEGORY");
@@ -38,6 +40,7 @@
       {categoryFn}
       categoryId={categoryToShow?.Id}
       prefix={categoryToShow.Name.split(" ")[0].toUpperCase()}
+      {tags}
     />
   {:else}
     <HexGrid data={nonVariantCategories} {categoryFn} {whitelistedUserAgent} />

src/lib/components/Hex/Hex.svelte

@@ -38,7 +38,7 @@
     >
       {#key loaded}
         <img
-          in:fade={{ duration: 500 }}
+          in:fade={{ duration: 700, delay: 200 }}
           src="/grey_square.png"
           use:lazy={{
             src: `${PUBLIC_BUCKET_URL}/${category.Description}`,

src/lib/components/TagView/TagView.svelte

@@ -1,10 +1,7 @@
 <script lang="ts">
-  import { onMount } from "svelte";
   import HexGrid from "$lib/components/HexGrid/HexGrid.svelte";
   import TagFlex from "$lib/components/TagFlex/TagFlex.svelte";
-  import { refreshTags } from "$lib/utils/requests";
   import isCategory from "$lib/types/isCategory";
-  import { PUBLIC_SERVER_URL } from "$env/static/public";
 
   import type { Tag } from "$lib/types/tag";
   import type { Category } from "$lib/types/category";
@@ -15,12 +12,7 @@
   export let categoryFn: BaseFn = () => undefined;
   export let prefix = "";
   export let showHex = true;
-
-  let tags: readonly Tag[] = [];
-
-  onMount(async () => {
-    tags = await refreshTags(`${PUBLIC_SERVER_URL}/tags`);
-  });
+  export let tags: readonly Tag[] = [];
 
   const selectFn: BaseFn = <T extends Base>(cat: T) => {
     // if category selected goto category page as usual