diff --git a/src/app/[locale]/(default)/storage/page.tsx b/src/app/[locale]/(default)/storage/page.tsx index 741c64d..e4b7409 100644 --- 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 index 40851e3..7c91064 100644 --- 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( + const [cart, setCart, removeCart] = useLocalStorage( '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 index 085e5cf..ba22b68 100644 --- 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('shopping-cart', []); + const [cart] = useLocalStorage('shopping-cart', []); + + const itemsInCart = items.filter((item) => cart.includes(item.id)); if (cart.length <= 0) { return

{messages.cartEmpty}

; @@ -46,7 +51,7 @@ async function ShoppingCartTable({ messages }: ShoppingCartTableProps) { - {cart.map((item) => ( + {itemsInCart.map((item) => ( {item.id} {item.name}