From 65238919828fc65fb3429ba2072d38d2722300d1 Mon Sep 17 00:00:00 2001
From: Steven <stevenlgtm@gmail.com>
Date: Thu, 25 Dec 2025 23:40:42 +0800
Subject: [PATCH] fix: react hooks order violation in MemoDetail when creating
 comments

Replace dynamic hook mapping with useMemoComments hook to fetch all comments
via listMemoComments API, ensuring consistent hook order across renders and
fixing page load failure after comment creation.
---
 web/src/components/MemoEditor/index.tsx | 11 +++++++++--
 web/src/hooks/useMemoQueries.ts         | 13 +++++++++++++
 web/src/pages/MemoDetail.tsx            | 20 ++++++++------------
 3 files changed, 30 insertions(+), 14 deletions(-)

diff --git a/web/src/components/MemoEditor/index.tsx b/web/src/components/MemoEditor/index.tsx
index 970372b0..ba5b74ad 100644
--- a/web/src/components/MemoEditor/index.tsx
+++ b/web/src/components/MemoEditor/index.tsx
@@ -118,10 +118,17 @@ const MemoEditorImpl: React.FC<MemoEditorProps> = ({
       cacheService.clear(cacheService.key(currentUser?.name ?? "", cacheKey));
 
       // Invalidate React Query cache to refresh memo lists across the app
-      await Promise.all([
+      const invalidationPromises = [
         queryClient.invalidateQueries({ queryKey: memoKeys.lists() }),
         queryClient.invalidateQueries({ queryKey: userKeys.stats() }),
-      ]);
+      ];
+
+      // If this was a comment, also invalidate the comments query for the parent memo
+      if (parentMemoName) {
+        invalidationPromises.push(queryClient.invalidateQueries({ queryKey: memoKeys.comments(parentMemoName) }));
+      }
+
+      await Promise.all(invalidationPromises);
 
       // Reset editor state to initial values
       dispatch(actions.reset());
diff --git a/web/src/hooks/useMemoQueries.ts b/web/src/hooks/useMemoQueries.ts
index 40a152b9..bb61426e 100644
--- a/web/src/hooks/useMemoQueries.ts
+++ b/web/src/hooks/useMemoQueries.ts
@@ -13,6 +13,7 @@ export const memoKeys = {
   list: (filters: Partial<ListMemosRequest>) => [...memoKeys.lists(), filters] as const,
   details: () => [...memoKeys.all, "detail"] as const,
   detail: (name: string) => [...memoKeys.details(), name] as const,
+  comments: (name: string) => [...memoKeys.all, "comments", name] as const,
 };
 
 export function useMemos(request: Partial<ListMemosRequest> = {}) {
@@ -139,3 +140,15 @@ export function useDeleteMemo() {
     },
   });
 }
+
+export function useMemoComments(name: string, options?: { enabled?: boolean }) {
+  return useQuery({
+    queryKey: memoKeys.comments(name),
+    queryFn: async () => {
+      const response = await memoServiceClient.listMemoComments({ name });
+      return response;
+    },
+    enabled: options?.enabled ?? true,
+    staleTime: 1000 * 60, // 1 minute
+  });
+}
diff --git a/web/src/pages/MemoDetail.tsx b/web/src/pages/MemoDetail.tsx
index 7c45a10a..acc724e2 100644
--- a/web/src/pages/MemoDetail.tsx
+++ b/web/src/pages/MemoDetail.tsx
@@ -10,11 +10,10 @@ import MobileHeader from "@/components/MobileHeader";
 import { Button } from "@/components/ui/button";
 import { memoNamePrefix } from "@/helpers/resource-names";
 import useCurrentUser from "@/hooks/useCurrentUser";
-import { useMemo as useMemoQuery } from "@/hooks/useMemoQueries";
+import { useMemo, useMemoComments } from "@/hooks/useMemoQueries";
 import useNavigateTo from "@/hooks/useNavigateTo";
 import useResponsiveWidth from "@/hooks/useResponsiveWidth";
 import { cn } from "@/lib/utils";
-import { Memo, MemoRelation_Type } from "@/types/proto/api/v1/memo_service_pb";
 import { useTranslate } from "@/utils/i18n";
 
 const MemoDetail = () => {
@@ -29,7 +28,7 @@ const MemoDetail = () => {
   const [showCommentEditor, setShowCommentEditor] = useState(false);
 
   // Fetch main memo with React Query
-  const { data: memo, error, isLoading } = useMemoQuery(memoName, { enabled: !!memoName });
+  const { data: memo, error, isLoading } = useMemo(memoName, { enabled: !!memoName });
 
   // Handle errors
   if (error) {
@@ -38,18 +37,15 @@ const MemoDetail = () => {
   }
 
   // Fetch parent memo if exists
-  const { data: parentMemo } = useMemoQuery(memo?.parent || "", {
+  const { data: parentMemo } = useMemo(memo?.parent || "", {
     enabled: !!memo?.parent,
   });
 
-  // Get comment relations and memo names
-  const commentRelations =
-    memo?.relations.filter((relation) => relation.relatedMemo?.name === memo.name && relation.type === MemoRelation_Type.COMMENT) || [];
-  const commentMemoNames = commentRelations.map((relation) => relation.memo!.name);
-
-  // Fetch all comment memos
-  const commentQueries = commentMemoNames.map((name) => useMemoQuery(name));
-  const comments = commentQueries.map((q) => q.data).filter((memo): memo is Memo => !!memo);
+  // Fetch all comments for this memo in a single query
+  const { data: commentsResponse } = useMemoComments(memoName, {
+    enabled: !!memo,
+  });
+  const comments = commentsResponse?.memos || [];
 
   const showCreateCommentButton = currentUser && !showCommentEditor;