remove browser dialog box to confirm comment deletion and provide use…

…r with server error feedback when comment does not delete

src/App.css

@@ -563,6 +563,14 @@ select {
 }
 
 .removeButton {
+  margin: auto;
+  border-width: 1px;
+  border-radius: 5px;
+  padding: 2px 4px 2px 4px;
+}
+
+.cancelRemoveButton {
+  margin: auto;
   border-width: 1px;
   border-radius: 5px;
   padding: 2px 4px 2px 4px;
@@ -573,6 +581,14 @@ select {
   box-shadow: 0px 0px 3px red;
 }
 
+.commentDeleteFailLabel {
+  font-family: arial;
+  font-weight: bold;
+  text-align: center;
+  line-height: 40px;
+  color: red;
+}
+
 #errorBox {
   display: grid;
   grid-template-columns: auto;
@@ -634,6 +650,23 @@ select {
   max-width: 550px;
 }
 
+.commentCardDelete {
+  display: grid;
+  grid-template-columns: 40px auto 100px 100px;
+  grid-template-rows: 40px auto 25px;
+  grid-template-areas:
+    "commentAvatar commentAuthor commentVoteControls commentVotes"
+    "commentBody commentBody commentBody commentBody"
+    "commentDate commentDate commentDate commentDate";
+  background-color: pink;
+  border: 1px solid #a2baab;
+  border-radius: 10px;
+  margin: 10px auto 10px auto;
+  box-shadow: 0px 0px 3px red;
+  width: calc(100vw - 20px);
+  max-width: 550px;
+}
+
 .commentAvatar {
   grid-area: commentAvatar;
   width: 30px;

src/CommentCard.jsx

@@ -6,7 +6,13 @@ import {
 	deleteCommentWithId,
 } from "./apiFunctions";
 
-const CommentCard = ({ comment, authorAvatars, setComments }) => {
+const CommentCard = ({
+	comment,
+	authorAvatars,
+	setComments,
+	toBeDeleted,
+	setMarkedForDeletion,
+}) => {
 	const { user } = useContext(UserContext);
 	const [likes, setLikes] = useState(comment.votes);
 
@@ -21,36 +27,56 @@ const CommentCard = ({ comment, authorAvatars, setComments }) => {
 		});
 	};
 
-	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;
-				});
+	const confirmRemoval = () => {
+		if (toBeDeleted) {
+			setMarkedForDeletion(null);
+		} else {
+			setMarkedForDeletion(comment.comment_id);
+		}
+	};
+
+	const removeComment = () => {
+		setMarkedForDeletion(null);
+		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;
-				});
+		});
+		deleteCommentWithId(comment.comment_id).catch(() => {
+			setComments((currentComments) => {
+				const newComments = [...currentComments];
+				comment.error = "Message deletion failed";
+				newComments.splice(commentIndex, 0, comment);
+				return newComments;
 			});
-		}
+		});
 	};
 
 	return (
-		<div className="commentCard">
+		<div
+			className={
+				toBeDeleted || comment.error
+					? "commentCardDelete"
+					: "commentCard"
+			}
+		>
 			<img
 				src={authorAvatars[comment.author]}
 				alt={comment.author}
 				className="commentAvatar"
 			/>
-			<p className="commentAuthor">{comment.author}</p>
+			{comment.error ? (
+				<p className="commentDeleteFailLabel">
+					Message failed to delete
+				</p>
+			) : (
+				<p className="commentAuthor">{comment.author}</p>
+			)}
 
 			{showVoteButtons && (
 				<div className="commentVoteControls">
@@ -75,14 +101,25 @@ const CommentCard = ({ comment, authorAvatars, setComments }) => {
 			{showDeleteButton && (
 				<div className="commentVoteControls">
 					<button
-						className="brandedButton removeButton"
-						onClick={removeComment}
+						className={`brandedButton ${
+							toBeDeleted ? "cancelRemoveButton" : "removeButton"
+						}`}
+						onClick={confirmRemoval}
 					>
-						Delete
+						{toBeDeleted ? "Cancel" : "Delete"}
 					</button>
 				</div>
 			)}
-			<p className="commentVotes">{likes} likes</p>
+			{toBeDeleted ? (
+				<button
+					className="brandedButton removeButton"
+					onClick={removeComment}
+				>
+					Delete
+				</button>
+			) : (
+				<p className="commentVotes">{likes} likes</p>
+			)}
 			<p className="commentBody">{comment.body}</p>
 			<p className="commentDate">{formatDate(comment.created_at)}</p>
 		</div>

src/CommentHistory.jsx

@@ -1,11 +1,14 @@
 import CommentCard from "./CommentCard";
+import { useState } from "react";
 
 const CommentHistory = ({
 	comments,
 	authorAvatars,
 	commentCount,
 	setComments,
 }) => {
+	const [markedForDeletion, setMarkedForDeletion] = useState(null);
+
 	return comments.length === 0 ? (
 		<h3 id="commentsTitle">No comments</h3>
 	) : (
@@ -17,6 +20,8 @@ const CommentHistory = ({
 					authorAvatars={authorAvatars}
 					key={comment.created_at}
 					setComments={setComments}
+					toBeDeleted={markedForDeletion === comment.comment_id}
+					setMarkedForDeletion={setMarkedForDeletion}
 				/>
 			))}
 			<div id="bottomSpace"></div>

src/FilterBar.jsx

@@ -135,7 +135,7 @@ const FilterBar = () => {
 						type="text"
 						id="authorSearchField"
 						placeholder="All authors"
-						autocomplete="off"
+						autoComplete="off"
 						value={authorValue}
 						onChange={authorChanged}
 					/>