Fixed bugs of voting, editor clicks, replies (#1331)

code100x · Oct 4, 2024 · 364240c · 364240c
1 parent 53a2934
commit 364240c
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 23 deletions.
diff --git a/src/actions/commentVote/index.ts b/src/actions/commentVote/index.ts
@@ -20,7 +20,7 @@ const voteHandler = async (
     return { error: 'Unauthorized' };
   }
 
-  const { questionId, answerId, commentId, voteType, currentPath } = data;
+  const { questionId, answerId, commentId, voteType, currentPath, slug } = data;
 
   if (!questionId && !answerId && !commentId) {
     return { error: 'No valid target specified.' };
@@ -142,7 +142,7 @@ const voteHandler = async (
     }
 
     if (currentPath) {
-      revalidatePath(currentPath);
+      revalidatePath(`${currentPath}/${slug}`);
     }
 
     return { data: updatedEntity };

diff --git a/src/actions/commentVote/schema.ts b/src/actions/commentVote/schema.ts
@@ -7,4 +7,5 @@ export const VoteHandleSchema = z.object({
   answerId: z.number().optional(),
   voteType: z.nativeEnum(VoteType),
   currentPath: z.string(),
+  slug: z.string(),
 });
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
@@ -206,8 +206,7 @@ export function Sidebar({
             variants={sidebarVariants}
             className="fixed right-0 top-0 z-[99999] flex h-screen w-full flex-col gap-4 overflow-y-auto rounded-r-lg border-l border-primary/10 bg-neutral-50 dark:bg-neutral-900 md:max-w-[30vw]"
           >
-            <div className="sticky top-0 z-10 flex items-center justify-between border-b border-primary/10 p-5 backdrop-blur-md">
-              <h4 className="text-xl font-bold tracking-tighter text-primary lg:text-2xl">
+            <div className="sticky top-0 z-10 flex items-center justify-between border-b border-primary/10 bg-neutral-50 p-5 dark:bg-neutral-900">              <h4 className="text-xl font-bold tracking-tighter text-primary lg:text-2xl">
                 Course Content
               </h4>
               <Button

diff --git a/src/components/posts/PostCard.tsx b/src/components/posts/PostCard.tsx
@@ -60,6 +60,10 @@ const PostCard: React.FC<IProps> = ({
     }
   };
 
+  const handleEditorClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+  };
+
   const router = useRouter();
 
   const [isPending, startTransition] = useTransition();
@@ -187,12 +191,16 @@ const PostCard: React.FC<IProps> = ({
           answerId={isAnswer ? post.id : undefined}
           key={post.id}
           votesArr={post.votes || []}
+          slug={isExtendedQuestion(post) ? post.slug : ''}
         />
         {reply && (
           <Button
             variant="outline"
             size="sm"
-            onClick={() => setEnableReply((prev) => !prev)}
+            onClick={(e) => {
+              e.stopPropagation();
+              setEnableReply((prev) => !prev);
+            }}
             className="text-xs sm:text-sm"
           >
             <Reply className="mr-1 size-4" />
@@ -208,7 +216,11 @@ const PostCard: React.FC<IProps> = ({
       </div>
 
       {enableReply && (
-        <form onSubmit={handleSubmit} className="mt-4">
+      <form
+        onSubmit={handleSubmit}
+        className="mt-4"
+        onClick={handleEditorClick}
+        >
           <div data-color-mode={theme} className="flex w-full flex-col gap-4">
             <MDEditor
               className="markdown-editor-default-font text-sm sm:text-base"
@@ -243,8 +255,7 @@ const PostCard: React.FC<IProps> = ({
                   sessionUser={sessionUser}
                   reply={false}
                   parentAuthorName={post.author.name}
-                  isAnswer={true}
-                />
+                  isAnswer={true}                />
               </div>
             ))}
           </div>

diff --git a/src/components/posts/form/form-vote.tsx b/src/components/posts/form/form-vote.tsx
@@ -16,6 +16,7 @@ interface IVoteFormProps {
   upvotes: number;
   downvotes: number;
   votesArr: any[];
+  slug: string;
 }
 
 const VoteForm: React.FC<IVoteFormProps> = ({
@@ -24,6 +25,7 @@ const VoteForm: React.FC<IVoteFormProps> = ({
   upvotes = 0,
   downvotes = 0,
   votesArr,
+  slug,
 }) => {
   const currentPath = usePathname();
   const { execute } = useAction(voteHandlerAction, {
@@ -34,7 +36,7 @@ const VoteForm: React.FC<IVoteFormProps> = ({
   });
   const handleVote = (voteType: VoteType) => {
     toast.promise(
-      execute({ voteType, questionId, answerId, currentPath }),
+      execute({ voteType, questionId, answerId, currentPath, slug }),
       voteType === VoteType.DOWNVOTE
         ? {
             loading: 'Downvoting...',
@@ -54,20 +56,19 @@ const VoteForm: React.FC<IVoteFormProps> = ({
 
   return (
     <div className="flex gap-2">
-      <form
+      <button
         className="m-auto"
-        onSubmit={(e) => {
-          e.preventDefault();
+        onClick={(e) => {
+          e.stopPropagation();
           handleVote(VoteType.UPVOTE);
         }}
       >
-        <button
+        <div
           className={`flex min-w-8 items-center gap-1 rounded-full px-4 py-1 text-lg transition-all duration-300 ${
             userVoted && userVoteVal.voteType === VoteType.UPVOTE
               ? 'bg-green-500/20 text-green-500'
               : 'bg-primary/10 text-primary hover:bg-green-500/20 hover:text-green-500'
           }`}
-          type="submit"
         >
           <ArrowBigUp
             className={`size-5 ${
@@ -82,22 +83,21 @@ const VoteForm: React.FC<IVoteFormProps> = ({
             }
           />
           <span>{upvotes}</span>
-        </button>
-      </form>
-      <form
+        </div>
+      </button>
+      <button
         className="m-auto"
-        onSubmit={(e) => {
-          e.preventDefault();
+        onClick={(e) => {
+          e.stopPropagation();
           handleVote(VoteType.DOWNVOTE);
         }}
       >
-        <button
+        <div
           className={`flex min-w-8 items-center gap-1 rounded-full px-4 py-1 text-lg transition-all duration-300 ${
             userVoted && userVoteVal.voteType === VoteType.DOWNVOTE
               ? 'bg-red-500/20 text-red-500'
               : 'bg-primary/10 text-primary hover:bg-red-500/20 hover:text-red-500'
           }`}
-          type="submit"
         >
           <ArrowBigDown
             className={`size-5 ${
@@ -112,8 +112,8 @@ const VoteForm: React.FC<IVoteFormProps> = ({
             }
           />
           <span>{downvotes}</span>
-        </button>
-      </form>
+        </div>
+      </button>
     </div>
   );
 };