Ryan/docmost
1
0
Fork 0
mirror of https://github.com/docmost/docmost.git synced 2025-11-16 14:31:12 +10:00
Code Issues Packages Projects Releases Wiki Activity

feat: realtime comments (#1144)

Browse Source 
* init

* fix: close bubblemenu after comment and wait before scroll

* scroll to comment when click

* highlight comment animation
This commit is contained in:
fuscodev
2025-05-16 17:18:23 +02:00
committed by GitHub
parent 00f4588c21
commit 1413033568
9 changed files with 96 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
apps/client/src/features/comment/components/comment-list.tsx
View File

@ -14,6 +14,7 @@ import { usePageQuery } from "@/features/page/queries/page-query.ts";
import { IPagination } from "@/lib/types.ts";
import { extractPageSlugId } from "@/lib";
import { useTranslation } from "react-i18next";
import { useQueryEmit } from "@/features/websocket/use-query-emit";
function CommentList() {
const { t } = useTranslation();
@ -26,6 +27,7 @@ function CommentList() {
} = useCommentsQuery({ pageId: page?.id, limit: 100 });
const createCommentMutation = useCreateCommentMutation();
const [isLoading, setIsLoading] = useState(false);
const emit = useQueryEmit();
const handleAddReply = useCallback(
async (commentId: string, content: string) => {
@ -38,6 +40,11 @@ function CommentList() {
};
await createCommentMutation.mutateAsync(commentData);
emit({
operation: "invalidateComment",
pageId: page?.id,
});
} catch (error) {
console.error("Failed to post comment:", error);
} finally {
@ -59,8 +66,8 @@ function CommentList() {
data-comment-id={comment.id}
>
<div>
<CommentListItem comment={comment} />
<MemoizedChildComments comments={comments} parentId={comment.id} />
<CommentListItem comment={comment} pageId={page?.id} />
<MemoizedChildComments comments={comments} parentId={comment.id} pageId={page?.id} />
</div>
<Divider my={4} />
@ -99,8 +106,9 @@ function CommentList() {
interface ChildCommentsProps {
comments: IPagination<IComment>;
parentId: string;
pageId: string;
}
const ChildComments = ({ comments, parentId }: ChildCommentsProps) => {
const ChildComments = ({ comments, parentId, pageId }: ChildCommentsProps) => {
const getChildComments = useCallback(
(parentId: string) =>
comments.items.filter(
@ -113,10 +121,11 @@ const ChildComments = ({ comments, parentId }: ChildCommentsProps) => {
<div>
{getChildComments(parentId).map((childComment) => (
<div key={childComment.id}>
<CommentListItem comment={childComment} />
<CommentListItem comment={childComment} pageId={pageId} />
<MemoizedChildComments
comments={comments}
parentId={childComment.id}
pageId={pageId}
/>
</div>
))}