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 && (
@@ -209,17 +212,19 @@ function LloydGeorgeViewRecordStage({
             <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">
+                            <RecordMenuCard
+                                className="lloydgeorge_record-stage_flex-row"
+                                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} />}
@@ -229,30 +234,21 @@ function LloydGeorgeViewRecordStage({
                                 />
                             </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}
                         />
-                    )}
+                    </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}
-                    />
-                </div>
             )}
         </div>
     );
@@ -273,7 +269,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/pdfViewer/PdfViewer.tsx

@@ -5,7 +5,7 @@ type Props = { fileUrl: String };
 const PdfViewer = ({ fileUrl }: Props) => {
     useEffect(() => {
         const pdfObject = require('pdfobject');
-        pdfObject.embed(fileUrl + '#toolbar=0', '#pdf-viewer');
+        pdfObject.embed(fileUrl + '#toolbar', '#pdf-viewer');
     }, [fileUrl]);
 
     if (!fileUrl) return null;

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,27 +23,21 @@ 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>
-            );
+        if (!cloudFrontUrl) {
+            return null;
         }
         return <PdfViewer fileUrl={cloudFrontUrl} />;
     };

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

@@ -49,6 +49,8 @@ const mockLinks: Array<LGRecordActionLink> = [
     },
 ];
 
+const className = 'lloydgeorge_record-stage_flex-row';
+
 jest.mock('react-router-dom', () => ({
     Link: (props: LinkProps) => <a {...props} role="link" />,
     useNavigate: () => mockedUseNavigate,
@@ -66,7 +68,14 @@ describe('RecordMenuCard', () => {
 
     describe('Rendering', () => {
         it('renders menu', () => {
-            render(<RecordMenuCard setStage={mockSetStage} recordLinks={mockLinks} />);
+            render(
+                <RecordMenuCard
+                    setStage={mockSetStage}
+                    recordLinks={mockLinks}
+                    className={className}
+                    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 +89,12 @@ describe('RecordMenuCard', () => {
             );
 
             const { rerender } = render(
-                <RecordMenuCard setStage={mockSetStage} recordLinks={mockLinksUpdateOnly} />,
+                <RecordMenuCard
+                    setStage={mockSetStage}
+                    recordLinks={mockLinksUpdateOnly}
+                    className={className}
+                    showMenu={true}
+                />,
             );
             expect(screen.getByRole('heading', { name: 'Update record' })).toBeInTheDocument();
             expect(screen.getByRole('link', { name: 'Upload files' })).toBeInTheDocument();
@@ -94,7 +108,12 @@ describe('RecordMenuCard', () => {
                 (link) => link.type === RECORD_ACTION.DOWNLOAD,
             );
             rerender(
-                <RecordMenuCard setStage={mockSetStage} recordLinks={mockLinksDownloadOnly} />,
+                <RecordMenuCard
+                    setStage={mockSetStage}
+                    recordLinks={mockLinksDownloadOnly}
+                    className={className}
+                    showMenu={true}
+                />,
             );
             expect(screen.getByRole('heading', { name: 'Download record' })).toBeInTheDocument();
             expect(screen.getByRole('link', { name: 'Download files' })).toBeInTheDocument();
@@ -108,13 +127,25 @@ 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={[]}
+                    className={className}
+                    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}
+                    className={className}
+                    showMenu={true}
+                />,
+            );
             expect(
                 screen.getByRole('button', { name: 'Download and remove files' }),
             ).toBeInTheDocument();
@@ -125,11 +156,30 @@ describe('RecordMenuCard', () => {
 
             expect(mockShowDownloadAndRemoveConfirmation).toBeCalledTimes(1);
         });
+
+        it('Does not render the MenuCard if showMenu is false', () => {
+            const { container } = render(
+                <RecordMenuCard
+                    setStage={mockSetStage}
+                    recordLinks={mockLinks}
+                    className={className}
+                    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}
+                    className={className}
+                    showMenu={true}
+                />,
+            );
             expect(screen.getByRole('heading', { name: 'Update record' })).toBeInTheDocument();
             expect(screen.getByRole('link', { name: 'Upload files' })).toBeInTheDocument();
             act(() => {
@@ -139,7 +189,14 @@ describe('RecordMenuCard', () => {
         });
 
         it('change stage when clicked', () => {
-            render(<RecordMenuCard setStage={mockSetStage} recordLinks={mockLinks} />);
+            render(
+                <RecordMenuCard
+                    setStage={mockSetStage}
+                    recordLinks={mockLinks}
+                    className={className}
+                    showMenu={true}
+                />,
+            );
             expect(screen.getByRole('heading', { name: 'Update record' })).toBeInTheDocument();
             expect(screen.getByRole('link', { name: 'Remove files' })).toBeInTheDocument();