OHRI-2263 Refactor tab and use the reusable tabs component (PMTCT)

UCSF-IGHS · Jul 8, 2024 · bc5aa45 · bc5aa45
1 parent 893a650
commit bc5aa45
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 70 deletions.
diff --git a/packages/esm-ohri-pmtct-app/src/pmtct/patient-chart/child-health/child-health.component.tsx b/packages/esm-ohri-pmtct-app/src/pmtct/patient-chart/child-health/child-health.component.tsx
@@ -1,42 +1,16 @@
 import React from 'react';
-import { Tabs, Tab, TabList, TabPanels, TabPanel } from '@carbon/react';
-import { EncounterList, getMenuItemTabConfiguration } from '@ohri/openmrs-esm-ohri-commons-lib';
+import { EncounterListTabsComponent } from '@ohri/openmrs-esm-ohri-commons-lib';
 import childHealthTabConfigSchema from './child-health-config.json';
 import { useConfig } from '@openmrs/esm-framework';
 
-import styles from '../common.scss';
 interface OverviewListProps {
   patientUuid: string;
 }
 
 const ChildHealthSummary: React.FC<OverviewListProps> = ({ patientUuid }) => {
   const config = useConfig();
-  const tabs = getMenuItemTabConfiguration(childHealthTabConfigSchema, config);
   return (
-    <div className={styles.tabContainer}>
-      <Tabs>
-        <TabList contained>
-          {tabs.map((tab) => (
-            <Tab key={tab.name}>{tab.name}</Tab>
-          ))}
-        </TabList>
-        <TabPanels>
-          {tabs.map((tab) => (
-            <TabPanel>
-              <EncounterList
-                patientUuid={patientUuid}
-                formList={tab.formList}
-                columns={tab.columns}
-                encounterType={tab.encounterType}
-                launchOptions={tab.launchOptions}
-                headerTitle={tab.headerTitle}
-                description={tab.description}
-              />
-            </TabPanel>
-          ))}
-        </TabPanels>
-      </Tabs>
-    </div>
+    <EncounterListTabsComponent patientUuid={patientUuid} configSchema={childHealthTabConfigSchema} config={config} />
   );
 };
 

diff --git a/.../esm-ohri-pmtct-app/src/pmtct/patient-chart/maternal-health/maternal-health.component.tsx b/.../esm-ohri-pmtct-app/src/pmtct/patient-chart/maternal-health/maternal-health.component.tsx
@@ -1,42 +1,20 @@
 import React from 'react';
-import { Tabs, Tab, TabList, TabPanels, TabPanel } from '@carbon/react';
-import { EncounterList, getMenuItemTabConfiguration } from '@ohri/openmrs-esm-ohri-commons-lib';
+import { EncounterListTabsComponent } from '@ohri/openmrs-esm-ohri-commons-lib';
 import maternalHealthTabConfigSchema from './maternal-health-config.json';
 import { useConfig } from '@openmrs/esm-framework';
 
-import styles from '../common.scss';
 interface OverviewListProps {
   patientUuid: string;
 }
 
 const MaternalHealthSummary: React.FC<OverviewListProps> = ({ patientUuid }) => {
   const config = useConfig();
-  const tabs = getMenuItemTabConfiguration(maternalHealthTabConfigSchema, config);
   return (
-    <div className={styles.tabContainer}>
-      <Tabs>
-        <TabList contained>
-          {tabs.map((tab) => (
-            <Tab key={tab.name}>{tab.name}</Tab>
-          ))}
-        </TabList>
-        <TabPanels>
-          {tabs.map((tab) => (
-            <TabPanel>
-              <EncounterList
-                patientUuid={patientUuid}
-                formList={tab.formList}
-                columns={tab.columns}
-                encounterType={tab.encounterType}
-                launchOptions={tab.launchOptions}
-                headerTitle={tab.headerTitle}
-                description={tab.description}
-              />
-            </TabPanel>
-          ))}
-        </TabPanels>
-      </Tabs>
-    </div>
+    <EncounterListTabsComponent
+      patientUuid={patientUuid}
+      configSchema={maternalHealthTabConfigSchema}
+      config={config}
+    />
   );
 };
 

diff --git a/...m-ohri-pmtct-app/src/pmtct/patient-chart/mch-summary/tabs/current-pregnancy.component.tsx b/...m-ohri-pmtct-app/src/pmtct/patient-chart/mch-summary/tabs/current-pregnancy.component.tsx
@@ -4,12 +4,11 @@ import {
   type PatientChartProps,
   ExpandableList,
   fetchPatientRelationships,
-  EncounterList,
   basePath,
   fetchPatientLastEncounter,
   SummaryCard,
-  getMenuItemTabConfiguration,
   getSummaryCardProps,
+  EncounterListTabsComponent,
 } from '@ohri/openmrs-esm-ohri-commons-lib';
 import dayjs from 'dayjs';
 import { Link } from '@carbon/react';
@@ -49,7 +48,6 @@ const CurrentPregnancy: React.FC<PatientChartProps> = ({ patientUuid, pTrackerId
   const [infantOutcomes, setInfantOutcomes] = useState([]);
   const { encounterTypes, obsConcepts, identifiersTypes } = useConfig();
   const config = useConfig();
-  const motherPreviousVisitTabs = getMenuItemTabConfiguration(motherPreviousVisitConfigSchema, config);
   const recentPregnancyTabs = getSummaryCardProps(recentPregnancyConfigSchema, config);
   const appointmentSummaryTabs = getSummaryCardProps(appointmentSummaryConfigSchema, config);
   const arvTherapyTabs = getSummaryCardProps(arvTherapyColumnsConfigSchema, config);
@@ -274,17 +272,7 @@ const CurrentPregnancy: React.FC<PatientChartProps> = ({ patientUuid, pTrackerId
         />
       </div>
 
-      {motherPreviousVisitTabs.map((tab) => (
-        <EncounterList
-          patientUuid={patientUuid}
-          encounterType={tab.encounterType}
-          columns={tab.columns}
-          description={tab.description}
-          headerTitle={tab.headerTitle}
-          formList={tab.formList}
-          launchOptions={tab.launchOptions}
-        />
-      ))}
+      <EncounterListTabsComponent patientUuid={patientUuid} configSchema={motherPreviousVisitConfigSchema} config={config} />
     </div>
   );
 };