feat: If there is an error loading user preferences, just show a noti…

…cation instead of asking the user to refresh the page (#1146)
FNNDSC · Apr 3, 2024 · be80ac2 · be80ac2
1 parent 73db29f
commit be80ac2
Show file tree

Hide file tree

Showing 3 changed files with 170 additions and 168 deletions.
diff --git a/src/components/Pacs/components/PatientCard.tsx b/src/components/Pacs/components/PatientCard.tsx
@@ -1,6 +1,6 @@
-import { useState, useContext } from "react";
+import React, { useState, useContext } from "react";
 import { format, parse } from "date-fns";
-import { Alert } from "antd";
+import { notification } from "antd";
 import {
   GridItem,
   Card,
@@ -24,9 +24,9 @@ function getPatientDetails(patientDetails: any) {
 }
 
 const PatientCard = ({ queryResult }: { queryResult: any }) => {
-  const { data, isLoading, error } = useSettings();
+  const [api] = notification.useNotification();
+  const { data, isLoading, error, isError } = useSettings();
   const { state } = useContext(PacsQueryContext);
-
   const patient = queryResult[0];
   const patientDetails = getPatientDetails(patient);
   const [isPatientExpanded, setIsPatientExpanded] = useState(
@@ -35,6 +35,15 @@ const PatientCard = ({ queryResult }: { queryResult: any }) => {
   const { PatientID, PatientName, PatientBirthDate, PatientSex } =
     patientDetails;
 
+  React.useEffect(() => {
+    if (isError) {
+      api.error({
+        message: error.message,
+        description: "Failed to load user preferences",
+      });
+    }
+  }, [isError]);
+
   const parsedDate = parse(PatientBirthDate, "yyyyMMdd", new Date());
 
   const formattedDate = Number.isNaN(
@@ -84,11 +93,8 @@ const PatientCard = ({ queryResult }: { queryResult: any }) => {
                   screenreaderText="Loading contents"
                 />
               </GridItem>
-            ) : error ? (
-              <GridItem lg={4} md={4} sm={12}>
-                <Alert type="error" description="Please refresh the page..." />
-              </GridItem>
-            ) : userPreferences &&
+            ) : !error &&
+              userPreferences &&
               userPreferencesArray &&
               userPreferencesArray.length > 0 ? (
               userPreferencesArray.map((key: string) => (

diff --git a/src/components/Pacs/components/SeriesCard.tsx b/src/components/Pacs/components/SeriesCard.tsx
@@ -56,13 +56,11 @@ async function getPACSData(
 }
 
 const SeriesCardCopy = ({ series }: { series: any }) => {
-  const theme = useContext(ThemeContext);
   const navigate = useNavigate();
   // Load user Preference Data
   const {
     data: userPreferenceData,
     isLoading: userDataLoading,
-    error: userDataErrorMessage,
     isError: userDataError,
   } = useSettings();
   const userPreferences = userPreferenceData?.series;
@@ -377,10 +375,11 @@ const SeriesCardCopy = ({ series }: { series: any }) => {
       className="flex-series-container"
     >
       {userDataLoading ? (
-        <Skeleton width="100%" height="100%" />
-      ) : userDataError ? (
-        <Alert type="error" description={userDataErrorMessage.message} />
-      ) : userPreferences &&
+        <div className="flex-series-item">
+          <Skeleton width="100%" height="100%" />
+        </div>
+      ) : !userDataError &&
+        userPreferences &&
         userPreferencesArray &&
         userPreferencesArray.length > 0 ? (
         userPreferencesArray.map((key: string) => (
@@ -434,6 +433,7 @@ const SeriesCardCopy = ({ series }: { series: any }) => {
           </div>
         </>
       )}
+
       <div className="flex-series-item steps-container">
         {isResourceBeingFetched && !resourceErrorFound && !data ? (
           <DotsIndicator title="Fetching current status..." />