notification
This commit is contained in:
hamid zarghami
@@ -14,6 +14,7 @@ import Button from '../../components/Button';
|
||||
import { toast } from '../../components/Toast';
|
||||
// import { useNavigate } from 'react-router-dom';
|
||||
import { ErrorType } from '../../helpers/types';
|
||||
import { useSharedStore } from '@/shared/store/sharedStore';
|
||||
const Notifications: FC = () => {
|
||||
// const navigate = useNavigate()
|
||||
const { t } = useTranslation();
|
||||
@@ -22,6 +23,7 @@ const Notifications: FC = () => {
|
||||
const [showModal, setShowModal] = useState<boolean>(false);
|
||||
const { data, fetchNextPage, hasNextPage, refetch } = useGetNotification(activeTab);
|
||||
const readAll = useReadAll()
|
||||
const { emailWidth } = useSharedStore()
|
||||
const posts = data?.pages.flatMap((page) => page.data?.notifications) || [];
|
||||
|
||||
const handleAllRead = () => {
|
||||
@@ -89,7 +91,14 @@ const Notifications: FC = () => {
|
||||
</div>
|
||||
|
||||
{showModal && (
|
||||
<div id='notificationsContainer' className="xl:h-[calc(100%-110px)] h-[70%] p-6 z-[300] 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
|
||||
id='notificationsContainer'
|
||||
className={clx(
|
||||
"xl:h-[calc(100%-110px)] h-[70%] p-6 z-[300] 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",
|
||||
emailWidth > 0 ? 'xl:left-auto' : 'w-full'
|
||||
)}
|
||||
style={emailWidth > 0 && window.innerWidth > 1280 ? { left: `${emailWidth - 50}px` } : {}}
|
||||
>
|
||||
<div className="flex justify-between items-center">
|
||||
<div>{t('notif.natification')}</div>
|
||||
<div className="size-7 rounded-full bg-white/30 dark:bg-white/10 flex justify-center items-center">
|
||||
|
||||
+30
-14
@@ -31,8 +31,9 @@ const Header: FC = () => {
|
||||
})
|
||||
|
||||
const { t } = useTranslation('global')
|
||||
const { setOpenSidebar, openSidebar, setOpenReportBug } = useSharedStore()
|
||||
|
||||
const { setOpenSidebar, openSidebar, setOpenReportBug, setEmailWidth } = useSharedStore()
|
||||
const [popoverButtonRef, setPopoverButtonRef] = useState<HTMLDivElement | null>(null)
|
||||
const [popoverButtonWidth, setPopoverButtonWidth] = useState<number>(0)
|
||||
const handleSearchChange = (value: string) => {
|
||||
setSearch(value)
|
||||
if (value) {
|
||||
@@ -124,6 +125,19 @@ const Header: FC = () => {
|
||||
setPopoverKey((prevKey) => prevKey + 1)
|
||||
}, [pathname])
|
||||
|
||||
useEffect(() => {
|
||||
if (popoverButtonRef) {
|
||||
const rect = popoverButtonRef.getBoundingClientRect();
|
||||
setPopoverButtonWidth(rect.width);
|
||||
console.log('popoverButtonRef width:', rect.width);
|
||||
console.log('popoverButtonRef height:', rect.height);
|
||||
console.log('popoverButtonRef dimensions:', { width: rect.width, height: rect.height });
|
||||
console.log('Stored width in state:', popoverButtonWidth);
|
||||
setEmailWidth(rect.width);
|
||||
}
|
||||
}, [popoverButtonRef])
|
||||
|
||||
|
||||
return (
|
||||
<div className='fixed z-1 right-4 left-4 xl:right-[285px] top-4 xl:h-16 h-12 flex items-center px-6 bg-surface justify-between rounded-[32px] xl:w-[calc(100%-305px)] border border-surface'>
|
||||
{/* Desktop Search */}
|
||||
@@ -299,19 +313,21 @@ const Header: FC = () => {
|
||||
{
|
||||
data && (
|
||||
<Popover className="relative" key={popoverKey}>
|
||||
<PopoverButton >
|
||||
<div className='flex gap-2 items-center mt-2.5'>
|
||||
<div className='size-6 rounded-full bg-description overflow-hidden'>
|
||||
<img src={data?.data?.user?.profilePic ? data?.data?.user?.profilePic : AvatarImage} className='size-full object-cover' />
|
||||
</div>
|
||||
<div className='xl:flex hidden gap-1 items-center'>
|
||||
<div className='text-xs'>
|
||||
{data?.data?.user?.emailAddress}
|
||||
<div ref={setPopoverButtonRef}>
|
||||
<PopoverButton >
|
||||
<div className='flex gap-2 items-center mt-2.5'>
|
||||
<div className='size-6 rounded-full bg-description overflow-hidden'>
|
||||
<img src={data?.data?.user?.profilePic ? data?.data?.user?.profilePic : AvatarImage} className='size-full object-cover' />
|
||||
</div>
|
||||
<div className='xl:flex hidden gap-1 items-center'>
|
||||
<div className='text-xs'>
|
||||
{data?.data?.user?.emailAddress}
|
||||
</div>
|
||||
<ArrowDown2 size={14} color={getIconColor('muted')} />
|
||||
</div>
|
||||
<ArrowDown2 size={14} color={getIconColor('muted')} />
|
||||
</div>
|
||||
</div>
|
||||
</PopoverButton>
|
||||
</PopoverButton>
|
||||
</div>
|
||||
|
||||
<PopoverPanel style={{ minHeight: window.innerWidth < 1140 ? window.innerHeight : undefined }} anchor="bottom" className="flex xl:ml-6 overflow-auto flex-col gap-3 bg-surface border border-surface boxShadow xl:mt-7 z-30 py-4 text-xs rounded-2.5 xl:w-[300px] -mt-[50px] w-full fixed xl:h-fit h-full shadow-md">
|
||||
<div className='absolute xl:hidden top-6 left-6'>
|
||||
@@ -354,7 +370,7 @@ const Header: FC = () => {
|
||||
<SideBarItem
|
||||
icon={<Logout color={getIconColor('primary')} size={20} />}
|
||||
title={t('sidebar.logout')}
|
||||
isActive={false}
|
||||
isActive
|
||||
link={'#'}
|
||||
isWithoutLine
|
||||
isLogout
|
||||
|
||||
@@ -12,4 +12,6 @@ export const useSharedStore = create<SharedStoreType>((set) => ({
|
||||
setDraftData: (draft) => set({ draftData: draft }),
|
||||
editingDraftId: null,
|
||||
setEditingDraftId: (id) => set({ editingDraftId: id }),
|
||||
emailWidth: 0,
|
||||
setEmailWidth: (width) => set({ emailWidth: width }),
|
||||
}));
|
||||
|
||||
@@ -11,6 +11,8 @@ export type SharedStoreType = {
|
||||
setDraftData: (draft: DraftMessage | null) => void;
|
||||
editingDraftId: number | null;
|
||||
setEditingDraftId: (id: number | null) => void;
|
||||
emailWidth: number;
|
||||
setEmailWidth: (width: number) => void;
|
||||
};
|
||||
|
||||
export type MailboxCount = {
|
||||
|
||||
Reference in New Issue
Block a user