feat: enhance comments (#1980)

* feat: non-inline comments support

* enhance comments

* fix types

apps/client/src/features/websocket/types/types.ts

@@ -1,5 +1,6 @@
 import { SpaceTreeNode } from "@/features/page/tree/types.ts";
 import { IPage } from "@/features/page/types/page.types";
+import { IComment } from "@/features/comment/types/comment.types";
 
 export type InvalidateEvent = {
   operation: "invalidate";
@@ -8,9 +9,28 @@ export type InvalidateEvent = {
   id?: string;
 };
 
-export type InvalidateCommentsEvent = {
-  operation: "invalidateComment";
+export type CommentCreatedEvent = {
+  operation: "commentCreated";
   pageId: string;
+  comment: IComment;
+};
+
+export type CommentUpdatedEvent = {
+  operation: "commentUpdated";
+  pageId: string;
+  comment: IComment;
+};
+
+export type CommentDeletedEvent = {
+  operation: "commentDeleted";
+  pageId: string;
+  commentId: string;
+};
+
+export type CommentResolvedEvent = {
+  operation: "commentResolved";
+  pageId: string;
+  comment: IComment;
 };
 
 export type UpdateEvent = {
@@ -65,27 +85,15 @@ export type RefetchRootTreeNodeEvent = {
   spaceId: string;
 };
 
-export type ResolveCommentEvent = {
-  operation: "resolveComment";
-  pageId: string;
-  commentId: string;
-  resolved: boolean;
-  resolvedAt?: Date;
-  resolvedById?: string;
-  resolvedBy?: {
-    id: string;
-    name: string;
-    avatarUrl?: string | null;
-  };
-};
-
 export type WebSocketEvent =
   | InvalidateEvent
-  | InvalidateCommentsEvent
+  | CommentCreatedEvent
+  | CommentUpdatedEvent
+  | CommentDeletedEvent
+  | CommentResolvedEvent
   | UpdateEvent
   | DeleteEvent
   | AddTreeNodeEvent
   | MoveTreeNodeEvent
   | DeleteTreeNodeEvent
-  | RefetchRootTreeNodeEvent
-  | ResolveCommentEvent;
+  | RefetchRootTreeNodeEvent;

apps/client/src/features/websocket/use-query-subscription.ts

@@ -12,7 +12,6 @@ import {
   invalidateOnUpdatePage,
 } from "../page/queries/page-query";
 import { RQ_KEY } from "../comment/queries/comment-query";
-import { queryClient } from "@/main.tsx";
 import { IComment } from "@/features/comment/types/comment.types";
 
 export const useQuerySubscription = () => {
@@ -32,11 +31,66 @@ export const useQuerySubscription = () => {
             queryKey: [...data.entity, data.id].filter(Boolean),
           });
           break;
-        case "invalidateComment":
-          queryClient.invalidateQueries({
-            queryKey: RQ_KEY(data.pageId),
-          });
+        case "commentCreated": {
+          const createCache = queryClient.getQueryData(
+            RQ_KEY(data.pageId),
+          ) as InfiniteData<IPagination<IComment>> | undefined;
+
+          if (createCache && createCache.pages.length > 0) {
+            const alreadyExists = createCache.pages.some((page) =>
+              page.items.some((c) => c.id === data.comment.id),
+            );
+            if (alreadyExists) break;
+
+            const lastIdx = createCache.pages.length - 1;
+            queryClient.setQueryData(RQ_KEY(data.pageId), {
+              ...createCache,
+              pages: createCache.pages.map((page, i) =>
+                i === lastIdx
+                  ? { ...page, items: [...page.items, data.comment] }
+                  : page,
+              ),
+            });
+          }
           break;
+        }
+        case "commentUpdated":
+        case "commentResolved": {
+          const updateCache = queryClient.getQueryData(
+            RQ_KEY(data.pageId),
+          ) as InfiniteData<IPagination<IComment>> | undefined;
+
+          if (updateCache) {
+            queryClient.setQueryData(RQ_KEY(data.pageId), {
+              ...updateCache,
+              pages: updateCache.pages.map((page) => ({
+                ...page,
+                items: page.items.map((comment) =>
+                  comment.id === data.comment.id ? data.comment : comment,
+                ),
+              })),
+            });
+          }
+          break;
+        }
+        case "commentDeleted": {
+          const deleteCache = queryClient.getQueryData(
+            RQ_KEY(data.pageId),
+          ) as InfiniteData<IPagination<IComment>> | undefined;
+
+          if (deleteCache) {
+            queryClient.setQueryData(RQ_KEY(data.pageId), {
+              ...deleteCache,
+              pages: deleteCache.pages.map((page) => ({
+                ...page,
+                items: page.items.filter(
+                  (comment) => comment.id !== data.commentId,
+                ),
+              })),
+            });
+          }
+          break;
+        }
         case "addTreeNode":
           invalidateOnCreatePage(data.payload.data);
           break;
@@ -103,30 +157,6 @@ export const useQuerySubscription = () => {
           });
           break;
         }
-        case "resolveComment": {
-          const currentComments = queryClient.getQueryData(
-            RQ_KEY(data.pageId),
-          ) as IPagination<IComment>;
-
-          if (currentComments && currentComments.items) {
-            const updatedComments = currentComments.items.map((comment) =>
-              comment.id === data.commentId
-                ? { 
-                    ...comment, 
-                    resolvedAt: data.resolvedAt, 
-                    resolvedById: data.resolvedById, 
-                    resolvedBy: data.resolvedBy 
-                  }
-                : comment,
-            );
-            
-            queryClient.setQueryData(RQ_KEY(data.pageId), {
-              ...currentComments,
-              items: updatedComments,
-            });
-          }
-          break;
-        }
       }
     });
   }, [queryClient, socket]);