[WIFI-11392] Refetch all endpoints on System page

Signed-off-by: Charles <charles.bourque96@gmail.com>

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "ucentral-client",
-  "version": "2.8.0(2)",
+  "version": "2.8.0(3)",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "ucentral-client",
-      "version": "2.8.0(2)",
+      "version": "2.8.0(3)",
       "license": "ISC",
       "dependencies": {
         "@chakra-ui/icons": "^2.0.11",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ucentral-client",
-  "version": "2.8.0(2)",
+  "version": "2.8.0(3)",
   "description": "",
   "private": true,
   "main": "index.tsx",

src/hooks/Network/Endpoints.ts

@@ -1,8 +1,5 @@
-import { useToast } from '@chakra-ui/react';
 import { useQuery } from '@tanstack/react-query';
-import { useTranslation } from 'react-i18next';
 import { axiosGw, axiosProv, axiosSec } from 'constants/axiosInstances';
-import { AxiosError } from 'models/Axios';
 
 export type EndpointApiResponse = {
   authenticationType: string;
@@ -12,11 +9,8 @@ export type EndpointApiResponse = {
   vendor: string;
 };
 
-export const useGetEndpoints = ({ onSuccess }: { onSuccess: (data: EndpointApiResponse[]) => void }) => {
-  const { t } = useTranslation();
-  const toast = useToast();
-
-  return useQuery(
+export const useGetEndpoints = ({ onSuccess }: { onSuccess: (data: EndpointApiResponse[]) => void }) =>
+  useQuery(
     ['get-endpoints'],
     () =>
       axiosSec
@@ -26,21 +20,8 @@ export const useGetEndpoints = ({ onSuccess }: { onSuccess: (data: EndpointApiRe
       enabled: false,
       staleTime: Infinity,
       onSuccess,
-      onError: (e: AxiosError) => {
-        if (!toast.isActive('endpoints-fetching-error'))
-          toast({
-            id: 'user-fetching-error',
-            title: t('common.error'),
-            description: t('user.error_fetching', { e: e?.response?.data?.ErrorDescription }),
-            status: 'error',
-            duration: 5000,
-            isClosable: true,
-            position: 'top-right',
-          });
-      },
     },
   );
-};
 
 export const useGetGatewayUi = () =>
   useQuery(['get-gw-ui'], () => axiosGw.get('system?command=info').then(({ data }) => data.UI), {

src/pages/SystemPage/index.tsx

@@ -1,14 +1,19 @@
 import React from 'react';
-import { Flex, SimpleGrid } from '@chakra-ui/react';
+import { Flex, Heading, SimpleGrid, Spacer } from '@chakra-ui/react';
+import { useTranslation } from 'react-i18next';
 import { v4 as uuid } from 'uuid';
 import SystemTile from './SystemTile';
+import { RefreshButton } from 'components/Buttons/RefreshButton';
+import { Card } from 'components/Containers/Card';
+import { CardHeader } from 'components/Containers/Card/CardHeader';
 import { axiosSec } from 'constants/axiosInstances';
 import { useAuth } from 'contexts/AuthProvider';
 import { useGetEndpoints } from 'hooks/Network/Endpoints';
 
 const SystemPage = () => {
+  const { t } = useTranslation();
   const { token, isUserLoaded } = useAuth();
-  const { data: endpoints } = useGetEndpoints({ onSuccess: () => {} });
+  const { data: endpoints, refetch, isFetching } = useGetEndpoints({ onSuccess: () => {} });
 
   const endpointsList = React.useMemo(() => {
     if (!endpoints || !token || !isUserLoaded) return null;
@@ -35,11 +40,19 @@ const SystemPage = () => {
 
   return (
     <Flex flexDirection="column" pt="75px">
+      <Card mb={4} py={2} px={4}>
+        <CardHeader>
+          <Heading size="md" my="auto">
+            {t('controller.firmware.endpoints')} ({endpoints?.length ?? 0})
+          </Heading>
+          <Spacer />
+          <RefreshButton onClick={refetch} isFetching={isFetching} />
+        </CardHeader>
+      </Card>
       <SimpleGrid minChildWidth="500px" spacing="20px" mb={3}>
         {endpointsList}
       </SimpleGrid>
     </Flex>
   );
 };
-
 export default SystemPage;