[Human App] HUM-46: fix no error messages for jobs discovery when data load fails (#2702)

Author: mpblocky

packages/apps/human-app/frontend/src/components/ui/no-records.tsx

@@ -0,0 +1,19 @@
+import { Grid } from '@mui/material';
+import { useColorMode } from '@/hooks/use-color-mode';
+
+export function NoRecords() {
+  const { colorPalette } = useColorMode();
+
+  return (
+    <Grid
+      sx={{
+        padding: '20px',
+        textAlign: 'center',
+        fontStyle: 'italic',
+        color: colorPalette.text.secondary,
+      }}
+    >
+      <span>No records to display</span>
+    </Grid>
+  );
+}

packages/apps/human-app/frontend/src/hooks/use-get-oracles-notifications.tsx

@@ -0,0 +1,20 @@
+import { useProtectedLayoutNotification } from '@/hooks/use-protected-layout-notifications';
+import { defaultErrorMessage } from '@/shared/helpers/default-error-message';
+import { wait } from '@/shared/helpers/wait';
+import type { ResponseError } from '@/shared/types/global.type';
+
+export function useGetOraclesNotifications() {
+  const { setTopNotification, closeNotification } =
+    useProtectedLayoutNotification();
+
+  const onError = async (error: ResponseError) => {
+    setTopNotification({
+      type: 'warning',
+      content: defaultErrorMessage(error),
+    });
+    await wait(5000);
+    closeNotification();
+  };
+
+  return { onError };
+}

packages/apps/human-app/frontend/src/pages/worker/jobs-discovery/components/oracles-table/oracles-table-mobile.tsx

@@ -3,21 +3,19 @@ import { t } from 'i18next';
 import { Chips } from '@/components/ui/chips';
 import { TableButton } from '@/components/ui/table-button';
 import { Loader } from '@/components/ui/loader';
-import { Alert } from '@/components/ui/alert';
-import { defaultErrorMessage } from '@/shared/helpers/default-error-message';
 import type { OraclesDataQueryResult } from '@/pages/worker/jobs-discovery/jobs-discovery.page';
 import { EvmAddress } from '@/pages/worker/jobs/components/evm-address';
 import { ListItem } from '@/components/ui/list-item';
 import { useColorMode } from '@/hooks/use-color-mode';
 import type { JobType } from '@/smart-contracts/EthKVStore/config';
 import type { OracleSuccessResponse } from '@/api/services/worker/oracles';
+import { NoRecords } from '@/components/ui/no-records';
 
 export function OraclesTableMobile({
   selectOracle,
   oraclesQueryDataResult: {
     data: oraclesData,
     isError: isOraclesDataError,
-    error: oraclesDataError,
     isPending: isOraclesDataPending,
   },
 }: {
@@ -38,11 +36,7 @@ export function OraclesTableMobile({
   }
 
   if (isOraclesDataError) {
-    return (
-      <Alert color="error" severity="error">
-        {defaultErrorMessage(oraclesDataError)}
-      </Alert>
-    );
+    return <NoRecords />;
   }
 
   return (

packages/apps/human-app/frontend/src/pages/worker/jobs-discovery/jobs-discovery.page.tsx

@@ -2,21 +2,31 @@ import Paper from '@mui/material/Paper';
 import Grid from '@mui/material/Grid';
 import type { UseQueryResult } from '@tanstack/react-query';
 import { Navigate } from 'react-router-dom';
+import { useEffect, useRef } from 'react';
 import { useIsMobile } from '@/hooks/use-is-mobile';
 import { OraclesTable } from '@/pages/worker/jobs-discovery/components/oracles-table/oracles-table';
 import { OraclesTableJobTypesSelect } from '@/pages/worker/jobs-discovery/components/oracles-table/oracles-table-job-types-select';
 import type { OraclesSuccessResponse } from '@/api/services/worker/oracles';
 import { useGetOracles } from '@/api/services/worker/oracles';
 import { useAuthenticatedUser } from '@/auth/use-authenticated-user';
 import { routerPaths } from '@/router/router-paths';
+import { useGetOraclesNotifications } from '@/hooks/use-get-oracles-notifications';
 
 export type OraclesDataQueryResult = UseQueryResult<OraclesSuccessResponse>;
 
 export function JobsDiscoveryPage() {
+  const { onError } = useGetOraclesNotifications();
+  const onErrorRef = useRef(onError);
   const oraclesQueryResult = useGetOracles();
   const isMobile = useIsMobile();
   const { user } = useAuthenticatedUser();
 
+  useEffect(() => {
+    if (oraclesQueryResult.error) {
+      void onErrorRef.current(oraclesQueryResult.error);
+    }
+  }, [oraclesQueryResult.error]);
+
   if (user.kyc_status !== 'approved') {
     return <Navigate to={routerPaths.worker.profile} replace />;
   }

packages/apps/human-app/frontend/src/pages/worker/jobs/jobs.page.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import React, { useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { Box, Grid, Paper, Stack, Tab, Tabs, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router-dom';
@@ -11,9 +11,10 @@ import { AvailableJobsTable } from '@/pages/worker/jobs/components/available-job
 import { MyJobsDrawerMobile } from '@/pages/worker/jobs/components/my-jobs/mobile/my-jobs-drawer-mobile';
 import { AvailableJobsDrawerMobile } from '@/pages/worker/jobs/components/available-jobs/mobile/available-jobs-drawer-mobile';
 import { useGetOracles } from '@/api/services/worker/oracles';
-import { PageCardError, PageCardLoader } from '@/components/ui/page-card';
-import { defaultErrorMessage } from '@/shared/helpers/default-error-message';
+import { PageCardLoader } from '@/components/ui/page-card';
 import { useColorMode } from '@/hooks/use-color-mode';
+import { useGetOraclesNotifications } from '@/hooks/use-get-oracles-notifications';
+import { NoRecords } from '@/components/ui/no-records';
 import { AvailableJobsTableMobile } from './components/available-jobs/mobile/available-jobs-table-mobile';
 import { TabPanel } from './components/jobs-tab-panel';
 import { MyJobsTable } from './components/my-jobs/desktop/my-jobs-table';
@@ -37,6 +38,8 @@ export function JobsPage() {
   );
   const [isMobileFilterDrawerOpen, setIsMobileFilterDrawerOpen] =
     useState(false);
+  const { onError } = useGetOraclesNotifications();
+  const onErrorRef = useRef(onError);
 
   const handleTabChange = (_event: React.SyntheticEvent, newValue: number) => {
     setActiveTab(newValue);
@@ -48,14 +51,16 @@ export function JobsPage() {
     }
   };
 
+  useEffect(() => {
+    if (error) {
+      void onErrorRef.current(error);
+    }
+  }, [error]);
+
   const oracleName = data?.find(
     ({ address }) => address === oracle_address
   )?.role;
 
-  if (isError) {
-    return <PageCardError errorMessage={defaultErrorMessage(error)} />;
-  }
-
   if (isPending) {
     return <PageCardLoader />;
   }
@@ -92,16 +97,17 @@ export function JobsPage() {
             }}
           >
             <div>
-              <Box
-                sx={{
-                  padding: '8px 42px',
-                  backgroundColor: isDarkMode ? '#CDC7FF14' : '#1406B20A',
-                  display: 'inline-block',
-                  borderRadius: '4px',
-                }}
-              >
-                <Typography variant="h6">{oracleName}</Typography>
-              </Box>
+              {!isError && (
+                <Box
+                  sx={{
+                    padding: '8px 42px',
+                    backgroundColor: isDarkMode ? '#CDC7FF14' : '#1406B20A',
+                    display: 'inline-block',
+                  }}
+                >
+                  <Typography variant="h6">{oracleName}</Typography>
+                </Box>
+              )}
             </div>
             <Stack>
               <TableQueryContextProvider>
@@ -128,26 +134,38 @@ export function JobsPage() {
                     </Tabs>
                   </Box>
                   <TabPanel activeTab={activeTab} index={0}>
-                    {isMobile ? (
-                      <AvailableJobsTableMobile
-                        setIsMobileFilterDrawerOpen={
-                          setIsMobileFilterDrawerOpen
-                        }
-                      />
-                    ) : null}
-                    {!isMobile ? <AvailableJobsTable /> : null}
+                    {isError ? (
+                      <NoRecords />
+                    ) : (
+                      <>
+                        {isMobile ? (
+                          <AvailableJobsTableMobile
+                            setIsMobileFilterDrawerOpen={
+                              setIsMobileFilterDrawerOpen
+                            }
+                          />
+                        ) : (
+                          <AvailableJobsTable />
+                        )}
+                      </>
+                    )}
                   </TabPanel>
                   <TabPanel activeTab={activeTab} index={1}>
-                    <>
-                      {isMobile ? (
-                        <MyJobsTableMobile
-                          setIsMobileFilterDrawerOpen={
-                            setIsMobileFilterDrawerOpen
-                          }
-                        />
-                      ) : null}
-                      {!isMobile ? <MyJobsTable /> : null}
-                    </>
+                    {isError ? (
+                      <NoRecords />
+                    ) : (
+                      <>
+                        {isMobile ? (
+                          <MyJobsTableMobile
+                            setIsMobileFilterDrawerOpen={
+                              setIsMobileFilterDrawerOpen
+                            }
+                          />
+                        ) : (
+                          <MyJobsTable />
+                        )}
+                      </>
+                    )}
                   </TabPanel>
                 </Box>
               </TableQueryContextProvider>