fix(): Adding server status in the nav bar

Author: ar1603

src/screens/common/NavigationBar.tsx

@@ -1,4 +1,4 @@
-import { Box, HStack, Img } from '@chakra-ui/react';
+import { Box, HStack, Img, Spinner, Text } from '@chakra-ui/react';
 import { LinkButton, useCursor } from '@components';
 import AmitRaikwarLogo from '@assets/images/AmitRaikwarLogo.png';
 import { SearchIcon } from '@assets';
@@ -7,6 +7,8 @@ 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';
 
 const NavigationLink = [
   {
@@ -34,6 +36,7 @@ const ArticleLink = {
 
 const NavigationBar = () => {
   const moveToTop = useMoveToTop();
+  const { data } = usePingTest();
   const location = useLocation();
   const pathName = location.pathname;
   const navigate = useNavigate();
@@ -102,7 +105,9 @@ const NavigationBar = () => {
         bg={'rgba(255, 255, 255, 0.1)'}
         backdropFilter={'blur(20px)'}
         transition={'background-color 0.3s'}
-        display={pathName !== BASE_URL_ROUTE ? 'none' : 'flex'}
+        display={
+          pathName !== BASE_URL_ROUTE + '/privateRoute' ? 'none' : 'flex'
+        }
       >
         {NavigationLink.map(({ name, href }) => (
           <LinkButton
@@ -131,23 +136,56 @@ const NavigationBar = () => {
         </Box>
       </HStack>
       <HStack
-        border={'1px solid gray'}
-        padding="2.5"
-        color={'white'}
-        borderRadius="100px"
-        bg={'rgba(255, 255, 255, 0.1)'}
-        backdropFilter={'blur(20px)'}
-        transition={'all 0.3s'}
-        _hover={{
-          transform: 'scale(1.1)',
-          cursor: 'pointer',
-        }}
-        onMouseEnter={onMouseEnter}
-        onMouseLeave={onMouseLeave}
-        ref={ref}
         onClick={() => {}} // eslint-disable-line
       >
-        <SearchIcon />
+        <Box
+          display={pathName === BASE_URL_ROUTE ? 'none' : 'flex'}
+          border={'1px solid gray'}
+        >
+          <Text color={'white'} fontSize={'lg'} p={2}>
+            Server :{' '}
+            {isUndefined(data) ? (
+              <>
+                <Box
+                  as="span"
+                  w={3}
+                  h={3}
+                  borderRadius="50%"
+                  bg={'red.500'}
+                  display="inline-block"
+                />
+                <Spinner size="xs" color="white" />
+              </>
+            ) : (
+              <Box
+                as="span"
+                w={3}
+                h={3}
+                borderRadius="50%"
+                bg={'green.500'}
+                display="inline-block"
+              />
+            )}
+          </Text>
+        </Box>
+        <Box
+          onMouseEnter={onMouseEnter}
+          onMouseLeave={onMouseLeave}
+          ref={ref}
+          border={'1px solid gray'}
+          padding="2.5"
+          color={'white'}
+          borderRadius="100px"
+          bg={'rgba(255, 255, 255, 0.1)'}
+          backdropFilter={'blur(20px)'}
+          transition={'all 0.3s'}
+          _hover={{
+            transform: 'scale(1.1)',
+            cursor: 'pointer',
+          }}
+        >
+          <SearchIcon />
+        </Box>
       </HStack>
     </HStack>
   );

src/services/backend/articles/constants.ts

@@ -15,3 +15,6 @@ export const ADD_COMMENT_URL = `/add_comment`;
 
 // Editor
 export const EDITOR_ARTICLES_URL = `/get_editor_article`;
+
+// Ping
+export const PING_URL = `/ping`;

src/services/backend/articles/index.ts

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

src/services/backend/articles/pingTest.ts

@@ -0,0 +1,6 @@
+import { GetRequest } from '../client/client';
+import { PING_URL } from './constants';
+
+const pingTest = async () => GetRequest(PING_URL);
+
+export default pingTest;

src/services/hooks/articles/index.ts

@@ -5,3 +5,5 @@ 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 usePingTest } from './usePingTest';

src/services/hooks/articles/usePingTest.tsx

@@ -0,0 +1,15 @@
+import { pingTest } from '../../backend';
+import { useCallQuery } from '../common';
+
+const usePingTest = () => {
+  return useCallQuery({
+    method: () => pingTest(),
+    queryOptions: {
+      queryKey: ['ping'],
+      staleTime: 0,
+      gcTime: 0,
+    },
+  });
+};
+
+export default usePingTest;