feat(): Adding the update article feature

Author: ar1603

src/assets/icons/Common/RefreshIcon.tsx

@@ -0,0 +1,16 @@
+import { SVGProps } from 'react';
+const RefreshIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    width="1em"
+    height="1em"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="M17.65 6.35A7.96 7.96 0 0 0 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08A5.99 5.99 0 0 1 12 18c-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4z"
+    ></path>
+  </svg>
+);
+export default RefreshIcon;

src/assets/icons/Common/index.ts

@@ -5,6 +5,7 @@ export { default as MusicIcon } from './Music';
 export { default as MusicOffIcon } from './MusicOff';
 export { default as ArrowIcon } from './ArrowIcon';
 export { default as RobotIcon } from './Robot';
+export { default as RefreshIcon } from './RefreshIcon';
 export { default as LinkedInIcon } from './LinkedInIcon';
 export { default as GithubIcon } from './GithubIcon';
 export { default as GetInTouch } from './GetInTouch';

src/components/MdPreview/css/Markdown.module.css

@@ -17,21 +17,25 @@
 
 .markdown h3 {
   cursor: pointer;
-  font-size: 1.2rem;
+  font-size: 1.4rem;
   font-weight: 500;
   color: #ffffffa0;
 }
 
 .markdown h2 {
   cursor: pointer;
-  font-size: 1.6rem;
+  font-size: 1.8rem;
   font-weight: 700;
   margin-top: 2rem;
   color: #fffffff0;
 }
 
 .markdown h1 {
-  display: none;
+  cursor: pointer;
+  font-size: 2.4rem;
+  font-weight: 700;
+  margin-top: 2rem;
+  color: #fffffff0;
 }
 
 .markdown div ul {

src/screens/articleEditor/ArticleEditor.tsx

@@ -1,37 +1,57 @@
-import { Box, Button, HStack, Input, Text, VStack } from '@chakra-ui/react';
-import { MDXEditor } from '@mdxeditor/editor';
-import { ALL_PLUGINS } from './AllPlugins';
+import {
+  Box,
+  Button,
+  Divider,
+  HStack,
+  Input,
+  Radio,
+  RadioGroup,
+  Text,
+  Textarea,
+  VStack,
+} from '@chakra-ui/react';
 import '@mdxeditor/editor/style.css';
-import { ArticleCard, useCursor } from '@components';
+import { ArticleCard, MdPreview, useCursor } from '@components';
 import { useCallback, useLayoutEffect, useState } from 'react';
 import { ARTICLE_DEFAULT } from './constants';
 import { ArticleWithContent } from './types';
 import { getRequestObject, isValidArticle } from './utils';
-import { useAddArticle, useGetEditorArticleData } from '@services';
-import ArticlePreviewDrawer from './ArticlePreviewDrawar';
+import {
+  useAddArticle,
+  useGetEditorArticleData,
+  useUpdateArticle,
+} from '@services';
 
 const ArticleEditor = () => {
   const { setCursorType } = useCursor();
   const [articleKey, setArticleKey] = useState<string>('');
+  const [articleType, setArticleType] = useState<'New' | 'Update'>('New');
   const [queryArticleKey, setQueryArticleKey] = useState<string>('');
   const [state, setState] = useState<ArticleWithContent>(ARTICLE_DEFAULT);
   const { data, isPending } = useGetEditorArticleData(queryArticleKey);
-  const { mutate } = useAddArticle();
+  const { mutate: addArticleMutation } = useAddArticle();
+  const { mutate: updateArticleMutation } = useUpdateArticle();
 
   useLayoutEffect(() => {
     setCursorType('none');
   }, [setCursorType]);
 
   const onSubmit = useCallback(() => {
-    mutate(getRequestObject(state));
-    console.log('Submitting article', state);
-  }, [mutate, state]);
+    console.log('State', articleType);
+
+    if (articleType === 'New') {
+      addArticleMutation(getRequestObject(state));
+      return;
+    }
+
+    updateArticleMutation(getRequestObject(state));
+  }, [addArticleMutation, articleType, state, updateArticleMutation]);
 
   useLayoutEffect(() => {
     if (data) {
-      console.log('Data', (data as any)?.data.rows[0]);
-      console.log('state', state);
-      setState((data as any)?.data.rows[0]);
+      const dataFromReq = (data as any)?.data.rows[0];
+      setState({ ...dataFromReq, author: JSON.parse(dataFromReq.author).name });
+      setQueryArticleKey('');
     }
   }, [data, state]);
 
