working refactor

openmrs · Jan 7, 2024 · 3d7bf66 · 3d7bf66
1 parent 8e2fd5f
commit 3d7bf66
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 6 deletions.
diff --git a/packages/esm-patient-labs-app/src/test-results/overview/common-overview.component.tsx b/packages/esm-patient-labs-app/src/test-results/overview/common-overview.component.tsx
@@ -14,6 +14,7 @@ interface CommonOverviewPropsBase {
   overviewData: Array<OverviewPanelEntry>;
   insertSeparator?: boolean;
   patientUuid?: string;
+  seeAllResults?: boolean;
 }
 
 interface CommonOverviewPropsWithToolbar {
@@ -43,6 +44,7 @@ const CommonOverview: React.FC<CommonOverviewProps> = ({
   insertSeparator = false,
   hideToolbar = false,
   patientUuid,
+  seeAllResults,
 }) => {
   const { t } = useTranslation();
   const [activeCardUuid, setActiveCardUuid] = React.useState('');
@@ -68,10 +70,12 @@ const CommonOverview: React.FC<CommonOverviewProps> = ({
       <EmptyState headerTitle={t('testResults_title', 'Test Results')} displayText={t('testResults', 'test results')} />
     );
 
+  const filteredOverviewData = seeAllResults ? overviewData : overviewData.slice(0, 3);
+
   return (
     <>
       {(() => {
-        const cards = overviewData.map(([title, type, data, effectiveDateTime, issuedDateTime, uuid]) => (
+        const cards = filteredOverviewData.map(([title, type, data, effectiveDateTime, issuedDateTime, uuid]) => (
           <article
             key={uuid}
             className={insertSeparator ? '' : `${styles.card} ${isActiveCard(uuid) ? styles.activeCard : ''}`}

diff --git a/packages/esm-patient-labs-app/src/test-results/overview/external-overview.extension.tsx b/packages/esm-patient-labs-app/src/test-results/overview/external-overview.extension.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
 import { Button, DataTableSkeleton } from '@carbon/react';
@@ -45,6 +45,8 @@ function useFilteredOverviewData(patientUuid: string, filter: (filterProps: Pane
 }
 
 const ExternalOverview: React.FC<ExternalOverviewProps> = ({ patientUuid, filter }) => {
+  const [seeAllResults, setSeeAllResults] = useState<boolean>(false);
+
   const { t } = useTranslation();
   const { overviewData, loaded, error } = useFilteredOverviewData(patientUuid, filter);
 
@@ -67,23 +69,24 @@ const ExternalOverview: React.FC<ExternalOverviewProps> = ({ patientUuid, filter
                       kind="ghost"
                       renderIcon={(props) => <ArrowRight size={16} {...props} />}
                       iconDescription="See all results"
-                      onClick={handleSeeAll}
+                      onClick={() => setSeeAllResults(true)}
                     >
                       {t('seeAllResults', 'See all results')}
                     </Button>
                   </div>
                   <CommonOverview
                     {...{
                       patientUuid,
-                      overviewData: overviewData.slice(0, resultsToShow),
+                      overviewData: overviewData,
                       insertSeparator: true,
                       deactivateToolbar: true,
                       isPatientSummaryDashboard: false,
                       hideToolbar: true,
+                      seeAllResults: seeAllResults,
                     }}
                   />
-                  {overviewData.length > resultsToShow && (
-                    <Button onClick={handleSeeAll} kind="ghost">
+                  {overviewData.length > resultsToShow && !seeAllResults && (
+                    <Button onClick={() => setSeeAllResults(true)} kind="ghost">
                       {t('moreResultsAvailable', 'More results available')}
                     </Button>
                   )}