Ryan/docmost
1
0
Fork 0
mirror of https://github.com/docmost/docmost.git synced 2025-11-19 22:51:09 +10:00
Code Issues Packages Projects Releases Wiki Activity

fixes

Browse Source 
* fix comments
* fix page history
* fix aside width on smaller screens
This commit is contained in:
Philipinho
2024-04-23 22:07:00 +01:00
parent 2af1fe3c40
commit b91c3ede1e
15 changed files with 611 additions and 464 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
apps/client/src/features/comment/components/comment-dialog.tsx
View File

@ -57,8 +57,8 @@ function CommentDialog({ editor, pageId }: CommentDialogProps) {
await createCommentMutation.mutateAsync(commentData);
editor
.chain()
.setContent(createdComment.id)
// @ts-ignore
.setComment(createdComment.id)
.unsetCommentDecoration()
.run();
setActiveCommentId(createdComment.id);
@ -75,7 +75,7 @@ function CommentDialog({ editor, pageId }: CommentDialogProps) {
}
};
const handleCommentEditorChange = (newContent) => {
const handleCommentEditorChange = (newContent: any) => {
setComment(newContent);
};
@ -93,7 +93,7 @@ function CommentDialog({ editor, pageId }: CommentDialogProps) {
>
<Stack gap={2}>
<Group>
<Avatar size="sm" c="blue">
<Avatar size="sm" color="blue">
{currentUser.user.name.charAt(0)}
</Avatar>
<div style={{ flex: 1 }}>

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

@ -1,16 +1,24 @@
import React, { useState, useRef } from 'react';
import { useParams } from 'react-router-dom';
import { Divider, Paper } from '@mantine/core';
import CommentListItem from '@/features/comment/components/comment-list-item';
import { useCommentsQuery, useCreateCommentMutation } from '@/features/comment/queries/comment-query';
import React, { useState, useRef } from "react";
import { useParams } from "react-router-dom";
import { Divider, Paper } from "@mantine/core";
import CommentListItem from "@/features/comment/components/comment-list-item";
import {
useCommentsQuery,
useCreateCommentMutation,
} from "@/features/comment/queries/comment-query";
import CommentEditor from '@/features/comment/components/comment-editor';
import CommentActions from '@/features/comment/components/comment-actions';
import { useFocusWithin } from '@mantine/hooks';
import CommentEditor from "@/features/comment/components/comment-editor";
import CommentActions from "@/features/comment/components/comment-actions";
import { useFocusWithin } from "@mantine/hooks";
import { IComment } from "@/features/comment/types/comment.types.ts";
function CommentList() {
const { pageId } = useParams();
const { data: comments, isLoading: isCommentsLoading, isError } = useCommentsQuery(pageId);
const {
data: comments,
isLoading: isCommentsLoading,
isError,
} = useCommentsQuery(pageId);
const [isLoading, setIsLoading] = useState(false);
const createCommentMutation = useCreateCommentMutation();
@ -22,12 +30,12 @@ function CommentList() {
return <div>Error loading comments.</div>;
}
if (!comments || comments.length === 0) {
if (!comments || comments.items.length === 0) {
return <>No comments yet.</>;
}
const renderComments = (comment) => {
const handleAddReply = async (commentId, content) => {
const renderComments = (comment: IComment) => {
const handleAddReply = async (commentId: string, content: string) => {
try {
setIsLoading(true);
const commentData = {
@ -38,14 +46,22 @@ function CommentList() {
await createCommentMutation.mutateAsync(commentData);
} catch (error) {
console.error('Failed to post comment:', error);
console.error("Failed to post comment:", error);
} finally {
setIsLoading(false);
}
};
return (
<Paper shadow="sm" radius="md" p="sm" mb="sm" withBorder key={comment.id} data-comment-id={comment.id}>
<Paper
shadow="sm"
radius="md"
p="sm"
mb="sm"
withBorder
key={comment.id}
data-comment-id={comment.id}
>
<div>
<CommentListItem comment={comment} />
<ChildComments comments={comments} parentId={comment.id} />
@ -53,26 +69,34 @@ function CommentList() {
<Divider my={4} />
<CommentEditorWithActions commentId={comment.id} onSave={handleAddReply} isLoading={isLoading} />
<CommentEditorWithActions
commentId={comment.id}
onSave={handleAddReply}
isLoading={isLoading}
/>
</Paper>
);
};
return (
<>
{comments.filter(comment => comment.parentCommentId === null).map(renderComments)}
{comments.items
.filter((comment) => comment.parentCommentId === null)
.map(renderComments)}
</>
);
}
const ChildComments = ({ comments, parentId }) => {
const getChildComments = (parentId) => {
return comments.filter(comment => comment.parentCommentId === parentId);
const getChildComments = (parentId: string) => {
return comments.items.filter(
(comment: IComment) => comment.parentCommentId === parentId,
);
};
return (
<div>
{getChildComments(parentId).map(childComment => (
{getChildComments(parentId).map((childComment) => (
<div key={childComment.id}>
<CommentListItem comment={childComment} />
<ChildComments comments={comments} parentId={childComment.id} />
@ -83,23 +107,26 @@ const ChildComments = ({ comments, parentId }) => {
};
const CommentEditorWithActions = ({ commentId, onSave, isLoading }) => {
const [content, setContent] = useState('');
const [content, setContent] = useState("");
const { ref, focused } = useFocusWithin();
const commentEditorRef = useRef(null);
const handleSave = () => {
onSave(commentId, content);
setContent('');
setContent("");
commentEditorRef.current?.clearContent();
};
return (
<div ref={ref}>
<CommentEditor ref={commentEditorRef} onUpdate={setContent} editable={true} />
<CommentEditor
ref={commentEditorRef}
onUpdate={setContent}
editable={true}
/>
{focused && <CommentActions onSave={handleSave} isLoading={isLoading} />}
</div>
);
};
export default CommentList;

63
apps/client/src/features/comment/queries/comment-query.ts
View File

@ -1,16 +1,28 @@
import { useMutation, useQuery, useQueryClient, UseQueryResult } from '@tanstack/react-query';
import {
useMutation,
useQuery,
useQueryClient,
UseQueryResult,
} from "@tanstack/react-query";
import {
createComment,
deleteComment, getPageComments,
deleteComment,
getPageComments,
resolveComment,
updateComment,
} from '@/features/comment/services/comment-service';
import { IComment, IResolveComment } from '@/features/comment/types/comment.types';
import { notifications } from '@mantine/notifications';
} from "@/features/comment/services/comment-service";
import {
IComment,
IResolveComment,
} from "@/features/comment/types/comment.types";
import { notifications } from "@mantine/notifications";
import { IPagination } from "@/lib/types.ts";
export const RQ_KEY = (pageId: string) => ['comments', pageId];
export const RQ_KEY = (pageId: string) => ["comments", pageId];
export function useCommentsQuery(pageId: string): UseQueryResult<IComment[], Error> {
export function useCommentsQuery(
pageId: string,
): UseQueryResult<IPagination<IComment>, Error> {
return useQuery({
queryKey: RQ_KEY(pageId),
queryFn: () => getPageComments(pageId),
@ -27,14 +39,14 @@ export function useCreateCommentMutation() {
const newComment = data;
let comments = queryClient.getQueryData(RQ_KEY(data.pageId));
if (comments) {
comments = prevComments => [...prevComments, newComment];
queryClient.setQueryData(RQ_KEY(data.pageId), comments);
// comments = prevComments => [...prevComments, newComment];
//queryClient.setQueryData(RQ_KEY(data.pageId), comments);
}
notifications.show({ message: 'Comment created successfully' });
notifications.show({ message: "Comment created successfully" });
},
onError: (error) => {
notifications.show({ message: 'Error creating comment', color: 'red' });
notifications.show({ message: "Error creating comment", color: "red" });
},
});
}
@ -43,10 +55,10 @@ export function useUpdateCommentMutation() {
return useMutation<IComment, Error, Partial<IComment>>({
mutationFn: (data) => updateComment(data),
onSuccess: (data) => {
notifications.show({ message: 'Comment updated successfully' });
notifications.show({ message: "Comment updated successfully" });
},
onError: (error) => {
notifications.show({ message: 'Failed to update comment', color: 'red' });
notifications.show({ message: "Failed to update comment", color: "red" });
},
});
}
@ -59,13 +71,13 @@ export function useDeleteCommentMutation(pageId?: string) {
onSuccess: (data, variables) => {
let comments = queryClient.getQueryData(RQ_KEY(pageId)) as IComment[];
if (comments) {
comments = comments.filter(comment => comment.id !== variables);
queryClient.setQueryData(RQ_KEY(pageId), comments);
// comments = comments.filter(comment => comment.id !== variables);
// queryClient.setQueryData(RQ_KEY(pageId), comments);
}
notifications.show({ message: 'Comment deleted successfully' });
notifications.show({ message: "Comment deleted successfully" });
},
onError: (error) => {
notifications.show({ message: 'Failed to delete comment', color: 'red' });
notifications.show({ message: "Failed to delete comment", color: "red" });
},
});
}
@ -76,21 +88,26 @@ export function useResolveCommentMutation() {
return useMutation({
mutationFn: (data: IResolveComment) => resolveComment(data),
onSuccess: (data: IComment, variables) => {
const currentComments = queryClient.getQueryData(RQ_KEY(data.pageId)) as IComment[];
const currentComments = queryClient.getQueryData(
RQ_KEY(data.pageId),
) as IComment[];
if (currentComments) {
const updatedComments = currentComments.map((comment) =>
comment.id === variables.commentId ? { ...comment, ...data } : comment,
comment.id === variables.commentId
? { ...comment, ...data }
: comment,
);
queryClient.setQueryData(RQ_KEY(data.pageId), updatedComments);
}
notifications.show({ message: 'Comment resolved successfully' });
notifications.show({ message: "Comment resolved successfully" });
},
onError: (error) => {
notifications.show({ message: 'Failed to resolve comment', color: 'red' });
notifications.show({
message: "Failed to resolve comment",
color: "red",
});
},
});
}

34
apps/client/src/features/comment/services/comment-service.ts
View File

@ -1,8 +1,14 @@
import api from '@/lib/api-client';
import { IComment, IResolveComment } from '@/features/comment/types/comment.types';
import api from "@/lib/api-client";
import {
IComment,
IResolveComment,
} from "@/features/comment/types/comment.types";
import { IPagination } from "@/lib/types.ts";
export async function createComment(data: Partial<IComment>): Promise<IComment> {
const req = await api.post<IComment>('/comments/create', data);
export async function createComment(
data: Partial<IComment>,
): Promise<IComment> {
const req = await api.post<IComment>("/comments/create", data);
return req.data as IComment;
}
@ -11,21 +17,25 @@ export async function resolveComment(data: IResolveComment): Promise<IComment> {
return req.data as IComment;
}
export async function updateComment(data: Partial<IComment>): Promise<IComment> {
export async function updateComment(
data: Partial<IComment>,
): Promise<IComment> {
const req = await api.post<IComment>(`/comments/update`, data);
return req.data as IComment;
}
export async function getCommentById(id: string): Promise<IComment> {
const req = await api.post<IComment>('/comments/view', { id });
export async function getCommentById(commentId: string): Promise<IComment> {
const req = await api.post<IComment>("/comments/info", { commentId });
return req.data as IComment;
}
export async function getPageComments(pageId: string): Promise<IComment[]> {
const req = await api.post<IComment[]>('/comments', { pageId });
return req.data as IComment[];
export async function getPageComments(
pageId: string,
): Promise<IPagination<IComment>> {
const req = await api.post("/comments", { pageId });
return req.data;
}
export async function deleteComment(id: string): Promise<void> {
await api.post('/comments/delete', { id });
export async function deleteComment(commentId: string): Promise<void> {
await api.post("/comments/delete", { commentId });
}