Abdm improvements (#7861)

coronasafe · May 20, 2024 · aa7d7aa · aa7d7aa
1 parent f712fa3
commit aa7d7aa
Show file tree

Hide file tree

Showing 4 changed files with 108 additions and 28 deletions.
diff --git a/src/Common/hooks/useNotificationSubscriptionState.ts b/src/Common/hooks/useNotificationSubscriptionState.ts
@@ -0,0 +1,55 @@
+import { useEffect, useState } from "react";
+import routes from "../../Redux/api";
+import request from "../../Utils/request/request";
+import useAuthUser from "./useAuthUser";
+import * as Sentry from "@sentry/browser";
+
+export type NotificationSubscriptionState =
+  | "unsubscribed"
+  | "subscribed"
+  | "subscribed_on_other_device"
+  | "subscribed"
+  | "pending"
+  | "error";
+
+/**
+ * This is a temporary hook and will be removed in the future.
+ *
+ * This hook is used to get the initial notification subscription state of the user.
+ * @returns NotificationSubscriptionState
+ */
+export default function useNotificationSubscriptionState(
+  dependencies: any[] = [],
+) {
+  const { username } = useAuthUser();
+  const [subscriptionState, setSubscriptionState] =
+    useState<NotificationSubscriptionState>("pending");
+
+  const getSubscriptionState = async () => {
+    try {
+      const res = await request(routes.getUserPnconfig, {
+        pathParams: { username },
+      });
+
+      const reg = await navigator.serviceWorker.ready;
+      const subscription = await reg.pushManager.getSubscription();
+
+      if (!subscription && !res.data?.pf_endpoint) {
+        setSubscriptionState("unsubscribed");
+      } else if (subscription?.endpoint !== res.data?.pf_endpoint) {
+        setSubscriptionState("subscribed_on_other_device");
+      } else {
+        setSubscriptionState("subscribed");
+      }
+    } catch (error) {
+      setSubscriptionState("error");
+      Sentry.captureException(error);
+    }
+  };
+
+  useEffect(() => {
+    getSubscriptionState();
+  }, [username, ...dependencies]);
+
+  return subscriptionState;
+}
diff --git a/src/Components/ABDM/ABDMFacilityRecords.tsx b/src/Components/ABDM/ABDMFacilityRecords.tsx
@@ -4,6 +4,8 @@ import useQuery from "../../Utils/request/useQuery";
 import { formatDateTime } from "../../Utils/utils";
 import Loading from "../Common/Loading";
 import Page from "../Common/components/Page";
+import CareIcon from "../../CAREUI/icons/CareIcon";
+import ButtonV2 from "../Common/components/ButtonV2";
 
 interface IProps {
   facilityId: string;
@@ -21,7 +23,11 @@ const TableHeads = [
 ];
 
 export default function ABDMFacilityRecords({ facilityId }: IProps) {
-  const { data: consentsResult, loading } = useQuery(routes.abha.listConsents, {
+  const {
+    data: consentsResult,
+    loading,
+    refetch,
+  } = useQuery(routes.abha.listConsents, {
     query: { facility: facilityId, ordering: "-created_date" },
   });
 
@@ -53,6 +59,13 @@ export default function ABDMFacilityRecords({ facilityId }: IProps) {
                         scope="col"
                         className="sticky right-0 top-0 py-3.5 pl-3 pr-4 sm:pr-6"
                       >
+                        <ButtonV2
+                          onClick={() => refetch()}
+                          ghost
+                          className="max-w-2xl text-sm text-gray-700 hover:text-gray-900"
+                        >
+                          <CareIcon icon="l-refresh" /> Refresh
+                        </ButtonV2>
                         <span className="sr-only">View</span>
                       </th>
                     </tr>

diff --git a/src/Components/ABDM/FetchRecordsModal.tsx b/src/Components/ABDM/FetchRecordsModal.tsx
@@ -21,6 +21,7 @@ import CircularProgress from "../Common/components/CircularProgress.js";
 import CareIcon from "../../CAREUI/icons/CareIcon.js";
 import { classNames } from "../../Utils/utils.js";
 import { ConsentHIType, ConsentPurpose } from "./types/consent.js";
+import useNotificationSubscriptionState from "../../Common/hooks/useNotificationSubscriptionState.js";
 
 const getDate = (value: any) =>
   value && dayjs(value).isValid() && dayjs(value).toDate();
@@ -46,6 +47,9 @@ export default function FetchRecordsModal({ patient, show, onClose }: IProps) {
     dayjs().add(30, "day").toDate(),
   );
   const [errors, setErrors] = useState<any>({});
+  const notificationSubscriptionState = useNotificationSubscriptionState([
+    show,
+  ]);
 
   useMessageListener((data) => {
     if (data.type === "MESSAGE" && data.from === "patients/on_find") {
@@ -62,7 +66,23 @@ export default function FetchRecordsModal({ patient, show, onClose }: IProps) {
   });
 
   return (
-    <DialogModal title="Fetch Records over ABDM" show={show} onClose={onClose}>
+    <DialogModal
+      className="max-w-xl"
+      fixedWidth={false}
+      title="Fetch Records over ABDM"
+      show={show}
+      onClose={onClose}
+    >
+      {["unsubscribed", "subscribed_on_other_device"].includes(
+        notificationSubscriptionState,
+      ) && (
+        <p className="my-4 text-sm text-warning-600">
+          <CareIcon icon="l-exclamation-triangle" className="h-4 w-4" />{" "}
+          Notifications needs to be enabled on this device to verify the
+          patient.
+        </p>
+      )}
+
       <div className="flex items-center gap-3">
         <TextFormField
           value={patient?.abha_number_object?.health_id as string}
@@ -89,7 +109,12 @@ export default function FetchRecordsModal({ patient, show, onClose }: IProps) {
           }}
           loading={idVerificationStatus === "in-progress"}
           ghost={idVerificationStatus === "verified"}
-          disabled={idVerificationStatus === "verified"}
+          disabled={
+            idVerificationStatus === "verified" ||
+            ["unsubscribed", "subscribed_on_other_device"].includes(
+              notificationSubscriptionState,
+            )
+          }
           className={classNames(
             "mt-1.5 !py-3",
             idVerificationStatus === "verified" &&
@@ -215,6 +240,7 @@ export default function FetchRecordsModal({ patient, show, onClose }: IProps) {
             setIsMakingConsentRequest(false);
             onClose();
           }}
+          disabled={idVerificationStatus !== "verified"}
           loading={isMakingConsentRequest}
         >
           Request Consent

diff --git a/src/Components/Facility/PatientNotesSlideover.tsx b/src/Components/Facility/PatientNotesSlideover.tsx
@@ -12,9 +12,9 @@ import routes from "../../Redux/api";
 import { PatientNoteStateType } from "./models";
 import useKeyboardShortcut from "use-keyboard-shortcut";
 import AutoExpandingTextInputFormField from "../Form/FormFields/AutoExpandingTextInputFormField.js";
-import * as Sentry from "@sentry/browser";
 import useAuthUser from "../../Common/hooks/useAuthUser";
 import { PATIENT_NOTES_THREADS } from "../../Common/constants.js";
+import useNotificationSubscriptionState from "../../Common/hooks/useNotificationSubscriptionState.js";
 
 interface PatientNotesProps {
   patientId: string;
@@ -25,6 +25,7 @@ interface PatientNotesProps {
 
 export default function PatientNotesSlideover(props: PatientNotesProps) {
   const authUser = useAuthUser();
+  const notificationSubscriptionState = useNotificationSubscriptionState();
   const [thread, setThread] = useState(
     authUser.user_type === "Nurse"
       ? PATIENT_NOTES_THREADS.Nurses
@@ -35,32 +36,17 @@ export default function PatientNotesSlideover(props: PatientNotesProps) {
   const [reload, setReload] = useState(false);
   const [focused, setFocused] = useState(false);
 
-  const { username } = useAuthUser();
-
-  const intialSubscriptionState = async () => {
-    try {
-      const res = await request(routes.getUserPnconfig, {
-        pathParams: { username },
+  useEffect(() => {
+    if (notificationSubscriptionState === "unsubscribed") {
+      Notification.Warn({
+        msg: "Please subscribe to notifications to get live updates on discussion notes.",
+      });
+    } else if (notificationSubscriptionState === "subscribed_on_other_device") {
+      Notification.Warn({
+        msg: "Please subscribe to notifications on this device to get live updates on discussion notes.",
       });
-      const reg = await navigator.serviceWorker.ready;
-      const subscription = await reg.pushManager.getSubscription();
-      if (!subscription && !res.data?.pf_endpoint) {
-        Notification.Warn({
-          msg: "Please subscribe to notifications to get live updates on discussion notes.",
-        });
-      } else if (subscription?.endpoint !== res.data?.pf_endpoint) {
-        Notification.Warn({
-          msg: "Please subscribe to notifications on this device to get live updates on discussion notes.",
-        });
-      }
-    } catch (error) {
-      Sentry.captureException(error);
     }
-  };
-
-  useEffect(() => {
-    intialSubscriptionState();
-  }, []);
+  }, [notificationSubscriptionState]);
 
   const initialData: PatientNoteStateType = {
     notes: [],