feat(): Adding preload feature to update the articles

Author: ar1603

src/screens/articleEditor/ArticleEditor.tsx

@@ -2,16 +2,20 @@ import { Box, Button, HStack, Input, Text, VStack } from '@chakra-ui/react';
 import { MDXEditor } from '@mdxeditor/editor';
 import { ALL_PLUGINS } from './AllPlugins';
 import '@mdxeditor/editor/style.css';
-import { ArticleCard, MdPreview, useCursor } from '@components';
+import { ArticleCard, 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 } from '@services';
+import { useAddArticle, useGetEditorArticleData } from '@services';
+import ArticlePreviewDrawer from './ArticlePreviewDrawar';
 
 const ArticleEditor = () => {
   const { setCursorType } = useCursor();
+  const [articleKey, setArticleKey] = useState<string>('');
+  const [queryArticleKey, setQueryArticleKey] = useState<string>('');
   const [state, setState] = useState<ArticleWithContent>(ARTICLE_DEFAULT);
+  const { data, isPending } = useGetEditorArticleData(queryArticleKey);
   const { mutate } = useAddArticle();
 
   useLayoutEffect(() => {
@@ -23,8 +27,23 @@ const ArticleEditor = () => {
     console.log('Submitting article', state);
   }, [mutate, state]);
 
+  useLayoutEffect(() => {
+    if (data) {
+      console.log('Data', (data as any)?.data.rows[0]);
+      console.log('state', state);
+      setState((data as any)?.data.rows[0]);
+    }
+  }, [data, state]);
+
   return (
-    <VStack px={10} pt={20} width={'100vw'} rowGap={4} bg={'black'}>
+    <VStack
+      px={10}
+      pt={20}
+      width={'100vw'}
+      rowGap={4}
+      bg={'black'}
+      color={'gray.100'}
+    >
       <HStack width={'100%'} justifyContent={'space-between'} align={'start'}>
         <VStack w={'80%'} rowGap={4}>
           <HStack w={'100%'} justifyContent={'space-between'}>
@@ -37,7 +56,10 @@ const ArticleEditor = () => {
               Article editor
             </Text>
             <Button
-              onClick={() => setState(ARTICLE_DEFAULT)}
+              onClick={() => {
+                setState(ARTICLE_DEFAULT);
+                setQueryArticleKey('');
+              }}
               colorScheme={'red'}
             >
               Clear Article
@@ -125,13 +147,27 @@ const ArticleEditor = () => {
             Submit Article
           </Button>
         </VStack>
-        <ArticleCard
-          views={0}
-          likes={0}
-          last_updated={new Date().toISOString()}
-          {...state}
-        />
+        <VStack borderLeft={'1px solid gray'} p={1}>
+          <HStack>
+            <Input
+              placeholder="Article Key"
+              value={articleKey}
+              onChange={(e) => setArticleKey(e.target.value)}
+            />
+            <Button
+              isDisabled={isPending}
+              isLoading={isPending}
+              onClick={() => setQueryArticleKey(articleKey)}
+            >
+              Preload
+            </Button>
+          </HStack>
+          <ArticleCard {...state} />
+        </VStack>
       </HStack>
+      <Box w={'100%'} h={'100%'} borderRadius={'md'}>
+        <ArticlePreviewDrawer mdString={state.md_data} />
+      </Box>
       <HStack
         width={'100%'}
         border={'1px solid white'}
@@ -153,17 +189,6 @@ const ArticleEditor = () => {
             }));
           }}
         />
-        <Box w={'100%'} h={'100%'} bg={'gray.900'} borderRadius={'md'}>
-          <Text
-            textAlign={'center'}
-            color={'white'}
-            fontSize={'2xl'}
-            fontWeight={'bold'}
-          >
-            Preview
-          </Text>
-          <MdPreview mdString={state.md_data} />
-        </Box>
       </HStack>
     </VStack>
   );

src/screens/articleEditor/ArticlePreviewDrawar.tsx

