frontend et backend: Supprimer un commentaire

api/controllers/comments.js

@@ -47,4 +47,19 @@ exports.postCommentsByFunctionId = async (req, res, next) => {
         console.log(error);
         return errorHandling(next, serverError);   
     }
+}
+
+exports.deleteCommentById = async (req, res, next) => {
+    const { commentId } = req.query;
+    try {
+        const comment = await Comments.findOne({ where: { userId: req.userId, id: parseInt(commentId) } });
+        if (!comment) {
+            return errorHandling(next, { message: "Le commentaire n'existe pas.", statusCode: 404 });
+        }
+        await comment.destroy();
+        return res.status(200).json({ message: "Le commentaire a bien été supprimé." });
+    } catch (error) {
+        console.log(error);
+        return errorHandling(next, serverError);   
+    }
 }

api/routes/comments.js

@@ -4,6 +4,11 @@ const isAuth             = require('../middlewares/isAuth');
 
 const CommentsRouter = Router();
 
+CommentsRouter.route('/')
+
+    // Supprime un commentaire
+    .delete(isAuth, commentsController.deleteCommentById);
+
 CommentsRouter.route('/:functionId')
 
     // Récupère les commentaires

website/components/CommentCard/CommentCard.js

@@ -1,10 +1,27 @@
 import Link from 'next/link';
-import { forwardRef } from 'react';
-import { API_URL } from '../../utils/config';
+import { forwardRef, useContext, Fragment } from 'react';
 import date from 'date-and-time';
+import { UserContext } from '../../contexts/UserContext';
+import { API_URL } from '../../utils/config';
+import api from '../../utils/api';
 import './CommentCard.css';
 
 const CommentCard = forwardRef((props, ref) => {
+
+    const { isAuth, user } = useContext(UserContext);
+
+    const deleteCommentById = async () => {
+        if (isAuth && user.token != undefined) {
+            try {
+                await api.delete(`/comments?commentId=${props.id}`, { headers: { 'Authorization': user.token } });
+                const newCommentsData = { ...props.manageComment.commentsData };
+                const commentIndex    = newCommentsData.rows.findIndex((value) => value.id === props.id);
+                newCommentsData.rows.splice(commentIndex, 1);
+                props.manageComment.setCommentsData({ hasMore: props.manageComment.commentsData.hasMore, rows: newCommentsData.rows });
+            } catch {}
+        }
+    }
+
     return (
         <div ref={ref} className="CommentCard col-24">
             <div className="CommentCard__container">
@@ -17,6 +34,7 @@ const CommentCard = forwardRef((props, ref) => {
                             <a>{props.user.name}</a>
                         </Link> 
                         &nbsp;- {date.format(new Date(props.createdAt), 'DD/MM/YYYY à HH:mm', true)}
+                        {(isAuth && user.name === props.user.name) && <Fragment>&nbsp;-&nbsp;<a onClick={deleteCommentById} href="#">supprimer</a></Fragment>} 
                     </span>
                 </div>
                 <div className="row">

website/components/FunctionComments/FunctionComments.js

@@ -54,6 +54,7 @@ const FunctionComments = ({ functionId }) => {
     }
 
     const handleSubmit = async (event) => {
+        setLoadingComments(true);
         event.preventDefault();
         const token = user.token;
         if (isAuth && token != undefined && inputState.commentPost != undefined) {
@@ -61,9 +62,10 @@ const FunctionComments = ({ functionId }) => {
                 const response = await api.post(`/comments/${functionId}`, { message: inputState.commentPost }, { headers: { 'Authorization': token } });
                 const comment = { ...response.data, user: { name: user.name, logo: user.logo } };
                 setCommentsData({ hasMore: commentsData.hasMore, rows: [comment, ...commentsData.rows] });
-                setInputState({});
+                setInputState({ commentPost: "" });
             } catch { }
         }
+        setLoadingComments(false);
     }
 
     return (
@@ -100,9 +102,9 @@ const FunctionComments = ({ functionId }) => {
                     {commentsData.rows.map((comment, index) => {
                         // Si c'est le dernier élément
                         if (commentsData.rows.length === index + 1) {
-                            return <CommentCard key={comment.id} ref={lastCommentCardRef} { ...comment } />;
+                            return <CommentCard key={comment.id} ref={lastCommentCardRef} { ...comment } manageComment={{ setCommentsData, commentsData }} />;
                         }
-                        return <CommentCard key={comment.id} { ...comment } />;
+                        return <CommentCard key={comment.id} { ...comment } manageComment={{ setCommentsData, commentsData }} />;
                     })}
                 </div>
             </div>