refactor react-query usage

This commit is contained in:
Philipinho
2023-11-13 17:48:32 +00:00
parent dc65fbafa4
commit fb057b7801
22 changed files with 286 additions and 274 deletions

View File

@ -1,34 +1,22 @@
import { useParams } from 'react-router-dom';
import { useAtom } from 'jotai';
import { commentsAtom } from '@/features/comment/atoms/comment-atom';
import React, { useEffect } from 'react';
import { getPageComments } from '@/features/comment/services/comment-service';
import React from 'react';
import classes from '@/features/comment/components/comment.module.css';
import { Text } from '@mantine/core';
import CommentList from '@/features/comment/components/comment-list';
import { useCommentsQuery } from '@/features/comment/queries/comment';
export default function Comments() {
const { pageId } = useParams();
const [comments, setComments] = useAtom(commentsAtom(pageId));
const { data, isLoading, isError } = useCommentsQuery(pageId);
useEffect(() => {
const fetchComments = async () => {
try {
const response = await getPageComments(pageId);
setComments(response);
} catch (error) {
console.error('Failed to fetch comments:', error);
}
};
fetchComments();
}, [pageId]);
if (isLoading) {
return <></>;
}
return (
<div className={classes.wrapper}>
<Text mb="md" fw={500}>Comments</Text>
<CommentList comments={comments} />
{data ? <CommentList comments={data} /> : 'No comments yet'}
</div>
);
}