fix: Receipt validation not working in drag&drop section of report screen (AFTER REVERT) #73238
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,5 @@ | ||
| import {Str} from 'expensify-common'; | ||
| import React, {useRef, useState} from 'react'; | ||
| import {InteractionManager} from 'react-native'; | ||
| import type {ValueOf} from 'type-fest'; | ||
| import ConfirmModal from '@components/ConfirmModal'; | ||
|
|
@@ -16,29 +16,41 @@ import { | |
| validateAttachment, | ||
| validateImageForCorruption, | ||
| } from '@libs/fileDownload/FileUtils'; | ||
| import type {ValidateAttachmentOptions} from '@libs/fileDownload/FileUtils'; | ||
| import convertHeicImage from '@libs/fileDownload/heicConverter'; | ||
| import Log from '@libs/Log'; | ||
| import CONST from '@src/CONST'; | ||
| import type {FileObject} from '@src/types/utils/Attachment'; | ||
| import useLocalize from './useLocalize'; | ||
| import useThemeStyles from './useThemeStyles'; | ||
|
|
||
| const DEFAULT_IS_VALIDATING_RECEIPTS = true; | ||
|
|
||
| type ErrorObject = { | ||
| error: ValueOf<typeof CONST.FILE_VALIDATION_ERRORS>; | ||
| fileExtension?: string; | ||
| }; | ||
|
|
||
| type ValidationOptions = { | ||
| isValidatingReceipts?: boolean; | ||
| }; | ||
|
|
||
| const sortFilesByOriginalOrder = (files: FileObject[], orderMap: Map<string, number>) => { | ||
| return files.sort((a, b) => (orderMap.get(a.uri ?? '') ?? 0) - (orderMap.get(b.uri ?? '') ?? 0)); | ||
| }; | ||
|
|
||
| function useFilesValidation(onFilesValidated: (files: FileObject[], dataTransferItems: DataTransferItem[]) => void) { | ||
| const styles = useThemeStyles(); | ||
| const {translate} = useLocalize(); | ||
|
|
||
| const [isValidatingFiles, setIsValidatingFiles] = useState(false); | ||
| const [isValidatingReceipts, setIsValidatingReceipts] = useState<boolean>(); | ||
| const [isValidatingMultipleFiles, setIsValidatingMultipleFiles] = useState(false); | ||
|
|
||
| const [isErrorModalVisible, setIsErrorModalVisible] = useState(false); | ||
| const [fileError, setFileError] = useState<ValueOf<typeof CONST.FILE_VALIDATION_ERRORS> | null>(null); | ||
| const [pdfFilesToRender, setPdfFilesToRender] = useState<FileObject[]>([]); | ||
| const [validFilesToUpload, setValidFilesToUpload] = useState([] as FileObject[]); | ||
| const [invalidFileExtension, setInvalidFileExtension] = useState(''); | ||
| const [errorQueue, setErrorQueue] = useState<ErrorObject[]>([]); | ||
| const [currentErrorIndex, setCurrentErrorIndex] = useState(0); | ||
|
|
@@ -51,14 +63,14 @@ function useFilesValidation(proceedWithFilesAction: (files: FileObject[], dataTr | |
| const collectedErrors = useRef<ErrorObject[]>([]); | ||
| const originalFileOrder = useRef<Map<string, number>>(new Map()); | ||
|
|
||
| const updateFileOrderMapping = (oldFile: FileObject | undefined, newFile: FileObject) => { | ||
| const originalIndex = originalFileOrder.current.get(oldFile?.uri ?? ''); | ||
| if (originalIndex !== undefined) { | ||
| originalFileOrder.current.set(newFile.uri ?? '', originalIndex); | ||
| } | ||
| }; | ||
|
|
||
| const deduplicateErrors = (errors: ErrorObject[]) => { | ||
| const uniqueErrors = new Set<string>(); | ||
| return errors.filter((error) => { | ||
| const key = `${error.error}-${error.fileExtension ?? ''}`; | ||
|
|
@@ -68,14 +80,16 @@ function useFilesValidation(proceedWithFilesAction: (files: FileObject[], dataTr | |
| uniqueErrors.add(key); | ||
| return true; | ||
| }); | ||
| }; | ||
|
|
||
| const resetValidationState = () => { | ||
| setIsValidatingFiles(false); | ||
| setIsValidatingReceipts(undefined); | ||
| setIsValidatingMultipleFiles(false); | ||
| setIsErrorModalVisible(false); | ||
| setPdfFilesToRender([]); | ||
| setIsLoaderVisible(false); | ||
| setValidFilesToUpload([]); | ||
| setFileError(null); | ||
| setInvalidFileExtension(''); | ||
| setErrorQueue([]); | ||
|
|
@@ -86,22 +100,22 @@ function useFilesValidation(proceedWithFilesAction: (files: FileObject[], dataTr | |
| dataTransferItemList.current = []; | ||
| collectedErrors.current = []; | ||
| originalFileOrder.current.clear(); | ||
| }; | ||
|
|
||
| const hideModalAndReset = () => { | ||
| setIsErrorModalVisible(false); | ||
| // eslint-disable-next-line @typescript-eslint/no-deprecated | ||
| InteractionManager.runAfterInteractions(() => { | ||
| resetValidationState(); | ||
| }); | ||
| }; | ||
|
|
||
| const setErrorAndOpenModal = (error: ValueOf<typeof CONST.FILE_VALIDATION_ERRORS>) => { | ||
| setFileError(error); | ||
| setIsErrorModalVisible(true); | ||
| }; | ||
|
|
||
| const isValidFile = (originalFile: FileObject, item: DataTransferItem | undefined, validationOptions: ValidateAttachmentOptions) => { | ||
| if (item && item.kind === 'file' && 'webkitGetAsEntry' in item) { | ||
| const entry = item.webkitGetAsEntry(); | ||
|
|
||
|
|
@@ -114,7 +128,7 @@ function useFilesValidation(proceedWithFilesAction: (files: FileObject[], dataTr | |
| return normalizeFileObject(originalFile) | ||
| .then((normalizedFile) => | ||
| validateImageForCorruption(normalizedFile).then(() => { | ||
| const error = validateAttachment(normalizedFile, validationOptions); | ||
| if (error) { | ||
| const errorData = { | ||
| error, | ||
|
|
@@ -143,7 +157,7 @@ function useFilesValidation(proceedWithFilesAction: (files: FileObject[], dataTr | |
| }); | ||
| }; | ||
|
|
||
| const checkIfAllValidatedAndProceed = () => { | ||
| if (!validatedPDFs.current || !validFiles.current) { | ||
| return; | ||
| } | ||
|
|
@@ -170,12 +184,12 @@ function useFilesValidation(proceedWithFilesAction: (files: FileObject[], dataTr | |
| } | ||
| } else if (validFiles.current.length > 0) { | ||
| const sortedFiles = sortFilesByOriginalOrder(validFiles.current, originalFileOrder.current); | ||
| onFilesValidated(sortedFiles, dataTransferItemList.current); | ||
| resetValidationState(); | ||
| } | ||
| }; | ||
|
|
||
| const validateAndResizeFiles = (files: FileObject[], items: DataTransferItem[], validationOptions?: ValidationOptions) => { | ||
| // Early return for empty files | ||
| if (files.length === 0) { | ||
| return; | ||
|
|
@@ -188,7 +202,13 @@ function useFilesValidation(proceedWithFilesAction: (files: FileObject[], dataTr | |
| originalFileOrder.current.set(file.uri ?? '', index); | ||
| }); | ||
|
|
||
| Promise.all( | ||
| files.map((file, index) => | ||
| isValidFile(file, items.at(index), {isValidatingMultipleFiles: files.length > 1, isValidatingReceipts: validationOptions?.isValidatingReceipts ?? isValidatingReceipts}).then( | ||
| (isValid) => (isValid ? file : null), | ||
| ), | ||
| ), | ||
| ) | ||
| .then((validationResults) => { | ||
| const filteredResults = validationResults.filter((result): result is FileObject => result !== null); | ||
| const pdfsToLoad = filteredResults.filter((file) => Str.isPDF(file.name ?? '')); | ||
|
|
@@ -258,14 +278,27 @@ function useFilesValidation(proceedWithFilesAction: (files: FileObject[], dataTr | |
| } | ||
| } else if (processedFiles.length > 0) { | ||
| const sortedFiles = sortFilesByOriginalOrder(processedFiles, originalFileOrder.current); | ||
| onFilesValidated(sortedFiles, dataTransferItemList.current); | ||
| resetValidationState(); | ||
| } | ||
| } | ||
| }); | ||
| }; | ||
|
|
||
| const validateFiles = (files: FileObject[], items?: DataTransferItem[], validationOptions?: ValidationOptions) => { | ||
| if (isValidatingFiles) { | ||
| Log.warn('Files are already being validated. Please wait for the current validation to complete before calling `validateFiles` again.'); | ||
| return; | ||
| } | ||
|
|
||
| setIsValidatingFiles(true); | ||
|
|
||
| const validationOptionsWithDefaults = { | ||
| ...validationOptions, | ||
| isValidatingReceipts: validationOptions?.isValidatingReceipts ?? DEFAULT_IS_VALIDATING_RECEIPTS, | ||
| }; | ||
| setIsValidatingReceipts(validationOptionsWithDefaults.isValidatingReceipts); | ||
|
|
||
| if (files.length > 1) { | ||
| setIsValidatingMultipleFiles(true); | ||
| } | ||
|
|
@@ -276,11 +309,11 @@ function useFilesValidation(proceedWithFilesAction: (files: FileObject[], dataTr | |
| } | ||
| setErrorAndOpenModal(CONST.FILE_VALIDATION_ERRORS.MAX_FILE_LIMIT_EXCEEDED); | ||
| } else { | ||
| validateAndResizeFiles(files, items ?? [], validationOptionsWithDefaults); | ||
| } | ||
| }; | ||
|
|
||
| const onConfirmError = () => { | ||
| if (fileError === CONST.FILE_VALIDATION_ERRORS.MAX_FILE_LIMIT_EXCEEDED) { | ||
| setIsErrorModalVisible(false); | ||
| validateAndResizeFiles(filesToValidate.current, dataTransferItemList.current); | ||
|
|
@@ -304,18 +337,18 @@ function useFilesValidation(proceedWithFilesAction: (files: FileObject[], dataTr | |
| const sortedFiles = sortFilesByOriginalOrder(validFilesToUpload, originalFileOrder.current); | ||
| // If we're validating attachments we need to use InteractionManager to ensure | ||
| // the error modal is dismissed before opening the attachment modal | ||
| if (isValidatingReceipts === false && fileError) { | ||
| setIsErrorModalVisible(false); | ||
| // eslint-disable-next-line @typescript-eslint/no-deprecated | ||
| InteractionManager.runAfterInteractions(() => { | ||
| if (sortedFiles.length !== 0) { | ||
| onFilesValidated(sortedFiles, dataTransferItemList.current); | ||
| } | ||
| resetValidationState(); | ||
| }); | ||
| } else { | ||
| if (sortedFiles.length !== 0) { | ||
| onFilesValidated(sortedFiles, dataTransferItemList.current); | ||
| } | ||
| hideModalAndReset(); | ||
| } | ||
|
|
@@ -334,7 +367,7 @@ function useFilesValidation(proceedWithFilesAction: (files: FileObject[], dataTr | |
| }} | ||
| onPassword={() => { | ||
| validatedPDFs.current.push(file); | ||
| if (isValidatingReceipts === true) { | ||
| collectedErrors.current.push({error: CONST.FILE_VALIDATION_ERRORS.PROTECTED_FILE}); | ||
| } else { | ||
| validFiles.current.push(file); | ||
|
|
@@ -350,11 +383,11 @@ function useFilesValidation(proceedWithFilesAction: (files: FileObject[], dataTr | |
| )) | ||
| : undefined; | ||
|
|
||
| const getModalPrompt = () => { | ||
|
Contributor
There was a problem hiding this comment. Why did you remove the useCallback here?
Contributor
Author
There was a problem hiding this comment. Because the file can be successfully compiled with React Compiler and therefore we can remove manual memoization like in other callbacks. Now on a second look, there are still some usages of
Contributor
There was a problem hiding this comment. Ah ok that makes sense. Thanks! @adamgrzybowski @kacper-mikolajczak Seems like we will need to tweak the AI reviewer to acknoledge this though I am not sure how easy it will be so the reviewer knows if the file is compilable with the react compiler |
||
| if (!fileError) { | ||
| return ''; | ||
| } | ||
| const prompt = getFileValidationErrorText(fileError, {fileType: invalidFileExtension}, isValidatingReceipts === true).reason; | ||
| if (fileError === CONST.FILE_VALIDATION_ERRORS.WRONG_FILE_TYPE_MULTIPLE || fileError === CONST.FILE_VALIDATION_ERRORS.WRONG_FILE_TYPE) { | ||
| return ( | ||
| <Text> | ||
|
|
@@ -364,12 +397,12 @@ function useFilesValidation(proceedWithFilesAction: (files: FileObject[], dataTr | |
| ); | ||
| } | ||
| return prompt; | ||
| }; | ||
|
|
||
| const ErrorModal = ( | ||
| <ConfirmModal | ||
| title={getFileValidationErrorText(fileError, {fileType: invalidFileExtension}, isValidatingReceipts === true).title} | ||
| onConfirm={onConfirmError} | ||
| onCancel={hideModalAndReset} | ||
| isVisible={isErrorModalVisible} | ||
| prompt={getModalPrompt()} | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.