From 6016af54e55755d72dc8975fcaa8c3527dd150c0 Mon Sep 17 00:00:00 2001
From: Outrun Colors <itsoutruncolors@gmail.com>
Date: Sat, 24 Sep 2022 14:38:21 -0500
Subject: [PATCH] Confirm before deleting

---
 chat/src/features/chat/ChatMessage.css |  4 ++++
 chat/src/features/chat/ChatMessage.tsx | 19 +++++++++++++++----
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/chat/src/features/chat/ChatMessage.css b/chat/src/features/chat/ChatMessage.css
index 594f559cb2..f67716cac1 100644
--- a/chat/src/features/chat/ChatMessage.css
+++ b/chat/src/features/chat/ChatMessage.css
@@ -40,6 +40,10 @@
   background: transparent !important;
 }
 
+.ChatMessage-button__confirmed i {
+  color: red !important;
+}
+
 .ChatMessage-delete {
   position: absolute;
   top: 4px;
diff --git a/chat/src/features/chat/ChatMessage.tsx b/chat/src/features/chat/ChatMessage.tsx
index 5fc949c4e0..935e38638d 100644
--- a/chat/src/features/chat/ChatMessage.tsx
+++ b/chat/src/features/chat/ChatMessage.tsx
@@ -1,8 +1,9 @@
-import React, { useEffect, useRef } from "react";
+import React, { useCallback, useState } from "react";
+import cx from "classnames";
+import key from "weak-key";
 import { Username } from "./Username";
 import { useChat, useRootContext } from "../../hooks";
 import "./ChatMessage.css";
-import key from "weak-key";
 
 interface ChatMessageProps extends ChatSpeakResponse {
   showUser?: boolean;
@@ -48,6 +49,14 @@ export function ChatMessage({
       ? { borderLeft: `2px solid #${themeColor}` }
       : {};
   const style = { ...mentionStyle, ...quoteStyle };
+  const [confirmedDelete, setConfirmedDelete] = useState(false);
+  const handleDeleteMessage = useCallback(() => {
+    if (confirmedDelete) {
+      deleteMessage(text);
+    } else {
+      setConfirmedDelete(true);
+    }
+  }, [text, confirmedDelete]);
 
   return (
     <div className={"ChatMessage"} style={style}>
@@ -80,8 +89,10 @@ export function ChatMessage({
         </div>
         {admin && (
           <button
-            className="ChatMessage-button ChatMessage-delete quote btn del"
-            onClick={() => deleteMessage(text)}
+            className={cx("ChatMessage-button ChatMessage-delete btn", {
+              "ChatMessage-button__confirmed": confirmedDelete,
+            })}
+            onClick={handleDeleteMessage}
           >
             <i className="fas fa-trash-alt"></i>
           </button>