PRMP-1035 Remove duplicate stitch lambda call

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,7 @@ const renderComponent = (propsOverride?: Partial<Props>) => {
         totalFileSizeInByte: mockPdf.total_file_size_in_byte,
         refreshRecord: jest.fn(),
         cloudFrontUrl: 'http://test.com',
+        showMenu: true,
         ...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,7 @@ export type Props = {
     stage: LG_RECORD_STAGE;
     refreshRecord: () => void;
     cloudFrontUrl: string;
+    showMenu: boolean;
 };
 
 function LloydGeorgeViewRecordStage({
@@ -49,6 +51,7 @@ function LloydGeorgeViewRecordStage({
     setStage,
     refreshRecord,
     cloudFrontUrl,
+    showMenu,
 }: Props) {
     const navigate = useNavigate();
     const [fullScreen, setFullScreen] = useState(false);
@@ -80,8 +83,6 @@ function LloydGeorgeViewRecordStage({
               hasRecordInStorage,
               onClickFunctionForDownloadAndRemove: handleDownloadAndRemoveRecordButton,
           });
-    const showMenu = recordLinksToShow.length > 0;
-
     // @ts-ignore
     const handleConfirmDownloadAndRemoveButton = () => {
         navigate(routeChildren.LLOYD_GEORGE_DOWNLOAD_IN_PROGRESS);
@@ -101,6 +102,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,43 +211,29 @@ 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}
                         />
-                    )}
-                </>
+                    </div>
+                </div>
             ) : (
                 <div className="lloydgeorge_record-stage_fs">
                     <RecordCard
-                        downloadStage={downloadStage}
                         heading="Lloyd George record"
                         fullScreenHandler={setFullScreen}
                         detailsElement={<RecordDetails {...recordDetailsProps} />}
@@ -273,7 +262,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,7 +40,6 @@ 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',
@@ -109,9 +107,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 +163,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,16 +1,13 @@
 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;
@@ -26,29 +23,20 @@ function RecordCard({
 }: Props) {
     const role = useRole();
     const userIsGpClinical = role === REPOSITORY_ROLE.GP_CLINICAL;
-    const [isLoading, setIsLoading] = useState(true);
     const mounted = useRef(false);
 
     useEffect(() => {
         const onPageLoad = async () => {
             await refreshRecord();
-            setIsLoading(false);
         };
         if (!mounted.current) {
+            onPageLoad();
             mounted.current = true;
-            void onPageLoad();
         }
     }, [refreshRecord]);
 
     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 }) => {

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();
 

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

@@ -1,12 +1,14 @@
 import { Card } from 'nhsuk-react-components';
-import React, { Dispatch, SetStateAction } from 'react';
+import React, { Dispatch, HTMLAttributes, SetStateAction } from 'react';
 import { LGRecordActionLink, RECORD_ACTION } from '../../../types/blocks/lloydGeorgeActions';
 import { Link, useNavigate } from 'react-router-dom';
 import { LG_RECORD_STAGE } from '../../../types/blocks/lloydGeorgeStages';
 
-type Props = {
+export type Props = HTMLAttributes<HTMLDivElement> & {
     recordLinks: Array<LGRecordActionLink>;
     setStage: Dispatch<SetStateAction<LG_RECORD_STAGE>>;
+    showMenu: boolean;
+    className: string;
 };
 
 type SubSectionProps = {
@@ -15,33 +17,38 @@ type SubSectionProps = {
     setStage: Dispatch<SetStateAction<LG_RECORD_STAGE>>;
 };
 
-function RecordMenuCard({ recordLinks, setStage }: Props) {
+function RecordMenuCard({ recordLinks, setStage, showMenu, className }: Props) {
     const updateActions = recordLinks.filter((link) => link.type === RECORD_ACTION.UPDATE);
     const downloadActions = recordLinks.filter((link) => link.type === RECORD_ACTION.DOWNLOAD);
 
     if (recordLinks.length === 0) {
         return <></>;
     }
 
+    if (!showMenu) {
+        return <></>;
+    }
     return (
-        <Card className="lloydgeorge_record-stage_menu">
-            <Card.Content className="lloydgeorge_record-stage_menu-content">
-                {updateActions.length > 0 && (
-                    <SideMenuSubSection
-                        actionLinks={updateActions}
-                        heading="Update record"
-                        setStage={setStage}
-                    />
-                )}
-                {downloadActions.length > 0 && (
-                    <SideMenuSubSection
-                        actionLinks={downloadActions}
-                        heading="Download record"
-                        setStage={setStage}
-                    />
-                )}
-            </Card.Content>
-        </Card>
+        <div className={className} data-testid="record-menu-card">
+            <Card className="lloydgeorge_record-stage_menu">
+                <Card.Content className="lloydgeorge_record-stage_menu-content">
+                    {updateActions.length > 0 && (
+                        <SideMenuSubSection
+                            actionLinks={updateActions}
+                            heading="Update record"
+                            setStage={setStage}
+                        />
+                    )}
+                    {downloadActions.length > 0 && (
+                        <SideMenuSubSection
+                            actionLinks={downloadActions}
+                            heading="Download record"
+                            setStage={setStage}
+                        />
+                    )}
+                </Card.Content>
+            </Card>
+        </div>
     );
 }
 
@@ -90,4 +97,8 @@ const LinkItem = ({ link, setStage }: LinkItemProps) => {
         );
     }
 };
+
+RecordMenuCard.defaultProps = {
+    className: 'lloydgeorge_record-stage_flex-row',
+};
 export default RecordMenuCard;