Fix error display after record deletion

Author: RioKnightleyNHS

app/cypress/e2e/0-ndr-core-tests/gp_user_workflows/view_lloyd_george_is_bsol_workflow.cy.js

@@ -216,15 +216,9 @@ describe('GP Workflow: View Lloyd George record', () => {
             () => {
                 beforeEachConfiguration(Roles.GP_ADMIN);
 
-                let request = 0;
-                const replies = [
-                    { statusCode: 200, body: viewLloydGeorgePayload },
-                    { statusCode: 404 },
-                ];
-
-                cy.intercept('GET', '/LloydGeorgeStitch*', (req) => {
-                    req.reply(replies[request]);
-                    request = request + 1;
+                cy.intercept('GET', '/LloydGeorgeStitch*', {
+                    statusCode: 200,
+                    body: viewLloydGeorgePayload,
                 }).as('lloydGeorgeStitch');
 
                 cy.intercept('GET', '/SearchDocumentReferences*', {
@@ -276,7 +270,17 @@ describe('GP Workflow: View Lloyd George record', () => {
                     `NHS number: ${formatNhsNumber(searchPatientPayload.nhsNumber)}`,
                 ).should('be.visible');
 
+                cy.intercept('GET', '/LloydGeorgeStitch*', {
+                    statusCode: 404,
+                }).as('lg-reload');
                 cy.getByTestId('lg-return-btn').click();
+                cy.wait('@lg-reload');
+
+                // Assert
+                cy.getByTestId('pdf-card').should('include.text', 'Lloyd George record');
+                cy.getByTestId('no-records-title').should('be.visible');
+                cy.getByTestId('upload-patient-record-text').should('be.visible');
+                cy.getByTestId('upload-patient-record-button').should('be.visible');
             },
         );
 

app/src/components/blocks/_delete/deleteSubmitStage/DeleteSubmitStage.test.tsx

@@ -39,7 +39,7 @@ let history: MemoryHistory = createMemoryHistory({
 const mockedUseRole = useRole as jest.Mock;
 const mockedAxios = axios as jest.Mocked<typeof axios>;
 const mockedUsePatient = usePatient as jest.Mock;
-
+const mockResetDocState = jest.fn();
 const mockPatientDetails = buildPatientDetails();
 const mockLgSearchResult = buildLgSearchResult();
 
@@ -168,6 +168,26 @@ describe('DeleteSubmitStage', () => {
             });
         });
 
+        it('calls resetDocState when the Yes is selected and Continue clicked', async () => {
+            mockedUseRole.mockReturnValue(REPOSITORY_ROLE.GP_ADMIN);
+
+            mockedAxios.delete.mockReturnValue(Promise.resolve({ status: 200, data: 'Success' }));
+
+            renderComponent(DOCUMENT_TYPE.LLOYD_GEORGE, history);
+
+            expect(screen.getByRole('radio', { name: 'Yes' })).toBeInTheDocument();
+            expect(screen.getByRole('button', { name: 'Continue' })).toBeInTheDocument();
+
+            act(() => {
+                userEvent.click(screen.getByRole('radio', { name: 'Yes' }));
+                userEvent.click(screen.getByRole('button', { name: 'Continue' }));
+            });
+
+            await waitFor(() => {
+                expect(mockResetDocState).toHaveBeenCalled();
+            });
+        });
+
         it('renders DeletionConfirmationStage when the Yes is selected and Continue clicked, when user role is PCSE', async () => {
             mockedUseRole.mockReturnValue(REPOSITORY_ROLE.PCSE);
 
@@ -343,6 +363,7 @@ const renderComponent = (docType: DOCUMENT_TYPE, history: MemoryHistory) => {
         numberOfFiles: mockLgSearchResult.number_of_files,
         docType,
         recordType: docType.toString(),
+        resetDocState: mockResetDocState,
     };
 
     return render(

app/src/components/blocks/_delete/deleteSubmitStage/DeleteSubmitStage.tsx

@@ -32,6 +32,7 @@ export type Props = {
     numberOfFiles: number;
     setDownloadStage?: Dispatch<SetStateAction<DOWNLOAD_STAGE>>;
     recordType: string;
+    resetDocState: () => void;
 };
 
 enum DELETE_DOCUMENTS_OPTION {
@@ -42,9 +43,10 @@ enum DELETE_DOCUMENTS_OPTION {
 type IndexViewProps = {
     docType: DOCUMENT_TYPE;
     recordType: string;
+    resetDocState: () => void;
 };
 
-const DeleteSubmitStageIndexView = ({ docType, recordType }: IndexViewProps) => {
+const DeleteSubmitStageIndexView = ({ docType, recordType, resetDocState }: IndexViewProps) => {
     const patientDetails = usePatient();
     const role = useRole();
     const { register, handleSubmit } = useForm();
@@ -62,6 +64,7 @@ const DeleteSubmitStageIndexView = ({ docType, recordType }: IndexViewProps) =>
 
     const handleYesOption = async () => {
         const onSuccess = () => {
+            resetDocState();
             setDeletionStage(SUBMISSION_STATE.SUCCEEDED);
             if (userIsGP) {
                 navigate(routeChildren.LLOYD_GEORGE_DELETE_COMPLETE);
@@ -189,7 +192,13 @@ const DeleteSubmitStageIndexView = ({ docType, recordType }: IndexViewProps) =>
     );
 };
 
-function DeleteSubmitStage({ docType, numberOfFiles, setDownloadStage, recordType }: Props) {
+function DeleteSubmitStage({
+    docType,
+    numberOfFiles,
+    setDownloadStage,
+    recordType,
+    resetDocState,
+}: Props) {
     useTitle({ pageTitle: 'Delete files' });
 
     return (
@@ -198,7 +207,11 @@ function DeleteSubmitStage({ docType, numberOfFiles, setDownloadStage, recordTyp
                 <Route
                     index
                     element={
-                        <DeleteSubmitStageIndexView docType={docType} recordType={recordType} />
+                        <DeleteSubmitStageIndexView
+                            docType={docType}
+                            recordType={recordType}
+                            resetDocState={resetDocState}
+                        />
                     }
                 />
                 <Route
@@ -208,6 +221,7 @@ function DeleteSubmitStage({ docType, numberOfFiles, setDownloadStage, recordTyp
                             docType={docType}
                             numberOfFiles={numberOfFiles}
                             recordType={recordType}
+                            resetDocState={resetDocState}
                         />
                     }
                 ></Route>

app/src/components/blocks/_delete/removeRecordStage/RemoveRecordStage.test.tsx

@@ -25,6 +25,7 @@ const mockUseNavigate = jest.fn();
 const mockUsePatient = usePatient as jest.Mock;
 const mockPatientDetails = buildPatientDetails();
 const mockDownloadStage = jest.fn();
+const mockResetDocState = jest.fn();
 
 const testFileName1 = 'John_1';
 const testFileName2 = 'John_2';
@@ -178,6 +179,7 @@ const renderComponent = (history: MemoryHistory, numberOfFiles: number, recordTy
                 numberOfFiles={numberOfFiles}
                 recordType={recordType}
                 setDownloadStage={mockDownloadStage}
+                resetDocState={mockResetDocState}
             />
         </ReactRouter.Router>,
     );

app/src/components/blocks/_delete/removeRecordStage/RemoveRecordStage.tsx

@@ -29,9 +29,10 @@ export type Props = {
     numberOfFiles: number;
     recordType: string;
     setDownloadStage: Dispatch<SetStateAction<DOWNLOAD_STAGE>>;
+    resetDocState: () => void;
 };
 
-function RemoveRecordStage({ numberOfFiles, recordType, setDownloadStage }: Props) {
+function RemoveRecordStage({ numberOfFiles, recordType, setDownloadStage, resetDocState }: Props) {
     useTitle({ pageTitle: 'Remove record' });
     const patientDetails = usePatient();
     const [submissionState, setSubmissionState] = useState(SUBMISSION_STATE.PENDING);
@@ -191,6 +192,7 @@ function RemoveRecordStage({ numberOfFiles, recordType, setDownloadStage }: Prop
                             docType={DOCUMENT_TYPE.LLOYD_GEORGE}
                             numberOfFiles={numberOfFiles}
                             recordType="Lloyd George"
+                            resetDocState={resetDocState}
                         />
                     }
                 ></Route>
@@ -201,6 +203,7 @@ function RemoveRecordStage({ numberOfFiles, recordType, setDownloadStage }: Prop
                             docType={DOCUMENT_TYPE.LLOYD_GEORGE}
                             numberOfFiles={numberOfFiles}
                             recordType="ARF"
+                            resetDocState={resetDocState}
                         />
                     }
                 ></Route>

app/src/pages/documentSearchResultsPage/DocumentSearchResultsPage.tsx

@@ -34,8 +34,8 @@ function DocumentSearchResultsPage() {
     const baseUrl = useBaseAPIUrl();
     const baseHeaders = useBaseAPIHeaders();
     const config = useConfig();
-
     const mounted = useRef(false);
+
     useEffect(() => {
         const onPageLoad = async () => {
             setSubmissionState(SUBMISSION_STATE.PENDING);
@@ -101,6 +101,7 @@ function DocumentSearchResultsPage() {
                                 recordType="ARF"
                                 numberOfFiles={searchResults.length}
                                 docType={DOCUMENT_TYPE.ALL}
+                                resetDocState={() => null}
                             />
                         }
                     />

app/src/pages/lloydGeorgeRecordPage/LloydGeorgeRecordPage.tsx

@@ -40,6 +40,14 @@ function LloydGeorgeRecordPage() {
     const [lastUpdated, setLastUpdated] = useState('');
     const [cloudFrontUrl, setCloudFrontUrl] = useState('');
 
+    const resetDocState = () => {
+        setNumberOfFiles(0);
+        setLastUpdated('');
+        setTotalFileSizeInByte(0);
+        setCloudFrontUrl('');
+        setDownloadStage(DOWNLOAD_STAGE.INITIAL);
+    };
+
     const refreshRecord = async () => {
         const onSuccess = (
             files_count: number,
@@ -51,7 +59,6 @@ function LloydGeorgeRecordPage() {
             setLastUpdated(getFormattedDatetime(new Date(updated_date)));
             setDownloadStage(DOWNLOAD_STAGE.SUCCEEDED);
             setTotalFileSizeInByte(file_size);
-            setDownloadStage(DOWNLOAD_STAGE.SUCCEEDED);
             setCloudFrontUrl(presign_url);
         };
 
@@ -135,6 +142,7 @@ function LloydGeorgeRecordPage() {
                             setDownloadStage={setDownloadStage}
                             numberOfFiles={numberOfFiles}
                             recordType="Lloyd George"
+                            resetDocState={resetDocState}
                         />
                     }
                 />