comment blog

2025-04-22 16:43:51 +03:30
parent 7e0ad19c91
commit b891a2dde6
8 changed files with 127 additions and 1 deletions
@@ -0,0 +1,70 @@
+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 'react-toastify'
+const Comments: FC = () => {
+    const { t } = useTranslation('global')
+    const getBlogComments = useGetBlogComments()
+    const changeStatusComment = useChangeStatusComment()
+    const handleChangeStatus = (id: string, status: string) => {
+        changeStatusComment.mutate({ id, status }, {
+            onSuccess: () => {
+                getBlogComments.refetch()
+            },
+            onError: (error: ErrorType) => {
+                toast.error(error.response?.data?.error.message[0])
+            }
+        })
+    }
+    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' &&
+                                        <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