change food item type
This commit is contained in:
hamid zarghami
+251
-242
@@ -1,262 +1,271 @@
|
||||
'use client'
|
||||
"use client";
|
||||
|
||||
import MinusIcon from '@/components/icons/MinusIcon'
|
||||
import PlusIcon from '@/components/icons/PlusIcon'
|
||||
import { ef } from '@/lib/helpers/utfNumbers'
|
||||
import { useCart } from '@/app/[name]/(Dialogs)/cart/hook/useCart'
|
||||
import { motion } from 'framer-motion'
|
||||
import { ArrowLeft, Clock, Cup, Heart, TruckTick } from 'iconsax-react'
|
||||
import Image from 'next/image'
|
||||
import { useParams, useRouter } from 'next/navigation'
|
||||
import React, { useEffect, useMemo, useState } from 'react'
|
||||
import { useGetFood, useToggleFavorite } from './hooks/useFoodData'
|
||||
import { useGetAbout } from '../about/hooks/useAboutData'
|
||||
import { useGetProfile } from '../../(Profile)/profile/hooks/userProfileData'
|
||||
import { toast } from '@/components/Toast'
|
||||
import { getToken } from '@/lib/api/func'
|
||||
import { useCart } from "@/app/[name]/(Dialogs)/cart/hook/useCart";
|
||||
import MinusIcon from "@/components/icons/MinusIcon";
|
||||
import PlusIcon from "@/components/icons/PlusIcon";
|
||||
import { toast } from "@/components/Toast";
|
||||
import { getToken } from "@/lib/api/func";
|
||||
import { ef } from "@/lib/helpers/utfNumbers";
|
||||
import { motion } from "framer-motion";
|
||||
import { ArrowLeft, Clock, Cup, Heart, TruckTick } from "iconsax-react";
|
||||
import Image from "next/image";
|
||||
import { useParams, useRouter } from "next/navigation";
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { useGetProfile } from "../../(Profile)/profile/hooks/userProfileData";
|
||||
import { useGetAbout } from "../about/hooks/useAboutData";
|
||||
import { useGetFood, useToggleFavorite } from "./hooks/useFoodData";
|
||||
|
||||
type Props = object
|
||||
type Props = object;
|
||||
|
||||
function FoodPage({ }: Props) {
|
||||
function FoodPage({}: Props) {
|
||||
const { id, name } = useParams();
|
||||
const router = useRouter();
|
||||
const { isSuccess } = useGetProfile();
|
||||
const { data: food, isLoading } = useGetFood(id as string);
|
||||
const { data: about } = useGetAbout();
|
||||
const { items, addToCart, removeFromCart } = useCart();
|
||||
const [isFavorite, setIsFavorite] = useState<boolean>(false);
|
||||
const { mutate: toggleFavorite } = useToggleFavorite();
|
||||
|
||||
const { id, name } = useParams();
|
||||
const router = useRouter();
|
||||
const { isSuccess } = useGetProfile();
|
||||
const { data: food, isLoading } = useGetFood(id as string);
|
||||
const { data: about } = useGetAbout();
|
||||
const { items, addToCart, removeFromCart } = useCart();
|
||||
const [isFavorite, setIsFavorite] = useState<boolean>(false);
|
||||
const { mutate: toggleFavorite } = useToggleFavorite();
|
||||
const foodId = food?.data?.id || (id as string);
|
||||
const quantity = useMemo(() => {
|
||||
const item = items?.[foodId];
|
||||
if (item && typeof item === "object" && "quantity" in item) {
|
||||
return item.quantity || 0;
|
||||
}
|
||||
return 0;
|
||||
}, [items, foodId]);
|
||||
|
||||
const foodId = food?.data?.id || id as string;
|
||||
const quantity = useMemo(() => {
|
||||
const item = items?.[foodId];
|
||||
if (item && typeof item === 'object' && 'quantity' in item) {
|
||||
return item.quantity || 0;
|
||||
}
|
||||
return 0;
|
||||
}, [items, foodId]);
|
||||
const handleAddToCart = () => {
|
||||
if (foodId) {
|
||||
addToCart(foodId);
|
||||
}
|
||||
};
|
||||
|
||||
const handleAddToCart = () => {
|
||||
if (foodId) {
|
||||
addToCart(foodId);
|
||||
}
|
||||
};
|
||||
const handleRemoveFromCart = () => {
|
||||
if (foodId) {
|
||||
removeFromCart(foodId);
|
||||
}
|
||||
};
|
||||
|
||||
const handleRemoveFromCart = () => {
|
||||
if (foodId) {
|
||||
removeFromCart(foodId);
|
||||
}
|
||||
};
|
||||
const handleToggleFavorite = async () => {
|
||||
if (!foodId) return;
|
||||
|
||||
const handleToggleFavorite = async () => {
|
||||
if (!foodId) return;
|
||||
|
||||
const token = await getToken();
|
||||
if (!token || !isSuccess) {
|
||||
toast('ابتدا لاگین کنید', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
// بهروزرسانی خوشبینانه: تغییر state قبل از ارسال درخواست
|
||||
const previousFavorite = isFavorite;
|
||||
setIsFavorite(!isFavorite);
|
||||
|
||||
toggleFavorite(foodId, {
|
||||
onSuccess: () => {
|
||||
// تایید تغییر در صورت موفقیت
|
||||
},
|
||||
onError: () => {
|
||||
// بازگرداندن به حالت قبلی در صورت خطا
|
||||
setIsFavorite(previousFavorite);
|
||||
toast('خطا در تغییر وضعیت علاقهمندی', 'error');
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (food?.data?.isFavorite) {
|
||||
setIsFavorite(true);
|
||||
} else {
|
||||
setIsFavorite(false);
|
||||
}
|
||||
}, [food?.data?.isFavorite]);
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className='flex items-center justify-center min-h-[400px]'>
|
||||
<p className='text-disabled-text'>در حال بارگذاری...</p>
|
||||
</div>
|
||||
);
|
||||
const token = await getToken();
|
||||
if (!token || !isSuccess) {
|
||||
toast("ابتدا لاگین کنید", "error");
|
||||
return;
|
||||
}
|
||||
|
||||
if (!food?.data) {
|
||||
return (
|
||||
<div className='flex items-center justify-center min-h-[400px]'>
|
||||
<p className='text-disabled-text'>غذا یافت نشد</p>
|
||||
</div>
|
||||
);
|
||||
// بهروزرسانی خوشبینانه: تغییر state قبل از ارسال درخواست
|
||||
const previousFavorite = isFavorite;
|
||||
setIsFavorite(!isFavorite);
|
||||
|
||||
toggleFavorite(foodId, {
|
||||
onSuccess: () => {
|
||||
// تایید تغییر در صورت موفقیت
|
||||
},
|
||||
onError: () => {
|
||||
// بازگرداندن به حالت قبلی در صورت خطا
|
||||
setIsFavorite(previousFavorite);
|
||||
toast("خطا در تغییر وضعیت علاقهمندی", "error");
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (food?.data?.isFavorite) {
|
||||
setIsFavorite(true);
|
||||
} else {
|
||||
setIsFavorite(false);
|
||||
}
|
||||
}, [food?.data?.isFavorite]);
|
||||
|
||||
const foodData = food.data;
|
||||
const foodName = foodData.title || foodData.name || foodData.foodName || '';
|
||||
const foodImage = typeof foodData.image === 'string'
|
||||
? foodData.image
|
||||
: Array.isArray(foodData.images) && foodData.images.length > 0
|
||||
? typeof foodData.images[0] === 'string'
|
||||
? foodData.images[0]
|
||||
: typeof foodData.images[0] === 'object' && foodData.images[0] !== null && 'url' in foodData.images[0]
|
||||
? (foodData.images[0] as { url: string }).url
|
||||
: '/assets/images/no-image.png'
|
||||
: '/assets/images/no-image.png';
|
||||
const categoryName = foodData.category?.title;
|
||||
const prepareTime = foodData.prepareTime || 0;
|
||||
const price = foodData.price || 0;
|
||||
const content = Array.isArray(foodData.content)
|
||||
? foodData.content.join('، ')
|
||||
: foodData.content || foodData.desc || '';
|
||||
|
||||
const handleBackToMenu = () => {
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const categoryParam = urlParams.get('category') || foodData.category?.id;
|
||||
if (categoryParam) {
|
||||
router.push(`/${name}?category=${categoryParam}`);
|
||||
} else {
|
||||
router.push(`/${name}`);
|
||||
}
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className='lg:absolute lg:top-1/2 not-lg:max-w-lg not-lg:place-self-center lg:-translate-y-1/2 xl:right-[285px] lg:left-5 lg:right-4 lg:bottom-4 not-lg:w-full not-md:-translate-y-2 pt-6 flex flex-col lg:grid grid-cols-2 bottom-10'>
|
||||
<div className="relative w-full h-full not-lg:bg-container rounded-2xl overflow-hidden lg:rounded-r-none lg:order-1">
|
||||
<Image
|
||||
className='w-full object-cover bg-[#F2F2F9] h-full'
|
||||
src={foodImage}
|
||||
alt={foodName}
|
||||
height={100}
|
||||
width={100}
|
||||
unoptimized
|
||||
priority
|
||||
/>
|
||||
<div className="absolute top-4 left-0 pe-5.5 ps-7 w-full inline-flex justify-between items-center">
|
||||
<div className="bg-container whitespace-nowrap rounded-[34px] py-1.5 px-4 w-min text-xs text-disabled2 dark:text-disabled-text font-bold">
|
||||
{categoryName || '-'}
|
||||
</div>
|
||||
<button onClick={handleBackToMenu} className='p-2 rounded-full bg-container/40'>
|
||||
<ArrowLeft size={18} className='stroke-primary dark:stroke-foreground' />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-center min-h-[400px]">
|
||||
<p className="text-disabled-text">در حال بارگذاری...</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
<div className="relative px-6 pt-6 pb-7.5 lg:flex lg:flex-col lg:justify-center bg-container w-full rounded-3xl overflow-hidden not-lg:-translate-y-6 lg:rounded-l-none">
|
||||
<div className="w-full inline-flex justify-between items-center">
|
||||
<h5 className="text-base font-bold">
|
||||
{foodName}
|
||||
</h5>
|
||||
<button
|
||||
onClick={handleToggleFavorite}
|
||||
className='p-2 bg-[#EAECF0] dark:bg-neutral-600 rounded-lg'
|
||||
>
|
||||
<Heart
|
||||
variant={isFavorite ? 'Bold' : 'Outline'}
|
||||
size={24}
|
||||
color='currentColor'
|
||||
className={isFavorite ? 'fill-primary dark:fill-foreground' : ''}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
if (!food?.data) {
|
||||
return (
|
||||
<div className="flex items-center justify-center min-h-[400px]">
|
||||
<p className="text-disabled-text">غذا یافت نشد</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
<div className="mt-4 text-xs">
|
||||
<div className='flex items-center gap-1'>
|
||||
<Clock size={14} className='stroke-disabled-text' />
|
||||
<span className='text-disabled-text'>
|
||||
زمان پخت و آماده سازی: {prepareTime > 0 ? `${ef(String(prepareTime))} دقیقه` : '-'}
|
||||
</span>
|
||||
</div>
|
||||
<div className='flex items-center gap-2 mt-2'>
|
||||
<Cup size={14} className='stroke-disabled-text' />
|
||||
<span className='text-disabled-text flex gap-1'>
|
||||
{about?.data?.plan === 'base' ? (
|
||||
<>
|
||||
<div>۰</div>
|
||||
<span>امتیاز برای هر بار خرید</span>
|
||||
</>
|
||||
) : about?.data?.score?.purchaseScore && about?.data?.score?.purchaseAmount ? (
|
||||
<>
|
||||
<div>
|
||||
{ef(
|
||||
Math.round(
|
||||
foodData?.price *
|
||||
(Number(about.data.score.purchaseScore) / Number(about.data.score.purchaseAmount))
|
||||
).toLocaleString('en-US')
|
||||
)}
|
||||
</div>
|
||||
<span>امتیاز برای هر بار خرید</span>
|
||||
</>
|
||||
) : (
|
||||
<span>-</span>
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
<div className='flex items-center gap-2 mt-2'>
|
||||
<TruckTick size={14} className='stroke-disabled-text' />
|
||||
<span className='text-disabled-text'>
|
||||
{foodData.pickupServe ? 'ارسال با پیک' : '-'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
const foodData = food.data;
|
||||
const foodName = foodData.title || foodData.name || foodData.foodName || "";
|
||||
const foodImage =
|
||||
typeof foodData.image === "string"
|
||||
? foodData.image
|
||||
: Array.isArray(foodData.images) && foodData.images.length > 0
|
||||
? typeof foodData.images[0] === "string"
|
||||
? foodData.images[0]
|
||||
: typeof foodData.images[0] === "object" &&
|
||||
foodData.images[0] !== null &&
|
||||
"url" in foodData.images[0]
|
||||
? (foodData.images[0] as { url: string }).url
|
||||
: "/assets/images/no-image.png"
|
||||
: "/assets/images/no-image.png";
|
||||
const categoryName = foodData.category?.title;
|
||||
const prepareTime = foodData.prepareTime || 0;
|
||||
const price = foodData.price || 0;
|
||||
const content = Array.isArray(foodData.content)
|
||||
? foodData.content.join("، ")
|
||||
: foodData.content || foodData.desc || "";
|
||||
|
||||
<div className="mt-7 text-xs">
|
||||
<p className='font-bold'>محتویات:</p>
|
||||
<p className='mt-2 leading-6'>{content || '-'}</p>
|
||||
</div>
|
||||
const handleBackToMenu = () => {
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const categoryParam = urlParams.get("category") || foodData.category?.id;
|
||||
if (categoryParam) {
|
||||
router.push(`/${name}?category=${categoryParam}`);
|
||||
} else {
|
||||
router.push(`/${name}`);
|
||||
}
|
||||
};
|
||||
|
||||
<div className='mt-12 flex justify-between items-center'>
|
||||
<span dir='ltr'>{ef(price.toLocaleString('en-US'))} T</span>
|
||||
<motion.div
|
||||
whileTap={{ scale: 1.05 }}
|
||||
className="bg-background active:drop-shadow-xs max-w-[115px] rounded-md w-full h-8 inline-flex p-1 justify-between items-center gap-2 relative overflow-hidden"
|
||||
>
|
||||
{quantity <= 0 ? (
|
||||
<button
|
||||
onClick={handleAddToCart}
|
||||
className="inline-flex w-full justify-center items-center gap-2"
|
||||
>
|
||||
<PlusIcon />
|
||||
<div className="text-sm2 pt-0.5 font-normal text-foreground">
|
||||
افزودن
|
||||
</div>
|
||||
</button>
|
||||
) : (
|
||||
<>
|
||||
<button
|
||||
onClick={handleAddToCart}
|
||||
className="bg-container hover:bg-container/60 active:bg-container/30 rounded-sm p-2 transition-colors"
|
||||
>
|
||||
<PlusIcon className="text-foreground" />
|
||||
</button>
|
||||
<motion.div
|
||||
key={quantity}
|
||||
initial={{ scale: 1 }}
|
||||
animate={{ scale: [1.2, 0.95, 1] }}
|
||||
transition={{ duration: 0.3 }}
|
||||
className="text-sm2 pt-0.5 font-semibold"
|
||||
>
|
||||
{quantity}
|
||||
</motion.div>
|
||||
<button
|
||||
onClick={handleRemoveFromCart}
|
||||
className="bg-container hover:bg-container/60 active:bg-container/30 rounded-sm p-2 transition-colors"
|
||||
>
|
||||
<MinusIcon className="text-foreground" />
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
return (
|
||||
<div className="lg:absolute lg:top-1/2 not-lg:max-w-lg not-lg:place-self-center lg:-translate-y-1/2 xl:right-[285px] lg:left-5 lg:right-4 lg:bottom-4 not-lg:w-full not-md:-translate-y-2 pt-6 flex flex-col lg:grid grid-cols-2 bottom-10">
|
||||
<div className="relative w-full h-full not-lg:bg-container rounded-2xl overflow-hidden lg:rounded-r-none lg:order-1">
|
||||
<Image
|
||||
className="w-full object-cover bg-[#F2F2F9] h-full"
|
||||
src={foodImage}
|
||||
alt={foodName}
|
||||
height={100}
|
||||
width={100}
|
||||
unoptimized
|
||||
priority
|
||||
/>
|
||||
<div className="absolute top-4 left-0 pe-5.5 ps-7 w-full inline-flex justify-between items-center">
|
||||
<div className="bg-container whitespace-nowrap rounded-[34px] py-1.5 px-4 w-min text-xs text-disabled2 dark:text-disabled-text font-bold">
|
||||
{categoryName || "-"}
|
||||
</div>
|
||||
<button
|
||||
onClick={handleBackToMenu}
|
||||
className="p-2 rounded-full bg-container/40"
|
||||
>
|
||||
<ArrowLeft
|
||||
size={18}
|
||||
className="stroke-primary dark:stroke-foreground"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
</div>
|
||||
|
||||
<div className="relative px-6 pt-6 pb-7.5 lg:flex lg:flex-col lg:justify-center bg-container w-full rounded-3xl overflow-hidden not-lg:-translate-y-6 lg:rounded-l-none">
|
||||
<div className="w-full inline-flex justify-between items-center">
|
||||
<h5 className="text-base font-bold">{foodName}</h5>
|
||||
<button
|
||||
onClick={handleToggleFavorite}
|
||||
className="p-2 bg-[#EAECF0] dark:bg-neutral-600 rounded-lg"
|
||||
>
|
||||
<Heart
|
||||
variant={isFavorite ? "Bold" : "Outline"}
|
||||
size={24}
|
||||
color="currentColor"
|
||||
className={isFavorite ? "fill-primary dark:fill-foreground" : ""}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 text-xs">
|
||||
<div className="flex items-center gap-1">
|
||||
<Clock size={14} className="stroke-disabled-text" />
|
||||
<span className="text-disabled-text">
|
||||
زمان پخت و آماده سازی:{" "}
|
||||
{prepareTime > 0 ? `${ef(String(prepareTime))} دقیقه` : "-"}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 mt-2">
|
||||
<Cup size={14} className="stroke-disabled-text" />
|
||||
<span className="text-disabled-text flex gap-1">
|
||||
{about?.data?.plan === "base" ? (
|
||||
<>
|
||||
<div>۰</div>
|
||||
<span>امتیاز برای هر بار خرید</span>
|
||||
</>
|
||||
) : about?.data?.score?.purchaseScore &&
|
||||
about?.data?.score?.purchaseAmount ? (
|
||||
<>
|
||||
<div>
|
||||
{ef(
|
||||
Math.round(
|
||||
foodData?.price *
|
||||
(Number(about.data.score.purchaseScore) /
|
||||
Number(about.data.score.purchaseAmount)),
|
||||
).toLocaleString("en-US"),
|
||||
)}
|
||||
</div>
|
||||
<span>امتیاز برای هر بار خرید</span>
|
||||
</>
|
||||
) : (
|
||||
<span>-</span>
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 mt-2">
|
||||
<TruckTick size={14} className="stroke-disabled-text" />
|
||||
<span className="text-disabled-text">
|
||||
{foodData.pickupServe ? "ارسال با پیک" : "-"}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-7 text-xs">
|
||||
<p className="font-bold">محتویات:</p>
|
||||
<p className="mt-2 leading-6">{content || "-"}</p>
|
||||
</div>
|
||||
|
||||
<div className="mt-12 flex justify-between items-center">
|
||||
<span dir="ltr">{ef(price.toLocaleString("en-US"))} T</span>
|
||||
<motion.div
|
||||
whileTap={{ scale: 1.05 }}
|
||||
className="bg-background active:drop-shadow-xs max-w-[115px] rounded-md w-full h-8 inline-flex p-1 justify-between items-center gap-2 relative overflow-hidden"
|
||||
>
|
||||
{quantity <= 0 ? (
|
||||
<button
|
||||
onClick={handleAddToCart}
|
||||
className="inline-flex w-full justify-center items-center gap-2"
|
||||
>
|
||||
<PlusIcon />
|
||||
<div className="text-sm2 pt-0.5 font-normal text-foreground">
|
||||
افزودن
|
||||
</div>
|
||||
</button>
|
||||
) : (
|
||||
<>
|
||||
<button
|
||||
onClick={handleAddToCart}
|
||||
className="bg-container hover:bg-container/60 active:bg-container/30 rounded-sm p-2 transition-colors"
|
||||
>
|
||||
<PlusIcon className="text-foreground" />
|
||||
</button>
|
||||
<motion.div
|
||||
key={quantity}
|
||||
initial={{ scale: 1 }}
|
||||
animate={{ scale: [1.2, 0.95, 1] }}
|
||||
transition={{ duration: 0.3 }}
|
||||
className="text-sm2 pt-0.5 font-semibold"
|
||||
>
|
||||
{quantity}
|
||||
</motion.div>
|
||||
<button
|
||||
onClick={handleRemoveFromCart}
|
||||
className="bg-container hover:bg-container/60 active:bg-container/30 rounded-sm p-2 transition-colors"
|
||||
>
|
||||
<MinusIcon className="text-foreground" />
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default FoodPage
|
||||
export default FoodPage;
|
||||
|
||||
Reference in New Issue
Block a user