From fa39d06834515344b3e7a45d1cddebdec38a9e93 Mon Sep 17 00:00:00 2001 From: hamid zarghami Date: Tue, 23 Dec 2025 11:05:57 +0330 Subject: [PATCH] order history filter with orders currents and before --- .../[name]/(Main)/order/history/enum/Enum.ts | 10 +++++++ .../order/history/hooks/useHistoryData.ts | 6 ++-- src/app/[name]/(Main)/order/history/page.tsx | 28 ++++++------------- .../(Main)/order/history/service/Service.ts | 26 +++++++++++++++-- src/components/tab/TabContainer.tsx | 15 +++++++--- 5 files changed, 57 insertions(+), 28 deletions(-) create mode 100644 src/app/[name]/(Main)/order/history/enum/Enum.ts diff --git a/src/app/[name]/(Main)/order/history/enum/Enum.ts b/src/app/[name]/(Main)/order/history/enum/Enum.ts new file mode 100644 index 0000000..175b881 --- /dev/null +++ b/src/app/[name]/(Main)/order/history/enum/Enum.ts @@ -0,0 +1,10 @@ +export const enum OrderStatus { + PENDING_PAYMENT = "pendingPayment", + PAID = "paid", + PREPARING = "preparing", + DELIVERED_TO_WAITER = "deliveredToWaiter", + DELIVERED_TO_RECEPTIONIST = "deliveredToReceptionist", + SHIPPED = "shipped", + COMPLETED = "completed", + CANCELED = "canceled", +} diff --git a/src/app/[name]/(Main)/order/history/hooks/useHistoryData.ts b/src/app/[name]/(Main)/order/history/hooks/useHistoryData.ts index 82e2663..1dec22c 100644 --- a/src/app/[name]/(Main)/order/history/hooks/useHistoryData.ts +++ b/src/app/[name]/(Main)/order/history/hooks/useHistoryData.ts @@ -1,9 +1,9 @@ import { useQuery } from "@tanstack/react-query"; import { getOrders } from "../service/Service"; -export const useGetOrders = () => { +export const useGetOrders = (status: "old" | "current") => { return useQuery({ - queryKey: ["orders"], - queryFn: getOrders, + queryKey: ["orders", status], + queryFn: () => getOrders(status), }); }; diff --git a/src/app/[name]/(Main)/order/history/page.tsx b/src/app/[name]/(Main)/order/history/page.tsx index c0a1790..55ccf6f 100644 --- a/src/app/[name]/(Main)/order/history/page.tsx +++ b/src/app/[name]/(Main)/order/history/page.tsx @@ -8,7 +8,7 @@ import { TabHeader } from '@/components/tab/TabHeader'; import { Receipt2, ReceiptItem } from 'iconsax-react'; import Image from 'next/image'; import Link from 'next/link'; -import React, { useMemo } from 'react' +import React, { useMemo, useState } from 'react' import { useTranslation } from 'react-i18next'; import { useGetOrders } from './hooks/useHistoryData'; import { HistoryOrderItem } from './types/Types'; @@ -41,33 +41,23 @@ const formatDate = (dateString: string): string => { function OrdersIndex() { const { t } = useTranslation('orders'); - const { data: ordersData } = useGetOrders(); + const [selectedTab, setSelectedTab] = useState(0); + const status = selectedTab === 0 ? 'current' : 'old'; + const { data: ordersData } = useGetOrders(status); const orders = useMemo(() => ordersData?.data || [], [ordersData?.data]); - const activeOrders = useMemo(() => { - return orders.filter((order) => { - return order.status !== 'delivered' && order.status !== 'cancelled'; - }); - }, [orders]); - - const previousOrders = useMemo(() => { - return orders.filter((order) => { - return order.status === 'delivered' || order.status === 'cancelled'; - }); - }, [orders]); - const categories = [ { id: 0, title: t('Tab.ActiveOrders'), icon: }, { id: 1, title: t('Tab.PreviousOrders'), icon: } ] const firstTab = () => { - if (activeOrders.length === 0) { + if (orders.length === 0) { return [
سفارش فعالی وجود ندارد
]; } - return activeOrders.map((order) => { + return orders.map((order) => { const address = order.address?.address || 'آدرس ثبت نشده'; const formattedDate = formatDate(order.createdAt); const formattedPrice = order.total.toLocaleString('fa-IR'); @@ -138,11 +128,11 @@ function OrdersIndex() { } const secondTab = () => { - if (previousOrders.length === 0) { + if (orders.length === 0) { return [
سفارش قبلی وجود ندارد
]; } - return previousOrders.map((order) => { + return orders.map((order) => { const address = order.address?.address || 'آدرس ثبت نشده'; const formattedDate = formatDate(order.createdAt); const formattedPrice = order.total.toLocaleString('fa-IR'); @@ -219,7 +209,7 @@ function OrdersIndex() { return (
- + {firstTab()}
} title={categories[0].title} diff --git a/src/app/[name]/(Main)/order/history/service/Service.ts b/src/app/[name]/(Main)/order/history/service/Service.ts index c8f0cfc..9ee90ac 100644 --- a/src/app/[name]/(Main)/order/history/service/Service.ts +++ b/src/app/[name]/(Main)/order/history/service/Service.ts @@ -1,7 +1,29 @@ import { api } from "@/config/axios"; import { OrdersResponse } from "../types/Types"; +import { OrderStatus } from "../enum/Enum"; -export const getOrders = async (): Promise => { - const { data } = await api.get("/public/orders"); +export const getOrders = async ( + status: "old" | "current" +): Promise => { + const statuses = + status === "old" + ? [OrderStatus.COMPLETED, OrderStatus.CANCELED] + : [ + OrderStatus.PENDING_PAYMENT, + OrderStatus.PAID, + OrderStatus.PREPARING, + OrderStatus.DELIVERED_TO_WAITER, + OrderStatus.DELIVERED_TO_RECEPTIONIST, + OrderStatus.SHIPPED, + OrderStatus.COMPLETED, + ]; + + console.log(statuses); + + const { data } = await api.get(`/public/orders`, { + params: { + statuses: statuses, + }, + }); return data; }; diff --git a/src/components/tab/TabContainer.tsx b/src/components/tab/TabContainer.tsx index 803676a..52f3ab0 100644 --- a/src/components/tab/TabContainer.tsx +++ b/src/components/tab/TabContainer.tsx @@ -13,6 +13,8 @@ type Props = { className?: TabContainerClassName; changeType?: TabContainerRenderType; defaultIndex?: number; + selectedTab?: number; + onTabChange?: (index: number) => void; } & Omit, 'className'>; export enum TabContainerRenderType { @@ -48,13 +50,18 @@ export const TabContainerClassNames: TabContainerClassName = { titleActive: 'text-primary dark:text-foreground' } -function TabContainer({ className = TabContainerClassNames, changeType = TabContainerRenderType.RENDERER, defaultIndex = 0, itemRenderer, children, ...restProps }: Props) { +function TabContainer({ className = TabContainerClassNames, changeType = TabContainerRenderType.RENDERER, defaultIndex = 0, selectedTab: controlledSelectedTab, onTabChange, itemRenderer, children, ...restProps }: Props) { - const [selectedTab, setSelectedTab] = useState(defaultIndex); + const [internalSelectedTab, setInternalSelectedTab] = useState(defaultIndex); + const selectedTab = controlledSelectedTab !== undefined ? controlledSelectedTab : internalSelectedTab; const updateTab = useCallback((index: number) => { - setSelectedTab(index); - }, []); + if (onTabChange) { + onTabChange(index); + } else { + setInternalSelectedTab(index); + } + }, [onTabChange]); const items = React.Children.toArray(children).filter( (child): child is ReactElement =>