* 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

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",
});
},
});
}