vital-record.component.tsx

import React, { useState, useEffect } from "react";
import { useCurrentPatient, newWorkspaceItem } from "@openmrs/esm-api";
import { useRouteMatch } from "react-router-dom";
import { performPatientsVitalsSearch } from "./vitals-card.resource";
import { createErrorHandler } from "@openmrs/esm-error-handling";
import styles from "./vital-record.css";
import SummaryCard from "../../ui-components/cards/summary-card.component";
// import VitalsForm from "./alt-vitals-form.component";
import VitalsForm from "./vitals-form.component";
import dayjs from "dayjs";

export default function VitalRecord(props: VitalRecordProps) {
  const [vitalSigns, setVitalSigns] = useState(null);
  const [isLoadingPatient, patient, patientUuid] = useCurrentPatient();
  const match = useRouteMatch();

  useEffect(() => {
    if (!isLoadingPatient && patientUuid && match.params) {
      const sub = performPatientsVitalsSearch(patientUuid).subscribe(
        vitals =>
          setVitalSigns(
            vitals.find(vital => vital.id === match.params["vitalUuid"])
          ),
        createErrorHandler()
      );
      return () => sub.unsubscribe();
    }
  }, [isLoadingPatient, patientUuid, match.params]);

  const openEditVitalWorkspaceTab = (
    componentName,
    title,
    systolicBloodPressure,
    diastolicBloodPressure,
    heartRate,
    temperature,
    oxygenation,
    dateRecorded,
    encounterUuid,
    vitalUuid
  ) => {
    newWorkspaceItem({
      component: componentName,
      name: title,
      props: {
        match: {
          params: {
            systolicBloodPressure,
            diastolicBloodPressure,
            heartRate,
            temperature,
            oxygenation,
            dateRecorded,
            encounterUuid,
            vitalUuid
          }
        }
      },
      inProgress: false,
      validations: (workspaceTabs: any[]) =>
        workspaceTabs.findIndex(tab => tab.component === componentName)
    });
  };

  return (
    <>
      {vitalSigns && (
        <SummaryCard
          name="Vital"
          styles={{ width: "100%" }}
          editComponent={VitalsForm}
          showComponent={() =>
            openEditVitalWorkspaceTab(
              VitalsForm,
              "Edit Vitals",
              vitalSigns.systolicBloodPressure,
              vitalSigns.diastolicBloodPressure,
              vitalSigns.heartRate,
              vitalSigns.temperature,
              vitalSigns.oxygenation,
              vitalSigns.date,
              vitalSigns.encounterUuid,
              match.params["vitalUuid"]
            )
          }
        >
          <div className={`omrs-type-body-regular ${styles.vitalCard}`}>
            <table className={styles.vitalTable}>
              <tbody>
                <tr>
                  <td className={styles.label}>Measured at</td>
                  <td className={styles.value}>
                    {vitalSigns.date
                      ? dayjs(vitalSigns.date).format("DD-MMM-YYYY hh:mm A")
                      : ""}
                  </td>
                </tr>
                <tr>
                  <td className={styles.label}>Blood pressure</td>
                  <td className={styles.value}>
                    {vitalSigns?.systolicBloodPressure?.value} /{" "}
                    {vitalSigns?.diastolicBloodPressure?.value} <span>mmHg</span>
                  </td>
                </tr>
                <tr>
                  <td className={styles.label}>Heart rate</td>
                  <td className={styles.value}>
                    {vitalSigns?.heartRate?.value} <span>bpm</span>
                  </td>
                </tr>
                <tr>
                  <td className={styles.label}>Oxygen saturation</td>
                  <td className={styles.value}>
                    {vitalSigns?.oxygenation?.value} <span>%</span>
                  </td>
                </tr>
                <tr>
                  <td className={styles.label}>Temperature</td>
                  <td className={styles.value}>
                    {vitalSigns?.temperature?.value} <span>°C</span>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </SummaryCard>
      )}
    </>
  );
}

type VitalRecordProps = {};