download email + search
This commit is contained in:
hamid zarghami
+98
-12
@@ -10,6 +10,7 @@ import { Paths } from '@/utils/Paths'
|
||||
import SideBarItem from './SideBarItem'
|
||||
import AvatarImage from '@/assets/images/avatar_image.png'
|
||||
import { useGetProfile } from '@/pages/profile/hooks/useProfileData'
|
||||
import { useGetInbox } from '@/pages/received/hooks/useEmailData'
|
||||
|
||||
const Header: FC = () => {
|
||||
|
||||
@@ -20,6 +21,11 @@ const Header: FC = () => {
|
||||
const [inputFocused, setInputFocused] = useState(false)
|
||||
const [showMobileSearch, setShowMobileSearch] = useState(false)
|
||||
const { pathname } = useLocation()
|
||||
const { data: inboxData } = useGetInbox({
|
||||
limit: 10,
|
||||
search: search,
|
||||
enabled: !!search,
|
||||
})
|
||||
|
||||
const { t } = useTranslation('global')
|
||||
const { setOpenSidebar, openSidebar } = useSharedStore()
|
||||
@@ -33,6 +39,19 @@ const Header: FC = () => {
|
||||
}
|
||||
}
|
||||
|
||||
const clearSearch = () => {
|
||||
setSearch('')
|
||||
setShowSearchResults(false)
|
||||
setInputFocused(false)
|
||||
}
|
||||
|
||||
const clearSearchMobile = () => {
|
||||
setSearch('')
|
||||
setShowSearchResults(false)
|
||||
setInputFocused(false)
|
||||
setShowMobileSearch(false)
|
||||
}
|
||||
|
||||
const handleInputFocus = () => {
|
||||
setInputFocused(true)
|
||||
if (search) {
|
||||
@@ -66,8 +85,7 @@ const Header: FC = () => {
|
||||
}
|
||||
}, 100)
|
||||
} else {
|
||||
setSearch('')
|
||||
setShowSearchResults(false)
|
||||
clearSearch()
|
||||
}
|
||||
}
|
||||
|
||||
@@ -86,10 +104,10 @@ const Header: FC = () => {
|
||||
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)
|
||||
if (searchContainer && searchInput && isClickOutsideDesktopSearch) {
|
||||
clearSearch()
|
||||
} else if (mobileSearchContainer && mobileSearchInput && isClickOutsideMobileSearch) {
|
||||
clearSearchMobile()
|
||||
}
|
||||
}
|
||||
|
||||
@@ -122,9 +140,43 @@ const Header: FC = () => {
|
||||
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>
|
||||
{inboxData?.data?.results && inboxData.data.results.length > 0 ? (
|
||||
<div className='py-2'>
|
||||
{inboxData.data.results.slice(0, 10).map((message) => (
|
||||
<Link
|
||||
key={message.id}
|
||||
to={`/mail/${message.id}/${message.mailbox}`}
|
||||
className='flex items-center gap-3 px-4 py-2 hover:bg-gray-50 cursor-pointer border-b border-gray-100 last:border-b-0'
|
||||
onClick={clearSearch}
|
||||
>
|
||||
<div className='flex-1 min-w-0'>
|
||||
<div className='flex items-center gap-2 mb-1'>
|
||||
{!message.seen && (
|
||||
<div className="w-2 h-2 rounded-full bg-blue-500 flex-shrink-0" />
|
||||
)}
|
||||
<span className='text-sm font-medium text-gray-900 truncate'>
|
||||
{message.from.name || message.from.address}
|
||||
</span>
|
||||
</div>
|
||||
<div className='text-sm text-gray-800 font-medium truncate mb-1'>
|
||||
{message.subject || 'بدون موضوع'}
|
||||
</div>
|
||||
<div className='text-xs text-gray-500 truncate'>
|
||||
{message.intro}
|
||||
</div>
|
||||
</div>
|
||||
<div className='text-xs text-gray-400 flex-shrink-0'>
|
||||
{new Date(message.date).toLocaleDateString('fa-IR')}
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
|
||||
</div>
|
||||
) : (
|
||||
<div className='p-4 text-center text-sm text-description'>
|
||||
نتیجهای یافت نشد
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
@@ -167,9 +219,43 @@ const Header: FC = () => {
|
||||
id="mobile-search-dropdown-container"
|
||||
className='fixed right-4 left-4 top-16 z-1 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>
|
||||
{inboxData?.data?.results && inboxData.data.results.length > 0 ? (
|
||||
<div className='py-2'>
|
||||
{inboxData.data.results.slice(0, 10).map((message) => (
|
||||
<Link
|
||||
key={message.id}
|
||||
to={`/mail/${message.id}/${message.mailbox}`}
|
||||
className='flex items-center gap-3 px-4 py-3 hover:bg-gray-50 cursor-pointer border-b border-gray-100 last:border-b-0'
|
||||
onClick={clearSearchMobile}
|
||||
>
|
||||
<div className='flex-1 min-w-0'>
|
||||
<div className='flex items-center gap-2 mb-1'>
|
||||
{!message.seen && (
|
||||
<div className="w-2 h-2 rounded-full bg-blue-500 flex-shrink-0" />
|
||||
)}
|
||||
<span className='text-sm font-medium text-gray-900 truncate'>
|
||||
{message.from.name || message.from.address}
|
||||
</span>
|
||||
</div>
|
||||
<div className='text-sm text-gray-800 font-medium truncate mb-1'>
|
||||
{message.subject || 'بدون موضوع'}
|
||||
</div>
|
||||
<div className='text-xs text-gray-500 truncate'>
|
||||
{message.intro}
|
||||
</div>
|
||||
</div>
|
||||
<div className='text-xs text-gray-400 flex-shrink-0'>
|
||||
{new Date(message.date).toLocaleDateString('fa-IR')}
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
|
||||
</div>
|
||||
) : (
|
||||
<div className='p-4 text-center text-sm text-description'>
|
||||
نتیجهای یافت نشد
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user