diff --git a/src/app/[name]/(Main)/[id]/hooks/useFoodData.ts b/src/app/[name]/(Main)/[id]/hooks/useFoodData.ts new file mode 100644 index 0000000..81514f7 --- /dev/null +++ b/src/app/[name]/(Main)/[id]/hooks/useFoodData.ts @@ -0,0 +1,9 @@ +import { useQuery } from "@tanstack/react-query"; +import * as api from "../service/Service"; + +export const useGetFood = (id: string) => { + return useQuery({ + queryKey: ["food", id], + queryFn: () => api.getFood(id), + }); +}; diff --git a/src/app/[name]/(Main)/[id]/page.tsx b/src/app/[name]/(Main)/[id]/page.tsx index a1f9e7d..d399988 100644 --- a/src/app/[name]/(Main)/[id]/page.tsx +++ b/src/app/[name]/(Main)/[id]/page.tsx @@ -3,39 +3,96 @@ import MinusIcon from '@/components/icons/MinusIcon' import PlusIcon from '@/components/icons/PlusIcon' import { ef } from '@/lib/helpers/utfNumbers' -import { useReceiptStore } from '@/zustand/receiptStore' +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 React from 'react' +import { useParams, useRouter } from 'next/navigation' +import React, { useMemo } from 'react' +import { useGetFood } from './hooks/useFoodData' +import { useGetAbout } from '../about/hooks/useAboutData' type Props = object function FoodPage({ }: Props) { - const quantity = useReceiptStore(state => state.items[0]?.quantity || 0); - const increment = useReceiptStore(state => state.increment); - const decrement = useReceiptStore(state => state.decrement); - const price = 0; // TODO: Replace with actual price if needed + const { id } = useParams(); + const router = useRouter(); + const { data: food, isLoading } = useGetFood(id as string); + const { data: about } = useGetAbout(); + const { items, addToCart, removeFromCart } = useCart(); + + 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 handleRemoveFromCart = () => { + if (foodId) { + removeFromCart(foodId); + } + }; + + if (isLoading) { + return ( +
+

در حال بارگذاری...

+
+ ); + } + + if (!food?.data) { + return ( +
+

غذا یافت نشد

+
+ ); + } + + 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] + : foodData.images[0]?.url + : '/assets/images/food-preview-hq.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 || ''; return (
Food image
-
- خوراک +
+ {categoryName || '-'}
-
@@ -43,7 +100,7 @@ function FoodPage({ }: Props) {
- کباب چوبی مخصوص + {foodName}
) : ( <> )} diff --git a/src/app/[name]/(Main)/[id]/service/Service.ts b/src/app/[name]/(Main)/[id]/service/Service.ts new file mode 100644 index 0000000..f5eef7e --- /dev/null +++ b/src/app/[name]/(Main)/[id]/service/Service.ts @@ -0,0 +1,7 @@ +import { api } from "@/config/axios"; +import { FoodResponse } from "../../types/Types"; + +export const getFood = async (id: string): Promise => { + const { data } = await api.get(`/public/foods/${id}`); + return data; +}; diff --git a/src/app/[name]/(Main)/types/Types.ts b/src/app/[name]/(Main)/types/Types.ts index 023574f..c265cb7 100644 --- a/src/app/[name]/(Main)/types/Types.ts +++ b/src/app/[name]/(Main)/types/Types.ts @@ -32,7 +32,7 @@ export interface Food { foodName?: string; description?: string; desc?: string | null; - content?: string | null; + content?: string[] | null; price: number; image?: string | null; images?: FoodImage[] | null; @@ -52,7 +52,9 @@ export interface Food { pickupServe?: boolean; rate?: number; discount?: number; + isSpecialOffer?: boolean; [key: string]: unknown; } export type FoodsResponse = BaseResponse; +export type FoodResponse = BaseResponse;