From 71cfe3cd8ebec5bfa2f54100c7e1c514bc73ba98 Mon Sep 17 00:00:00 2001
From: Naifer <161821705+omarNaifer12@users.noreply.github.com>
Date: Wed, 15 Jan 2025 17:37:57 +0100
Subject: [PATCH] fix: add cancel button for editing comments (#580)

* fix: add cancel button for editing comments

* cleanup

---------

Co-authored-by: Philipinho <16838612+Philipinho@users.noreply.github.com>
---
 .../comment/components/comment-actions.tsx    | 19 ++++++++++++++++---
 .../comment/components/comment-list-item.tsx  |  5 +++++
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/apps/client/src/features/comment/components/comment-actions.tsx b/apps/client/src/features/comment/components/comment-actions.tsx
index 9249a07..e5c4f1a 100644
--- a/apps/client/src/features/comment/components/comment-actions.tsx
+++ b/apps/client/src/features/comment/components/comment-actions.tsx
@@ -4,13 +4,26 @@ import { useTranslation } from "react-i18next";
 type CommentActionsProps = {
   onSave: () => void;
   isLoading?: boolean;
+  onCancel?: () => void;
+  isCommentEditor?: boolean;
 };
 
-function CommentActions({ onSave, isLoading }: CommentActionsProps) {
+function CommentActions({
+  onSave,
+  isLoading,
+  onCancel,
+  isCommentEditor,
+}: CommentActionsProps) {
   const { t } = useTranslation();
-
+  
   return (
-    <Group justify="flex-end" pt={2} wrap="nowrap">
+    <Group justify="flex-end" pt="sm" wrap="nowrap">
+      {isCommentEditor && (
+        <Button size="compact-sm" variant="default" onClick={onCancel}>
+          {t("Cancel")}
+        </Button>
+      )}
+
       <Button size="compact-sm" loading={isLoading} onClick={onSave}>
         {t("Save")}
       </Button>
diff --git a/apps/client/src/features/comment/components/comment-list-item.tsx b/apps/client/src/features/comment/components/comment-list-item.tsx
index e27bfa7..293c4f9 100644
--- a/apps/client/src/features/comment/components/comment-list-item.tsx
+++ b/apps/client/src/features/comment/components/comment-list-item.tsx
@@ -58,6 +58,9 @@ function CommentListItem({ comment }: CommentListItemProps) {
   function handleEditToggle() {
     setIsEditing(true);
   }
+  function cancelEdit() {
+    setIsEditing(false);
+  }
 
   return (
     <Box ref={ref} pb="xs">
@@ -115,6 +118,8 @@ function CommentListItem({ comment }: CommentListItemProps) {
             <CommentActions
               onSave={handleUpdateComment}
               isLoading={isLoading}
+              onCancel={cancelEdit}
+              isCommentEditor={true}
             />
           </>
         )}