fix(): Fixing the markdown links issue

Author: ar1603

src/components/MdPreview/MdPreview.tsx

@@ -5,7 +5,7 @@ import { MdPreviewProps } from './types';
 
 const MdPreview = ({ mdString }: MdPreviewProps) => {
   return (
-    <Box width={'100%'} maxW={'70vw'} data-color-mode={'dark'}>
+    <Box width={'100%'} maxW={'70vw'} data-color-mode={'dark'} zIndex={1}>
       <MarkdownPreview className={markdownStyle.markdown} source={mdString} />
     </Box>
   );

src/components/MdPreview/__tests__/__snapshots__/MdPreview.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`MdPreview should render MdPreview 1`] = `
 <div>
   <div
-    class="css-1npfbn5"
+    class="css-uf6hy9"
     data-color-mode="dark"
   >
     <markdown-preview
@@ -16,7 +16,7 @@ exports[`MdPreview should render MdPreview 1`] = `
 exports[`MdPreview should render MdPreview 2`] = `
 <div>
   <div
-    class="css-1npfbn5"
+    class="css-uf6hy9"
     data-color-mode="dark"
   >
     <markdown-preview

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

@@ -5,13 +5,14 @@
   border-radius: 6px;
   font-size: 1rem;
   color: #fffffff0;
+  z-index: 10;
   background-color: transparent;
   line-height: 1.5;
 }
 
 .markdown a {
   color: #ffffffa0;
-  text-decoration: none;
+  text-decoration: underline;
   font-weight: 600;
 }
 

src/components/Noise/Noise.tsx

@@ -1,7 +1,8 @@
 const Noise = ({ type = 'bg' }: { type?: 'bg' | 'fg' }) => {
   return (
     <div
-      className={`${type === 'bg' ? 'absolute inset-0 w-full h-full' : 'w-[100%] h-[100%]'} transform opacity-10 [mask-image:radial-gradient(#fff,transparent,75%)]`}
+      className={`${type === 'bg' ? 'absolute inset-0 w-full h-full' : 'w-[100%] h-[100%]'} transform opacity-10 [mask-image:radial-gradient(#fff,transparent,75%)]
+      z-0 pointer-events-none`}
       style={{
         backgroundImage: 'url(/noise.webp)',
         backgroundSize: '15%',

src/screens/articleEditor/ArticleEditor.tsx

@@ -1,4 +1,10 @@
 import {
+  AlertDialog,
+  AlertDialogBody,
+  AlertDialogContent,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogOverlay,
   Box,
   Button,
   Divider,
@@ -8,6 +14,7 @@ import {
   RadioGroup,
   Text,
   Textarea,
+  useDisclosure,
   VStack,
 } from '@chakra-ui/react';
 import '@mdxeditor/editor/style.css';
@@ -18,9 +25,77 @@ import { ArticleWithContent } from './types';
 import { getRequestObject, isValidArticle } from './utils';
 import {
   useAddArticle,
+  useDeleteArticle,
   useGetEditorArticleData,
   useUpdateArticle,
 } from '@services';
+import React from 'react';
+import { isEmpty } from 'lodash';
+
+const DeleteArticleButton = ({
+  articleKey,
+  onDelete,
+}: {
+  articleKey: string;
+  onDelete: () => void;
+}) => {
+  const { mutate } = useDeleteArticle();
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const cancelRef = React.useRef<HTMLButtonElement>(null);
+  const [articleKeyValidation, setArticleKeyValidation] = useState<string>('');
+
+  return (
+    <>
+      <Button
+        colorScheme="red"
+        onClick={onOpen}
+        isDisabled={isEmpty(articleKey)}
+      >
+        Delete Article
+      </Button>
+      <AlertDialog
+        isOpen={isOpen}
+        leastDestructiveRef={cancelRef}
+        onClose={onClose}
+      >
+        <AlertDialogOverlay>
+          <AlertDialogContent>
+            <AlertDialogHeader fontSize="lg" fontWeight="bold">
+              Delete Customer
+            </AlertDialogHeader>
+
+            <AlertDialogBody>
+              {`Are you sure of deleting the article? You can't undo this action afterwards.`}
+              <Input
+                mt={3}
+                placeholder={`Type ${articleKey} to confirm`}
+                value={articleKeyValidation}
+                onChange={(e) => setArticleKeyValidation(e.target.value)}
+              />
+            </AlertDialogBody>
+            <AlertDialogFooter>
+              <Button ref={cancelRef} onClick={onClose}>
+                Cancel
+              </Button>
+              <Button
+                colorScheme="red"
+                onClick={() => {
+                  mutate({ articleKey });
+                  onClose();
+                  onDelete();
+                }}
+                isDisabled={articleKeyValidation !== articleKey}
+                ml={3}
+              >
+                Delete
+              </Button>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialogOverlay>
+      </AlertDialog>
+    </>
+  );
+};
 
 const ArticleEditor = () => {
   const { setCursorType } = useCursor();
@@ -191,6 +266,10 @@ const ArticleEditor = () => {
               Preload
             </Button>
           </HStack>
+          <DeleteArticleButton
+            articleKey={state.article_key}
+            onDelete={() => setState(ARTICLE_DEFAULT)}
+          />
           <ArticleCard {...state} />
         </VStack>
       </HStack>

src/services/backend/articles/constants.ts

@@ -12,6 +12,7 @@ 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`;
+export const DELETE_COMMENT_URL = `/delete_comment`;
 
 // Editor
 export const EDITOR_ARTICLES_URL = `/get_editor_article`;

src/services/backend/articles/deleteArticle.ts

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

src/services/backend/articles/index.ts

@@ -9,4 +9,6 @@ export { default as getComments } from './getComments';
 export { default as getEditorArticleData } from './getEditorArticleData';
 export { default as updateArticle } from './updateArticle';
 
+export { default as deleteArticle } from './deleteArticle';
+
 export { default as pingTest } from './pingTest';

src/services/hooks/articles/index.ts

@@ -6,5 +6,6 @@ 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 useDeleteArticle } from './useDeleteArticle';
 
 export { default as usePingTest } from './usePingTest';

src/services/hooks/articles/useDeleteArticle.tsx

@@ -0,0 +1,35 @@
+import { useToast } from '@chakra-ui/react';
+import { deleteArticle } from '../../backend';
+import { useCallSBMutation } from '../common';
+import { useQueryClient } from '@tanstack/react-query';
+
+const useDeleteArticle = () => {
+  const toast = useToast();
+  const queryClient = useQueryClient();
+  return useCallSBMutation({
+    method: (data) => deleteArticle(data),
+    mutationOptions: {
+      onSuccess: (_data, variables: any) => {
+        toast({
+          title: 'Article removed.',
+          status: 'success',
+          duration: 3000,
+          isClosable: true,
+        });
+        queryClient.invalidateQueries({
+          queryKey: ['comments', variables.articleKey],
+        });
+      },
+      onError: (error) => {
+        toast({
+          title: 'Error.' + error.message,
+          status: 'error',
+          duration: 3000,
+          isClosable: true,
+        });
+      },
+    },
+  });
+};
+
+export default useDeleteArticle;