@@ -0,0 +1,49 @@
+import {
+  Button,
+  Drawer,
+  DrawerOverlay,
+  DrawerContent,
+  DrawerCloseButton,
+  DrawerHeader,
+  DrawerBody,
+  useDisclosure,
+} from '@chakra-ui/react';
+import { MdPreview, Noise } from '@components';
+import { useRef } from 'react';
+
+const ArticlePreviewDrawer = ({ mdString }: { mdString: string }) => {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const btnRef = useRef<HTMLButtonElement>(null);
+
+  return (
+    <>
+      <Button ref={btnRef} onClick={onOpen}>
+        Preview Article
+      </Button>
+      <Drawer
+        size={'xl'}
+        isOpen={isOpen}
+        placement="right"
+        onClose={onClose}
+        finalFocusRef={btnRef}
+      >
+        <DrawerOverlay />
+        <DrawerContent
+          bg={'black'}
+          color={'white'}
+          border={'1px solid gray'}
+          borderRadius={10}
+        >
+          <Noise />
+          <DrawerCloseButton />
+          <DrawerHeader>Article Preview</DrawerHeader>
+          <DrawerBody p={0}>
+            <MdPreview mdString={mdString} />
+          </DrawerBody>
+        </DrawerContent>
+      </Drawer>
+    </>
+  );
+};
+
+export default ArticlePreviewDrawer;

src/screens/articleEditor/constants.ts

@@ -9,4 +9,7 @@ export const ARTICLE_DEFAULT: ArticleWithContent = {
   author: '',
   group_id: '',
   group_name: '',
+  views: 0,
+  likes: 0,
+  last_updated: '',
 };

src/screens/articleEditor/types.ts

@@ -7,4 +7,7 @@ export type ArticleWithContent = {
   author: string;
   group_id: string;
   group_name: string;
+  views: number;
+  likes: number;
+  last_updated: string;
 };

src/services/backend/articles/constants.ts

@@ -1,5 +1,5 @@
-export const LEARNING_BACKEND_URL = 'https://amitraikwar-services.onrender.com';
-// export const LEARNING_BACKEND_URL = 'http://localhost:3000';
+// export const LEARNING_BACKEND_URL = 'https://amitraikwar-services.onrender.com';
+export const LEARNING_BACKEND_URL = 'http://localhost:3000';
 
 // Query
 export const ALL_ARTICLES_URL = `/all_articles`;
@@ -12,3 +12,6 @@ export const ADD_ARTICLE_URL = `/add_article`;
 export const DELETE_ARTICLE_URL = `/delete_article`;
 export const UPDATE_ARTICLE_URL = `/update_article`;
 export const ADD_COMMENT_URL = `/add_comment`;
+
+// Editor
+export const EDITOR_ARTICLES_URL = `/get_editor_article`;

src/services/backend/articles/getEditorArticleData.ts

@@ -0,0 +1,11 @@
+import { GetRequest } from '../client/client';
+import { EDITOR_ARTICLES_URL } from './constants';
+import { StandardResponse } from './types';
+
+const getEditorArticleData = async (
+  articleKey: string,
+): Promise<StandardResponse> => {
+  return await GetRequest(EDITOR_ARTICLES_URL + '?articleKey=' + articleKey);
+};
+
+export default getEditorArticleData;

src/services/backend/articles/index.ts

@@ -5,3 +5,5 @@ export { default as likePageArticleData } from './likePageArticleData';
 export { default as addArticle } from './addArticle';
 export { default as addComment } from './addComment';
 export { default as getComments } from './getComments';
+
+export { default as getEditorArticleData } from './getEditorArticleData';

src/services/hooks/articles/index.ts

@@ -1,5 +1,6 @@
 export { default as useGetArticlesData } from './useGetAllArticlesData';
 export { default as useGetArticleData } from './useGetArticleData';
+export { default as useGetEditorArticleData } from './useGetEditorArticleData';
 export { default as useLikeArticleData } from './useLikeArticleData';
 export { default as useAddArticle } from './useAddArticle';
 export { default as useAddComment } from './useAddComment';

src/services/hooks/articles/useGetEditorArticleData.tsx

@@ -0,0 +1,19 @@
+import { isEmpty } from 'lodash';
+import { getEditorArticleData } from '../../backend';
+import { useCallQuery } from '../common';
+
+const useGetArticlesData = (articleKey: string) => {
+  return useCallQuery({
+    method: () =>
+      !isEmpty(articleKey)
+        ? getEditorArticleData(articleKey)
+        : Promise.resolve(undefined),
+    queryOptions: {
+      queryKey: ['editor_article', articleKey],
+      staleTime: 0,
+      gcTime: 0,
+    },
+  });
+};
+
+export default useGetArticlesData;