From bc5aa45318298c943917d03226c602ca10b2f649 Mon Sep 17 00:00:00 2001
From: CynthiaKamau <cynthiakamau54@gmail.com>
Date: Mon, 8 Jul 2024 09:28:57 +0300
Subject: [PATCH] OHRI-2263 Refactor tab and use the reusable tabs component
 (PMTCT)

---
 .../child-health/child-health.component.tsx   | 30 ++--------------
 .../maternal-health.component.tsx             | 34 ++++---------------
 .../tabs/current-pregnancy.component.tsx      | 16 ++-------
 3 files changed, 10 insertions(+), 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
index 625da5664..3b94ab32f 100644
--- 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/packages/esm-ohri-pmtct-app/src/pmtct/patient-chart/maternal-health/maternal-health.component.tsx b/packages/esm-ohri-pmtct-app/src/pmtct/patient-chart/maternal-health/maternal-health.component.tsx
index fa30b2370..9cee4cf53 100644
--- a/packages/esm-ohri-pmtct-app/src/pmtct/patient-chart/maternal-health/maternal-health.component.tsx
+++ b/packages/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/packages/esm-ohri-pmtct-app/src/pmtct/patient-chart/mch-summary/tabs/current-pregnancy.component.tsx b/packages/esm-ohri-pmtct-app/src/pmtct/patient-chart/mch-summary/tabs/current-pregnancy.component.tsx
index c5b0ab446..7ba78d45a 100644
--- a/packages/esm-ohri-pmtct-app/src/pmtct/patient-chart/mch-summary/tabs/current-pregnancy.component.tsx
+++ b/packages/esm-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>
   );
 };