Central Nursing Station: Migrate to useQuery and update to use `res…

…olved_middleware` (#6967) * Remove Legacy HL7Monitor Components * Use `resolved_middleware` in ConsultationUpdates Tab * CNS: Migrate to `useQuery` and use `resolved_middleware` * remove unused redux actions
ohcnetwork · Jan 4, 2024 · 75e64f7 · 75e64f7
1 parent ff271f8
commit 75e64f7
Show file tree

Hide file tree

Showing 9 changed files with 61 additions and 763 deletions.
diff --git a/src/Components/CameraFeed/utils.ts b/src/Components/CameraFeed/utils.ts
@@ -1,5 +1,5 @@
 import { MutableRefObject } from "react";
-import { AssetData } from "../Assets/AssetTypes";
+import { AssetClass, AssetData } from "../Assets/AssetTypes";
 import { getCameraConfig } from "../../Utils/transformUtils";
 import { isIOS } from "../../Utils/utils";
 
@@ -18,6 +18,10 @@ export const calculateVideoDelay = (
 };
 
 export const getStreamUrl = (asset: AssetData) => {
+  if (asset.asset_class !== AssetClass.ONVIF) {
+    throw "getStreamUrl can be invoked only for ONVIF Assets";
+  }
+
   const config = getCameraConfig(asset);
   const host = asset.resolved_middleware?.hostname;
   const uuid = config.accessKey;

diff --git a/src/Components/Facility/CentralNursingStation.tsx b/src/Components/Facility/CentralNursingStation.tsx
@@ -1,28 +1,24 @@
-import { useDispatch } from "react-redux";
 import useFullscreen from "../../Common/hooks/useFullscreen";
-import { Fragment, useEffect, useState } from "react";
-import {
-  getPermittedFacility,
-  listPatientAssetBeds,
-} from "../../Redux/actions";
+import { Fragment } from "react";
 import HL7PatientVitalsMonitor from "../VitalsMonitor/HL7PatientVitalsMonitor";
 import useFilters from "../../Common/hooks/useFilters";
-import { FacilityModel } from "./models";
 import Loading from "../Common/Loading";
 import Page from "../Common/components/Page";
 import ButtonV2 from "../Common/components/ButtonV2";
 import CareIcon from "../../CAREUI/icons/CareIcon";
 import { classNames } from "../../Utils/utils";
 import { LocationSelect } from "../Common/LocationSelect";
 import Pagination from "../Common/Pagination";
-import { PatientAssetBed } from "../Assets/AssetTypes";
 import { Popover, Transition } from "@headlessui/react";
 import { FieldLabel } from "../Form/FormFields/FormField";
 import CheckBoxFormField from "../Form/FormFields/CheckBoxFormField";
 import { useTranslation } from "react-i18next";
 import { SortOption } from "../Common/SortDropdown";
 import { SelectFormField } from "../Form/FormFields/SelectFormField";
 import useVitalsAspectRatioConfig from "../VitalsMonitor/useVitalsAspectRatioConfig";
+import useQuery from "../../Utils/request/useQuery";
+import routes from "../../Redux/api";
+import { getVitalsMonitorSocketUrl } from "../VitalsMonitor/utils";
 
 const PER_PAGE_LIMIT = 6;
 
@@ -39,72 +35,28 @@ interface Props {
 
 export default function CentralNursingStation({ facilityId }: Props) {
   const { t } = useTranslation();
-  const dispatch = useDispatch<any>();
   const [isFullscreen, setFullscreen] = useFullscreen();
-
-  const [facilityObject, setFacilityObject] = useState<FacilityModel>();
-  const [data, setData] =
-    useState<Parameters<typeof HL7PatientVitalsMonitor>[0][]>();
-  const [totalCount, setTotalCount] = useState(0);
   const { qParams, updateQuery, removeFilter, updatePage } = useFilters({
     limit: PER_PAGE_LIMIT,
   });
+  const query = useQuery(routes.listPatientAssetBeds, {
+    pathParams: { facility_external_id: facilityId },
+    query: {
+      ...qParams,
+      page: qParams.page || 1,
+      limit: PER_PAGE_LIMIT,
+      offset: (qParams.page ? qParams.page - 1 : 0) * PER_PAGE_LIMIT,
+      asset_class: "HL7MONITOR",
+      ordering: qParams.ordering || "bed__name",
+      bed_is_occupied: qParams.bed_is_occupied ?? true,
+    },
+  });
 
-  useEffect(() => {
-    async function fetchFacilityOrObject() {
-      if (facilityObject) return facilityObject;
-      const res = await dispatch(getPermittedFacility(facilityId));
-      if (res.status !== 200) return;
-      setFacilityObject(res.data);
-      return res.data as FacilityModel;
-    }
-
-    async function fetchData() {
-      setData(undefined);
-
-      const filters = {
-        ...qParams,
-        page: qParams.page || 1,
-        limit: PER_PAGE_LIMIT,
-        offset: (qParams.page ? qParams.page - 1 : 0) * PER_PAGE_LIMIT,
-        asset_class: "HL7MONITOR",
-        ordering: qParams.ordering || "bed__name",
-        bed_is_occupied: qParams.bed_is_occupied ?? true,
-      };
-
-      const [facilityObj, res] = await Promise.all([
-        fetchFacilityOrObject(),
-        dispatch(listPatientAssetBeds(facilityId, filters)),
-      ]);
-
-      if (!facilityObj || res.status !== 200) {
-        return;
-      }
-
-      const entries = res.data.results as PatientAssetBed[];
-
-      setTotalCount(res.data.count);
-      setData(
-        entries.map(({ patient, asset, bed }) => {
-          const middleware = asset.resolved_middleware?.hostname;
-          const local_ip_address = asset.meta?.local_ip_address;
-
-          return {
-            patientAssetBed: { patient, asset, bed },
-            socketUrl: `wss://${middleware}/observations/${local_ip_address}`,
-          };
-        })
-      );
-    }
-    fetchData();
-  }, [
-    dispatch,
-    facilityId,
-    qParams.page,
-    qParams.location,
-    qParams.ordering,
-    qParams.bed_is_occupied,
-  ]);
+  const totalCount = query.data?.count ?? 0;
+  const data = query.data?.results.map((obj) => ({
+    patientAssetBed: obj,
+    socketUrl: getVitalsMonitorSocketUrl(obj.asset),
+  }));
 
   const { config, hash } = useVitalsAspectRatioConfig({
     default: 6 / 11,

diff --git a/src/Components/Facility/ConsultationDetails/ConsultationUpdatesTab.tsx b/src/Components/Facility/ConsultationDetails/ConsultationUpdatesTab.tsx
@@ -2,8 +2,8 @@ import { lazy, useEffect, useState } from "react";
 import { ConsultationTabProps } from "./index";
 import { AssetBedModel, AssetClass, AssetData } from "../../Assets/AssetTypes";
 import { useDispatch } from "react-redux";
-import { getPermittedFacility, listAssetBeds } from "../../../Redux/actions";
-import { BedModel, FacilityModel } from "../models";
+import { listAssetBeds } from "../../../Redux/actions";
+import { BedModel } from "../models";
 import HL7PatientVitalsMonitor from "../../VitalsMonitor/HL7PatientVitalsMonitor";
 import VentilatorPatientVitalsMonitor from "../../VitalsMonitor/VentilatorPatientVitalsMonitor";
 import useVitalsAspectRatioConfig from "../../VitalsMonitor/useVitalsAspectRatioConfig";
@@ -13,6 +13,7 @@ import Chip from "../../../CAREUI/display/Chip";
 import { formatAge, formatDate, formatDateTime } from "../../../Utils/utils";
 import ReadMore from "../../Common/components/Readmore";
 import DailyRoundsList from "../Consultations/DailyRoundsList";
+import { getVitalsMonitorSocketUrl } from "../../VitalsMonitor/utils";
 
 const PageTitle = lazy(() => import("../../Common/PageTitle"));
 
@@ -40,39 +41,30 @@ export const ConsultationUpdatesTab = (props: ConsultationTabProps) => {
       return;
 
     const fetchData = async () => {
-      const [facilityRes, assetBedRes] = await Promise.all([
-        dispatch(getPermittedFacility(props.consultationData.facility as any)),
-        dispatch(
-          listAssetBeds({
-            facility: props.consultationData.facility as any,
-            bed: props.consultationData.current_bed?.bed_object.id,
-          })
-        ),
-      ]);
-
-      const { middleware_address } = facilityRes.data as FacilityModel;
+      const assetBedRes = await dispatch(
+        listAssetBeds({
+          facility: props.consultationData.facility as any,
+          bed: props.consultationData.current_bed?.bed_object.id,
+        })
+      );
       const assetBeds = assetBedRes?.data?.results as AssetBedModel[];
 
       const monitorBedData = assetBeds?.find(
         (i) => i.asset_object?.asset_class === AssetClass.HL7MONITOR
       );
+
       setMonitorBedData(monitorBedData);
-      const assetDataForMonitor = monitorBedData?.asset_object;
-      const hl7Meta = assetDataForMonitor?.meta;
-      const hl7Middleware =
-        hl7Meta?.middleware_hostname ||
-        assetDataForMonitor?.location_object?.middleware_address ||
-        middleware_address;
-      if (hl7Middleware && hl7Meta?.local_ip_address) {
+      if (monitorBedData?.asset_object) {
         setHL7SocketUrl(
-          `wss://${hl7Middleware}/observations/${hl7Meta.local_ip_address}`
+          getVitalsMonitorSocketUrl(monitorBedData?.asset_object)
         );
       }
 
       const consultationBedVentilator =
         props.consultationData?.current_bed?.assets_objects?.find(
           (i) => i.asset_class === AssetClass.VENTILATOR
         );
+
       let ventilatorBedData;
       if (consultationBedVentilator) {
         ventilatorBedData = {
@@ -84,25 +76,13 @@ export const ConsultationUpdatesTab = (props: ConsultationTabProps) => {
           (i) => i.asset_object.asset_class === AssetClass.VENTILATOR
         );
       }
+
       setVentilatorBedData(ventilatorBedData);
-      const ventilatorMeta = ventilatorBedData?.asset_object?.meta;
-      const ventilatorMiddleware =
-        ventilatorMeta?.middleware_hostname ||
-        consultationBedVentilator?.location_object.middleware_address ||
-        middleware_address;
-      if (ventilatorMiddleware && ventilatorMeta?.local_ip_address) {
+      if (ventilatorBedData?.asset_object) {
         setVentilatorSocketUrl(
-          `wss://${ventilatorMiddleware}/observations/${ventilatorMeta?.local_ip_address}`
+          getVitalsMonitorSocketUrl(ventilatorBedData?.asset_object)
         );
       }
-
-      if (
-        !(hl7Middleware && hl7Meta?.local_ip_address) &&
-        !(ventilatorMiddleware && ventilatorMeta?.local_ip_address)
-      ) {
-        setHL7SocketUrl(undefined);
-        setVentilatorSocketUrl(undefined);
-      }
     };
 
     fetchData();