cart v2

andre-brandao · Aug 7, 2024 · e0fc268 · e0fc268
1 parent 6eaacdb
commit e0fc268
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 23 deletions.
diff --git a/src/lib/components/navbar/Cart.svelte b/src/lib/components/navbar/Cart.svelte
@@ -5,8 +5,8 @@
 
   const cart = getCartContext()
 
-  $: subtotal = $cart.reduce(
-    (acc, item) => acc + item.quantity * item.item.retail_price,
+  $: subtotal = Object.values($cart).reduce(
+    (acc, item) => acc + item.item.retail_price * item.quantity,
     0,
   )
 </script>
@@ -29,7 +29,9 @@
             d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"
           />
         </svg>
-        <span class="badge indicator-item badge-sm">{$cart.length}</span>
+        <span class="badge indicator-item badge-sm">
+          {Object.keys($cart).length}
+        </span>
       </div>
     </div>
     <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
@@ -38,11 +40,13 @@
       class="card dropdown-content card-compact z-[1] mt-3 w-72 bg-base-100 shadow"
     >
       <div class="card-body">
-        <span class="text-lg font-bold">{$cart.length} Items</span>
+        <span class="text-lg font-bold">
+          {Object.values($cart).length} Items
+        </span>
         <!-- TODO: format price -->
-        <span class="text-info">Subtotal: {subtotal}</span>
+        <span class="text-info">Subtotal: {(subtotal / 100).toFixed(2)}</span>
         <div class="card-actions">
-          {#each $cart as item}
+          {#each Object.values($cart) as item}
             <div class="flex items-center justify-between gap-2">
               <img
                 src={getImagePath(item.item.image)}
@@ -63,7 +67,7 @@
               </button>
             </div>
           {/each}
-          {#if $cart.length === 0}
+          {#if Object.keys($cart).length === 0}
             <p class="text-center">No items in cart</p>
           {:else}
             <button class="btn btn-outline w-full">Checkout</button>

diff --git a/src/lib/stores/cart.ts b/src/lib/stores/cart.ts
@@ -3,48 +3,54 @@ import { getContext, setContext } from 'svelte'
 import type { SelectProductItem } from '$db/schema'
 const CART_STORE_KEY = 'cart'
 
-type Cart = {
-  item: SelectProductItem
-  quantity: number
-}[]
+type Cart = Record<
+  SelectProductItem['id'],
+  {
+    item: SelectProductItem
+    quantity: number
+  }
+>
 
-function createCartStore(base_cart: Cart = []) {
+function createCartStore(base_cart: Cart = {}) {
   const { set, subscribe, update } = writable<Cart>(base_cart)
   return {
     set,
     subscribe,
     update,
     addItem: (input: { item: SelectProductItem; quantity: number }) => {
       update(cart => {
-        const existing = cart.findIndex(i => i.item.id === input.item.id)
-        if (existing !== -1) {
-          cart[existing].quantity += input.quantity
+        const existing = cart[input.item.id]
+
+        if (existing) {
+          existing.quantity += input.quantity
         } else {
-          cart.push(input)
+          cart[input.item.id] = {
+            item: input.item,
+            quantity: input.quantity,
+          }
         }
         return cart
       })
     },
     setItem: (input: { item: SelectProductItem; quantity: number }) => {
       update(cart => {
-        const existing = cart.findIndex(i => i.item.id === input.item.id)
-        if (existing) {
-          cart[existing].quantity = input.quantity
-        } else {
-          cart.push(input)
+        cart[input.item.id] = {
+          item: input.item,
+          quantity: input.quantity,
         }
         return cart
       })
     },
     removeItem: (item_id: number) => {
       update(cart => {
-        return cart.filter(i => i.item.id !== item_id)
+        delete cart[item_id]
+        return cart
       })
     },
   }
 }
 
-export function createCartContext(cart: Cart = []) {
+export function createCartContext(cart: Cart = {}) {
   const store = createCartStore(cart)
   return setContext(CART_STORE_KEY, store)
 }