Skip to content
This repository has been archived by the owner on Nov 18, 2024. It is now read-only.

Commit

Permalink
delete comment
Browse files Browse the repository at this point in the history
  • Loading branch information
@khylpe
khylpe committed May 6, 2024
1 parent 0f6ba76 commit 625bece
Showing 1 changed file with 63 additions and 8 deletions.
71 changes: 63 additions & 8 deletions frontend/src/components/front-office/ressource-management/comments.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
import React, { useEffect, useState } from 'react';
import { Empty, Input, Button, List, message, Card, Badge, Avatar } from 'antd';
import { Empty, Input, Button, List, message, Card, Badge, Avatar, Popconfirm, Tooltip } from 'antd';
import { Comment as CommentType } from "@/types/comment";
import axios, { AxiosError, AxiosResponse } from 'axios';
import { Space, Typography } from 'antd';
import { useCommentContext } from '@/contexts/CommentContext';
import { UserOutlined } from '@ant-design/icons';
import { UserOutlined, DeleteOutlined } from '@ant-design/icons';
import dayjs from 'dayjs';
import 'dayjs/locale/fr';
import { useUser } from '@/providers/userProvider';
dayjs.locale('fr');
import relativeTime from 'dayjs/plugin/relativeTime';
dayjs.extend(relativeTime)
Expand All @@ -21,13 +22,15 @@ export default function Comments({ comments, idRessource, isFirstComponent = tru
const [newComment, setNewComment] = useState('');
const [visibleComments, setVisibleComments] = useState(5); // Initial number of comments to display
const { idParent, replyingTo, handleSetReply, resetReply } = useCommentContext(); // Use context
const { user } = useUser()
useEffect(() => {
console.log(isFirstComponent)
console.log('idParent changed:', idParent); // Debugging state changes
}, [idParent]);

const handleAddComment = async () => {
if (newComment.trim()) {
console.log(newComment, idParent, idRessource)
// onAddComment(newComment);
try {
// setIsLoading(true);
Expand All @@ -38,7 +41,7 @@ export default function Comments({ comments, idRessource, isFirstComponent = tru
data: {
comment: newComment,
idParent: idParent,
idRessource: idRessource, // TODO: Get the ressource ID from the URL
idRessource: idRessource,
},
responseType: 'json',
timeout: 10000,
Expand Down Expand Up @@ -78,6 +81,43 @@ export default function Comments({ comments, idRessource, isFirstComponent = tru
setVisibleComments(prev => prev + 5); // Load 5 more comments on each trigger
};

const handleDeleteComment = async (id: number) => {
try {
// setIsLoading(true);
const response: AxiosResponse = await axios({
method: 'delete',
baseURL: process.env.NEXT_PUBLIC_BACKEND_API_URL,
url: `/comment/delete/${id}`,
responseType: 'json',
timeout: 10000,
withCredentials: true,
});
if (response.status === 200) {
message.success("Commentaire supprimé");
}
} catch (error) {
console.error(error);
const axiosError = error as AxiosError

if (axiosError.response) {
switch (axiosError.response.status) {
case 403 | 401:
message.error("Vous n'êtes pas autorisé à supprimer ce commentaire.")
break;
case 422:
message.error("Erreur de validation des données")
break;
default:
message.error("Erreur lors de la suppression du commentaire")
}
} else {
message.error("Erreur lors de la suppression du commentaire")
}
} finally {
// setIsLoading(false);
}
}

return (
<div>
{(comments.length) > 0 ? (
Expand All @@ -88,9 +128,24 @@ export default function Comments({ comments, idRessource, isFirstComponent = tru
<Card
bordered={false}
title={<div className='space-x-3'><Avatar src={comment.user.imgURL} style={{ height: 35, width: 35 }} icon={<UserOutlined />} /><Text>{comment.user.firstName}</Text><Text type='secondary'>{dayjs().to(dayjs(comment.createAt, "YYYY-MM-DD hh:mm:ss"))}</Text></div>}
extra={<Link onClick={() => { handleSetReply(comment.id, comment.user.firstName || "un monsieur") }} >
Répondre
</Link>}
extra={<div className="flex flex-row items-center gap-3">
<Link onClick={() => { handleSetReply(comment.id, comment.user.firstName || "un monsieur") }} >
Répondre
</Link>
{comment.user.id == user?.id && (
<Popconfirm
title="Êtes-vous sûr de vouloir supprimer ce commentaire ?"
onConfirm={() => { handleDeleteComment(comment.id) }}
okText="Oui"
cancelText="Non"
>
<Tooltip title="Supprimer">
<Button icon={<DeleteOutlined />} type="primary" danger></Button>
</Tooltip>
</Popconfirm>
)}

</div>}
style={{ width: '100%' }}
>
<pre>{comment.comment}</pre>
Expand All @@ -116,8 +171,8 @@ export default function Comments({ comments, idRessource, isFirstComponent = tru
<Input.TextArea
rows={4}
size='large'
autoSize={{ minRows: 4, maxRows: 10 }}
autoSize={{ minRows: 4, maxRows: 10 }}

value={newComment}
onChange={e => setNewComment(e.target.value)}
placeholder="Rédigez un commentaire..."
Expand Down

0 comments on commit 625bece

Please sign in to comment.