hamid zarghami
72 lines
3.1 KiB
TypeScript
72 lines
3.1 KiB
TypeScript
import { FC } from 'react'
|
|
import { useTranslation } from 'react-i18next'
|
|
import Td from '../../components/Td'
|
|
import { useChangeStatusComment, useGetBlogComments } from './hooks/useBlogData'
|
|
import { BlogCommentType } from './types/BlogTypes'
|
|
import moment from 'moment-jalaali'
|
|
import { CloseCircle, TickCircle } from 'iconsax-react'
|
|
import { ErrorType } from '../../helpers/types'
|
|
import { toast } from '../../components/Toast';
|
|
import { usePermissions } from '../../hooks/usePermissions'
|
|
const Comments: FC = () => {
|
|
const { t } = useTranslation('global')
|
|
const { canUpdate } = usePermissions()
|
|
const getBlogComments = useGetBlogComments()
|
|
const changeStatusComment = useChangeStatusComment()
|
|
const handleChangeStatus = (id: string, status: string) => {
|
|
changeStatusComment.mutate({ id, status }, {
|
|
onSuccess: () => {
|
|
getBlogComments.refetch()
|
|
},
|
|
onError: (error: ErrorType) => {
|
|
toast(error.response?.data?.error.message[0], 'error')
|
|
}
|
|
})
|
|
}
|
|
return (
|
|
<div className='mt-4 min-h-[500px]'>
|
|
<div className='flex justify-between items-center'>
|
|
<div>
|
|
{t('blog.comments')}
|
|
</div>
|
|
</div>
|
|
|
|
<div className='relative overflow-x-auto rounded-3xl mt-9 w-full'>
|
|
<table className='w-full text-sm '>
|
|
<thead className='thead'>
|
|
<tr>
|
|
<Td text={t('blog.user')} />
|
|
<Td text={t('blog.comment')} />
|
|
<Td text={t('blog.blog_title')} />
|
|
<Td text={t('blog.shareDate')} />
|
|
<Td text={''} />
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{getBlogComments.data?.data?.comments?.map((item: BlogCommentType) => (
|
|
<tr className='tr' key={item.id}>
|
|
<Td text={`${item.user?.firstName} ${item.user?.lastName}`} />
|
|
<Td text={item.content} />
|
|
<Td text={item.blog?.title} />
|
|
<Td text={moment(item.createdAt).format('jYYYY/jMM/jDD')} />
|
|
<Td text=''>
|
|
{
|
|
item.status === 'PENDING' && canUpdate('blog_comments') &&
|
|
<div className='flex items-center gap-2'>
|
|
<TickCircle onClick={() => handleChangeStatus(item.id, 'APPROVED')} color='green' size={20} />
|
|
<CloseCircle onClick={() => handleChangeStatus(item.id, 'REJECTED')} color='red' size={20} />
|
|
</div>
|
|
}
|
|
|
|
</Td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Comments |