refactor: Reduce repeated code, show message if shopping cart is empty

hackerspace-ntnu · Sep 19, 2024 · 9c64980 · 9c64980
1 parent 4d8e003
commit 9c64980
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 12 deletions.
diff --git a/src/components/storage/ShoppingCartClearButton.tsx b/src/components/storage/ShoppingCartClearButton.tsx
@@ -13,12 +13,11 @@ function ShoppingCartClearButton({ caption }: { caption: string }) {
     setCart([]);
   }
 
-  if (cart.length <= 0) return;
-
   return (
     <Button
       className='flex gap-2'
       variant='destructive'
+      disabled={cart.length <= 0}
       onClick={() => clearCart()}
     >
       <XIcon />

diff --git a/src/components/storage/ShoppingCartTable.tsx b/src/components/storage/ShoppingCartTable.tsx
@@ -33,14 +33,12 @@ function ShoppingCartTable({ messages }: ShoppingCartTableProps) {
     initializeWithValue: false,
   });
 
-  if (!cart) return <ShoppingCartTableSkeleton />;
-
-  const itemsInCart = items.filter((item) => cart.includes(item.id));
-
   if (cart.length <= 0) {
     return <h3 className='text-center'>{messages.cartEmpty}</h3>;
   }
 
+  const itemsInCart = items.filter((item) => cart.includes(item.id));
+
   function removeItem(id: number) {
     if (!cart) return;
     setCart(cart.filter((itemId) => itemId !== id));

diff --git a/src/components/storage/ShoppingCartTableSkeleton.tsx b/src/components/storage/ShoppingCartTableSkeleton.tsx
@@ -4,15 +4,16 @@ export default function ShoppingCartTableSkeleton() {
   return (
     <>
       <div className='mt-4 grid grid-cols-10 gap-2'>
-        <Skeleton className='col-span-1 h-5' />
-        <Skeleton className='col-span-3 h-5' />
-        <Skeleton className='col-span-5 h-5' />
-        <Skeleton className='col-span-1 h-5' />
+        {Array.from({ length: 4 }).map((_, index) => (
+          <Skeleton className='col-span-1 h-5' key={`s_1_${index + 1}`} />
+        ))}
       </div>
       {Array.from({ length: 4 }).map((_, index) => {
         return (
-          // biome-ignore lint/suspicious/noArrayIndexKey: Skeleton items don't have a unique id to use.
-          <div key={index} className='my-4 grid grid-cols-10 gap-2'>
+          <div
+            key={`s_2_${index + 1}`}
+            className='my-4 grid grid-cols-10 gap-2'
+          >
             <Skeleton className='col-span-1 h-10' />
             <Skeleton className='col-span-3 h-10' />
             <Skeleton className='col-span-5 h-10' />