[PRM-58] Fix for Select Download File Checkboxes (#604)

* Changed handleChangeClickCheckboxes

* Changes to make sure selectedDocuments is always an array

* Removed previous refactor attempt changes and corrected sorting issue

* checking values of selected documents and search results

* fixed selected document allowing duplicates

* ignoring linting issues with consolge .log

* Added additional logging

* console log result

* Refactored code SearchResults should used id not ID

* Replaced all instanced of ID with id for SearchResults

* Removed debugging logs

Author: oliverbeumkes-nhs

app/src/components/blocks/_lloydGeorge/lloydGeorgeDownloadComplete/LloydGeorgeDownloadComplete.test.tsx

@@ -17,9 +17,9 @@ const numberOfFiles = 7;
 const selectedDocuments = ['test-id-1', 'test-id-2'];
 const downloadAllSelectedDocuments: Array<string> = [];
 const searchResults = [
-    buildSearchResult({ fileName: '1of2_test.pdf', ID: 'test-id-1' }),
-    buildSearchResult({ fileName: '2of2_test.pdf', ID: 'test-id-2' }),
-    buildSearchResult({ fileName: '1of1_test.pdf', ID: 'test-id-3' }),
+    buildSearchResult({ fileName: '1of2_test.pdf', id: 'test-id-1' }),
+    buildSearchResult({ fileName: '2of2_test.pdf', id: 'test-id-2' }),
+    buildSearchResult({ fileName: '1of1_test.pdf', id: 'test-id-3' }),
 ];
 
 jest.mock('react-router-dom', () => ({

app/src/components/blocks/_lloydGeorge/lloydGeorgeDownloadComplete/LloydGeorgeDownloadComplete.tsx

@@ -26,11 +26,11 @@ function LloydGeorgeDownloadComplete({ numberOfFiles, selectedDocuments, searchR
     };
 
     const documentsList = searchResults
-        ?.filter((document) => selectedDocuments?.includes(document.ID))
+        ?.filter((document) => selectedDocuments?.includes(document.id))
         .map((document) => {
             return {
-                ref: document.ID,
-                id: document.ID,
+                ref: document.id,
+                id: document.id,
                 fileName: document.fileName,
             };
         }) as GenericDocument[];

app/src/components/blocks/_lloydGeorge/lloydGeorgeSelectDownloadStage/LloydGeorgeSelectDownloadStage.test.tsx

@@ -32,9 +32,9 @@ let history: MemoryHistory = createMemoryHistory({
 });
 
 const searchResults = [
-    buildSearchResult({ fileName: '1of2_test.pdf', ID: 'test-id-1' }),
-    buildSearchResult({ fileName: '2of2_test.pdf', ID: 'test-id-2' }),
-    buildSearchResult({ fileName: '1of1_test.pdf', ID: 'test-id-3' }),
+    buildSearchResult({ fileName: '1of2_test.pdf', id: 'test-id-1' }),
+    buildSearchResult({ fileName: '2of2_test.pdf', id: 'test-id-2' }),
+    buildSearchResult({ fileName: '1of1_test.pdf', id: 'test-id-3' }),
 ];
 
 describe('LloydGeorgeSelectDownloadStage', () => {

app/src/components/blocks/_lloydGeorge/lloydGeorgeSelectDownloadStage/LloydGeorgeSelectDownloadStage.tsx

@@ -102,8 +102,8 @@ function LloydGeorgeSelectDownloadStage({ setDownloadStage, numberOfFiles }: Pro
                 if (isMock(error)) {
                     setSearchResults([
                         buildSearchResult(),
-                        buildSearchResult({ fileName: 'fileName2.pdf', ID: '1234qwer-241ewewr-2' }),
-                        buildSearchResult({ fileName: 'fileName3.pdf', ID: '1234qwer-241ewewr-3' }),
+                        buildSearchResult({ fileName: 'fileName2.pdf', id: '1234qwer-241ewewr-2' }),
+                        buildSearchResult({ fileName: 'fileName3.pdf', id: '1234qwer-241ewewr-3' }),
                     ]);
                     setSubmissionSearchState(SEARCH_AND_DOWNLOAD_STATE.SEARCH_SUCCEEDED);
                 } else if (error.response?.status === 403) {

app/src/components/blocks/_lloydGeorge/lloydGeorgeSelectSearchResults/LloydGeorgeSelectSearchResults.test.tsx

@@ -22,12 +22,12 @@ const mockSetSelectedDocuments = jest.fn();
 const mockSetSubmissionSearchState = jest.fn();
 const mockSelectedDocuments = ['test-id-1', 'test-id-2'];
 const searchResults = [
-    buildSearchResult({ fileName: '1of2_test.pdf', ID: 'test-id-1' }),
-    buildSearchResult({ fileName: '2of2_test.pdf', ID: 'test-id-2' }),
-    buildSearchResult({ fileName: '1of1_test.pdf', ID: 'test-id-3' }),
+    buildSearchResult({ fileName: '1of2_test.pdf', id: 'test-id-1' }),
+    buildSearchResult({ fileName: '2of2_test.pdf', id: 'test-id-2' }),
+    buildSearchResult({ fileName: '1of1_test.pdf', id: 'test-id-3' }),
 ];
 const searchResultOneFileOnly = [searchResults[0]];
-const mockAllSelectedDocuments = [searchResults[2].ID, searchResults[0].ID, searchResults[1].ID];
+const mockAllSelectedDocuments = [searchResults[2].id, searchResults[0].id, searchResults[1].id];
 
 describe('LloydGeorgeSelectSearchResults', () => {
     beforeEach(() => {
@@ -85,7 +85,7 @@ describe('LloydGeorgeSelectSearchResults', () => {
 
         it('add documentId to selectedDocument when checkbox is checked', async () => {
             renderComponent({ selectedDocuments: mockSelectedDocuments });
-            const expectedSelectedDocument = [...mockSelectedDocuments, searchResults[2].ID];
+            const expectedSelectedDocument = [...mockSelectedDocuments, searchResults[2].id];
 
             const checkbox = screen.getByRole('checkbox', {
                 name: `Select Filename ${searchResults[2].fileName}`,
@@ -101,7 +101,7 @@ describe('LloydGeorgeSelectSearchResults', () => {
         it('remove documentId from selectedDocument when a checkbox is unchecked', async () => {
             renderComponent({ selectedDocuments: mockSelectedDocuments });
             const expectedSelectedDocument = mockSelectedDocuments.filter(
-                (id) => id !== searchResults[0].ID,
+                (id) => id !== searchResults[0].id,
             );
 
             const checkbox = screen.getByRole('checkbox', {

app/src/components/blocks/_lloydGeorge/lloydGeorgeSelectSearchResults/LloydGeorgeSelectSearchResults.tsx

@@ -36,18 +36,21 @@ const AvailableFilesTable = ({
         if (selectedDocuments.length < searchResults.length) {
             const downloadableItems: string[] = [];
             searchResults.forEach((result) => {
-                downloadableItems.push(result.ID);
+                downloadableItems.push(result.id);
             });
             setSelectedDocuments(downloadableItems);
         } else {
             setSelectedDocuments([]);
         }
     };
+
     const handleChangeCheckboxes = (e: React.FormEvent<HTMLInputElement>) => {
         const target = e.target as HTMLInputElement;
         const toggledDocumentId = target.value;
         if (target.checked) {
-            setSelectedDocuments([...selectedDocuments, toggledDocumentId]);
+            if (!selectedDocuments.includes(toggledDocumentId)) {
+                setSelectedDocuments([...selectedDocuments, toggledDocumentId]);
+            }
         } else {
             setSelectedDocuments(selectedDocuments.filter((id) => id !== toggledDocumentId));
         }
@@ -82,7 +85,7 @@ const AvailableFilesTable = ({
                         aria-description={getToggleButtonAriaDescription()}
                     >
                         <span>
-                            {selectedDocuments.length === searchResults.length &&
+                            {selectedDocuments.length >= searchResults.length &&
                                 'Deselect all files'}
                             {selectedDocuments.length < searchResults.length && 'Select all files'}
                         </span>
@@ -123,11 +126,11 @@ const AvailableFilesTable = ({
                             {allowSelectDocument && (
                                 <Table.Cell id={`selected-files-row-${index}`}>
                                     <Checkboxes.Box
-                                        value={result.ID}
-                                        id={result.ID}
+                                        value={result.id}
+                                        id={result.id}
                                         data-testid={`checkbox-${index}`}
-                                        checked={selectedDocuments.includes(result.ID)}
-                                        aria-checked={selectedDocuments.includes(result.ID)}
+                                        checked={selectedDocuments.includes(result.id)}
+                                        aria-checked={selectedDocuments.includes(result.id)}
                                         aria-label={`Select Filename ${result.fileName}`}
                                         onChange={(e) => handleChangeCheckboxes(e)}
                                     >
@@ -172,7 +175,7 @@ const LloydGeorgeSelectSearchResults = ({
 }: Props) => {
     const sortByFileName = (a: SearchResult, b: SearchResult) => {
         const fileNumberOfA = parseInt(a.fileName.substring(0, a.fileName.indexOf('of')));
-        const fileNumberOfB = parseInt(b.fileName.substring(0, a.fileName.indexOf('of')));
+        const fileNumberOfB = parseInt(b.fileName.substring(0, b.fileName.indexOf('of')));
         if (fileNumberOfA && fileNumberOfB) {
             return fileNumberOfA > fileNumberOfB ? 1 : -1;
         } else {

app/src/helpers/test/testBuilders.ts

@@ -127,7 +127,7 @@ const buildSearchResult = (searchResultOverride?: Partial<SearchResult>) => {
         fileName: 'fileName.pdf',
         created: moment().format(),
         virusScannerResult: 'Clean',
-        ID: '1234qwer-241ewewr',
+        id: '1234qwer-241ewewr',
         fileSize: 224,
         ...searchResultOverride,
     };

app/src/types/generic/searchResult.ts

@@ -2,6 +2,6 @@ export type SearchResult = {
     fileName: string;
     created: string;
     virusScannerResult: string;
-    ID: string;
+    id: string;
     fileSize: number;
 };