align center and favorite

src/app/[name]/(Main)/[id]/page.tsx

@@ -8,9 +8,12 @@ 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, { useMemo } from 'react'
-import { useGetFood } from './hooks/useFoodData'
+import React, { useEffect, useMemo, useState } from 'react'
+import { useAddToFavorite, useGetFood, useRemoveFromFavorite } 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'
 
 type Props = object
 
@@ -18,9 +21,13 @@ function FoodPage({ }: Props) {
 
     const { id } = 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: addToFavorite } = useAddToFavorite();
+    const { mutate: removeFromFavorite } = useRemoveFromFavorite();
 
     const foodId = food?.data?.id || id as string;
     const quantity = useMemo(() => {
@@ -43,6 +50,52 @@ function FoodPage({ }: Props) {
         }
     };
 
+    const handleToggleFavorite = async () => {
+        if (!foodId) return;
+
+        const token = await getToken();
+        if (!token || !isSuccess) {
+            toast('ابتدا لاگین کنید', 'error');
+            return;
+        }
+
+        // به‌روزرسانی خوش‌بینانه: تغییر state قبل از ارسال درخواست
+        const previousFavorite = isFavorite;
+        setIsFavorite(!isFavorite);
+
+        if (previousFavorite) {
+            removeFromFavorite(foodId, {
+                onSuccess: () => {
+                    // تایید تغییر در صورت موفقیت
+                },
+                onError: () => {
+                    // بازگرداندن به حالت قبلی در صورت خطا
+                    setIsFavorite(previousFavorite);
+                    toast('خطا در حذف از علاقه‌مندی‌ها', 'error');
+                },
+            });
+        } else {
+            addToFavorite(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]'>
@@ -104,8 +157,15 @@ function FoodPage({ }: Props) {
                     <h5 className="text-base font-bold">
                         {foodName}
                     </h5>
-                    <button className='p-2 bg-[#EAECF0] dark:bg-neutral-600 rounded-lg'>
-                        <Heart variant='Bold' size={24} className='fill-primary dark:fill-foreground' />
+                    <button
+                        onClick={handleToggleFavorite}
+                        className='p-2 bg-[#EAECF0] dark:bg-neutral-600 rounded-lg'
+                    >
+                        <Heart
+                            variant={isFavorite ? 'Bold' : 'Outline'}
+                            size={24}
+                            className={isFavorite ? 'fill-primary dark:fill-foreground' : 'stroke-primary dark:stroke-foreground'}
+                        />
                     </button>
                 </div>