diff --git a/editor.planx.uk/src/@planx/components/FileUpload/Public.tsx b/editor.planx.uk/src/@planx/components/FileUpload/Public.tsx index ccb6adc846..caf0ff1cf3 100644 --- a/editor.planx.uk/src/@planx/components/FileUpload/Public.tsx +++ b/editor.planx.uk/src/@planx/components/FileUpload/Public.tsx @@ -9,9 +9,8 @@ import ErrorWrapper from "ui/shared/ErrorWrapper"; import { array } from "yup"; import { - Condition, + FileList, PASSPORT_REQUESTED_FILES_KEY, - RequestedFile, } from "../FileUploadAndLabel/model"; import { PrivateFileUpload } from "../shared/PrivateFileUpload/PrivateFileUpload"; import { getPreviouslySubmittedData, makeData } from "../shared/utils"; @@ -55,16 +54,6 @@ const FileUpload: React.FC = (props) => { const [slots, setSlots] = useState(recoveredSlots ?? []); const [validationError, setValidationError] = useState(); - const existingRequestedFiles: RequestedFile[] = - useStore( - (state) => state.computePassport().data?.[PASSPORT_REQUESTED_FILES_KEY], - ) || []; - - const requestedFile: RequestedFile = { - fn: props.fn, - condition: Condition.AlwaysRequired, - }; - const uploadedFiles = (slots: FileUploadSlot[]) => makeData( props, @@ -82,6 +71,23 @@ const FileUpload: React.FC = (props) => { })), ); + const updatedRequestedFiles = () => { + const emptyFileList = { required: [], recommended: [], optional: [] }; + + const { required, recommended, optional }: FileList = + useStore.getState().computePassport().data?.[ + PASSPORT_REQUESTED_FILES_KEY + ] || emptyFileList; + + return { + [PASSPORT_REQUESTED_FILES_KEY]: { + required: [...required, props.fn], + recommended, + optional, + }, + }; + }; + const handleSubmit = () => { slotsSchema .validate(slots) @@ -89,10 +95,7 @@ const FileUpload: React.FC = (props) => { props.handleSubmit({ data: { ...uploadedFiles(slots).data, - [PASSPORT_REQUESTED_FILES_KEY]: [ - ...existingRequestedFiles, - requestedFile, - ], + ...updatedRequestedFiles(), }, }); }) diff --git a/editor.planx.uk/src/@planx/components/FileUploadAndLabel/Public.test.tsx b/editor.planx.uk/src/@planx/components/FileUploadAndLabel/Public.test.tsx index 197bc0b259..28f12f703f 100644 --- a/editor.planx.uk/src/@planx/components/FileUploadAndLabel/Public.test.tsx +++ b/editor.planx.uk/src/@planx/components/FileUploadAndLabel/Public.test.tsx @@ -660,23 +660,9 @@ describe("Submitting data", () => { const requestedFiles = submitted?.data?._requestedFiles; expect(requestedFiles).toBeDefined(); - expect(requestedFiles).toHaveLength(3); - expect(requestedFiles).toEqual( - expect.arrayContaining([ - expect.objectContaining({ - fn: "roofPlan", - condition: Condition.AlwaysRequired, - }), - expect.objectContaining({ - fn: "heritage", - condition: Condition.AlwaysRecommended, - }), - expect.objectContaining({ - fn: "utilityBill", - condition: Condition.NotRequired, - }), - ]), - ); + expect(requestedFiles.required).toContain("roofPlan"); + expect(requestedFiles.recommended).toContain("heritage"); + expect(requestedFiles.optional).toContain("utilityBill"); }); it("appends to the list of existing requested files", async () => { @@ -691,12 +677,11 @@ describe("Submitting data", () => { filename: "file.jpg", }, ], - [PASSPORT_REQUESTED_FILES_KEY]: [ - { - fn: "anotherFileType", - condition: Condition.AlwaysRequired, - }, - ], + [PASSPORT_REQUESTED_FILES_KEY]: { + required: ["anotherFileType"], + recommended: [], + optional: [], + }, }, }, }; @@ -750,28 +735,13 @@ describe("Submitting data", () => { const submitted = handleSubmit.mock.calls[0][0]; const requestedFiles = submitted?.data?._requestedFiles; - expect(requestedFiles).toEqual( - expect.arrayContaining([ - // Existing files from previous components - expect.objectContaining({ - fn: "anotherFileType", - condition: Condition.AlwaysRequired, - }), - // Requested files from this component - expect.objectContaining({ - fn: "roofPlan", - condition: Condition.AlwaysRequired, - }), - expect.objectContaining({ - fn: "heritage", - condition: Condition.AlwaysRecommended, - }), - expect.objectContaining({ - fn: "utilityBill", - condition: Condition.NotRequired, - }), - ]), - ); + // Existing files from previous components + expect(requestedFiles.required).toContain("anotherFileType"); + + // Requested files from this component + expect(requestedFiles.required).toContain("roofPlan"); + expect(requestedFiles.recommended).toContain("heritage"); + expect(requestedFiles.optional).toContain("utilityBill"); }); }); diff --git a/editor.planx.uk/src/@planx/components/FileUploadAndLabel/model.ts b/editor.planx.uk/src/@planx/components/FileUploadAndLabel/model.ts index 1c492be3cc..37bfdf08c7 100644 --- a/editor.planx.uk/src/@planx/components/FileUploadAndLabel/model.ts +++ b/editor.planx.uk/src/@planx/components/FileUploadAndLabel/model.ts @@ -238,6 +238,26 @@ const formatRequestedFiles = ({ const hasSlots = (userFile: UserFile): userFile is UserFileWithSlots => Boolean(userFile?.slots); +const getUpdatedRequestedFiles = (fileList: FileList) => { + const emptyFileList = { required: [], recommended: [], optional: [] }; + + const { required, recommended, optional }: FileList = + useStore.getState().computePassport().data?.[ + PASSPORT_REQUESTED_FILES_KEY + ] || emptyFileList; + + return { + [PASSPORT_REQUESTED_FILES_KEY]: { + required: [...required, ...fileList.required.map(({ fn }) => fn)], + recommended: [ + ...recommended, + ...fileList.recommended.map(({ fn }) => fn), + ], + optional: [...optional, ...fileList.optional.map(({ fn }) => fn)], + }, + }; +}; + /** * Generate payload for FileUploadAndLabel breadcrumb * Not responsible for validation - this happens at the component level @@ -245,30 +265,22 @@ const hasSlots = (userFile: UserFile): userFile is UserFileWithSlots => export const generatePayload = (fileList: FileList): Store.userData => { const newPassportData: Store.userData["data"] = {}; - const requestedFiles = [ + const uploadedFiles = [ ...fileList.required, ...fileList.recommended, ...fileList.optional, - ]; - - const uploadedFiles = requestedFiles.filter(hasSlots); + ].filter(hasSlots); uploadedFiles.forEach((userFile) => { newPassportData[userFile.fn] = formatUserFiles(userFile); }); - const existingRequestedFiles: FileType[] = - useStore.getState().computePassport().data?.[ - PASSPORT_REQUESTED_FILES_KEY - ] || []; + const requestedFiles = getUpdatedRequestedFiles(fileList); return { data: { ...newPassportData, - [PASSPORT_REQUESTED_FILES_KEY]: [ - ...existingRequestedFiles, - ...requestedFiles.map(formatRequestedFiles), - ], + ...requestedFiles, }, }; };