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

notifications

Browse Source
This commit is contained in:
hamid zarghami
2025-02-08 18:37:10 +03:30
parent f69b82efcc
commit 617041e2ba
8 changed files with 182 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.env
+2 -2
View File
@@ -1,4 +1,4 @@
VITE_TOKEN_NAME = 'dsc_token'
VITE_REFRESH_TOKEN_NAME = 'dsc_refresh_token'
VITE_BASE_URL = 'https://danak-dsc-api.run.danakcorp.com'
# VITE_BASE_URL = 'http://192.168.0.221:4000'
# VITE_BASE_URL = 'https://danak-dsc-api.run.danakcorp.com'
VITE_BASE_URL = 'http://192.168.0.223:3500'
package-lock.json
Generated
+22
View File
@@ -21,6 +21,7 @@
"react-dom": "^19.0.0",
"react-dropzone": "^14.3.5",
"react-i18next": "^15.2.0",
"react-infinite-scroll-component": "^6.1.0",
"react-loading": "^2.0.3",
"react-multi-date-picker": "^4.5.2",
"react-otp-input": "^3.1.1",
@@ -4391,6 +4392,18 @@
}
}
},
"node_modules/react-infinite-scroll-component": {
"version": "6.1.0",
"resolved": "https://registry.npmjs.org/react-infinite-scroll-component/-/react-infinite-scroll-component-6.1.0.tgz",
"integrity": "sha512-SQu5nCqy8DxQWpnUVLx7V7b7LcA37aM7tvoWjTLZp1dk6EJibM5/4EJKzOnl07/BsM1Y40sKLuqjCwwH/xV0TQ==",
"license": "MIT",
"dependencies": {
"throttle-debounce": "^2.1.0"
},
"peerDependencies": {
"react": ">=16.0.0"
}
},
"node_modules/react-is": {
"version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -4978,6 +4991,15 @@
"node": ">=0.8"
}
},
"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
@@ -23,6 +23,7 @@
"react-dom": "^19.0.0",
"react-dropzone": "^14.3.5",
"react-i18next": "^15.2.0",
"react-infinite-scroll-component": "^6.1.0",
"react-loading": "^2.0.3",
"react-multi-date-picker": "^4.5.2",
"react-otp-input": "^3.1.1",
src/config/func.ts
+22
View File
@@ -6,3 +6,25 @@ export function isEmail(input: string): boolean {
export function NumberFormat(number: number): string {
return Intl.NumberFormat("fa-IR").format(number);
}
export const timeAgo = (date: string | Date): string => {
const now = new Date();
const past = new Date(date);
const diff = Math.floor((now.getTime() - past.getTime()) / 1000); // اختلاف بر حسب ثانیه
const units = [
{ name: "سال", value: 60 * 60 * 24 * 365 },
{ name: "ماه", value: 60 * 60 * 24 * 30 },
{ name: "روز", value: 60 * 60 * 24 },
{ name: "ساعت", value: 60 * 60 },
{ name: "دقیقه", value: 60 },
{ name: "ثانیه", value: 1 },
];
for (const unit of units) {
const amount = Math.floor(diff / unit.value);
if (amount >= 1) return `${amount} ${unit.name} پیش`;
}
return "همین الان";
};
src/pages/notification/Notification.tsx
+105 -103
View File
@@ -1,113 +1,115 @@
import { Notification } from 'iconsax-react'
import { 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 { Notification } from 'iconsax-react';
import { 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 } from './hooks/useNotificationData';
import { NotificationItemType } from './types/NotificationTypes';
import { timeAgo } from '../../config/func';
import InfiniteScroll from 'react-infinite-scroll-component';
const Notifications: FC = () => {
const { t } = useTranslation('global');
const ref = useOutsideClick(() => setShowModal(false));
const [activeTab, setActiveTab] = useState<'all' | 'read' | 'unread'>('all');
const [showModal, setShowModal] = useState<boolean>(false);
const { data, fetchNextPage, hasNextPage, isFetching, isLoading } = useGetNotification();
const { t } = useTranslation('global')
const ref = useOutsideClick(() => setShowModal(false))
const [activeTab, setActiveTab] = useState<'all' | 'read' | 'unread'>('all')
const [showModal, setShowModal] = useState<boolean>(false)
const posts = data?.pages.flatMap((page) => page.data?.notifications) || [];
console.log('posts:', posts);
console.log('hasNextPage:', hasNextPage);
console.log('isFetching:', isFetching);
console.log('isLoading:', isLoading);
return (
<div ref={ref}>
<Notification onClick={() => setShowModal(!showModal)} size={18} color='black' />
<Notification onClick={() => setShowModal(!showModal)} size={18} color="black" />
{
showModal && (
<div 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('all')} className={clx(
'flex-1 border-l cursor-pointer text-white border-white border-opacity-70 flex justify-center items-center',
activeTab === 'all' ? 'bg-white bg-opacity-70 text-black' : ''
)}>
همه
</div>
<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='mt-6 flex flex-col gap-4 text-xs'>
<div className='bg-white h-fit gap-4 items-start rounded-xl bg-opacity-60 p-3 flex'>
<div className='mt-1'>
<StatusCircle color='#00BA4B' />
</div>
<div className=''>
<div className='truncate'>
لورم ایپسوم متن ساختگی با تولید سادگی
</div>
<div className='mt-2 flex gap-2 text-[10px] text-description'>
<div>۲ ساعت پیش</div>
<div className='flex gap-1 items-center'>
<StatusCircle color='#8C90A3' />
<div>دیزاین</div>
</div>
</div>
</div>
</div>
<div className='bg-white h-fit gap-4 items-start rounded-xl bg-opacity-60 p-3 flex'>
<div className='mt-1'>
<StatusCircle color='#00BA4B' />
</div>
<div className=''>
<div className='truncate'>
لورم ایپسوم متن ساختگی با تولید سادگی
</div>
<div className='mt-2 flex gap-2 text-[10px] text-description'>
<div>۲ ساعت پیش</div>
<div className='flex gap-1 items-center'>
<StatusCircle color='#8C90A3' />
<div>دیزاین</div>
</div>
</div>
</div>
</div>
<div className='bg-white h-fit gap-4 items-start rounded-xl bg-opacity-60 p-3 flex'>
<div className='mt-1'>
<StatusCircle color='#00BA4B' />
</div>
<div className=''>
<div className='truncate'>
لورم ایپسوم متن ساختگی با تولید سادگی
</div>
<div className='mt-2 flex gap-2 text-[10px] text-description'>
<div>۲ ساعت پیش</div>
<div className='flex gap-1 items-center'>
<StatusCircle color='#8C90A3' />
<div>دیزاین</div>
</div>
</div>
</div>
</div>
{showModal && (
<div 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>
)
}
export default Notifications
<div className="mt-6 flex h-8 border border-white border-opacity-35 text-xs rounded-lg overflow-hidden">
<div
onClick={() => setActiveTab('all')}
className={clx(
'flex-1 border-l cursor-pointer text-white border-white border-opacity-70 flex justify-center items-center',
activeTab === 'all' ? 'bg-white bg-opacity-70 text-black' : ''
)}
>
همه
</div>
<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 id="notificationsContainer" className="mt-6 flex flex-col gap-4 text-xs overflow-auto">
<InfiniteScroll
dataLength={posts.length}
next={fetchNextPage}
hasMore={hasNextPage}
loader={<h4>در حال بارگذاری...</h4>}
scrollThreshold={0.9}
// scrollableTarget="notificationsContainer"
pullDownToRefresh
>
{isLoading ? (
<h4>در حال بارگذاری...</h4>
) : isFetching ? (
<h4>در حال بارگذاری صفحه بعدی...</h4>
) : (
posts.map((item: NotificationItemType) => (
<div className="bg-white h-fit gap-4 items-start rounded-xl bg-opacity-60 p-3 mb-4 flex" key={item.id}>
<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
+17
View File
@@ -0,0 +1,17 @@
import * as api from "../service/NotificationService";
import { useInfiniteQuery } from "@tanstack/react-query";
export const useGetNotification = () => {
return useInfiniteQuery({
queryKey: ["notifications"],
queryFn: ({ pageParam = 1 }) => api.getNotifications(pageParam), // فراخوانی API برای گرفتن داده‌ها
initialPageParam: 1, // صفحه اول به طور پیشفرض
getNextPageParam: (lastPage) => {
const currentPage = lastPage.data?.pager.page;
const totalPages = lastPage.data?.pager.totalPages;
console.log("hasNextPage check: ", currentPage, totalPages); // بررسی وضعیت صفحات
return currentPage < totalPages ? currentPage + 1 : undefined;
},
});
};
src/pages/notification/service/NotificationService.ts
+6
View File
@@ -0,0 +1,6 @@
import axios from "../../../config/axios";
export const getNotifications = async (page: number) => {
const { data } = await axios.get(`/notifications?page=${page}`);
return data;
};
src/pages/notification/types/NotificationTypes.ts
+7
View File
@@ -0,0 +1,7 @@
export type NotificationItemType = {
id: string;
title: string;
message: string;
createdAt: string;
isRead: boolean;
};