From d6df2847199bea32b6dd61b0796cff8ffd44c5e4 Mon Sep 17 00:00:00 2001
From: CynthiaKamau <cynthiakamau54@gmail.com>
Date: Tue, 16 Jul 2024 13:35:34 +0300
Subject: [PATCH] Initial translation work

---
 .../card-summary/summary-card.component.tsx          |  6 +++++-
 .../encounter-list/encounter-list.component.tsx      |  4 ++--
 .../encounter-tile/encounter-tile.component.tsx      |  4 +++-
 .../patient-table/patient-table.component.tsx        | 12 ++++--------
 .../mch-summary/tabs/current-pregnancy.component.tsx |  6 +++++-
 5 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/packages/esm-commons-lib/src/components/card-summary/summary-card.component.tsx b/packages/esm-commons-lib/src/components/card-summary/summary-card.component.tsx
index 97ddbb2a0..4d90482db 100644
--- a/packages/esm-commons-lib/src/components/card-summary/summary-card.component.tsx
+++ b/packages/esm-commons-lib/src/components/card-summary/summary-card.component.tsx
@@ -5,6 +5,7 @@ import { type OpenmrsEncounter } from '@openmrs/openmrs-form-engine-lib';
 import { fetchLatestEncountersOfTypes } from './helpers';
 
 import styles from '../../styleguide/tiles.scss';
+import { useTranslation } from 'react-i18next';
 
 export interface SummaryCardProps {
   patientUuid: string;
@@ -23,6 +24,7 @@ export interface SummaryCardColumn {
 
 export const SummaryCard: React.FC<SummaryCardProps> = ({ patientUuid, columns, headerTitle, maxRowItems }) => {
   const [isLoading, setIsLoading] = useState(true);
+  const { t } = useTranslation();
   const [columnEncountersMappings, setColumnEncountersMappings] = useState<
     {
       column: SummaryCardColumn;
@@ -98,10 +100,12 @@ export const SummaryCard: React.FC<SummaryCardProps> = ({ patientUuid, columns,
 };
 
 function SummaryItem({ column, encounters }) {
+  const { t } = useTranslation();
+
   return (
     <div className={styles.tileBox}>
       <div className={styles.tileBoxColumn}>
-        <span className={styles.tileTitle}> {column.header} </span>
+        <span className={styles.tileTitle}> {t(column.key, column.header)} </span>
         <span className={styles.tileValue}>
           {column?.getObsValue ? <LazyCell lazyValue={column?.getObsValue(encounters)} /> : '--'}
         </span>
diff --git a/packages/esm-commons-lib/src/components/encounter-list/encounter-list.component.tsx b/packages/esm-commons-lib/src/components/encounter-list/encounter-list.component.tsx
index b2e75d97c..916202625 100644
--- a/packages/esm-commons-lib/src/components/encounter-list/encounter-list.component.tsx
+++ b/packages/esm-commons-lib/src/components/encounter-list/encounter-list.component.tsx
@@ -173,11 +173,11 @@ export const EncounterList: React.FC<EncounterListProps> = ({
   const headers = useMemo(() => {
     if (columns) {
       return columns.map((column) => {
-        return { key: column.key, header: column.header };
+        return { key: column.key, header: t(column.key, column.header) };
       });
     }
     return [];
-  }, [columns]);
+  }, [columns, t]);
 
   const constructPaginatedTableRows = useCallback(
     (encounters: OpenmrsEncounter[], currentPage: number, pageSize: number) => {
diff --git a/packages/esm-commons-lib/src/components/encounter-tile/encounter-tile.component.tsx b/packages/esm-commons-lib/src/components/encounter-tile/encounter-tile.component.tsx
index 14621761d..74576ae68 100644
--- a/packages/esm-commons-lib/src/components/encounter-tile/encounter-tile.component.tsx
+++ b/packages/esm-commons-lib/src/components/encounter-tile/encounter-tile.component.tsx
@@ -4,6 +4,7 @@ import { LazyCell } from '../lazy-cell/lazy-cell.component';
 import { useLastEncounter } from '../../hooks/useLastEncounter';
 
 import styles from '../../styleguide/tiles.scss';
+import { useTranslation } from 'react-i18next';
 
 export interface EncounterTileColumn {
   key: string;
@@ -43,6 +44,7 @@ export const EncounterTile: React.FC<EncounterTileProps> = ({ patientUuid, colum
 };
 
 export const EncounterValuesTile: React.FC<EncounterValuesTileProps> = ({ patientUuid, column }) => {
+  const { t } = useTranslation();
   const { lastEncounter, isLoading, error, isValidating } = useLastEncounter(patientUuid, column.encounterUuid);
 
   if (isLoading || isValidating) {
@@ -63,7 +65,7 @@ export const EncounterValuesTile: React.FC<EncounterValuesTileProps> = ({ patien
   return (
     <div className={styles.tileBox}>
       <div className={styles.tileBoxColumn}>
-        <span className={styles.tileTitle}> {column.header} </span>
+        <span className={styles.tileTitle}> {t(column.key, column.header)} </span>
         <span className={styles.tileValue}>
           <LazyCell lazyValue={column.getObsValue(lastEncounter)} />
         </span>
diff --git a/packages/esm-commons-lib/src/components/patient-table/patient-table.component.tsx b/packages/esm-commons-lib/src/components/patient-table/patient-table.component.tsx
index be0f4d75d..dee07d147 100644
--- a/packages/esm-commons-lib/src/components/patient-table/patient-table.component.tsx
+++ b/packages/esm-commons-lib/src/components/patient-table/patient-table.component.tsx
@@ -139,12 +139,7 @@ interface PatientTableColumn {
   };
 }
 
-export const PatientTable: React.FC<PatientTableProps> = ({
-  columns,
-  isFetching,
-  isLoading,
-  patients,
-}) => {
+export const PatientTable: React.FC<PatientTableProps> = ({ columns, isFetching, isLoading, patients }) => {
   const { t } = useTranslation();
   const layout = useLayoutType();
   const responsiveSize = isDesktop(layout) ? 'sm' : 'lg';
@@ -209,7 +204,8 @@ export const PatientTable: React.FC<PatientTableProps> = ({
                     height: '3rem',
                     overflow: 'visible',
                     backgroundColor: 'color',
-                  }}>
+                  }}
+                >
                   <TableToolbarContent className={styles.toolbarContent}>
                     <TableToolbarSearch
                       className={styles.search}
@@ -219,7 +215,7 @@ export const PatientTable: React.FC<PatientTableProps> = ({
                       size="sm"
                     />
                   </TableToolbarContent>
-               </TableToolbar>
+                </TableToolbar>
                 <Table className={styles.table} {...getTableProps()} data-testid="patientsTable">
                   <TableHead>
                     <TableRow>
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 7ba78d45a..957691979 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
@@ -272,7 +272,11 @@ const CurrentPregnancy: React.FC<PatientChartProps> = ({ patientUuid, pTrackerId
         />
       </div>
 
-      <EncounterListTabsComponent patientUuid={patientUuid} configSchema={motherPreviousVisitConfigSchema} config={config} />
+      <EncounterListTabsComponent
+        patientUuid={patientUuid}
+        configSchema={motherPreviousVisitConfigSchema}
+        config={config}
+      />
     </div>
   );
 };