notifications
This commit is contained in:
hamid zarghami
@@ -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;
|
||||
Reference in New Issue
Block a user