fast navigate + cache

src/app/[name]/(Main)/cart/components/CartItemsList.tsx

@@ -0,0 +1,57 @@
+'use client';
+
+import React from 'react';
+import MenuItem from '@/components/listview/MenuItem';
+import MenuItemRenderer from '@/components/listview/MenuItemRenderer';
+import { useGetFoods } from '@/app/[name]/(Main)/hooks/useMenuData';
+import type { Food } from '@/app/[name]/(Main)/types/Types';
+import { useCart } from '../hook/useCart';
+import { useTranslation } from 'react-i18next';
+import { CartItemsSkeleton } from './CartSkeleton';
+
+const CartItemsList = () => {
+  const { data: foodsResponse, isFetching } = useGetFoods();
+  const foods = React.useMemo(() => foodsResponse?.data ?? [], [foodsResponse?.data]);
+  const { items } = useCart();
+  const { t } = useTranslation('parallels', { keyPrefix: 'Cart' });
+
+  const cartFoods = React.useMemo(() => {
+    if (!foods.length) return [];
+    return Object.entries(items)
+      .filter(([, detail]) => detail?.quantity && detail.quantity > 0)
+      .map(([id]) =>
+        foods.find((foodItem) => String(foodItem.id) === String(id))
+      )
+      .filter((food): food is Food => Boolean(food));
+  }, [foods, items]);
+
+  if (isFetching && !foods.length) {
+    return <CartItemsSkeleton />;
+  }
+
+  if (cartFoods.length === 0) {
+    return (
+      <div className='flex flex-col items-center justify-center gap-2 py-12 text-sm2 text-muted-foreground'>
+        <p>{t('EmptyStateTitle', { defaultValue: 'سبد خرید شما خالی است' })}</p>
+        <p className='text-xs'>
+          {t('EmptyStateDescription', {
+            defaultValue: 'برای افزودن غذا، به منوی رستوران برگردید.',
+          })}
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className='flex-1 space-y-4'>
+      {cartFoods.map((food) => (
+        <MenuItemRenderer key={food.id}>
+          <MenuItem food={food} />
+        </MenuItemRenderer>
+      ))}
+    </div>
+  );
+};
+
+export default CartItemsList;
+