Merge pull request #75 from sainingo/main

Fetch SP names from API
AMPATH · Jun 10, 2024 · 8b5c26e · 8b5c26e
2 parents 4d7b444 + cd3ee47
commit 8b5c26e
Show file tree

Hide file tree

Showing 7 changed files with 219 additions and 151 deletions.
diff --git a/package.json b/package.json
@@ -34,7 +34,7 @@
     "@babel/core": "^7.11.6",
     "@carbon/react": "~1.37.0",
     "@ohri/openmrs-esm-ohri-commons-lib": "next",
-    "@openmrs/esm-framework": "^5.6.1-pre.1870",
+    "@openmrs/esm-framework": "^5.6.1-pre.1881",
     "@openmrs/esm-patient-common-lib": "next",
     "@playwright/test": "1.40.1",
     "@swc/core": "^1.2.165",
@@ -71,7 +71,7 @@
     "jest-cli": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "lint-staged": "^15.2.1",
-    "openmrs": "^5.6.1-pre.1870",
+    "openmrs": "^5.6.1-pre.1881",
     "prettier": "^3.1.1",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",

diff --git a/...esm-report-app/src/reports-dashboard/left-justified-components/report-table-component.tsx b/...esm-report-app/src/reports-dashboard/left-justified-components/report-table-component.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import {
   DataTable,
   TableContainer,
@@ -13,20 +13,21 @@ import {
   Pagination,
 } from '@carbon/react';
 
-const ReportTable: React.FC<{ onRowClick: any; title: string; rows: { id: string; name: string }[] }> = ({
-  onRowClick,
-  title,
-  rows,
-}) => {
-  const headers = [{ key: 'name', header: 'Name' }];
+interface ReportTableProps {
+  onRowClick: (row: any) => void;
+  rows: any;
+}
+
+const ReportTable: React.FC<ReportTableProps> = ({ onRowClick, rows }) => {
+  const headers = [{ key: 'report_name', header: 'Name' }];
 
   const handleRowClick = (row: any) => {
     onRowClick(row);
   };
 
   return (
     <>
-      <TableContainer title={`${title} Reports`}>
+      <TableContainer title={`Reports`}>
         <DataTable
           rows={rows}
           headers={headers}
@@ -36,19 +37,27 @@ const ReportTable: React.FC<{ onRowClick: any; title: string; rows: { id: string
                 <TableRow>
                   <TableSelectAll />
                   {headers.map((header) => (
-                    <TableHeader {...getHeaderProps({ header })}>{header.header}</TableHeader>
+                    <TableHeader {...getHeaderProps({ header })} key={header.key}>
+                      {header.header}
+                    </TableHeader>
                   ))}
                 </TableRow>
               </TableHead>
               <TableBody>
-                {rows.map((row) => (
-                  <TableRow {...getRowProps({ row })} onClick={() => handleRowClick(row.cells)}>
-                    <TableSelectRow />
-                    {row.cells.map((cell) => (
-                      <TableCell key={cell.id}>{cell.value}</TableCell>
-                    ))}
+                {rows.length > 0 ? (
+                  rows.map((row) => (
+                    <TableRow {...getRowProps({ row })} onClick={() => handleRowClick(row.cells)}>
+                      <TableSelectRow />
+                      {row.cells.map((cell) => (
+                        <TableCell key={cell.id}>{cell.value}</TableCell>
+                      ))}
+                    </TableRow>
+                  ))
+                ) : (
+                  <TableRow>
+                    <TableCell colSpan={headers.length + 1}>No data available</TableCell>
                   </TableRow>
-                ))}
+                )}
               </TableBody>
             </Table>
           )}

diff --git a/packages/esm-report-app/src/reports-dashboard/report-summary/ReportSummary.tsx b/packages/esm-report-app/src/reports-dashboard/report-summary/ReportSummary.tsx
@@ -15,7 +15,7 @@ import {
 } from '@carbon/react';
 import styles from './ReportSummary.css';
 
-const ReportSummary: React.FC<{ title: string; rows: { id: string; name: string }[] }> = ({ title, rows }) => {
+const ReportSummary: React.FC<{ rows: { id: string; report_name: string; description?: string }[] }> = ({ rows }) => {
   const headers = [
     { key: 'status', header: 'Report Status' },
     { key: 'month', header: 'Month' },

diff --git a/packages/esm-report-app/src/reports-dashboard/report-tab/report-tabs.tsx b/packages/esm-report-app/src/reports-dashboard/report-tab/report-tabs.tsx
@@ -1,9 +1,12 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Grid, Column, Tabs, TabList, Tab, TabPanels, TabPanel, Checkbox, Button, TextInput } from '@carbon/react';
 import styles from './report-tabs.scss';
 import RenderTabPanel from '../tab-panel/tab-panel-component';
+import { getSPReports } from '../tab-panel/tab.panel.resource';
+
 export const RenderReportTab: React.FC = () => {
   const [selectedTab, setSelectedTab] = useState('HIV Treatment');
+  const { response, isLoading, error, isValidating } = getSPReports();
 
   const tabPanelsContent = [
     {
@@ -96,10 +99,31 @@ export const RenderReportTab: React.FC = () => {
     },
   ];
 
+  const [parsedRows, setParsedRows] = useState<any[]>([]);
+
+  useEffect(() => {
+    try {
+      const jsonObject = JSON.parse(response);
+      if (Array.isArray(jsonObject)) {
+        setParsedRows(jsonObject);
+      } else {
+        console.error('Parsed JSON is not an array');
+        setParsedRows([]);
+      }
+    } catch (error) {
+      console.error('Error parsing JSON:', error);
+      setParsedRows([]);
+    }
+  }, [response]);
+
   const handleTabClick = (tabName: string) => {
     setSelectedTab(tabName);
   };
 
+  if (isLoading) {
+    return <div>Loading...</div>;
+  }
+
   return (
     <div>
       <Tabs>
@@ -116,7 +140,7 @@ export const RenderReportTab: React.FC = () => {
         <TabPanels>
           {tabPanelsContent.map((tab, index) => (
             <TabPanel key={index} className={styles['tab-panels']}>
-              {selectedTab === tab.title && <RenderTabPanel title={tab.title} rows={tab.rows} />}
+              {selectedTab === tab.title && <RenderTabPanel rows={parsedRows} />}
             </TabPanel>
           ))}
         </TabPanels>

diff --git a/packages/esm-report-app/src/reports-dashboard/tab-panel/tab-panel-component.tsx b/packages/esm-report-app/src/reports-dashboard/tab-panel/tab-panel-component.tsx
@@ -1,11 +1,12 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { DatePicker, DatePickerInput, Button, InlineLoading, InlineNotification } from '@carbon/react';
 import { Download } from '@carbon/react/icons';
 import ReportTable from '../left-justified-components/report-table-component';
 import styles from './tab-panel.scss';
 import ReportSummary from '../report-summary/ReportSummary';
+import { generateSpReport } from './tab.panel.resource';
 
-const RenderTabPanel: React.FC<{ title: string; rows: { id: string; name: string }[] }> = ({ title, rows }) => {
+const RenderTabPanel: React.FC<{ rows: any[] }> = ({ rows }) => {
   const [selectedRow, setSelectedRow] = useState(null);
   const [startDate, setStartDate] = useState<Date | null>(null);
   const [endDate, setEndDate] = useState<Date | null>(null);
@@ -60,25 +61,16 @@ const RenderTabPanel: React.FC<{ title: string; rows: { id: string; name: string
     setNotification({ kind: '', title: '', subtitle: '', hide: true });
 
     try {
-      const response = await fetch('/v1/amrscore/reports/generate', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-          startDate,
-          endDate,
-          sp_name: selectedRow.map((row: any) => row.value),
-          report_id: selectedRow.map((row: any) => row.id),
-        }),
-      });
-
-      if (!response.ok) {
-        throw new Error('Network response was not ok');
-      }
-
-      const data = await response.json();
-      setReportData(data);
+      // const response = generateSpReport({
+      //   startDate,
+      //   endDate,
+      //   sp_name: selectedRow.map((row: any) => row.value),
+      //   report_id: selectedRow.map((row: any) => row.id),
+      // });
+      // if (!response) {
+      //   throw new Error('Network response was not ok');
+      // }
+      // setReportData(response);
     } catch (error) {
       setNotification({
         kind: 'error',
@@ -94,7 +86,7 @@ const RenderTabPanel: React.FC<{ title: string; rows: { id: string; name: string
   return (
     <div className={styles.container}>
       <div className={styles.leftPanel}>
-        <ReportTable title={title} rows={rows} onRowClick={handleRowClick} />
+        <ReportTable rows={rows} onRowClick={handleRowClick} />
       </div>
       <div className={styles.rightPanel}>
         {!notification.hide && (
@@ -141,8 +133,8 @@ const RenderTabPanel: React.FC<{ title: string; rows: { id: string; name: string
         </div>
         {loading ? (
           <InlineLoading description="Generating report..." />
-        ) : selectedRow && reportData ? (
-          <ReportSummary title={title} rows={rows} />
+        ) : selectedRow ? (
+          <ReportSummary rows={rows} />
         ) : (
           <div className={styles.emptyState}>No data, please click on Generate</div>
         )}

diff --git a/packages/esm-report-app/src/reports-dashboard/tab-panel/tab.panel.resource.tsx b/packages/esm-report-app/src/reports-dashboard/tab-panel/tab.panel.resource.tsx
@@ -0,0 +1,43 @@
+import { openmrsFetch } from '@openmrs/esm-framework';
+import useSWR from 'swr';
+
+// Configuration
+const BASE_URL = '/ws/rest/v1/amrscore/reports';
+
+const fetcher = async (url) => {
+  try {
+    const response = await openmrsFetch(url, {});
+    if (!response.ok) {
+      throw new Error(`Failed to fetch data: ${response.statusText}`);
+    }
+    return response.json();
+  } catch (error) {
+    throw new Error(`An error occurred while fetching data: ${error.message}`);
+  }
+};
+
+export const generateSpReport = (result) => {
+  const { data, isLoading, error, isValidating } = useSWR(`${BASE_URL}/generate`, fetcher);
+
+  const response = data ? (data as any)?.result : [];
+
+  return {
+    response,
+    isLoading,
+    error,
+    isValidating,
+  };
+};
+
+export const getSPReports = () => {
+  const { data, isLoading, error, isValidating } = useSWR(BASE_URL, fetcher);
+
+  const response = data ? (data as any)?.result : [];
+
+  return {
+    response,
+    isLoading,
+    error,
+    isValidating,
+  };
+};