@@ -55,6 +75,15 @@ const ArticleEditor = () => {
             >
               Article editor
             </Text>
+            <RadioGroup
+              value={articleType}
+              onChange={(value) => {
+                setArticleType(value as 'New' | 'Update');
+              }}
+            >
+              <Radio value="New">New Article</Radio>
+              <Radio value="Update">Update Article</Radio>
+            </RadioGroup>
             <Button
               onClick={() => {
                 setState(ARTICLE_DEFAULT);
@@ -144,7 +173,7 @@ const ArticleEditor = () => {
             onClick={onSubmit}
             isDisabled={!isValidArticle(state)}
           >
-            Submit Article
+            {articleType === 'New' ? 'Submit' : 'Update'} Article
           </Button>
         </VStack>
         <VStack borderLeft={'1px solid gray'} p={1}>
@@ -165,29 +194,38 @@ const ArticleEditor = () => {
           <ArticleCard {...state} />
         </VStack>
       </HStack>
-      <Box w={'100%'} h={'100%'} borderRadius={'md'}>
-        <ArticlePreviewDrawer mdString={state.md_data} />
-      </Box>
+      <Divider />
+      <Text fontSize={'xl'} fontWeight={'bold'} color={'white'}>
+        Article Content
+      </Text>
       <HStack
         width={'100%'}
+        height={'100%'}
         border={'1px solid white'}
         borderRadius={'md'}
         p={2}
         className=" min-h-[100vh]"
         align={'start'}
       >
-        <MDXEditor
-          className="bg-white"
-          markdown={state.md_data}
-          plugins={ALL_PLUGINS}
-          spellCheck={true}
-          contentEditableClassName="min-h-[100vh] px-6 py-6 prose"
-          onChange={(md) => {
+        <Box
+          w={'50%'}
+          height={'100%'}
+          minH={'100vh'}
+          borderRight={'1px solid white'}
+        >
+          <MdPreview mdString={state.md_data} />
+        </Box>
+        <Textarea
+          w={'50%'}
+          h={'100%'}
+          minH={'100vh'}
+          value={state.md_data}
+          onChange={(e) =>
             setState((prev) => ({
               ...prev,
-              md_data: md,
-            }));
-          }}
+              md_data: e.target.value,
+            }))
+          }
         />
       </HStack>
     </VStack>

src/screens/common/NavigationBar.tsx

@@ -1,7 +1,7 @@
-import { Box, HStack, Img, Spinner, Text } from '@chakra-ui/react';
+import { Box, HStack, IconButton, Img, Text } from '@chakra-ui/react';
 import { LinkButton, useCursor } from '@components';
 import AmitRaikwarLogo from '@assets/images/AmitRaikwarLogo.png';
-import { SearchIcon } from '@assets';
+import { RefreshIcon, SearchIcon } from '@assets';
 import { useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation, useNavigate } from 'react-router-dom';
@@ -36,7 +36,7 @@ const ArticleLink = {
 
 const NavigationBar = () => {
   const moveToTop = useMoveToTop();
-  const { data } = usePingTest();
+  const { data, refetch, isPending } = usePingTest();
   const location = useLocation();
   const pathName = location.pathname;
   const navigate = useNavigate();
@@ -138,13 +138,22 @@ const NavigationBar = () => {
       <HStack
         onClick={() => {}} // eslint-disable-line
       >
-        <Box
+        <HStack
           display={pathName === BASE_URL_ROUTE ? 'none' : 'flex'}
           border={'1px solid gray'}
+          p={2}
         >
-          <Text color={'white'} fontSize={'lg'} p={2}>
+          <IconButton
+            size={'sm'}
+            aria-label={''}
+            icon={<RefreshIcon />}
+            isDisabled={isPending}
+            isLoading={isPending}
+            onClick={() => refetch()}
+          />
+          <Text color={'white'} fontSize={'lg'}>
             Server :{' '}
-            {isUndefined(data) ? (
+            {isUndefined(data) || isPending ? (
               <>
                 <Box
                   as="span"
@@ -154,7 +163,6 @@ const NavigationBar = () => {
                   bg={'red.500'}
                   display="inline-block"
                 />
-                <Spinner size="xs" color="white" />
               </>
             ) : (
               <Box
@@ -167,7 +175,7 @@ const NavigationBar = () => {
               />
             )}
           </Text>
-        </Box>
+        </HStack>
         <Box
           onMouseEnter={onMouseEnter}
           onMouseLeave={onMouseLeave}

src/services/backend/articles/index.ts

@@ -7,5 +7,6 @@ export { default as addComment } from './addComment';
 export { default as getComments } from './getComments';
 
 export { default as getEditorArticleData } from './getEditorArticleData';
+export { default as updateArticle } from './updateArticle';
 
 export { default as pingTest } from './pingTest';

src/services/backend/articles/updateArticle.ts

@@ -0,0 +1,7 @@
+import { PostRequest } from '../client/client';
+import { UPDATE_ARTICLE_URL } from './constants';
+
+const updateArticle = async (data: unknown) =>
+  PostRequest(UPDATE_ARTICLE_URL, data);
+
+export default updateArticle;

src/services/hooks/articles/index.ts

@@ -5,5 +5,6 @@ export { default as useLikeArticleData } from './useLikeArticleData';
 export { default as useAddArticle } from './useAddArticle';
 export { default as useAddComment } from './useAddComment';
 export { default as useGetComments } from './useGetComments';
+export { default as useUpdateArticle } from './useUpdateArticle';
 
 export { default as usePingTest } from './usePingTest';

src/services/hooks/articles/useUpdateArticle.tsx

@@ -0,0 +1,30 @@
+import { useToast } from '@chakra-ui/react';
+import { updateArticle } from '../../backend';
+import { useCallSBMutation } from '../common';
+
+const useUpdateArticle = () => {
+  const toast = useToast();
+  return useCallSBMutation({
+    method: (data) => updateArticle(data),
+    mutationOptions: {
+      onSuccess: () => {
+        toast({
+          title: 'Article updated.',
+          status: 'success',
+          duration: 3000,
+          isClosable: true,
+        });
+      },
+      onError: () => {
+        toast({
+          title: 'Error.',
+          status: 'error',
+          duration: 3000,
+          isClosable: true,
+        });
+      },
+    },
+  });
+};
+
+export default useUpdateArticle;