favorite list
This commit is contained in:
@@ -0,0 +1,9 @@
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { getFavorites } from "../service/Service";
|
||||
|
||||
export const useGetFavorites = () => {
|
||||
return useQuery({
|
||||
queryKey: ["favorites"],
|
||||
queryFn: getFavorites,
|
||||
});
|
||||
};
|
||||
@@ -0,0 +1,97 @@
|
||||
'use client'
|
||||
import React, { useMemo } from 'react'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import { ArrowLeft } from 'iconsax-react'
|
||||
import { useGetFavorites } from './hooks/useFavoriteData'
|
||||
import MenuItem from '@/components/listview/MenuItem'
|
||||
import MenuItemRenderer from '@/components/listview/MenuItemRenderer'
|
||||
import VerticalScrollView from '@/components/listview/VerticalScrollView'
|
||||
import type { Favorite } from './types/Types'
|
||||
import type { Food } from '@/app/[name]/(Main)/types/Types'
|
||||
|
||||
function FavoritePage() {
|
||||
const router = useRouter()
|
||||
const { data: favoritesData, isLoading } = useGetFavorites()
|
||||
|
||||
const favorites = useMemo(() => {
|
||||
return favoritesData?.data || []
|
||||
}, [favoritesData?.data])
|
||||
|
||||
const foodItems = useMemo(() => {
|
||||
return favorites.map((favorite: Favorite) => {
|
||||
const favoriteFood = favorite.food
|
||||
// تبدیل FavoriteFood به Food برای استفاده در MenuItem
|
||||
const food: Food = {
|
||||
id: favoriteFood.id,
|
||||
createdAt: favoriteFood.createdAt,
|
||||
updatedAt: favoriteFood.updatedAt,
|
||||
deletedAt: favoriteFood.deletedAt,
|
||||
restaurant: favoriteFood.restaurant as unknown as Food['restaurant'],
|
||||
category: favoriteFood.category as unknown as Food['category'],
|
||||
inventory: {} as Food['inventory'],
|
||||
title: favoriteFood.title,
|
||||
desc: favoriteFood.desc,
|
||||
content: favoriteFood.content,
|
||||
price: favoriteFood.price,
|
||||
order: favoriteFood.order,
|
||||
prepareTime: favoriteFood.prepareTime,
|
||||
weekDays: favoriteFood.weekDays,
|
||||
mealTypes: favoriteFood.mealTypes,
|
||||
isActive: favoriteFood.isActive,
|
||||
images: favoriteFood.images,
|
||||
inPlaceServe: favoriteFood.inPlaceServe,
|
||||
pickupServe: favoriteFood.pickupServe,
|
||||
score: favoriteFood.score,
|
||||
discount: favoriteFood.discount,
|
||||
isSpecialOffer: favoriteFood.isSpecialOffer,
|
||||
reviews: [],
|
||||
favorites: [],
|
||||
isFavorite: true,
|
||||
name: favoriteFood.title,
|
||||
description: favoriteFood.desc,
|
||||
}
|
||||
return food
|
||||
})
|
||||
}, [favorites])
|
||||
|
||||
return (
|
||||
<div className='overflow-y-auto h-full noscrollbar flex flex-col'>
|
||||
<div className='grid grid-cols-3 items-center'>
|
||||
<span></span>
|
||||
<h1 className='text-sm2 place-self-center font-medium'>علاقهمندیها</h1>
|
||||
<ArrowLeft
|
||||
className='cursor-pointer place-self-end'
|
||||
size='24'
|
||||
color='currentColor'
|
||||
onClick={() => { router.back() }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mt-8 flex-1 h-full">
|
||||
{isLoading ? (
|
||||
<div className='flex flex-col items-center justify-center gap-2 py-12 text-sm2 text-muted-foreground'>
|
||||
<span className='h-4 w-4 animate-spin rounded-full border border-dashed border-foreground border-t-transparent'></span>
|
||||
<p>در حال دریافت علاقهمندیها...</p>
|
||||
</div>
|
||||
) : foodItems.length === 0 ? (
|
||||
<div className='flex flex-col items-center justify-center gap-2 py-12 text-sm2 text-muted-foreground'>
|
||||
<p>شما هیچ مورد علاقهمندی ثبت نکردهاید</p>
|
||||
<p className='text-xs'>
|
||||
برای افزودن غذا به علاقهمندیها، به صفحه جزئیات غذا بروید
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<VerticalScrollView className="overflow-y-auto h-full">
|
||||
{foodItems.map((food) => (
|
||||
<MenuItemRenderer key={food.id}>
|
||||
<MenuItem food={food} />
|
||||
</MenuItemRenderer>
|
||||
))}
|
||||
</VerticalScrollView>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default FavoritePage
|
||||
@@ -0,0 +1,7 @@
|
||||
import { api } from "@/config/axios";
|
||||
import { FavoritesResponse } from "../types/Types";
|
||||
|
||||
export const getFavorites = async (): Promise<FavoritesResponse> => {
|
||||
const { data } = await api.get<FavoritesResponse>("/public/foods/favorite");
|
||||
return data;
|
||||
};
|
||||
@@ -0,0 +1,39 @@
|
||||
import { BaseResponse } from "@/app/[name]/(Main)/types/Types";
|
||||
|
||||
export type MealType = "breakfast" | "lunch" | "dinner" | "snack";
|
||||
|
||||
export interface FavoriteFood {
|
||||
id: string;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
deletedAt: string | null;
|
||||
restaurant: string;
|
||||
category: string;
|
||||
title: string;
|
||||
desc: string;
|
||||
content: string[];
|
||||
price: number;
|
||||
order: number | null;
|
||||
prepareTime: number | null;
|
||||
weekDays: number[];
|
||||
mealTypes: MealType[];
|
||||
isActive: boolean;
|
||||
images: string[];
|
||||
inPlaceServe: boolean;
|
||||
pickupServe: boolean;
|
||||
score: number;
|
||||
discount: number;
|
||||
isSpecialOffer: boolean;
|
||||
}
|
||||
|
||||
export interface Favorite {
|
||||
id: string;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
deletedAt: string | null;
|
||||
user: string;
|
||||
food: FavoriteFood;
|
||||
}
|
||||
|
||||
export type FavoritesResponse = BaseResponse<Favorite[]>;
|
||||
|
||||
Reference in New Issue
Block a user