Show ICD-11 Diagnosis functionality unavailable error if issues with Redis

src/Components/Diagnosis/ConsultationDiagnosisBuilder/AddICD11Diagnosis.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import AutocompleteFormField from "../../Form/FormFields/Autocomplete";
 import {
@@ -10,6 +10,7 @@ import ConditionVerificationStatusMenu from "../ConditionVerificationStatusMenu"
 import { classNames, mergeQueryOptions } from "../../../Utils/utils";
 import useQuery from "../../../Utils/request/useQuery";
 import routes from "../../../Redux/api";
+import { Error } from "../../../Utils/Notifications";
 
 interface AddICD11DiagnosisProps {
   className?: string;
@@ -24,7 +25,15 @@ export default function AddICD11Diagnosis(props: AddICD11DiagnosisProps) {
   const [adding, setAdding] = useState(false);
   const hasError = !!props.disallowed.find((d) => d?.id === selected?.id);
 
-  const { data, loading, refetch } = useQuery(routes.listICD11Diagnosis);
+  const { res, data, loading, refetch } = useQuery(routes.listICD11Diagnosis, {
+    silent: true,
+  });
+
+  useEffect(() => {
+    if (res?.status === 500) {
+      Error({ msg: "ICD-11 Diagnosis functionality is facing issues." });
+    }
+  }, [res?.status]);
 
   const handleAdd = async (status: CreateDiagnosis["verification_status"]) => {
     if (!selected) return;

src/Components/Diagnosis/ConsultationDiagnosisBuilder/ConsultationDiagnosisEntry.tsx

@@ -80,9 +80,11 @@ export default function ConsultationDiagnosisEntry(props: Props) {
               ? "font-semibold text-primary-500"
               : "font-normal",
             !isActive && "text-gray-500 line-through",
+            !object.diagnosis_object?.label && "italic text-gray-500",
           )}
         >
-          {object.diagnosis_object?.label}
+          {object.diagnosis_object?.label ||
+            "Unable to retrieve this ICD-11 diagnosis at the moment"}
         </span>
         <div className="flex items-center justify-end gap-2 sm:flex-row md:absolute md:inset-y-0 md:right-2 md:justify-normal">
           <div className="w-32">

src/Components/Diagnosis/DiagnosesListAccordion.tsx

@@ -4,7 +4,7 @@ import {
   ConsultationDiagnosis,
 } from "./types";
 import { useTranslation } from "react-i18next";
-import { compareBy } from "../../Utils/utils";
+import { classNames, compareBy } from "../../Utils/utils";
 import { useState } from "react";
 import CareIcon from "../../CAREUI/icons/CareIcon";
 import ButtonV2 from "../Common/components/ButtonV2";
@@ -96,7 +96,14 @@ const DiagnosesOfStatus = ({ diagnoses }: Props) => {
       <ul className="text-sm">
         {diagnoses.map((diagnosis) => (
           <li key={diagnosis.id} className="flex items-center gap-2">
-            <span>{diagnosis.diagnosis_object?.label}</span>
+            <span
+              className={classNames(
+                !diagnosis.diagnosis_object?.label && "italic text-gray-500",
+              )}
+            >
+              {diagnosis.diagnosis_object?.label ||
+                "Unable to resolve ICD-11 diagnosis at the moment"}
+            </span>
           </li>
         ))}
       </ul>

src/Components/Facility/ConsultationForm.tsx

@@ -1359,7 +1359,11 @@ export const ConsultationForm = ({ facilityId, patientId, id }: Props) => {
                       >
                         <FieldLabel>Procedures</FieldLabel>
                         <ProcedureBuilder
-                          procedures={state.form.procedure}
+                          procedures={
+                            Array.isArray(state.form.procedure)
+                              ? state.form.procedure
+                              : []
+                          }
                           setProcedures={(procedure) => {
                             handleFormFieldChange({
                               name: "procedure",

src/Components/Patient/DiagnosesFilter.tsx

@@ -7,6 +7,7 @@ import useQuery from "../../Utils/request/useQuery";
 import routes from "../../Redux/api";
 import { mergeQueryOptions } from "../../Utils/utils";
 import { debounce } from "lodash-es";
+import { Error } from "../../Utils/Notifications";
 
 export const FILTER_BY_DIAGNOSES_KEYS = [
   "diagnoses",
@@ -34,7 +35,15 @@ interface Props {
 export default function DiagnosesFilter(props: Props) {
   const { t } = useTranslation();
   const [diagnoses, setDiagnoses] = useState<ICD11DiagnosisModel[]>([]);
-  const { data, loading, refetch } = useQuery(routes.listICD11Diagnosis);
+  const { res, data, loading, refetch } = useQuery(routes.listICD11Diagnosis, {
+    silent: true,
+  });
+
+  useEffect(() => {
+    if (res?.status === 500) {
+      Error({ msg: "ICD-11 Diagnosis functionality is facing issues." });
+    }
+  }, [res?.status]);
 
   useEffect(() => {
     if (!props.value) {