safe delete

packages/fakeyou.com/src/v2/view/_common/comments/CommentList.tsx

@@ -1,15 +1,10 @@
 import React from "react";
 import { formatDistance } from "date-fns";
-import {
-  DeleteComment,
-  DeleteCommentIsOk,
-} from "@storyteller/components/src/api/comments/DeleteComment";
 import {
   Comment,
 } from "@storyteller/components/src/api/comments/ListComments";
 import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faTrash } from "@fortawesome/pro-light-svg-icons";
+import { SafeDeleteCommentButton } from "./SafeDeleteCommentButton";
 
 const Fade = require("react-reveal/Fade");
 
@@ -29,13 +24,6 @@ interface Props {
  */
 function CommentList(props: Props) {
 
-  const handleDeleteComment = async (commentToken: string) => {
-    let response = await DeleteComment(commentToken);
-    if (DeleteCommentIsOk(response)) {
-      props.loadComments(); // Refresh comments
-    }
-  };
-
   // NB: It's more convenient to show recent data first {.reverse()}
   var reversedComments = props.comments.slice();
 
@@ -61,11 +49,10 @@ function CommentList(props: Props) {
     if (canDelete) {
       maybeDeleteButton = (
         <>
-          <button onClick={async () => await handleDeleteComment(comment.token)}>
-            <FontAwesomeIcon icon={faTrash} />
-            {" "}
-            Delete Comment
-          </button>
+          <SafeDeleteCommentButton
+            commentToken={comment.token}
+            loadComments={props.loadComments}
+          />
         </>
       )
     }

packages/fakeyou.com/src/v2/view/_common/comments/SafeDeleteCommentButton.tsx

@@ -0,0 +1,67 @@
+import React, { useState } from "react";
+import { DeleteComment, DeleteCommentIsOk } from "@storyteller/components/src/api/comments/DeleteComment";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faTrash, faTrashRestore } from "@fortawesome/free-solid-svg-icons";
+import { faTrashCheck } from "@fortawesome/pro-solid-svg-icons";
+
+interface Props {
+  commentToken: string;
+  loadComments: () => void;
+}
+
+/**
+ * This is part of a reusable component for putting comments on several 
+ * different page types.
+ *
+ * See the documentation on the parent <CommentComponent />
+ */
+function SafeDeleteCommentButton(props: Props) {
+  const [readyToDelete, setReadyToDelete] = useState<boolean>(false);
+
+  const handleDeleteComment = async (commentToken: string) => {
+    let response = await DeleteComment(commentToken);
+    if (DeleteCommentIsOk(response)) {
+      props.loadComments(); // Refresh comments
+    }
+  };
+
+  let deleteButton = <></>;
+
+  // We ask the user to confirm the deletion. 
+  // This makes it slightly safer and prevents accidental mis-clicks.
+  if (!readyToDelete) {
+    deleteButton = (
+      <>
+        <button onClick={() => setReadyToDelete(true)}>
+          <FontAwesomeIcon icon={faTrash} />
+          {" "}
+          Delete Comment
+        </button>
+      </>
+    )
+  } else {
+    deleteButton = (
+      <>
+        <button onClick={() => setReadyToDelete(false)}>
+          <FontAwesomeIcon icon={faTrashRestore} />
+          {" "}
+          Cancel
+        </button>
+
+        <button onClick={async () => await handleDeleteComment(props.commentToken)}>
+          <FontAwesomeIcon icon={faTrashCheck} />
+          {" "}
+          Confirm Comment
+        </button>
+      </>
+    )
+  }
+
+  return (
+    <>
+      {deleteButton}
+    </>
+  )
+}
+
+export { SafeDeleteCommentButton };