[PRMP-1035] Remove duplicate stitch lambda call (#452)

Co-authored-by: NogaNHS <[email protected]>

app/src/components/blocks/_lloydGeorge/lloydGeorgeViewRecordStage/LloydGeorgeViewRecordStage.test.tsx

@@ -20,6 +20,7 @@ import LloydGeorgeViewRecordStage, { Props } from './LloydGeorgeViewRecordStage'
 import { createMemoryHistory } from 'history';
 import { LG_RECORD_STAGE } from '../../../../types/blocks/lloydGeorgeStages';
 import * as ReactRouter from 'react-router-dom';
+import { useRef } from 'react';
 const mockPdf = buildLgSearchResult();
 const mockPatientDetails = buildPatientDetails();
 jest.mock('../../../../helpers/hooks/useRole');
@@ -83,6 +84,7 @@ describe('LloydGeorgeViewRecordStage', () => {
         async (stage) => {
             renderComponent({
                 downloadStage: stage,
+                cloudFrontUrl: '',
             });
 
             expect(screen.getByRole('progressbar', { name: 'Loading...' })).toBeInTheDocument();
@@ -447,6 +449,8 @@ const renderComponent = (propsOverride?: Partial<Props>) => {
         totalFileSizeInBytes: mockPdf.totalFileSizeInBytes,
         refreshRecord: jest.fn(),
         cloudFrontUrl: 'http://test.com',
+        showMenu: true,
+        resetDocState: jest.fn(),
         ...propsOverride,
     };
     render(<TestApp {...props} />);

app/src/components/blocks/_lloydGeorge/lloydGeorgeViewRecordStage/LloydGeorgeViewRecordStage.tsx

@@ -29,6 +29,7 @@ import useTitle from '../../../../helpers/hooks/useTitle';
 import { routeChildren } from '../../../../types/generic/routes';
 import { useNavigate } from 'react-router-dom';
 import PatientSimpleSummary from '../../../generic/patientSimpleSummary/PatientSimpleSummary';
+import ProgressBar from '../../../generic/progressBar/ProgressBar';
 
 export type Props = {
     downloadStage: DOWNLOAD_STAGE;
@@ -39,6 +40,8 @@ export type Props = {
     stage: LG_RECORD_STAGE;
     refreshRecord: () => void;
     cloudFrontUrl: string;
+    showMenu: boolean;
+    resetDocState: () => void;
 };
 
 function LloydGeorgeViewRecordStage({
@@ -49,6 +52,8 @@ function LloydGeorgeViewRecordStage({
     setStage,
     refreshRecord,
     cloudFrontUrl,
+    showMenu,
+    resetDocState,
 }: Props) {
     const navigate = useNavigate();
     const [fullScreen, setFullScreen] = useState(false);
@@ -80,8 +85,6 @@ function LloydGeorgeViewRecordStage({
               hasRecordInStorage,
               onClickFunctionForDownloadAndRemove: handleDownloadAndRemoveRecordButton,
           });
-    const showMenu = recordLinksToShow.length > 0;
-
     // @ts-ignore
     const handleConfirmDownloadAndRemoveButton = () => {
         navigate(routeChildren.LLOYD_GEORGE_DOWNLOAD_IN_PROGRESS);
@@ -101,6 +104,8 @@ function LloydGeorgeViewRecordStage({
     const pageHeader = 'Available records';
     useTitle({ pageTitle: pageHeader });
 
+    const menuClass = showMenu ? '--menu' : '--upload';
+
     return (
         <div className="lloydgeorge_record-stage">
             {formState.errors.confirmDownloadRemove && (
@@ -208,49 +213,37 @@ function LloydGeorgeViewRecordStage({
             <h1>{pageHeader}</h1>
             <PatientSimpleSummary />
             {!fullScreen ? (
-                <>
-                    {showMenu ? (
-                        <div className="lloydgeorge_record-stage_flex">
-                            <div className="lloydgeorge_record-stage_flex-row">
-                                <RecordMenuCard
-                                    recordLinks={recordLinksToShow}
-                                    setStage={setStage}
-                                />
-                            </div>
-                            <div className="lloydgeorge_record-stage_flex-row">
-                                <RecordCard
-                                    downloadStage={downloadStage}
-                                    heading="Lloyd George record"
-                                    fullScreenHandler={setFullScreen}
-                                    detailsElement={<RecordDetails {...recordDetailsProps} />}
-                                    isFullScreen={fullScreen}
-                                    refreshRecord={refreshRecord}
-                                    cloudFrontUrl={cloudFrontUrl}
-                                />
-                            </div>
-                        </div>
-                    ) : (
+                <div className="lloydgeorge_record-stage_flex">
+                    <RecordMenuCard
+                        recordLinks={recordLinksToShow}
+                        setStage={setStage}
+                        showMenu={showMenu}
+                    />
+
+                    <div
+                        className={`lloydgeorge_record-stage_flex-row lloydgeorge_record-stage_flex-row${menuClass}`}
+                    >
                         <RecordCard
-                            downloadStage={downloadStage}
                             heading="Lloyd George record"
                             fullScreenHandler={setFullScreen}
                             detailsElement={<RecordDetails {...recordDetailsProps} />}
                             isFullScreen={fullScreen}
                             refreshRecord={refreshRecord}
                             cloudFrontUrl={cloudFrontUrl}
+                            resetDocStage={resetDocState}
                         />
-                    )}
-                </>
+                    </div>
+                </div>
             ) : (
                 <div className="lloydgeorge_record-stage_fs">
                     <RecordCard
-                        downloadStage={downloadStage}
                         heading="Lloyd George record"
                         fullScreenHandler={setFullScreen}
                         detailsElement={<RecordDetails {...recordDetailsProps} />}
                         isFullScreen={fullScreen}
                         refreshRecord={refreshRecord}
                         cloudFrontUrl={cloudFrontUrl}
+                        resetDocStage={resetDocState}
                     />
                 </div>
             )}
@@ -273,7 +266,7 @@ const RecordDetails = ({
         case DOWNLOAD_STAGE.INITIAL:
         case DOWNLOAD_STAGE.PENDING:
         case DOWNLOAD_STAGE.REFRESH:
-            return null;
+            return <ProgressBar status="Loading..." />;
         case DOWNLOAD_STAGE.SUCCEEDED: {
             const detailsProps = {
                 lastUpdated,

app/src/components/generic/recordCard/RecordCard.test.tsx

@@ -3,7 +3,6 @@ import useConfig from '../../../helpers/hooks/useConfig';
 import useBaseAPIUrl from '../../../helpers/hooks/useBaseAPIUrl';
 import useBaseAPIHeaders from '../../../helpers/hooks/useBaseAPIHeaders';
 import getLloydGeorgeRecord from '../../../helpers/requests/getLloydGeorgeRecord';
-import { DOWNLOAD_STAGE } from '../../../types/generic/downloadStage';
 import { render, screen, waitFor } from '@testing-library/react';
 import RecordCard, { Props } from './RecordCard';
 import { buildLgSearchResult } from '../../../helpers/test/testBuilders';
@@ -41,10 +40,10 @@ describe('RecordCard Component', () => {
         heading: 'Mock Header Record',
         fullScreenHandler: mockFullScreenHandler,
         detailsElement: <div>Mock Details Element</div>,
-        downloadStage: DOWNLOAD_STAGE.INITIAL,
         isFullScreen: false,
         refreshRecord: jest.fn(),
         cloudFrontUrl: 'https://test.com',
+        resetDocStage: jest.fn(),
     };
 
     beforeEach(() => {
@@ -109,9 +108,9 @@ describe('RecordCard Component', () => {
             });
         });
 
-        it('renders ProgressBar while isLoading is true', async () => {
-            render(<RecordCard {...props} />);
-            expect(screen.getByText('Loading...')).toBeInTheDocument();
+        it('renders nothing while no cloudFrontUrl', async () => {
+            render(<RecordCard {...props} cloudFrontUrl="" />);
+            expect(screen.queryByTestId('pdf-viewer')).not.toBeInTheDocument();
         });
 
         it('removes ProgressBar once loading is complete', async () => {
@@ -165,11 +164,6 @@ describe('RecordCard Component', () => {
             expect(screen.queryByTestId('pdf-viewer')).not.toBeInTheDocument();
             expect(screen.queryByTestId('full-screen-btn')).not.toBeInTheDocument();
         });
-
-        it('does not render PdfViewer when downloadStage is FAILED', async () => {
-            render(<RecordCard {...props} downloadStage={DOWNLOAD_STAGE.FAILED} />);
-            expect(screen.queryByTestId('pdf-viewer')).not.toBeInTheDocument();
-        });
     });
 
     describe('Navigation', () => {

app/src/components/generic/recordCard/RecordCard.tsx

@@ -1,19 +1,17 @@
 import { Card } from 'nhsuk-react-components';
-import React, { ReactNode, useEffect, useRef, useState } from 'react';
-import { DOWNLOAD_STAGE } from '../../../types/generic/downloadStage';
+import React, { ReactNode, useEffect, useRef } from 'react';
 import PdfViewer from '../pdfViewer/PdfViewer';
 import useRole from '../../../helpers/hooks/useRole';
 import { REPOSITORY_ROLE } from '../../../types/generic/authRole';
-import ProgressBar from '../progressBar/ProgressBar';
 
 export type Props = {
     heading: string;
     fullScreenHandler: (clicked: true) => void;
     detailsElement: ReactNode;
-    downloadStage: DOWNLOAD_STAGE;
     isFullScreen: boolean;
     refreshRecord: () => void;
     cloudFrontUrl: string;
+    resetDocStage: () => void;
 };
 
 function RecordCard({
@@ -23,32 +21,25 @@ function RecordCard({
     isFullScreen,
     cloudFrontUrl,
     refreshRecord,
+    resetDocStage,
 }: Props) {
     const role = useRole();
     const userIsGpClinical = role === REPOSITORY_ROLE.GP_CLINICAL;
-    const [isLoading, setIsLoading] = useState(true);
     const mounted = useRef(false);
 
     useEffect(() => {
         const onPageLoad = async () => {
+            resetDocStage();
             await refreshRecord();
-            setIsLoading(false);
         };
         if (!mounted.current) {
+            onPageLoad();
             mounted.current = true;
-            void onPageLoad();
         }
-    }, [refreshRecord]);
+    }, [refreshRecord, resetDocStage]);
 
     const Record = () => {
-        if (isLoading) {
-            return (
-                <div className="pl-7">
-                    <ProgressBar status="Loading..." />
-                </div>
-            );
-        }
-        return <PdfViewer fileUrl={cloudFrontUrl} />;
+        return cloudFrontUrl ? <PdfViewer fileUrl={cloudFrontUrl} /> : null;
     };
 
     const RecordLayout = ({ children }: { children: ReactNode }) => {
@@ -75,6 +66,7 @@ function RecordCard({
                                 data-testid="full-screen-btn"
                                 onClick={() => {
                                     fullScreenHandler(true);
+                                    resetDocStage();
                                 }}
                             >
                                 View in full screen

app/src/components/generic/recordMenuCard/RecordMenuCard.test.tsx

@@ -66,7 +66,9 @@ describe('RecordMenuCard', () => {
 
     describe('Rendering', () => {
         it('renders menu', () => {
-            render(<RecordMenuCard setStage={mockSetStage} recordLinks={mockLinks} />);
+            render(
+                <RecordMenuCard setStage={mockSetStage} recordLinks={mockLinks} showMenu={true} />,
+            );
             expect(screen.getByRole('heading', { name: 'Download record' })).toBeInTheDocument();
             expect(screen.getByRole('heading', { name: 'Update record' })).toBeInTheDocument();
             expect(screen.getByRole('link', { name: 'Remove files' })).toBeInTheDocument();
@@ -80,7 +82,11 @@ describe('RecordMenuCard', () => {
             );
 
             const { rerender } = render(
-                <RecordMenuCard setStage={mockSetStage} recordLinks={mockLinksUpdateOnly} />,
+                <RecordMenuCard
+                    setStage={mockSetStage}
+                    recordLinks={mockLinksUpdateOnly}
+                    showMenu={true}
+                />,
             );
             expect(screen.getByRole('heading', { name: 'Update record' })).toBeInTheDocument();
             expect(screen.getByRole('link', { name: 'Upload files' })).toBeInTheDocument();
@@ -94,7 +100,11 @@ describe('RecordMenuCard', () => {
                 (link) => link.type === RECORD_ACTION.DOWNLOAD,
             );
             rerender(
-                <RecordMenuCard setStage={mockSetStage} recordLinks={mockLinksDownloadOnly} />,
+                <RecordMenuCard
+                    setStage={mockSetStage}
+                    recordLinks={mockLinksDownloadOnly}
+                    showMenu={true}
+                />,
             );
             expect(screen.getByRole('heading', { name: 'Download record' })).toBeInTheDocument();
             expect(screen.getByRole('link', { name: 'Download files' })).toBeInTheDocument();
@@ -108,13 +118,15 @@ describe('RecordMenuCard', () => {
 
         it('does not render anything if the given record links array is empty', () => {
             const { container } = render(
-                <RecordMenuCard setStage={mockSetStage} recordLinks={[]} />,
+                <RecordMenuCard setStage={mockSetStage} recordLinks={[]} showMenu={false} />,
             );
             expect(container).toBeEmptyDOMElement();
         });
 
         it('render menu item as a <button> if link item does not have stage or href', () => {
-            render(<RecordMenuCard setStage={mockSetStage} recordLinks={mockLinks} />);
+            render(
+                <RecordMenuCard setStage={mockSetStage} recordLinks={mockLinks} showMenu={true} />,
+            );
             expect(
                 screen.getByRole('button', { name: 'Download and remove files' }),
             ).toBeInTheDocument();
@@ -125,11 +137,20 @@ describe('RecordMenuCard', () => {
 
             expect(mockShowDownloadAndRemoveConfirmation).toBeCalledTimes(1);
         });
+
+        it('Does not render the MenuCard if showMenu is false', () => {
+            const { container } = render(
+                <RecordMenuCard setStage={mockSetStage} recordLinks={mockLinks} showMenu={false} />,
+            );
+            expect(container).toBeEmptyDOMElement();
+        });
     });
 
     describe('Navigation', () => {
         it('navigates to href when clicked', () => {
-            render(<RecordMenuCard setStage={mockSetStage} recordLinks={mockLinks} />);
+            render(
+                <RecordMenuCard setStage={mockSetStage} recordLinks={mockLinks} showMenu={true} />,
+            );
             expect(screen.getByRole('heading', { name: 'Update record' })).toBeInTheDocument();
             expect(screen.getByRole('link', { name: 'Upload files' })).toBeInTheDocument();
             act(() => {
@@ -139,7 +160,9 @@ describe('RecordMenuCard', () => {
         });
 
         it('change stage when clicked', () => {
-            render(<RecordMenuCard setStage={mockSetStage} recordLinks={mockLinks} />);
+            render(
+                <RecordMenuCard setStage={mockSetStage} recordLinks={mockLinks} showMenu={true} />,
+            );
             expect(screen.getByRole('heading', { name: 'Update record' })).toBeInTheDocument();
             expect(screen.getByRole('link', { name: 'Remove files' })).toBeInTheDocument();