From 85f8c52f0405c9c3a7a527438450d6620899faa3 Mon Sep 17 00:00:00 2001
From: SedationH <sedationh@gmail.com>
Date: Sun, 27 Oct 2024 10:26:30 +0800
Subject: [PATCH] feat: Refactor CommentEdit component to use separate props
 for text and actions

---
 .../CardModal/Activities/CommentEdit.jsx        | 12 +++++++++---
 .../CardModal/Activities/ItemComment.jsx        | 17 +++++++++++------
 2 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/client/src/components/CardModal/Activities/CommentEdit.jsx b/client/src/components/CardModal/Activities/CommentEdit.jsx
index cd088dfa..706bcadf 100755
--- a/client/src/components/CardModal/Activities/CommentEdit.jsx
+++ b/client/src/components/CardModal/Activities/CommentEdit.jsx
@@ -10,7 +10,7 @@ import { focusEnd } from '../../../utils/element-helpers';
 
 import styles from './CommentEdit.module.scss';
 
-const CommentEdit = React.forwardRef(({ children, defaultData, onUpdate }, ref) => {
+const CommentEdit = React.forwardRef(({ defaultData, onUpdate, text, actions }, ref) => {
   const [t] = useTranslation();
   const [isOpened, setIsOpened] = useState(false);
   const [data, handleFieldChange, setData] = useForm(null);
@@ -76,7 +76,12 @@ const CommentEdit = React.forwardRef(({ children, defaultData, onUpdate }, ref)
   }, [isOpened]);
 
   if (!isOpened) {
-    return children;
+    return (
+      <>
+        {text}
+        {actions}
+      </>
+    );
   }
 
   return (
@@ -101,9 +106,10 @@ const CommentEdit = React.forwardRef(({ children, defaultData, onUpdate }, ref)
 });
 
 CommentEdit.propTypes = {
-  children: PropTypes.element.isRequired,
   defaultData: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
   onUpdate: PropTypes.func.isRequired,
+  text: PropTypes.element.isRequired,
+  actions: PropTypes.element.isRequired,
 };
 
 export default React.memo(CommentEdit);
diff --git a/client/src/components/CardModal/Activities/ItemComment.jsx b/client/src/components/CardModal/Activities/ItemComment.jsx
index fca47b31..e44c3a2c 100755
--- a/client/src/components/CardModal/Activities/ItemComment.jsx
+++ b/client/src/components/CardModal/Activities/ItemComment.jsx
@@ -40,12 +40,17 @@ const ItemComment = React.memo(
               })}
             </span>
           </div>
-          <CommentEdit ref={commentEdit} defaultData={data} onUpdate={onUpdate}>
-            <>
+          <CommentEdit
+            ref={commentEdit}
+            defaultData={data}
+            onUpdate={onUpdate}
+            text={
               <div className={styles.text}>
                 <Markdown linkTarget="_blank">{data.text}</Markdown>
               </div>
-              {canEdit && (
+            }
+            actions={
+              canEdit && (
                 <Comment.Actions>
                   <Comment.Action
                     as="button"
@@ -66,9 +71,9 @@ const ItemComment = React.memo(
                     />
                   </DeletePopup>
                 </Comment.Actions>
-              )}
-            </>
-          </CommentEdit>
+              )
+            }
+          />
         </div>
       </Comment>
     );