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

notification base

Browse Source
This commit is contained in:
hamid zarghami
2025-12-20 09:49:23 +03:30
parent 694eda70af
commit 24cce65444
8 changed files with 295 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+22
View File
@@ -25,6 +25,7 @@
"react-dom": "^19.1.1",
"react-dropzone": "^14.3.8",
"react-i18next": "^15.7.2",
"react-infinite-scroll-component": "^6.1.1",
"react-leaflet": "^5.0.0-rc.2",
"react-loading-skeleton": "^3.5.0",
"react-multi-date-picker": "^4.5.2",
@@ -4727,6 +4728,18 @@
}
}
},
"node_modules/react-infinite-scroll-component": {
"version": "6.1.1",
"resolved": "https://registry.npmjs.org/react-infinite-scroll-component/-/react-infinite-scroll-component-6.1.1.tgz",
"integrity": "sha512-R8YoOyiNDynSWmfVme5LHslsKrP+/xcRUWR2ies8UgUab9dtyw5ECnMCVPPmnmjjF4MWQmfVdRwRWcWaDgeyMA==",
"license": "MIT",
"dependencies": {
"throttle-debounce": "^2.1.0"
},
"peerDependencies": {
"react": ">=16.0.0"
}
},
"node_modules/react-is": {
"version": "18.3.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
@@ -5157,6 +5170,15 @@
"node": ">=18"
}
},
"node_modules/throttle-debounce": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-2.3.0.tgz",
"integrity": "sha512-H7oLPV0P7+jgvrk+6mwwwBDmxTaxnu9HMXmloNLXwnNO0ZxZ31Orah2n8lU1eMPvsaowP2CX+USCgyovXfdOFQ==",
"license": "MIT",
"engines": {
"node": ">=8"
}
},
"node_modules/tiny-case": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/tiny-case/-/tiny-case-1.0.3.tgz",
package.json
+1
View File
@@ -27,6 +27,7 @@
"react-dom": "^19.1.1",
"react-dropzone": "^14.3.8",
"react-i18next": "^15.7.2",
"react-infinite-scroll-component": "^6.1.1",
"react-leaflet": "^5.0.0-rc.2",
"react-loading-skeleton": "^3.5.0",
"react-multi-date-picker": "^4.5.2",
src/index.css
+7
View File
@@ -95,3 +95,10 @@ tbody tr:nth-child(odd) {
-webkit-appearance: none;
-moz-appearance: textfield;
}
.modalGlass3 {
background: rgba(62, 61, 61, 0.2);
background-blend-mode: multiply;
backdrop-filter: blur(44px);
}
src/pages/notification/Notification.tsx
+171
View File
@@ -0,0 +1,171 @@
import { Notification } from 'iconsax-react';
import { type FC, useState } from 'react';
import XIcon from '../../assets/images/close-circle.svg';
import { useTranslation } from 'react-i18next';
import { clx } from '../../helpers/utils';
import StatusCircle from '../../components/StatusCircle';
import { useOutsideClick } from '../../hooks/useOutSideClick';
import { useGetNotification, useReadAll } from './hooks/useNotificationData';
import { type NotificationItemType } from './types/NotificationTypes';
import { timeAgo } from '../../config/func';
import InfiniteScroll from 'react-infinite-scroll-component';
import MoonLoader from "react-spinners/MoonLoader"
import Button from '../../components/Button';
import { toast } from 'react-toastify';
const Notifications: FC = () => {
// const navigate = useNavigate()
const { t } = useTranslation('global');
const ref = useOutsideClick(() => setShowModal(false));
const [activeTab, setActiveTab] = useState<'read' | 'unread'>('unread');
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 getDashboard = useGetDashboard()
const handleAllRead = () => {
readAll.mutate(undefined, {
onSuccess: () => {
// getDashboard.refetch()
refetch()
toast.success(t('success'))
}
})
}
const handleRedirect = () => {
// switch (type) {
// case NotificationTypeEnum.USER_LOGIN:
// break;
// case NotificationTypeEnum.ANNOUNCEMENT:
// navigate(Pages.announcement.list)
// break;
// case NotificationTypeEnum.WALLET_CHARGE:
// navigate(Pages.transactions)
// break;
// case NotificationTypeEnum.WALLET_DEDUCTION:
// navigate(Pages.transactions)
// break;
// case NotificationTypeEnum.BILL_INVOICE_REMINDER:
// navigate(Pages.receipts.index)
// break;
// case NotificationTypeEnum.BILL_INVOICE:
// navigate(Pages.receipts.index)
// break;
// case NotificationTypeEnum.CREATE_INVOICE:
// navigate(Pages.receipts.index)
// break;
// case NotificationTypeEnum.CREATE_SERVICE:
// navigate(Pages.services.other)
// break;
// case NotificationTypeEnum.UNBLOCK_SERVICE:
// navigate(Pages.services.other)
// break;
// case NotificationTypeEnum.BLOCK_SERVICE:
// navigate(Pages.services.other)
// break;
// case NotificationTypeEnum.ANSWER_TICKET:
// navigate(Pages.ticket.list)
// break;
// case NotificationTypeEnum.CREATE_TICKET:
// navigate(Pages.ticket.list)
// break;
// default:
// break
// }
setShowModal(false)
}
return (
<div ref={ref}>
<div onClick={() => setShowModal(!showModal)} className='relative cursor-pointer'>
<Notification size={18} color="black" />
<div className="absolute top-0 right-0 -mt-1 -mr-1 rounded-full bg-red-500 text-white text-[8px] size-3 flex pt-0.5 pl-[1px] justify-center items-center">
{/* {getDashboard.data?.data?.notificationCount} */}
</div>
</div>
{showModal && (
<div id='notificationsContainer' className="xl:h-[calc(100%-110px)] h-[70%] p-6 z-50 xl:w-[300px] w-full xl:left-7 left-0 xl:top-[90px] top-0 overflow-y-auto xl:rounded-3xl rounded-b-3xl rounded-t-none fixed modalGlass3 ">
<div className="flex justify-between items-center">
<div>{t('notif.natification')}</div>
<div className="size-7 rounded-full bg-white bg-opacity-35 flex justify-center items-center">
<img src={XIcon} alt="close" className="w-4 h-4" onClick={() => setShowModal(false)} />
</div>
</div>
<div className="mt-6 flex h-8 border border-white border-opacity-35 text-xs rounded-lg overflow-hidden">
<div
onClick={() => setActiveTab('unread')}
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' : ''
)}
>
خوانده نشده
</div>
<div
onClick={() => setActiveTab('read')}
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' : ''
)}
>
خوانده شده
</div>
</div>
<div className='flex mt-4 justify-end'>
<Button
isloading={readAll.isPending}
onClick={handleAllRead}
className={clx(
'flex-1 border bg-transparent text-xs h-7 rounded-md cursor-pointer text-white border-white border-opacity-70 flex justify-center items-center',
)}
>
{t('notif.all_read')}
</Button>
</div>
<div className="mt-6 flex flex-col gap-4 text-xs overflow-auto">
<InfiniteScroll
dataLength={posts.length}
next={fetchNextPage}
hasMore={hasNextPage}
loader={<div className='flex justify-center'><MoonLoader color="black" size={20} /></div>}
scrollableTarget="notificationsContainer"
>
{
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 &&
<div className="mt-1">
<StatusCircle color="#00BA4B" />
</div>
}
<div>
<div className="truncate max-w-[200px]">{item.message}</div>
<div className="mt-2 flex gap-2 text-[10px] text-description">
<div>{timeAgo(item.createdAt)}</div>
<div className="flex gap-1 items-center">
<StatusCircle color="#8C90A3" />
<div>{item.title}</div>
</div>
</div>
</div>
</div>
))
}
</InfiniteScroll>
</div>
</div>
)}
</div>
);
};
export default Notifications;
src/pages/notification/hooks/useNotificationData.ts
+26
View File
@@ -0,0 +1,26 @@
import * as api from "../service/NotificationService";
import { useInfiniteQuery, useMutation } from "@tanstack/react-query";
export const useGetNotification = (status: "all" | "read" | "unread") => {
return useInfiniteQuery({
queryKey: ["notifications", status],
queryFn: ({ pageParam = 1 }) => api.getNotifications(pageParam, status), // فراخوانی API برای گرفتن داده‌ها
initialPageParam: 1, // صفحه اول به طور پیشفرض
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;
},
});
};
export const useReadAll = () => {
return useMutation({
mutationFn: () => api.readAll(),
});
};
src/pages/notification/service/NotificationService.ts
+21
View File
@@ -0,0 +1,21 @@
import axios from "../../../config/axios";
import type { GetNotificationsResponse } from "../types/NotificationTypes";
export const getNotifications = async (
page: number,
status: "all" | "read" | "unread"
): Promise<GetNotificationsResponse> => {
let query = ``;
if (status !== "all") {
query = `&isRead=${status === "read" ? 1 : 0}`;
}
const { data } = await axios.get<GetNotificationsResponse>(
`/admin/notifications?page=${page}${query}`
);
return data;
};
export const readAll = async () => {
const { data } = await axios.patch(`/admin/notifications/read-all`);
return data;
};
src/pages/notification/types/NotificationTypes.ts
+45
View File
@@ -0,0 +1,45 @@
import type { IResponse } from "@/types/response.types";
export type NotificationItemType = {
id: string;
title: string;
message: string;
createdAt: string;
isRead: boolean;
type: NotificationTypeEnum;
};
export type NotificationPager = {
page: number;
totalPages: number;
};
export type NotificationData = {
notifications: NotificationItemType[];
pager: NotificationPager;
};
export type GetNotificationsResponse = IResponse<NotificationData>;
export enum NotificationTypeEnum {
USER_LOGIN = "USER_LOGIN",
ANNOUNCEMENT = "ANNOUNCEMENT",
// Finance category
WALLET_CHARGE = "WALLET_CHARGE",
WALLET_DEDUCTION = "WALLET_DEDUCTION",
//Invoice
BILL_INVOICE_REMINDER = "BILL_INVOICE_REMINDER",
BILL_INVOICE = "BILL_INVOICE",
CREATE_INVOICE = "CREATE_INVOICE",
// Service category
CREATE_SERVICE = "CREATE_SERVICE",
UNBLOCK_SERVICE = "UNBLOCK_SERVICE",
BLOCK_SERVICE = "BLOCK_SERVICE",
// Support category
ANSWER_TICKET = "ANSWER_TICKET",
CREATE_TICKET = "CREATE_TICKET",
}
src/shared/Header.tsx
+2 -1
View File
@@ -6,6 +6,7 @@ import { useTranslation } from 'react-i18next'
import { useSharedStore } from './store/sharedStore'
import { HambergerMenu } from 'iconsax-react'
import { clx } from '@/helpers/utils'
import Notifications from '@/pages/notification/Notification'
const Header: FC = () => {
@@ -45,7 +46,7 @@ const Header: FC = () => {
{/* <Link className='xl:hidden' to={Pages.wallet}>
<Wallet className='xl:size-[18px] size-[17px]' color='black' />
</Link> */}
{/* <Notifications /> */}
<Notifications />
{/* {
data && (
<Popover className="relative" key={popoverKey}>