feat: add CommentSectionProvider for improved comment management and state handling

Author: shoaibsharif

.dev.vars

@@ -2,8 +2,12 @@ import HomeLeftSidebar from "@/app/(home)/_components/HomeLeftSidebar";
 import { persistenceRepository } from "@/backend/persistence/persistence-repositories";
 import * as articleActions from "@/backend/services/article.actions";
 import AppImage from "@/components/AppImage";
-import { CommentSection } from "@/components/comment-section";
+import {
+  CommentSection,
+  CommentSectionProvider,
+} from "@/components/comment-section";
 import HomepageLayout from "@/components/layout/HomepageLayout";
+import ResourceReaction from "@/components/ResourceReaction";
 import { readingTime, removeMarkdownSyntax } from "@/lib/utils";
 import getFileUrl from "@/utils/getFileUrl";
 import { markdocParser } from "@/utils/markdoc-parser";
@@ -13,9 +17,7 @@ import Link from "next/link";
 import { notFound } from "next/navigation";
 import type { Article, WithContext } from "schema-dts";
 import { eq } from "sqlkit";
-import ArticleReaction from "./_components/ArticleReaction";
 import ArticleSidebar from "./_components/ArticleSidebar";
-import ResourceReaction from "@/components/ResourceReaction";
 
 interface ArticlePageProps {
   params: Promise<{
@@ -158,7 +160,9 @@ const Page: NextPage<ArticlePageProps> = async ({ params }) => {
           <div className="mx-auto content-typography">{parsedHTML}</div>
         </div>
 
-        <CommentSection resource_type="ARTICLE" resource_id={article.id} />
+        <CommentSectionProvider>
+          <CommentSection resource_type="ARTICLE" resource_id={article.id} />
+        </CommentSectionProvider>
       </HomepageLayout>
     </>
   );

src/app/[username]/[articleHandle]/page.tsx

@@ -13,13 +13,40 @@ import { useLoginPopup } from "./app-login-popup";
 import ResourceReaction from "./ResourceReaction";
 import { Textarea } from "./ui/textarea";
 
+const Context = React.createContext<
+  { mutatingId?: string; setMutatingId: (id?: string) => void } | undefined
+>(undefined);
+
+export const CommentSectionProvider = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => {
+  const [mutatingId, setMutatingId] = useState<string | undefined>(undefined);
+  return (
+    <Context.Provider value={{ mutatingId, setMutatingId }}>
+      {children}
+    </Context.Provider>
+  );
+};
+export const useCommentSection = () => {
+  const context = React.useContext(Context);
+  if (!context) {
+    throw new Error(
+      "useCommentSectionContext must be used within a CommentSectionProvider"
+    );
+  }
+  return context;
+};
+
 export const CommentSection = (props: {
   resource_id: string;
   resource_type: "ARTICLE" | "COMMENT";
 }) => {
   const { _t } = useTranslation();
   const queryClient = useQueryClient();
   const appLoginPopup = useLoginPopup();
+  const { setMutatingId } = useCommentSection();
   const session = useSession();
   const mutation = useMutation({
     mutationFn: (payload: { body: string; comment_id: string }) =>
@@ -34,6 +61,7 @@ export const CommentSection = (props: {
         appLoginPopup.show();
         return;
       }
+      setMutatingId(payload.comment_id);
 
       // Optimistically update the UI by adding the new comment to the list
       await queryClient.cancelQueries({
@@ -82,7 +110,7 @@ export const CommentSection = (props: {
     refetchOnReconnect: false,
   });
 
-  const generated_comment_id = useMemo(() => crypto.randomUUID(), []);
+  const generated_comment_id = () => crypto.randomUUID();
   return (
     <div className="max-w-4xl mx-auto p-4">
       <div className="mb-6">
@@ -91,7 +119,7 @@ export const CommentSection = (props: {
         {/* New Comment Box */}
         <CommentEditor
           onSubmit={(body) => {
-            mutation.mutate({ body, comment_id: generated_comment_id });
+            mutation.mutate({ body, comment_id: generated_comment_id() });
           }}
           isLoading={mutation.isPending}
           placeholder={_t("What are your thoughts?")}
@@ -170,19 +198,19 @@ const CommentEditor = (props: {
 const CommentItem = (props: {
   comment: CommentPresentation;
   mutating?: boolean;
-  mutatingId?: string;
 }) => {
   const { _t } = useTranslation();
   const session = useSession();
   const appLoginPopup = useLoginPopup();
   const [isCollapsed, setIsCollapsed] = useState(false);
   const [showReplyBox, setShowReplyBox] = useState(false);
+  const { mutatingId, setMutatingId } = useCommentSection();
   const [replies, setReplies] = useImmer<CommentPresentation[]>(
     props.comment.replies ?? []
   );
 
   const level = useMemo(() => props.comment.level ?? 0, [props.comment]);
-  const generated_comment_id = useMemo(() => crypto.randomUUID(), []);
+  const generated_comment_id = () => crypto.randomUUID();
   const mutation = useMutation({
     mutationFn: (payload: { body: string; comment_id: string }) =>
       commentActions.createMyComment({
@@ -212,6 +240,9 @@ const CommentItem = (props: {
           created_at: new Date(),
         } satisfies CommentPresentation);
       });
+      console.log("Mutating comment with ID:", payload.comment_id);
+
+      setMutatingId(payload.comment_id);
     },
     onError: (error) => {
       // reverse the optimistic update if there's an error
@@ -256,7 +287,7 @@ const CommentItem = (props: {
 
           {/* Comment Actions */}
 
-          {props.mutating && props.mutatingId == props.comment.id ? (
+          {props.mutating && mutatingId == props.comment.id ? (
             <p className="text-muted-foreground text-sm mb-3">
               {_t("Pending")}...
             </p>
@@ -285,7 +316,7 @@ const CommentItem = (props: {
                 onSubmit={(value) => {
                   mutation.mutate({
                     body: value,
-                    comment_id: generated_comment_id,
+                    comment_id: generated_comment_id(),
                   });
                   setShowReplyBox(false);
                 }}
@@ -301,7 +332,6 @@ const CommentItem = (props: {
               key={reply.id}
               comment={reply}
               mutating={mutation.isPending}
-              mutatingId={mutation.isPending ? reply.id : undefined}
             />
           ))}
         </>