feat(): Adding comments feature

Author: ar1603

src/screens/articles/ArticlesScreen.tsx

@@ -5,6 +5,7 @@ import { useLocation, useNavigate } from 'react-router-dom';
 import { MarkdownViewer } from './components';
 import { useMemo, useState } from 'react';
 import { groupBy } from 'lodash';
+import { BASE_NAV_ROUTE } from '@router';
 
 const ArticlesScreen = () => {
   const { data } = useGetArticlesData();
@@ -76,7 +77,7 @@ const ArticlesScreen = () => {
                 _hover={{ bg: 'gray.600', cursor: 'pointer', color: 'violet' }}
                 onClick={() => {
                   if (secondPath) {
-                    navigate(-1);
+                    navigate(BASE_NAV_ROUTE + 'articles');
                   }
                   setCategory(group_name);
                 }}

src/screens/articles/components/CommentBox.tsx

@@ -0,0 +1,46 @@
+import {
+  Box,
+  Heading,
+  Divider,
+  Input,
+  HStack,
+  Button,
+  VStack,
+} from '@chakra-ui/react';
+
+const CommentBox = ({
+  comments,
+}: {
+  comments: { comment: string; user: string; email: string }[];
+}) => {
+  return (
+    <Box
+      w={'100%'}
+      h={'100%'}
+      bg={'gray.900'}
+      borderRadius={'md'}
+      p={4}
+      color={'white'}
+      id="comments"
+    >
+      <Heading size={'md'}>Comments</Heading>
+      <Divider />
+      {comments?.map((comment, index) => (
+        <Box key={index} p={2}>
+          <Heading size={'sm'}>{comment.user}</Heading>
+          <Box>{comment.comment}</Box>
+        </Box>
+      ))}
+      <VStack p={4} borderRadius={'md'} mt={4} rowGap={5}>
+        <HStack columnGap={4} w={'100%'}>
+          <Input type="text" placeholder="Enter email" />
+          <Input type="text" placeholder="Enter Name" />
+        </HStack>
+        <Input placeholder="Add a comment" />
+        <Button alignSelf={'start'}>Submit</Button>
+      </VStack>
+    </Box>
+  );
+};
+
+export default CommentBox;

src/screens/articles/components/MarkdownViewer.tsx

@@ -2,7 +2,8 @@ import { Box, HStack } from '@chakra-ui/react';
 import { LoadingSpinner, MdPreview } from '@components';
 import { useGetArticleData } from '@services';
 import { useMemo } from 'react';
-import SideViewer from './Header';
+import SideViewer from './SideViewer';
+import CommentBox from './CommentBox';
 
 const MarkdownViewer = ({ articleKey }: { articleKey: string }) => {
   const { data } = useGetArticleData(articleKey);
@@ -12,6 +13,11 @@ const MarkdownViewer = ({ articleKey }: { articleKey: string }) => {
     [data],
   );
 
+  const comments = useMemo(
+    () => (data as any)?.data?.rows?.[0].comments,
+    [data],
+  );
+
   if (!data) {
     return <LoadingSpinner />;
   }
@@ -26,6 +32,7 @@ const MarkdownViewer = ({ articleKey }: { articleKey: string }) => {
     >
       <Box width={'80%'} id="md-preview-flex-box">
         <MdPreview mdString={mdString ?? ''} />
+        <CommentBox comments={comments} />
       </Box>
       <SideViewer mdString={mdString ?? ''} />
     </HStack>

…c/screens/articles/components/Header.tsx …reens/articles/components/SideViewer.tsxsrc/screens/articles/components/Header.tsx renamed to src/screens/articles/components/SideViewer.tsx src/screens/articles/components/Header.tsx renamed to src/screens/articles/components/SideViewer.tsx

@@ -1,8 +1,10 @@
-import { Box, Text } from '@chakra-ui/react';
+import { Box, Button, Text } from '@chakra-ui/react';
 import { useMemo } from 'react';
 import { HEADING_TYPE_REGEX } from './constants';
+import { useLikeArticleData } from '@services';
 
 const SideViewer = ({ mdString }: { mdString: string }) => {
+  const { mutate } = useLikeArticleData();
   // Extract headings from the markdown string and remove dots.
   const headings = useMemo(
     () =>
@@ -37,7 +39,27 @@ const SideViewer = ({ mdString }: { mdString: string }) => {
       width={'20%'}
       overflowY={'scroll'}
       scrollSnapType={'y mandatory'}
+      display={'flex'}
+      px={2}
+      rowGap={1}
+      flexDir={'column'}
     >
+      <Button size={'sm'} onClick={mutate}>
+        Like 👍
+      </Button>
+      <Button
+        size={'sm'}
+        as={'a'}
+        href={'#comments'}
+        onClick={() =>
+          document.getElementById('comments')?.scrollIntoView({
+            behavior: 'smooth',
+            block: 'center',
+          })
+        }
+      >
+        Comments 💬
+      </Button>
       {headings.map(({ marginStart, itemName, link }, index) => (
         <>
           <Text

…/services/backend/learnings/constants.ts …c/services/backend/articles/constants.tssrc/services/backend/learnings/constants.ts renamed to src/services/backend/articles/constants.ts src/services/backend/learnings/constants.ts renamed to src/services/backend/articles/constants.ts

@@ -1,2 +1,3 @@
 export { default as getArticlesData } from './getAllArticlesData';
 export { default as getArticleData } from './getArticleData';
+export { default as likePageArticleData } from './likePageArticleData';