fix!: Only save ids in LocalStorage instead of item objects

hackerspace-ntnu · Sep 13, 2024 · 5cc0683 · 5cc0683
1 parent 7dacf19
commit 5cc0683
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 7 deletions.
diff --git a/src/app/[locale]/(default)/storage/page.tsx b/src/app/[locale]/(default)/storage/page.tsx
@@ -4,6 +4,7 @@ import { getTranslations, unstable_setRequestLocale } from 'next-intl/server';
 import { createSearchParamsCache, parseAsInteger } from 'nuqs/parsers';
 
 import { PaginationCarousel } from '@/components/layout/PaginationCarousel';
+import { ItemCard } from '@/components/storage/ItemCard';
 import { Button } from '@/components/ui/Button';
 import { Combobox } from '@/components/ui/Combobox';
 import { SearchBar } from '@/components/ui/SearchBar';
@@ -14,7 +15,6 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/Select';
-import { ItemCard } from '@/components/storage/ItemCard';
 import {
   Tooltip,
   TooltipContent,

diff --git a/src/components/storage/AddToCartButton.tsx b/src/components/storage/AddToCartButton.tsx
@@ -26,7 +26,7 @@ function AddToCartButton({
   addToCart: string;
   removeFromCart: string;
 }) {
-  const [cart, setCart, removeCart] = useLocalStorage<StorageItem[]>(
+  const [cart, setCart, removeCart] = useLocalStorage<number[]>(
     'shopping-cart',
     [],
   );
@@ -36,15 +36,15 @@ function AddToCartButton({
 
   // On cart/item/page/etc change, check if we must update the isInCart state.
   useEffect(() => {
-    setIsInCart(cart.some((i) => i.id === item.id));
+    setIsInCart(cart.some((i) => i === item.id));
   }, [cart, item.id]);
 
   const updateState = (addToCart: boolean) => {
     let newCart = cart;
     if (addToCart) {
-      newCart.push(item);
+      newCart.push(item.id);
     } else {
-      newCart = newCart.filter((i) => i.id !== item.id);
+      newCart = newCart.filter((i) => i !== item.id);
     }
     setCart(newCart);
     setIsInCart(addToCart);

diff --git a/src/components/storage/ShoppingCartTable.tsx b/src/components/storage/ShoppingCartTable.tsx
@@ -14,6 +14,9 @@ import { useLocalStorage } from 'usehooks-ts';
 // TODO: Must be replaced by the type provided from database ORM.
 import type { StorageItem } from '@/components/storage/AddToCartButton';
 
+// TODO: Must be replaced by requesting the data from a database.
+import { items } from '@/mock-data/items';
+
 type ShoppingCartTableProps = {
   messages: {
     tableDescription: string;
@@ -26,7 +29,9 @@ type ShoppingCartTableProps = {
 };
 
 async function ShoppingCartTable({ messages }: ShoppingCartTableProps) {
-  const [cart] = useLocalStorage<StorageItem[]>('shopping-cart', []);
+  const [cart] = useLocalStorage<number[]>('shopping-cart', []);
+
+  const itemsInCart = items.filter((item) => cart.includes(item.id));
 
   if (cart.length <= 0) {
     return <h3 className='text-center'>{messages.cartEmpty}</h3>;
@@ -46,7 +51,7 @@ async function ShoppingCartTable({ messages }: ShoppingCartTableProps) {
         </TableRow>
       </TableHeader>
       <TableBody>
-        {cart.map((item) => (
+        {itemsInCart.map((item) => (
           <TableRow key={item.name}>
             <TableCell className='font-medium'>{item.id}</TableCell>
             <TableCell>{item.name}</TableCell>