danak/dmenu-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

notification infiti scroll

Browse Source
This commit is contained in:
hamid zarghami
2025-12-21 14:41:21 +03:30
parent 990e3f9f63
commit 2a1c81181e
6 changed files with 103 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/notification/Notification.tsx
+8 -8
View File
@@ -17,11 +17,11 @@ const Notifications: FC = () => {
// const navigate = useNavigate()
const { t } = useTranslation('global');
const ref = useOutsideClick(() => setShowModal(false));
const [activeTab, setActiveTab] = useState<'read' | 'unread'>('unread');
const [activeTab, setActiveTab] = useState<'seen' | 'unseen'>('unseen');
const [showModal, setShowModal] = useState<boolean>(false);
const { data, fetchNextPage, hasNextPage, refetch } = useGetNotification(activeTab);
const readAll = useReadAll()
const posts = data?.pages.flatMap((page) => page.data?.notifications || []) || [];
const posts = data?.pages.flatMap((page: { data: NotificationItemType[] }) => page.data || []) || [];
// const getDashboard = useGetDashboard()
const handleAllRead = () => {
@@ -99,19 +99,19 @@ const Notifications: FC = () => {
<div className="mt-6 flex h-8 border border-white border-opacity-35 text-xs rounded-lg overflow-hidden">
<div
onClick={() => setActiveTab('unread')}
onClick={() => setActiveTab('unseen')}
className={clx(
'flex-1 border-l cursor-pointer text-white border-white border-opacity-70 bg-transparent flex justify-center items-center',
activeTab === 'unread' ? 'bg-white bg-opacity-70 text-black' : ''
activeTab === 'unseen' ? 'bg-white bg-opacity-70 text-black' : ''
)}
>
خوانده نشده
</div>
<div
onClick={() => setActiveTab('read')}
onClick={() => setActiveTab('seen')}
className={clx(
'flex-1 cursor-pointer text-white border-white bg-transparent flex justify-center items-center',
activeTab === 'read' ? 'bg-white bg-opacity-70 text-black' : ''
activeTab === 'seen' ? 'bg-white bg-opacity-70 text-black' : ''
)}
>
خوانده شده
@@ -142,13 +142,13 @@ const Notifications: FC = () => {
posts.map((item: NotificationItemType) => (
<div onClick={() => handleRedirect()} className="bg-white cursor-pointer h-fit gap-4 items-start rounded-xl bg-opacity-60 p-3 mb-4 flex" key={item.id}>
{
!item.isRead &&
!item.seenAt &&
<div className="mt-1">
<StatusCircle color="#00BA4B" />
</div>
}
<div>
<div className="truncate max-w-[200px]">{item.message}</div>
<div className="truncate max-w-[200px]">{item.content}</div>
<div className="mt-2 flex gap-2 text-[10px] text-description">
<div>{timeAgo(item.createdAt)}</div>
<div className="flex gap-1 items-center">
src/pages/notification/hooks/useNotificationData.ts
+5 -11
View File
@@ -1,20 +1,14 @@
import * as api from "../service/NotificationService";
import { useInfiniteQuery, useMutation } from "@tanstack/react-query";
export const useGetNotification = (status: "all" | "read" | "unread") => {
export const useGetNotification = (status: "all" | "seen" | "unseen") => {
return useInfiniteQuery({
queryKey: ["notifications", status],
queryFn: ({ pageParam = 1 }) => api.getNotifications(pageParam, status), // فراخوانی API برای گرفتن داده‌ها
initialPageParam: 1, // صفحه اول به طور پیشفرض
queryFn: ({ pageParam }) =>
api.getNotifications(pageParam as string | undefined, status), // فراخوانی API برای گرفتن داده‌ها
initialPageParam: undefined as string | undefined, // اولین درخواست بدون cursor
getNextPageParam: (lastPage) => {
const currentPage = lastPage.data?.pager?.page;
const totalPages = lastPage.data?.pager?.totalPages;
if (!currentPage || !totalPages) {
return undefined;
}
return currentPage < totalPages ? currentPage + 1 : undefined;
return lastPage.nextCursor || undefined;
},
});
};
src/pages/notification/service/NotificationService.ts
+5 -4
View File
@@ -2,15 +2,16 @@ import axios from "../../../config/axios";
import type { GetNotificationsResponse } from "../types/NotificationTypes";
export const getNotifications = async (
page: number,
status: "all" | "read" | "unread"
cursor: string | undefined,
status: "all" | "seen" | "unseen"
): Promise<GetNotificationsResponse> => {
let query = ``;
if (status !== "all") {
query = `&isRead=${status === "read" ? 1 : 0}`;
query = `&status=${status}`;
}
const cursorParam = cursor ? `&cursor=${cursor}` : ``;
const { data } = await axios.get<GetNotificationsResponse>(
`/admin/notifications?page=${page}${query}`
`/admin/notifications?limit=10${cursorParam}${query}`
);
return data;
};
src/pages/notification/types/NotificationTypes.ts
+27 -5
View File
@@ -1,12 +1,32 @@
import type { IResponse } from "@/types/response.types";
export type NotificationUser = {
id: string;
createdAt: string;
updatedAt: string;
deletedAt: string | null;
firstName: string;
lastName: string;
birthDate: string;
marriageDate: string;
referrer: string | null;
isActive: boolean;
gender: boolean;
avatarUrl: string | null;
phone: string;
};
export type NotificationItemType = {
id: string;
title: string;
message: string;
createdAt: string;
isRead: boolean;
type: NotificationTypeEnum;
updatedAt: string;
deletedAt: string | null;
restaurant: string;
user: NotificationUser;
admin: string | null;
title: string;
content: string;
seenAt: string | null;
};
export type NotificationPager = {
@@ -19,7 +39,9 @@ export type NotificationData = {
pager: NotificationPager;
};
export type GetNotificationsResponse = IResponse<NotificationData>;
export type GetNotificationsResponse = IResponse<NotificationItemType[]> & {
nextCursor?: string;
};
export enum NotificationTypeEnum {
USER_LOGIN = "USER_LOGIN",
src/pages/orders/components/PaymentInfo.tsx
+49 -2
View File
@@ -2,6 +2,8 @@ import type { FC } from 'react'
import type { Order } from '../types/Types'
import { PaymentStatusEnum } from '../enum/Enum'
import { OrderStatus } from '../enum/Enum'
import { DeliveryMethodEnum } from '@/pages/shipmentMethod/enum/Enum'
import { PaymentMethodEnum } from '@/pages/paymentMethods/enum/Enum'
import { formatPrice, formatFaNumber } from '@/helpers/func'
interface PaymentInfoProps {
@@ -19,6 +21,26 @@ const PaymentInfo: FC<PaymentInfoProps> = ({
}) => {
const paymentStatus = order.paymentStatus || (order.status === OrderStatus.PAID ? PaymentStatusEnum.Paid : PaymentStatusEnum.Pending)
const getDeliveryMethodText = (method: string): string => {
const methodMap: Record<string, string> = {
[DeliveryMethodEnum.DineIn]: 'سرو در رستوران',
[DeliveryMethodEnum.CustomerPickup]: 'دریافت از محل',
[DeliveryMethodEnum.DeliveryCar]: 'تحویل به خودرو',
[DeliveryMethodEnum.DeliveryCourier]: 'بیرون بر',
}
return methodMap[method] || method
}
const getPaymentMethodText = (method: string): string => {
const methodMap: Record<string, string> = {
[PaymentMethodEnum.Cash]: 'پرداخت نقدی',
[PaymentMethodEnum.Online]: 'پرداخت آنلاین',
[PaymentMethodEnum.CardOnDelivery]: 'پرداخت در محل',
[PaymentMethodEnum.Wallet]: 'کیف پول',
}
return methodMap[method] || method
}
return (
<div className='w-[330px] h-fit bg-white rounded-4xl p-8'>
<div className='flex justify-between items-center'>
@@ -37,11 +59,36 @@ const PaymentInfo: FC<PaymentInfoProps> = ({
<div className='mt-10'>
<div className='flex text-[13px] font-light justify-between items-center border-b border-border border-dashed pb-4'>
<div className='text-description'>
نوع پرداخت
روش ارسال
</div>
<div>{order.paymentMethod?.description || '-'}</div>
<div>{order.deliveryMethod ? getDeliveryMethodText(order.deliveryMethod.method) : '-'}</div>
</div>
{order.deliveryMethod?.description && (
<div className='flex mt-4 text-[13px] font-light justify-between items-center border-b border-border border-dashed pb-4'>
<div className='text-description'>
توضیحات روش ارسال
</div>
<div>{order.deliveryMethod.description}</div>
</div>
)}
<div className='flex mt-4 text-[13px] font-light justify-between items-center border-b border-border border-dashed pb-4'>
<div className='text-description'>
روش پرداخت
</div>
<div>{order.paymentMethod ? getPaymentMethodText(order.paymentMethod.method) : '-'}</div>
</div>
{order.paymentMethod?.description && (
<div className='flex mt-4 text-[13px] font-light justify-between items-center border-b border-border border-dashed pb-4'>
<div className='text-description'>
توضیحات روش پرداخت
</div>
<div>{order.paymentMethod.description}</div>
</div>
)}
{order.paymentMethod?.gateway && (
<div className='flex mt-4 text-[13px] font-light justify-between items-center border-b border-border border-dashed pb-4'>
<div className='text-description'>
src/pages/orders/types/Types.ts
+9 -9
View File
@@ -40,11 +40,11 @@ export interface OrderRestaurant {
deletedAt: string | null;
name: string;
slug: string;
logo: string;
address: string;
menuColor: string;
latitude: number;
longitude: number;
logo: string | null;
address: string | null;
menuColor: string | null;
latitude: number | null;
longitude: number | null;
serviceArea: ServiceArea;
isActive: boolean;
establishedYear: number | null;
@@ -52,7 +52,7 @@ export interface OrderRestaurant {
instagram: string | null;
telegram: string | null;
whatsapp: string | null;
description: string;
description: string | null;
seoTitle: string | null;
seoDescription: string | null;
tagNames: string | null;
@@ -72,8 +72,8 @@ export interface OrderDeliveryMethod {
restaurant: string;
deliveryFee: number;
deliveryFeeType: string;
kilometerNumber: number | null;
deliveryFeeForKilometer: number | null;
perKilometerFee: number | null;
distanceBasedMinCost: number | null;
minOrderPrice: number;
description: string;
enabled: boolean;
@@ -124,7 +124,7 @@ export interface OrderFood {
content: string[];
price: number;
order: number | null;
prepareTime: number;
prepareTime: number | null;
weekDays: number[];
mealTypes: string[];
isActive: boolean;