feat(): Adding like page support and refresh the data

Author: ar1603

src/screens/articles/components/CommentBox.tsx

@@ -12,7 +12,7 @@ import { useAddComment, useGetComments } from '@services';
 import { useMemo, useState } from 'react';
 
 const CommentBox = ({ articleKey }: { articleKey: string }) => {
-  const { data, refetch } = useGetComments(articleKey);
+  const { data } = useGetComments(articleKey);
   const { mutate } = useAddComment();
 
   const comments = useMemo(() => (data as any)?.data?.rows, [data]);
@@ -36,7 +36,6 @@ const CommentBox = ({ articleKey }: { articleKey: string }) => {
       },
     });
     setState({ email: '', name: '', comment: '' });
-    refetch();
   };
 
   return (

src/screens/articles/components/MarkdownViewer.tsx

@@ -39,7 +39,12 @@ const MarkdownViewer = ({ articleKey }: { articleKey: string }) => {
         <MdPreview mdString={mdString ?? ''} />
         <CommentBox articleKey={articleKey} />
       </Box>
-      <SideViewer mdString={mdString ?? ''} likes={likes} views={views} />
+      <SideViewer
+        mdString={mdString ?? ''}
+        likes={likes}
+        views={views}
+        articleKey={articleKey}
+      />
     </HStack>
   );
 };

src/screens/articles/components/SideViewer.tsx

@@ -4,15 +4,17 @@ import { HEADING_TYPE_REGEX } from './constants';
 import { useLikeArticleData } from '@services';
 
 const SideViewer = ({
+  articleKey,
   mdString,
   likes,
   views,
 }: {
+  articleKey: string;
   mdString: string;
   likes: number;
   views: number;
 }) => {
-  const { mutate } = useLikeArticleData();
+  const { mutate: likeArticle } = useLikeArticleData();
   // Extract headings from the markdown string and remove dots.
   const headings = useMemo(
     () =>
@@ -59,7 +61,7 @@ const SideViewer = ({
       <Divider />
 
       <HStack w={'100%'} justifyContent={'space-evenly'}>
-        <Button size={'sm'} onClick={mutate}>
+        <Button size={'sm'} onClick={() => likeArticle({ articleKey })}>
           Like Article👍
         </Button>
         <Button

src/services/backend/articles/likePageArticleData.ts

@@ -1,6 +1,7 @@
 import { PostRequest } from '../client/client';
 import { LIKE_ARTICLE_URL } from './constants';
 
-const getArticlesData = async () => PostRequest(LIKE_ARTICLE_URL, {});
+const getArticlesData = async (articleKey: unknown) =>
+  PostRequest(LIKE_ARTICLE_URL, articleKey);
 
 export default getArticlesData;

src/services/hooks/articles/useAddComment.tsx

@@ -9,14 +9,16 @@ const useAddComment = () => {
   return useCallSBMutation({
     method: (data) => addComment(data),
     mutationOptions: {
-      onSuccess: () => {
+      onSuccess: (_data, variables: any) => {
         toast({
           title: 'Comment added.',
           status: 'success',
           duration: 3000,
           isClosable: true,
         });
-        queryClient.invalidateQueries({ queryKey: ['comments'] });
+        queryClient.invalidateQueries({
+          queryKey: ['comments', variables.articleKey],
+        });
       },
       onError: () => {
         toast({

src/services/hooks/articles/useLikeArticleData.tsx

@@ -1,19 +1,24 @@
 import { useToast } from '@chakra-ui/react';
 import { likePageArticleData } from '../../backend';
 import { useCallSBMutation } from '../common';
+import { useQueryClient } from '@tanstack/react-query';
 
 const useLikeArticleData = () => {
   const toast = useToast();
+  const queryClient = useQueryClient();
   return useCallSBMutation({
-    method: () => likePageArticleData(),
+    method: (articleKey) => likePageArticleData(articleKey),
     mutationOptions: {
-      onSuccess: () => {
+      onSuccess: (_data, variable: any) => {
         toast({
           title: 'Article Liked.',
           status: 'success',
           duration: 3000,
           isClosable: true,
         });
+        queryClient.invalidateQueries({
+          queryKey: ['article', variable.articleKey],
+        });
       },
       onError: () => {
         toast({