From 8bd5a9cb3bb658c8559971617a379af5b4420f28 Mon Sep 17 00:00:00 2001
From: Nikita <nikita.develops.work@gmail.com>
Date: Wed, 28 Aug 2024 12:06:21 +0300
Subject: [PATCH] fix(comments): add cancel button and format toolbar when
 editing message

---
 .../src/components/comment_feed/comment.tsx   | 42 +++++++++++++------
 1 file changed, 29 insertions(+), 13 deletions(-)

diff --git a/front_end/src/components/comment_feed/comment.tsx b/front_end/src/components/comment_feed/comment.tsx
index 3928aaa69a..6a5350a7dc 100644
--- a/front_end/src/components/comment_feed/comment.tsx
+++ b/front_end/src/components/comment_feed/comment.tsx
@@ -144,6 +144,7 @@ const Comment: FC<CommentProps> = ({
   const [isDeleted, setIsDeleted] = useState(comment.is_soft_deleted);
   const [isReplying, setIsReplying] = useState(false);
   const [commentMarkdown, setCommentMarkdown] = useState(comment.text);
+  const [tempCommentMarkdown, setTempCommentMarkdown] = useState("");
   const [isReportModalOpen, setIsReportModalOpen] = useState(false);
 
   const { user } = useAuth();
@@ -218,6 +219,7 @@ const Comment: FC<CommentProps> = ({
       id: "edit",
       name: t("edit"),
       onClick: () => {
+        setTempCommentMarkdown(commentMarkdown);
         setIsEditing(true);
       },
     },
@@ -346,15 +348,19 @@ const Comment: FC<CommentProps> = ({
       )} */}
 
       <div className="break-anywhere">
-        <MarkdownEditor
-          markdown={commentMarkdown}
-          mode={isEditing ? "write" : "read"}
-          onChange={(text) => {
-            setCommentMarkdown(text);
-          }}
-        />
+        {isEditing && (
+          <MarkdownEditor
+            markdown={commentMarkdown}
+            mode={"write"}
+            onChange={setCommentMarkdown}
+          />
+        )}{" "}
+        {!isEditing && (
+          <MarkdownEditor markdown={commentMarkdown} mode={"read"} />
+        )}
       </div>
       {isEditing && (
+        <>
         <Button
           onClick={async () => {
             const response = await editComment({
@@ -364,13 +370,23 @@ const Comment: FC<CommentProps> = ({
             });
             if (response && "errors" in response) {
               console.error(t("errorDeletingComment"), response.errors);
-            } else {
+              } else {
+                setIsEditing(false);
+              }
+            }}
+          >
+            {t("save")}
+          </Button>
+          <Button
+            className="ml-2"
+            onClick={() => {
+              setCommentMarkdown(tempCommentMarkdown);
               setIsEditing(false);
-            }
-          }}
-        >
-          {t("save")}
-        </Button>
+            }}
+          >
+            {t("cancel")}
+          </Button>
+        </>
       )}
       <div className="mb-2 mt-1 h-7 overflow-visible">
         <div className="flex items-center justify-between text-sm leading-4 text-gray-900 dark:text-gray-900-dark">