order history filter with orders currents and before

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",
+}

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"],
+    queryKey: ["orders", status],
-    queryFn: getOrders,
+    queryFn: () => getOrders(status),
   });
 };

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: <ReceiptItem size={22} /> },
         { id: 1, title: t('Tab.PreviousOrders'), icon: <Receipt2 size={22} /> }
     ]
 
     const firstTab = () => {
-        if (activeOrders.length === 0) {
+        if (orders.length === 0) {
             return [<div key="empty" className='text-center text-sm text-disabled-text py-8'>سفارش فعالی وجود ندارد</div>];
         }
 
-        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 [<div key="empty" className='text-center text-sm text-disabled-text py-8'>سفارش قبلی وجود ندارد</div>];
         }
 
-        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 (
         <div className='pt-8'>
-            <TabContainer>
+            <TabContainer selectedTab={selectedTab} onTabChange={setSelectedTab}>
                 <TabHeader
                     viewRenderer={<div className='pt-4'>{firstTab()}</div>}
                     title={categories[0].title}

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<OrdersResponse> => {
+export const getOrders = async (
-  const { data } = await api.get<OrdersResponse>("/public/orders");
+  status: "old" | "current"
+): Promise<OrdersResponse> => {
+  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<OrdersResponse>(`/public/orders`, {
+    params: {
+      statuses: statuses,
+    },
+  });
   return data;
 };

src/components/tab/TabContainer.tsx

@@ -13,6 +13,8 @@ type Props = {
     className?: TabContainerClassName;
     changeType?: TabContainerRenderType;
     defaultIndex?: number;
+    selectedTab?: number;
+    onTabChange?: (index: number) => void;
 } & Omit<React.OlHTMLAttributes<HTMLUListElement>, '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<TabItemProps> =>