comment blog

src/config/Pages.ts

@@ -87,6 +87,7 @@ export const Pages = {
     create: "/blog/create",
     category: "/blog/category",
     detail: "/blog/detail/",
+    comments: "/blog/comments",
   },
   messages: {
     list: "/messages/list",

src/langs/fa.json

@@ -402,7 +402,10 @@
     "meta_title": "عنوان متا",
     "enter_your_meta_title": "عنوان متا بلاگ را وارد کنید",
     "meta_description": "توضیحات متا",
-    "enter_your_meta_description": "توضیحات متا بلاگ را وارد کنید"
+    "enter_your_meta_description": "توضیحات متا بلاگ را وارد کنید",
+    "comments": "نظرات",
+    "user": "کاربر",
+    "comment": "نظر"
   },
   "receip": {
     "receips": "صورتحساب ها",

src/pages/blog/Comments.tsx

@@ -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

src/pages/blog/hooks/useBlogData.ts

@@ -71,3 +71,17 @@ export const useDeleteBlog = () => {
     mutationFn: api.deleteBlog,
   });
 };
+
+export const useGetBlogComments = () => {
+  return useQuery({
+    queryKey: ["blog-comments"],
+    queryFn: api.getBlogComments,
+  });
+};
+
+export const useChangeStatusComment = () => {
+  return useMutation({
+    mutationFn: (data: { id: string; status: string }) =>
+      api.changeStatusComment(data.id, data.status),
+  });
+};

src/pages/blog/service/BlogService.ts

@@ -53,3 +53,15 @@ export const deleteBlog = async (id: string) => {
   const { data } = await axios.delete(`/blogs/${id}`);
   return data;
 };
+
+export const getBlogComments = async () => {
+  const { data } = await axios.get("/blogs/comments");
+  return data;
+};
+
+export const changeStatusComment = async (id: string, status: string) => {
+  const { data } = await axios.patch(`/blogs/comments/${id}/status`, {
+    status,
+  });
+  return data;
+};

src/pages/blog/types/BlogTypes.ts

@@ -49,3 +49,22 @@ export type CreateBlogCategoryType = {
   iconUrl: string;
   isActive: boolean;
 };
+
+export type BlogCommentType = {
+  content: string;
+  createdAt: string;
+  id: string;
+  status: string;
+  title: string;
+  updatedAt: string;
+  user: {
+    firstName: string;
+    id: string;
+    lastName: string;
+    profilePic: string;
+  };
+  blog: {
+    id: string;
+    title: string;
+  };
+};

src/router/Main.tsx

@@ -64,6 +64,7 @@ import UpdateUser from '../pages/users/Update'
 import CreateSlider from '../pages/slider/Create'
 import SliderList from '../pages/slider/List'
 import UpdateSlider from '../pages/slider/Update'
+import Comments from '../pages/blog/Comments'
 const MainRouter: FC = () => {
 
     const { hasSubMenu } = useSharedStore()
@@ -139,6 +140,7 @@ const MainRouter: FC = () => {
                             <Route path={Pages.sliders.create} element={<CreateSlider />} />
                             <Route path={Pages.sliders.list} element={<SliderList />} />
                             <Route path={Pages.sliders.detail + ':id'} element={<UpdateSlider />} />
+                            <Route path={Pages.blog.comments} element={<Comments />} />
                         </Routes>
                     </div>
                 </div>

src/shared/components/BlogSubMenu.tsx

@@ -36,6 +36,11 @@ const BlogSubMenu: FC = () => {
                     isActive={isActive('create')}
                     link={Pages.blog.category}
                 />
+                <SubMenuItem
+                    title={'نظرات'}
+                    isActive={isActive('comments')}
+                    link={Pages.blog.comments}
+                />
             </div>
 
         </div>