(fix) Miscellaneous improvements

src/ohri-form.component.tsx

@@ -1,6 +1,8 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
-import styles from './ohri-form.scss';
+import ReactMarkdown from 'react-markdown';
 import { Form, Formik } from 'formik';
+import { Button, ButtonSet } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
 import * as Yup from 'yup';
 import {
   usePatient,
@@ -11,21 +13,19 @@ import {
   registerExtension,
   attach,
 } from '@openmrs/esm-framework';
-import { useTranslation } from 'react-i18next';
-import { OHRIFormSchema, SessionMode, OHRIFormPage as OHRIFormPageProps } from './api/types';
+import LinearLoader from './components/loaders/linear-loader.component';
+import LoadingIcon from './components/loaders/loading.component';
 import OHRIFormSidebar from './components/sidebar/ohri-form-sidebar.component';
+import { init, teardown } from './lifecycle';
+import { OHRIFormSchema, SessionMode, OHRIFormPage as OHRIFormPageProps } from './api/types';
 import { OHRIEncounterForm } from './components/encounter/ohri-encounter-form';
-import { useWorkspaceLayout } from './hooks/useWorkspaceLayout';
-import { Button, ButtonSet } from '@carbon/react';
-import ReactMarkdown from 'react-markdown';
 import { PatientBanner } from './components/patient-banner/patient-banner.component';
-import LoadingIcon from './components/loaders/loading.component';
-import { init, teardown } from './lifecycle';
-import { usePostSubmissionAction } from './hooks/usePostSubmissionAction';
-import LinearLoader from './components/loaders/linear-loader.component';
-import { useFormJson } from './hooks/useFormJson';
 import { PatientChartWorkspaceHeaderSlot } from './constants';
 import { reportError } from './utils/error-utils';
+import { useFormJson } from './hooks/useFormJson';
+import { usePostSubmissionAction } from './hooks/usePostSubmissionAction';
+import { useWorkspaceLayout } from './hooks/useWorkspaceLayout';
+import styles from './ohri-form.scss';
 
 interface OHRIFormProps {
   patientUUID: string;
@@ -67,8 +67,8 @@ interface OHRIFormProps {
 }
 
 export interface FormSubmissionHandler {
-  validate: (values) => boolean;
   submit: (values) => Promise<any>;
+  validate: (values) => boolean;
 }
 
 const OHRIForm: React.FC<OHRIFormProps> = ({
@@ -84,29 +84,30 @@ const OHRIForm: React.FC<OHRIFormProps> = ({
   meta,
   encounterUuid,
 }) => {
-  const [currentProvider, setCurrentProvider] = useState(null);
-  const [location, setEncounterLocation] = useState(null);
+  const session = useSession();
+  const currentProvider = session?.currentProvider?.uuid ? session.currentProvider.uuid : null;
+  const location = session && !(encounterUUID || encounterUuid) ? session?.sessionLocation : null;
   const { patient, isLoading: isLoadingPatient, error: patientError } = usePatient(patientUUID);
   const { formJson: refinedFormJson, isLoading: isLoadingFormJson, formError } = useFormJson(
     formUUID,
     formJson,
     encounterUUID || encounterUuid,
     formSessionIntent,
   );
-  const session = useSession();
-  const [initialValues, setInitialValues] = useState({});
+
+  const { t } = useTranslation();
   const encDate = new Date();
+  const handlers = new Map<string, FormSubmissionHandler>();
+  const ref = useRef(null);
+  const workspaceLayout = useWorkspaceLayout(ref);
+  const [initialValues, setInitialValues] = useState({});
   const [scrollablePages, setScrollablePages] = useState(new Set<OHRIFormPageProps>());
   const [selectedPage, setSelectedPage] = useState('');
   const [collapsed, setCollapsed] = useState(true);
-  const { t } = useTranslation();
-  const ref = useRef(null);
-  const workspaceLayout = useWorkspaceLayout(ref);
-  const handlers = new Map<string, FormSubmissionHandler>();
+  const [isLoadingFormDependencies, setIsLoadingFormDependencies] = useState(true);
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [pagesWithErrors, setPagesWithErrors] = useState([]);
   const postSubmissionHandlers = usePostSubmissionAction(refinedFormJson?.postSubmissionActions);
-  const [isLoadingFormDependencies, setIsLoadingFormDependencies] = useState(true);
 
   const sessionMode = useMemo(() => {
     if (mode) {
@@ -115,7 +116,7 @@ const OHRIForm: React.FC<OHRIFormProps> = ({
     return encounterUUID || encounterUuid ? 'edit' : 'enter';
   }, [mode, encounterUUID, encounterUuid]);
 
-  const showSideBar = useMemo(() => {
+  const showSidebar = useMemo(() => {
     return workspaceLayout != 'minimized' && scrollablePages.size > 0;
   }, [workspaceLayout, scrollablePages.size]);
 
@@ -137,6 +138,7 @@ const OHRIForm: React.FC<OHRIFormProps> = ({
         },
       },
     };
+
     registerExtension(extDetails);
     attach(PatientChartWorkspaceHeaderSlot, extDetails.name);
 
@@ -145,15 +147,6 @@ const OHRIForm: React.FC<OHRIFormProps> = ({
     };
   }, []);
 
-  useEffect(() => {
-    if (session) {
-      if (!(encounterUUID || encounterUuid)) {
-        setEncounterLocation(session.sessionLocation);
-      }
-      setCurrentProvider(session.currentProvider.uuid);
-    }
-  }, [session]);
-
   useEffect(() => {
     ////////////
     // This hooks into the React lifecycle of the forms engine.
@@ -173,20 +166,21 @@ const OHRIForm: React.FC<OHRIFormProps> = ({
   }, [patientError, t]);
 
   const handleFormSubmit = (values: Record<string, any>) => {
-    // validate form and it's suforms
-    let isSubmitable = true;
+    // validate the form and its subforms (when present)
+    let isSubmittable = true;
     handlers.forEach(handler => {
       const result = handler?.validate?.(values);
       if (!result) {
-        isSubmitable = false;
+        isSubmittable = false;
       }
     });
     // do submit
-    if (isSubmitable) {
+    if (isSubmittable) {
       setIsSubmitting(true);
       const submissions = [...handlers].map(([key, handler]) => {
         return handler?.submit?.(values);
       });
+
       Promise.all(submissions)
         .then(async results => {
           if (mode == 'edit') {
@@ -242,18 +236,18 @@ const OHRIForm: React.FC<OHRIFormProps> = ({
         setSubmitting(false);
       }}>
       {props => (
-        <Form className={`cds--form no-padding ng-untouched ng-pristine ng-invalid ${styles.ohriForm}`} ref={ref}>
+        <Form className={`cds--form no-padding ${styles.ohriForm}`} ref={ref}>
           {isLoadingPatient || isLoadingFormJson ? (
             <LoadingIcon />
           ) : (
             <div className={styles.ohriFormContainer}>
               {isLoadingFormDependencies && (
-                <div className={styles.ohriFormBody}>
+                <div className={styles.loader}>
                   <LinearLoader />
                 </div>
               )}
               <div className={styles.ohriFormBody}>
-                {showSideBar && (
+                {showSidebar && (
                   <OHRIFormSidebar
                     isFormSubmitting={isSubmitting}
                     pagesWithErrors={pagesWithErrors}
@@ -269,7 +263,9 @@ const OHRIForm: React.FC<OHRIFormProps> = ({
                   />
                 )}
                 <div className={styles.formContent}>
-                  {workspaceLayout != 'minimized' && <PatientBanner patient={patient} hideActionsOverflow={true} />}
+                  {workspaceLayout != 'minimized' && patient?.id && (
+                    <PatientBanner patient={patient} hideActionsOverflow={true} />
+                  )}
                   {refinedFormJson.markdown && (
                     <div className={styles.markdownContainer}>
                       <ReactMarkdown children={refinedFormJson.markdown.join('\n')} />

src/ohri-form.scss

@@ -17,6 +17,11 @@
   height: 100%;
 }
 
+.loader {
+  @extend .ohriFormBody;
+  height: 1rem;
+}
+
 .ohriFormContainer :global(.cds--label) {
   font-size: 0.875rem;
   width: 18rem;