Merge pull request #1028 from bounswe/frontend/comment-enhancements

Frontend/comment enhancements
bounswe · Dec 18, 2023 · 0539570 · 0539570
2 parents b8adc4d + 61c937d
commit 0539570
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 8 deletions.
diff --git a/app/frontend/src/Components/Comment/Comment/Comment.module.scss b/app/frontend/src/Components/Comment/Comment/Comment.module.scss
@@ -5,7 +5,6 @@
   background-color: $celadon;
   border-radius: 0.5em;
   position: relative;
-  max-width: 70em;
   word-break: break-word;
   gap: 0.5em;
 

diff --git a/app/frontend/src/Components/Comment/Comment/Comment.tsx b/app/frontend/src/Components/Comment/Comment/Comment.tsx
@@ -23,6 +23,8 @@ import Reply from "../Reply/Reply";
 import { useNavigate } from "react-router-dom";
 import CommentEditForm from "../CommentForm/CommentEditForm";
 import { twj } from "tw-to-css";
+import { NotificationUtil } from "../../../Library/utils/notification";
+import clsx from "clsx";
 
 function Comment({ comment, postId }: { comment: any; postId: string }) {
   const { upvote, downvote } = useVote({
@@ -32,13 +34,13 @@ function Comment({ comment, postId }: { comment: any; postId: string }) {
   });
 
   const { user, isLoggedIn } = useAuth();
-  const navigate = useNavigate();
   const queryClient = useQueryClient();
   const { mutate: removeComment } = useMutation(
     (id: string) => deleteComment(id),
     {
       onSuccess() {
         queryClient.invalidateQueries(["comments", postId]);
+        NotificationUtil.success("You successfully delete the comment.");
       },
       onMutate(id: string) {
         queryClient.setQueriesData(["comments", postId], (prev: any) => {
@@ -69,7 +71,7 @@ function Comment({ comment, postId }: { comment: any; postId: string }) {
             icon={<UpOutlined />}
             onClick={upvote}
             disabled={!isLoggedIn}
-            //className={clsx(post?.userVote === "UPVOTE" && styles.active)}
+            className={clsx(comment?.userVote === "UPVOTE" && styles.active)}
           />
           <div className={styles.title}>{comment.overallVote}</div>
 
@@ -80,7 +82,7 @@ function Comment({ comment, postId }: { comment: any; postId: string }) {
             icon={<DownOutlined />}
             onClick={downvote}
             disabled={!isLoggedIn}
-            //className={clsx(post?.userVote === "DOWNVOTE" && styles.active)}
+            className={clsx(comment?.userVote === "DOWNVOTE" && styles.active)}
           />
         </div>
 

diff --git a/app/frontend/src/Components/Comment/Reply/Reply.module.scss b/app/frontend/src/Components/Comment/Reply/Reply.module.scss
@@ -7,10 +7,11 @@
   border-radius: 0.5em;
   display: grid;
   gap: 0.5em;
+  margin-bottom: 5px;
   grid-template-areas:
     "v t"
     "v m";
-  grid-template-rows: 50px 25px;
+
   grid-template-columns: 25px 1fr;
   .vote {
     justify-items: center;

diff --git a/app/frontend/src/Components/Comment/Reply/Reply.tsx b/app/frontend/src/Components/Comment/Reply/Reply.tsx
@@ -7,6 +7,8 @@ import { useAuth } from "../../Hooks/useAuth";
 import { useMutation } from "react-query";
 import { deleteComment } from "../../../Services/comment";
 import { useQueryClient } from "react-query";
+import { NotificationUtil } from "../../../Library/utils/notification";
+import clsx from "clsx";
 
 function Reply({ reply }: { reply: any }) {
   const { upvote, downvote } = useVote({
@@ -23,6 +25,7 @@ function Reply({ reply }: { reply: any }) {
     {
       onSuccess() {
         queryClient.invalidateQueries(["comments", reply.post]);
+        NotificationUtil.success("You successfully delete the comment.");
       },
       onMutate(id: string) {
         queryClient.setQueriesData(["comments", reply.post], (prev: any) => {
@@ -40,9 +43,9 @@ function Reply({ reply }: { reply: any }) {
           shape="circle"
           size="small"
           icon={<UpOutlined />}
-          onClick={downvote}
+          onClick={upvote}
           disabled={!isLoggedIn}
-          //className={clsx(post?.userVote === "DOWNVOTE" && styles.active)}
+          className={clsx(reply?.userVote === "UPVOTE" && styles.active)}
         />
         <div style={{ fontWeight: "bold" }}>{reply.overallVote}</div>
         <Button
@@ -52,7 +55,7 @@ function Reply({ reply }: { reply: any }) {
           icon={<DownOutlined />}
           onClick={downvote}
           disabled={!isLoggedIn}
-          //className={clsx(post?.userVote === "DOWNVOTE" && styles.active)}
+          className={clsx(reply?.userVote === "DOWNVOTE" && styles.active)}
         />
       </div>
       <div className={styles.title}>{reply.commentContent}</div>