feat: enhance CommentCreate and Comment components with reply functionality and user mentions

parlandin · parlandin · commit cd4be9524821 · 2025-03-03T17:29:50.000-03:00
diff --git a/src/components/Comment/index.tsx b/src/components/Comment/index.tsx
@@ -77,7 +77,9 @@ const Comment: React.FC<IComment> = ({
             </S.LikeButton>
 
             <S.ReplyButton onClick={() => handleReply(listComment.id)}>
-              Responder
+              {replyComment?.isReplying && replyComment.id === listComment.id
+                ? "Cancelar resposta"
+                : "Responder"}
             </S.ReplyButton>
           </S.ExtraInfo>
 
@@ -86,7 +88,12 @@ const Comment: React.FC<IComment> = ({
           )}
 
           {replyComment?.isReplying && replyComment.id === listComment.id && (
-            <NewComment />
+            <NewComment
+              isReplying={true}
+              replyId={listComment.id}
+              replyUser={listComment.user.name}
+              isReplyOverReply={isReplying}
+            />
           )}
           <S.ReplyContainer>{children}</S.ReplyContainer>
         </S.CommentInfos>
diff --git a/src/components/CommentCreate/index.tsx b/src/components/CommentCreate/index.tsx
@@ -1,30 +1,82 @@
-import React, { useState } from "react";
+import React, { useState, useMemo, useCallback, useEffect } from "react";
 import * as S from "./styles";
 import ViewMarkdown from "@components/ViewMarkdown";
 
-const CommentCreate = () => {
+export interface ICommentCreate {
+  isReplying?: boolean;
+  isReplyOverReply?: boolean;
+  replyId?: number;
+  replyUser?: string;
+}
+
+const CommentCreate: React.FC<ICommentCreate> = ({
+  isReplying = false,
+  isReplyOverReply = false,
+  replyId,
+  replyUser,
+}) => {
   const [comment, setComment] = useState("");
   const [preview, setPreview] = useState<boolean>(false);
 
-  const account = {
-    isLogged: true,
-    user: {
-      userName: "Parlandim",
-      avatar: "https://avatar.iran.liara.run/public/10",
-    },
-  };
+  const account = useMemo(
+    () => ({
+      isLogged: true,
+      user: {
+        userName: "Parlandim",
+        avatar: "https://avatar.iran.liara.run/public/10",
+      },
+    }),
+    []
+  );
+
+  const clearComment = useCallback(() => {
+    setComment("");
+  }, []);
+
+  const withMention = useCallback(
+    (content: string) => {
+      if (!isReplyOverReply) {
+        return content;
+      }
+
+      if (content.includes(`@${replyUser}`)) {
+        return content;
+      }
 
-  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-    const { value } = e.target;
+      return `@${replyUser}\n${content}`;
+    },
+    [isReplying, replyUser, isReplyOverReply]
+  );
 
-    const replaceString = value.replace(/\n\n/g, "\n<br>");
+  const handleChange = useCallback(
+    (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+      const { value } = e.target;
+      const replaceString = value.replace(/\n\n/g, "\n<br>");
+      setComment(withMention(replaceString));
+    },
+    [withMention]
+  );
 
-    setComment(replaceString);
-  };
+  const handlePreview = useCallback(() => {
+    setPreview((prev) => !prev);
+  }, []);
 
-  const handlePreview = () => {
-    setPreview(!preview);
-  };
+  const userSection = useMemo(
+    () => (
+      <S.UserSection>
+        <S.UserInfos>
+          {account.isLogged && (
+            <>
+              <S.Avatar src={account.user.avatar} />
+              <S.UserName>{account.user.userName}</S.UserName>
+            </>
+          )}
+        </S.UserInfos>
+        <S.Button>{account.isLogged ? "comentar" : "fazer login"}</S.Button>
+      </S.UserSection>
+    ),
+    [account]
+  );
 
   return (
     <S.Container>
@@ -33,6 +85,8 @@ const CommentCreate = () => {
           <S.Button onClick={handlePreview}>
             {preview ? "Escrever" : "Pré visualizar"}
           </S.Button>
+
+          {isReplying && <S.ReplyText>Respondendo a @{replyUser}</S.ReplyText>}
         </S.ButtonsWrapper>
 
         {!preview && (
@@ -49,17 +103,7 @@ const CommentCreate = () => {
           </S.Preview>
         )}
 
-        <S.UserSection>
-          <S.UserInfos>
-            {account.isLogged && (
-              <>
-                <S.Avatar src={account.user.avatar} />
-                <S.UserName>{account.user.userName}</S.UserName>
-              </>
-            )}
-          </S.UserInfos>
-          <S.Button>{account.isLogged ? "comentar" : "fazer login"}</S.Button>
-        </S.UserSection>
+        {userSection}
       </S.CommentSection>
     </S.Container>
   );
diff --git a/src/components/CommentCreate/styles.ts b/src/components/CommentCreate/styles.ts
@@ -35,6 +35,12 @@ export const Button = styled.button`
   font-size: 0.8rem;
 `;
 
+export const ReplyText = styled.span`
+  color: ${(props) => props.theme.colors.secondary};
+  font-size: 0.8rem;
+  margin-left: 10px;
+`;
+
 export const CommentInput = styled.textarea`
   width: 100%;
   border: none;
