fix(): Fixing the add article UI

Author: ar1603

src/screens/articleEditor/ArticleEditor.tsx

@@ -150,15 +150,7 @@ 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);
@@ -252,6 +244,19 @@ const ArticleEditor = () => {
           </Button>
         </VStack>
         <VStack borderLeft={'1px solid gray'} p={1}>
+          <RadioGroup
+            value={articleType}
+            onChange={(value) => {
+              setArticleType(value as 'New' | 'Update');
+            }}
+          >
+            <Radio value="New" padding={2}>
+              New Article
+            </Radio>
+            <Radio value="Update" padding={2}>
+              Update Article
+            </Radio>
+          </RadioGroup>
           <HStack>
             <Input
               placeholder="Article Key"
@@ -279,7 +284,6 @@ const ArticleEditor = () => {
       </Text>
       <HStack
         width={'100%'}
-        height={'100%'}
         border={'1px solid white'}
         borderRadius={'md'}
         p={2}
@@ -289,15 +293,17 @@ const ArticleEditor = () => {
         <Box
           w={'50%'}
           height={'100%'}
-          minH={'100vh'}
+          minH={'200vh'}
           borderRight={'1px solid white'}
         >
           <MdPreview mdString={state.md_data} />
         </Box>
         <Textarea
           w={'50%'}
-          h={'100%'}
-          minH={'100vh'}
+          height={'200vh'}
+          resize={'none'}
+          bgSize={'cover'}
+          boxSizing="border-box"
           value={state.md_data}
           onChange={(e) =>
             setState((prev) => ({

src/screens/common/NavigationBar.tsx

@@ -1,14 +1,13 @@
-import { Box, HStack, IconButton, Img, Text } from '@chakra-ui/react';
+import { Box, HStack, Img } from '@chakra-ui/react';
 import { LinkButton, useCursor } from '@components';
 import AmitRaikwarLogo from '@assets/images/AmitRaikwarLogo.png';
-import { RefreshIcon, SearchIcon } from '@assets';
+import { SearchIcon } from '@assets';
 import { useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { useMoveToTop } from '@hooks';
 import { BASE_URL_ROUTE } from '@router';
-import { usePingTest } from '@services';
-import { isUndefined } from 'lodash';
+import PingTest from './PingTest';
 
 const NavigationLink = [
   {
@@ -36,7 +35,6 @@ const ArticleLink = {
 
 const NavigationBar = () => {
   const moveToTop = useMoveToTop();
-  const { data, refetch, isPending } = usePingTest();
   const location = useLocation();
   const pathName = location.pathname;
   const navigate = useNavigate();
@@ -136,46 +134,7 @@ const NavigationBar = () => {
       <HStack
         onClick={() => {}} // eslint-disable-line
       >
-        <HStack
-          display={
-            pathName !== BASE_URL_ROUTE + '/privateRoute' ? 'none' : 'flex'
-          }
-          border={'1px solid gray'}
-          p={2}
-        >
-          <IconButton
-            size={'sm'}
-            aria-label={''}
-            icon={<RefreshIcon />}
-            isDisabled={isPending}
-            isLoading={isPending}
-            onClick={() => refetch()}
-          />
-          <Text color={'white'} fontSize={'lg'}>
-            Server :{' '}
-            {isUndefined(data) || isPending ? (
-              <>
-                <Box
-                  as="span"
-                  w={3}
-                  h={3}
-                  borderRadius="50%"
-                  bg={'red.500'}
-                  display="inline-block"
-                />
-              </>
-            ) : (
-              <Box
-                as="span"
-                w={3}
-                h={3}
-                borderRadius="50%"
-                bg={'green.500'}
-                display="inline-block"
-              />
-            )}
-          </Text>
-        </HStack>
+        {pathName === BASE_URL_ROUTE + '/privateRoute' && <PingTest />}
         <Box
           onMouseEnter={onMouseEnter}
           onMouseLeave={onMouseLeave}

src/screens/common/PingTest.tsx

@@ -0,0 +1,48 @@
+import { RefreshIcon } from '@assets';
+import { HStack, IconButton, Box, Text } from '@chakra-ui/react';
+import { usePingTest } from '@services';
+
+const PingTest = () => {
+  const { isPending, isError, refetch, isRefetching } = usePingTest();
+
+  console.log(isError, isPending);
+
+  return (
+    <HStack border={'1px solid gray'} p={2}>
+      <IconButton
+        size={'sm'}
+        aria-label={''}
+        icon={<RefreshIcon />}
+        isDisabled={isPending || isRefetching}
+        isLoading={isPending || isRefetching}
+        onClick={() => {
+          refetch();
+        }}
+      />
+      <Text color={'white'} fontSize={'lg'}>
+        Server :{' '}
+        {isPending || isError || isRefetching ? (
+          <Box
+            as="span"
+            w={3}
+            h={3}
+            borderRadius="50%"
+            bg={'red.500'}
+            display="inline-block"
+          />
+        ) : (
+          <Box
+            as="span"
+            w={3}
+            h={3}
+            borderRadius="50%"
+            bg={'green.500'}
+            display="inline-block"
+          />
+        )}
+      </Text>
+    </HStack>
+  );
+};
+
+export default PingTest;

src/services/hooks/articles/usePingTest.tsx

@@ -6,8 +6,7 @@ const usePingTest = () => {
     method: () => pingTest(),
     queryOptions: {
       queryKey: ['ping'],
-      staleTime: 0,
-      gcTime: 0,
+      refetchInterval: 600000,
     },
   });
 };