header and notification
This commit is contained in:
hamid zarghami
+169
-97
@@ -1,73 +1,184 @@
|
||||
import { FC, useEffect, useState } from 'react'
|
||||
import Input from '../components/Input'
|
||||
import { Element3, HambergerMenu, Wallet } from 'iconsax-react'
|
||||
import { ArrowDown2, CloseCircle, HambergerMenu, Logout, ProfileCircle, SearchNormal, Setting2 } from 'iconsax-react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { Link, useLocation, useNavigate } from 'react-router-dom'
|
||||
import { Paths } from '@/utils/Paths'
|
||||
import { EmailNotifications } from '@/components/EmailNotifications'
|
||||
import Notifications from '../pages/notification/Notification'
|
||||
import { useSharedStore } from './store/sharedStore'
|
||||
// import { useGetProfile } from '../pages/profile/hooks/useProfileData'
|
||||
// import { Popover, PopoverButton, PopoverPanel } from '@headlessui/react'
|
||||
// import { useGetWalletBalance } from '../pages/wallet/hooks/useWalletData'
|
||||
// import { NumberFormat } from '../config/func'
|
||||
import { useGetProfile } from '../pages/profile/hooks/useProfileData'
|
||||
import { Popover, PopoverButton, PopoverPanel } from '@headlessui/react'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { Paths } from '@/utils/Paths'
|
||||
import SideBarItem from './SideBarItem'
|
||||
import AvatarImage from '../assets/images/avatar_image.png'
|
||||
|
||||
const Header: FC = () => {
|
||||
|
||||
const location = useLocation();
|
||||
const navigate = useNavigate();
|
||||
const [popoverKey, setPopoverKey] = useState(0);
|
||||
const { data } = useGetProfile()
|
||||
const [search, setSearch] = useState<string>('')
|
||||
const [showSearchResults, setShowSearchResults] = useState(false)
|
||||
const [inputFocused, setInputFocused] = useState(false)
|
||||
const [showMobileSearch, setShowMobileSearch] = useState(false)
|
||||
|
||||
const { t } = useTranslation('global')
|
||||
const { setOpenSidebar, openSidebar } = useSharedStore()
|
||||
// const { data } = useGetProfile()
|
||||
// const getWalletBalance = useGetWalletBalance()
|
||||
|
||||
// فرض میکنیم که token از localStorage گرفته میشود
|
||||
const userToken = localStorage.getItem('jwt-token') || '';
|
||||
const handleSearchChange = (value: string) => {
|
||||
setSearch(value)
|
||||
if (value) {
|
||||
setShowSearchResults(true)
|
||||
} else {
|
||||
setShowSearchResults(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleInputFocus = () => {
|
||||
setInputFocused(true)
|
||||
if (search) {
|
||||
setShowSearchResults(true)
|
||||
}
|
||||
}
|
||||
|
||||
const handleInputBlur = (e: React.FocusEvent) => {
|
||||
const searchContainer = document.getElementById('search-dropdown-container')
|
||||
const mobileSearchContainer = document.getElementById('mobile-search-dropdown-container')
|
||||
|
||||
if ((searchContainer && searchContainer.contains(e.relatedTarget as Node)) ||
|
||||
(mobileSearchContainer && mobileSearchContainer.contains(e.relatedTarget as Node))) {
|
||||
return
|
||||
}
|
||||
|
||||
setInputFocused(false)
|
||||
setTimeout(() => {
|
||||
setShowSearchResults(false)
|
||||
}, 200)
|
||||
}
|
||||
|
||||
const toggleMobileSearch = () => {
|
||||
setShowMobileSearch(prev => !prev)
|
||||
if (!showMobileSearch) {
|
||||
setTimeout(() => {
|
||||
const mobileSearchInput = document.getElementById('mobile-search-input')
|
||||
if (mobileSearchInput) {
|
||||
(mobileSearchInput as HTMLInputElement).focus()
|
||||
setInputFocused(true)
|
||||
}
|
||||
}, 100)
|
||||
} else {
|
||||
setSearch('')
|
||||
setShowSearchResults(false)
|
||||
}
|
||||
}
|
||||
|
||||
console.log(popoverKey);
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (e: MouseEvent) => {
|
||||
const searchContainer = document.getElementById('search-dropdown-container')
|
||||
const mobileSearchContainer = document.getElementById('mobile-search-dropdown-container')
|
||||
const searchInput = document.getElementById('search-input-container')
|
||||
const mobileSearchInput = document.getElementById('mobile-search-input-container')
|
||||
|
||||
setPopoverKey((prevKey) => prevKey + 1);
|
||||
}, [location.pathname]);
|
||||
const isClickOutsideDesktopSearch =
|
||||
searchContainer && !searchContainer.contains(e.target as Node) &&
|
||||
searchInput && !searchInput.contains(e.target as Node);
|
||||
|
||||
const isClickOutsideMobileSearch =
|
||||
mobileSearchContainer && !mobileSearchContainer.contains(e.target as Node) &&
|
||||
mobileSearchInput && !mobileSearchInput.contains(e.target as Node);
|
||||
|
||||
if ((searchContainer && searchInput && isClickOutsideDesktopSearch) ||
|
||||
(mobileSearchContainer && mobileSearchInput && isClickOutsideMobileSearch)) {
|
||||
setShowSearchResults(false)
|
||||
setInputFocused(false)
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('mousedown', handleClickOutside)
|
||||
return () => {
|
||||
document.removeEventListener('mousedown', handleClickOutside)
|
||||
}
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div className='fixed z-10 right-2 left-2 md:right-4 md:left-4 xl:right-[285px] top-2 md:top-4 xl:h-16 h-12 flex items-center px-3 md:px-6 bg-white justify-between rounded-[20px] md:rounded-[32px] xl:w-[calc(100%-305px)]'>
|
||||
<div className='fixed z-10 right-4 left-4 xl:right-[285px] top-4 xl:h-16 h-12 flex items-center px-6 bg-white justify-between rounded-[32px] xl:w-[calc(100%-305px)]'>
|
||||
{/* Desktop Search */}
|
||||
<div className='min-w-[270px] hidden xl:block relative'>
|
||||
<div id="search-input-container">
|
||||
<Input
|
||||
variant='search'
|
||||
placeholder={t('header.search')}
|
||||
onChangeSearchFinal={handleSearchChange}
|
||||
onFocus={handleInputFocus}
|
||||
onBlur={handleInputBlur}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='min-w-[200px] md:min-w-[270px] hidden xl:block'>
|
||||
<Input
|
||||
variant='search'
|
||||
placeholder={t('header.search')}
|
||||
className='bg-secondary border-none'
|
||||
/>
|
||||
</div>
|
||||
<div onClick={() => setOpenSidebar(!openSidebar)} className='xl:hidden block'>
|
||||
<HambergerMenu size={24} color='black' />
|
||||
</div>
|
||||
{/* <img src={LogoImage} className='h-6 xl:hidden block absolute right-0 left-0 mx-auto' /> */}
|
||||
<div className='flex xl:gap-6 gap-3 md:gap-4 items-center'>
|
||||
<Link to={Paths.home}>
|
||||
<Element3 color='black' className='size-4 md:size-[17px] xl:size-[18px]' />
|
||||
</Link>
|
||||
<Link className='xl:hidden' to={Paths.home}>
|
||||
<Wallet className='size-4 md:size-[17px] xl:size-[18px]' color='black' />
|
||||
</Link>
|
||||
<Link className='hidden xl:block' to={Paths.home}>
|
||||
<div className='flex items-center h-8 pl-2 rounded-full bg-[#EEF0F7]'>
|
||||
<div className='px-3 text-xs'>
|
||||
{/* {NumberFormat(getWalletBalance.data?.data?.balance) + ' ' + t('toman')} */}
|
||||
</div>
|
||||
<div className='size-[26px] flex justify-center items-center bg-white rounded-xl'>
|
||||
<Wallet className='xl:size-[18px] size-[17px]' color='black' />
|
||||
{showSearchResults && search && inputFocused && (
|
||||
<div
|
||||
id="search-dropdown-container"
|
||||
className='absolute z-20 mt-1 w-full bg-white rounded-xl shadow-lg max-h-80 overflow-y-auto'
|
||||
>
|
||||
<div className='p-4 text-center text-sm text-description'>
|
||||
نتیجهای یافت نشد
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
{userToken && (
|
||||
<EmailNotifications
|
||||
userToken={userToken}
|
||||
onEmailClick={(email) => navigate(`/mail/${email.messageId}`)}
|
||||
/>
|
||||
)}
|
||||
{/* {
|
||||
</div>
|
||||
|
||||
{/* Mobile Layout */}
|
||||
<div className={`${showMobileSearch ? 'w-full' : ''} items-center`}>
|
||||
{!showMobileSearch && (
|
||||
<div onClick={() => setOpenSidebar(!openSidebar)} className='xl:hidden block'>
|
||||
<HambergerMenu size={24} color='black' />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Full width mobile search when active */}
|
||||
{showMobileSearch && (
|
||||
<div className='flex w-full items-center gap-2'>
|
||||
<div className='flex-1' id="mobile-search-input-container">
|
||||
<Input
|
||||
id="mobile-search-input"
|
||||
variant='search'
|
||||
placeholder={t('header.search')}
|
||||
onChangeSearchFinal={handleSearchChange}
|
||||
onFocus={handleInputFocus}
|
||||
onBlur={handleInputBlur}
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
onClick={toggleMobileSearch}
|
||||
className='p-2 flex-shrink-0 flex items-center justify-center'
|
||||
>
|
||||
<CloseCircle size={20} color='#8C90A3' />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Mobile Search Results */}
|
||||
{showMobileSearch && showSearchResults && search && (
|
||||
<div
|
||||
id="mobile-search-dropdown-container"
|
||||
className='fixed right-4 left-4 top-16 z-50 bg-white rounded-xl shadow-lg max-h-[calc(100vh-80px)] overflow-y-auto'
|
||||
>
|
||||
<div className='p-4 text-center text-sm text-description'>
|
||||
نتیجهای یافت نشد
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className={`flex xl:gap-6 gap-4 items-center ${showMobileSearch ? 'hidden xl:flex' : ''}`}>
|
||||
{/* Mobile search icon */}
|
||||
{!showMobileSearch && (
|
||||
<div onClick={toggleMobileSearch} className='xl:hidden block'>
|
||||
<SearchNormal size={20} color='black' />
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Notifications />
|
||||
|
||||
{
|
||||
data && (
|
||||
<Popover className="relative" key={popoverKey}>
|
||||
<PopoverButton >
|
||||
@@ -77,7 +188,7 @@ const Header: FC = () => {
|
||||
</div>
|
||||
<div className='xl:flex hidden gap-1 items-center'>
|
||||
<div className='text-xs'>
|
||||
{data?.data?.user?.firstName + ' ' + data?.data?.user?.lastName}
|
||||
{data?.data?.user?.emailAddress}
|
||||
</div>
|
||||
<ArrowDown2 size={14} color='#8C90A3' />
|
||||
</div>
|
||||
@@ -88,13 +199,13 @@ const Header: FC = () => {
|
||||
<div className='absolute xl:hidden top-6 left-6'>
|
||||
<CloseCircle onClick={() => setPopoverKey((prevKey) => prevKey + 1)} size={20} color='black' />
|
||||
</div>
|
||||
<Link to={Pages.profile} className='flex flex-col gap-2 items-center justify-center border-b border-[#EAEDF5] pb-4'>
|
||||
<Link to={Paths.profile} className='flex flex-col gap-2 items-center justify-center border-b border-[#EAEDF5] pb-4'>
|
||||
<div className='size-14 rounded-full overflow-hidden'>
|
||||
<img src={data?.data?.user?.profilePic ? data?.data?.user?.profilePic : AvatarImage} className='size-full object-cover' />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
{data?.data?.user?.firstName + ' ' + data?.data?.user?.lastName}
|
||||
{data?.data?.user?.emailAddress}
|
||||
</div>
|
||||
|
||||
<div className='text-description'>
|
||||
@@ -103,51 +214,12 @@ const Header: FC = () => {
|
||||
</Link>
|
||||
|
||||
<div className='pb-6 px-6 border-b border-[#EAEDF5]'>
|
||||
<div className='flex justify-between items-center'>
|
||||
<SideBarItem
|
||||
icon={<Wallet size={20} color='black' />}
|
||||
title={t('header.wallet')}
|
||||
link={Pages.wallet}
|
||||
isActive
|
||||
isWithoutLine
|
||||
/>
|
||||
<div className='flex xl:hidden items-center mt-4 h-8 pl-2 rounded-full bg-[#EEF0F7]'>
|
||||
<div className='ps-3'>{t('home.balance')}</div>
|
||||
<div className='px-3 text-xs'>
|
||||
{NumberFormat(getWalletBalance.data?.data?.balance) + ' ' + t('toman')}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<SideBarItem
|
||||
icon={<Card color={'black'} size={20} />}
|
||||
title={t('sidebar.transactions')}
|
||||
isActive
|
||||
link={Pages.transactions}
|
||||
isWithoutLine
|
||||
/>
|
||||
|
||||
<SideBarItem
|
||||
icon={<TicketDiscount color={'black'} size={20} />}
|
||||
title={t('header.discounts')}
|
||||
isActive
|
||||
link={Pages.discounts}
|
||||
isWithoutLine
|
||||
/>
|
||||
|
||||
<SideBarItem
|
||||
icon={<Receipt1 color={'black'} size={20} />}
|
||||
title={t('header.financial_info')}
|
||||
isActive
|
||||
link={Pages.financial}
|
||||
isWithoutLine
|
||||
/>
|
||||
|
||||
<SideBarItem
|
||||
icon={<ProfileCircle color={'black'} size={20} />}
|
||||
title={t('header.profile')}
|
||||
isActive
|
||||
link={Pages.profile}
|
||||
link={Paths.profile}
|
||||
isWithoutLine
|
||||
/>
|
||||
|
||||
@@ -155,7 +227,7 @@ const Header: FC = () => {
|
||||
icon={<Setting2 color={'black'} size={20} />}
|
||||
title={t('header.setting')}
|
||||
isActive
|
||||
link={Pages.setting}
|
||||
link={Paths.setting}
|
||||
isWithoutLine
|
||||
/>
|
||||
</div>
|
||||
@@ -164,8 +236,8 @@ const Header: FC = () => {
|
||||
<SideBarItem
|
||||
icon={<Logout color={'black'} size={20} />}
|
||||
title={t('sidebar.logout')}
|
||||
isActive
|
||||
link={Pages.setting}
|
||||
isActive={false}
|
||||
link={'#'}
|
||||
isWithoutLine
|
||||
isLogout
|
||||
/>
|
||||
@@ -174,7 +246,7 @@ const Header: FC = () => {
|
||||
</PopoverPanel>
|
||||
</Popover>
|
||||
)
|
||||
} */}
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user