hamid zarghami
146 lines
6.9 KiB
TypeScript
146 lines
6.9 KiB
TypeScript
import { FC, Fragment, useState } from 'react'
|
||
import { useTranslation } from 'react-i18next'
|
||
import Input from '../../components/Input'
|
||
import StatusWithText from '../../components/StatusWithText'
|
||
import { clx, buildPath } from '../../helpers/utils'
|
||
import { useNavigate, useParams } from 'react-router-dom'
|
||
import { Pages } from '../../config/Pages'
|
||
import { useGetAnnoncement } from './hooks/useAnnoncementData'
|
||
import { AnnoncementItemType } from './types/AnnoncementTypes'
|
||
import moment from 'moment-jalaali'
|
||
import AnouncementSkeleton from './components/AnouncementSkeleton'
|
||
|
||
const AnnouncementtList: FC = () => {
|
||
|
||
const { slug } = useParams()
|
||
const navigate = useNavigate()
|
||
const { t } = useTranslation('global')
|
||
const [search, setSearch] = useState<string>('')
|
||
const [itemSelected, setItemSelected] = useState<AnnoncementItemType>()
|
||
const getAnnoncements = useGetAnnoncement(search)
|
||
|
||
const handleChange = (item: AnnoncementItemType) => {
|
||
if (window.innerWidth < 1280) {
|
||
navigate(buildPath(Pages.announcement.detail + item.announcement.id, slug))
|
||
} else {
|
||
setItemSelected(item)
|
||
}
|
||
}
|
||
|
||
return (
|
||
<div className='mt-4 text-sm'>
|
||
<div className='text-base'>
|
||
{t('announcement.announcements')}
|
||
</div>
|
||
|
||
<div className='mt-10 flex gap-8'>
|
||
<div className='bg-white xl:w-[400px] w-full rounded-2xl p-6'>
|
||
<div className='flex gap-3 items-center'>
|
||
<div className='flex-1'>
|
||
<Input
|
||
variant='search'
|
||
placeholder={t('announcement.search')}
|
||
className='-mt-1'
|
||
onChangeSearchFinal={(value) => setSearch(value)}
|
||
/>
|
||
</div>
|
||
|
||
{/* <div>
|
||
<Select
|
||
items={[
|
||
{ value: '1', label: 'همه' },
|
||
{ value: '2', label: 'فعال' },
|
||
{ value: '3', label: 'غیر فعال' },
|
||
]}
|
||
className='bg-[#EEF0F7] w-[68px]'
|
||
/>
|
||
</div> */}
|
||
</div>
|
||
|
||
<Fragment>
|
||
<div className='mt-8'>
|
||
{
|
||
getAnnoncements.isPending ?
|
||
<Fragment>
|
||
<AnouncementSkeleton />
|
||
<AnouncementSkeleton />
|
||
<AnouncementSkeleton />
|
||
</Fragment>
|
||
:
|
||
getAnnoncements.data?.data?.announcements?.map((item: AnnoncementItemType) => {
|
||
return (
|
||
<div onClick={() => handleChange(item)} className={clx(
|
||
'p-4 border-b cursor-pointer',
|
||
item.id === itemSelected?.id && 'bg-[#F8F9FB]'
|
||
)}>
|
||
<div className='flex justify-between'>
|
||
<div className='leading-6 text-xs xl:text-[12.5px] max-w-[70%]'>
|
||
{item.announcement.title}
|
||
</div>
|
||
|
||
<div className='flex gap-1'>
|
||
{
|
||
item.announcement.isImportant &&
|
||
<StatusWithText
|
||
variant='error'
|
||
text={t('announcement.important')}
|
||
/>
|
||
}
|
||
{
|
||
!item.isRead &&
|
||
<StatusWithText
|
||
variant='success'
|
||
text={t('announcement.new')}
|
||
/>
|
||
}
|
||
</div>
|
||
</div>
|
||
|
||
<div className='m-2 flex justify-between items-center text-[11px]'>
|
||
<div dangerouslySetInnerHTML={{ __html: item.announcement.content }} className='max-w-[70%] truncate text-description'>
|
||
</div>
|
||
<div className='text-description'>
|
||
{moment(item.announcement.publishAt).format('jYYYY/jMM/jDD')}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
})
|
||
}
|
||
|
||
</div>
|
||
</Fragment>
|
||
</div>
|
||
|
||
{
|
||
itemSelected &&
|
||
<div className='flex-1 hidden xl:block bg-white py-7 px-5 rounded-2xl'>
|
||
<div className='flex justify-between items-center'>
|
||
<div className='text-lg'>
|
||
متن اطلاعیه
|
||
</div>
|
||
{
|
||
itemSelected.announcement.isImportant &&
|
||
<StatusWithText
|
||
variant='error'
|
||
text={t('announcement.important')}
|
||
/>
|
||
}
|
||
</div>
|
||
|
||
<div className='mt-8'>
|
||
{itemSelected.announcement.title}
|
||
</div>
|
||
|
||
<div dangerouslySetInnerHTML={{ __html: itemSelected.announcement.content }} className='mt-5 leading-7 text-xs font-light'>
|
||
|
||
</div>
|
||
</div>
|
||
}
|
||
</div>
|
||
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default AnnouncementtList |