Merge pull request #9 from Mielie/deleteComments

logged in users can delete their own comments

src/App.css

@@ -562,6 +562,17 @@ select {
   margin: 20px auto 10px auto;
 }
 
+.removeButton {
+  border-width: 1px;
+  border-radius: 5px;
+  padding: 2px 4px 2px 4px;
+}
+
+.removeButton:hover {
+  background-color: pink;
+  box-shadow: 0px 0px 3px red;
+}
+
 #errorBox {
   display: grid;
   grid-template-columns: auto;

src/Comment.jsx

@@ -62,6 +62,7 @@ const Comment = ({
 				comments={comments}
 				commentCount={commentCount}
 				authorAvatars={authorAvatars}
+				setComments={setComments}
 			/>
 		</div>
 	);

src/CommentCard.jsx

@@ -1,20 +1,47 @@
 import { formatDate } from "./utils";
 import { useContext, useState } from "react";
 import { UserContext } from "./contexts/UserContext";
-import { updateVoteForArticleComment } from "./apiFunctions";
+import {
+	updateVoteForArticleComment,
+	deleteCommentWithId,
+} from "./apiFunctions";
 
-const CommentCard = ({ comment, authorAvatars }) => {
+const CommentCard = ({ comment, authorAvatars, setComments }) => {
 	const { user } = useContext(UserContext);
 	const [likes, setLikes] = useState(comment.votes);
 
+	const userIsAuthor = () => user.username === comment.author;
+	const showVoteButtons = user && !userIsAuthor();
+	const showDeleteButton = user && userIsAuthor();
+
 	const adjustVote = (inc) => {
 		setLikes((currentLikes) => currentLikes + inc);
 		updateVoteForArticleComment(comment.comment_id, inc).catch(() => {
 			setLikes((currentLikes) => currentLikes - inc);
 		});
 	};
 
-	const userIsAuthor = () => user.username === comment.author;
+	const removeComment = (event) => {
+		if (window.confirm("Permanently remove comment?")) {
+			let commentIndex = 0;
+			setComments((currentComments) => {
+				return currentComments.filter((item, index) => {
+					if (item.comment_id === comment.comment_id) {
+						commentIndex = index;
+						return false;
+					}
+					return true;
+				});
+			});
+			deleteCommentWithId(comment.comment_id).catch(() => {
+				setComments((currentComments) => {
+					const newComments = [...currentComments];
+					newComments.splice(commentIndex, 0, comment);
+					return newComments;
+				});
+			});
+		}
+	};
 
 	return (
 		<div className="commentCard">
@@ -25,7 +52,7 @@ const CommentCard = ({ comment, authorAvatars }) => {
 			/>
 			<p className="commentAuthor">{comment.author}</p>
 
-			{user && (
+			{showVoteButtons && (
 				<div className="commentVoteControls">
 					<button
 						className="voteButton"
@@ -45,7 +72,16 @@ const CommentCard = ({ comment, authorAvatars }) => {
 					</button>
 				</div>
 			)}
-
+			{showDeleteButton && (
+				<div className="commentVoteControls">
+					<button
+						className="brandedButton removeButton"
+						onClick={removeComment}
+					>
+						Delete
+					</button>
+				</div>
+			)}
 			<p className="commentVotes">{likes} likes</p>
 			<p className="commentBody">{comment.body}</p>
 			<p className="commentDate">{formatDate(comment.created_at)}</p>

src/CommentHistory.jsx

@@ -1,6 +1,11 @@
 import CommentCard from "./CommentCard";
 
-const CommentHistory = ({ comments, authorAvatars, commentCount }) => {
+const CommentHistory = ({
+	comments,
+	authorAvatars,
+	commentCount,
+	setComments,
+}) => {
 	return comments.length === 0 ? (
 		<h3 id="commentsTitle">No comments</h3>
 	) : (
@@ -11,6 +16,7 @@ const CommentHistory = ({ comments, authorAvatars, commentCount }) => {
 					comment={comment}
 					authorAvatars={authorAvatars}
 					key={comment.created_at}
+					setComments={setComments}
 				/>
 			))}
 			<div id="bottomSpace"></div>

src/apiFunctions.js

@@ -74,3 +74,9 @@ export function getTopicList() {
 		.get(`https://news-app-backend.onrender.com/api/topics`)
 		.then(({ data: { topics } }) => topics);
 }
+
+export function deleteCommentWithId(commentid) {
+	return axios.delete(
+		`https://news-app-backend.onrender.com/api/comments/${commentid}`
+	);
+}