From 162280ced0d4ab34f4aaad13a7ea9da0e0e18854 Mon Sep 17 00:00:00 2001 From: Santhosh Vaiyapuri Date: Fri, 24 Nov 2023 12:14:12 +0100 Subject: [PATCH 1/3] fix: unnecessary flicker when picking document --- .../MessageInputContext.tsx | 95 +++++++++++-------- 1 file changed, 57 insertions(+), 38 deletions(-) diff --git a/package/src/contexts/messageInputContext/MessageInputContext.tsx b/package/src/contexts/messageInputContext/MessageInputContext.tsx index 297814ca32..0cc269f13b 100644 --- a/package/src/contexts/messageInputContext/MessageInputContext.tsx +++ b/package/src/contexts/messageInputContext/MessageInputContext.tsx @@ -587,6 +587,8 @@ export const MessageInputProvider = < ), ); } else { + const promises: Array> = []; + const newFileUploads: FileUpload[] = []; result.assets.forEach((asset) => { /** * TODO: The current tight coupling of images to the image @@ -595,8 +597,17 @@ export const MessageInputProvider = < * This should be updated alongside allowing image a file * uploads together. */ - uploadNewFile(asset); + const { isNotSupported, newFile } = createFileUpload( + asset, + blockedFileExtensionTypes, + blockedFileMimeTypes, + ); + newFileUploads.push(newFile); + if (!isNotSupported) promises.push(uploadFile({ newFile })); }); + setFileUploads((prevFileUploads) => prevFileUploads.concat(newFileUploads)); + setNumberOfUploads((prevNumberOfUploads) => prevNumberOfUploads + newFileUploads.length); + await Promise.all(promises); } } }; @@ -1061,36 +1072,17 @@ export const MessageInputProvider = < }; const uploadNewFile = async (file: File) => { - const id: string = generateRandomId(); - - const isBlockedFileExtension: boolean | undefined = blockedFileExtensionTypes?.some( - (fileExtensionType: string) => file.name?.includes(fileExtensionType), - ); - const isBlockedFileMimeType: boolean | undefined = blockedFileMimeTypes?.some( - (mimeType: string) => file.name?.includes(mimeType), - ); - - const fileState = - isBlockedFileExtension || isBlockedFileMimeType - ? FileState.NOT_SUPPORTED - : FileState.UPLOADING; - - const newFile: FileUpload = { - duration: 0, + const { isNotSupported, newFile } = createFileUpload( file, - id: file.id || id, - paused: true, - progress: 0, - state: fileState, - }; + blockedFileExtensionTypes, + blockedFileMimeTypes, + ); - await Promise.all([ - setFileUploads((prevFileUploads) => prevFileUploads.concat([newFile])), - setNumberOfUploads((prevNumberOfUploads) => prevNumberOfUploads + 1), - ]); + setFileUploads((prevFileUploads) => prevFileUploads.concat([newFile])); + setNumberOfUploads((prevNumberOfUploads) => prevNumberOfUploads + 1); - if (!isBlockedFileExtension) { - uploadFile({ newFile }); + if (!isNotSupported) { + await uploadFile({ newFile }); } }; @@ -1105,10 +1097,9 @@ export const MessageInputProvider = < image.uri?.includes(imageExtensionType), ); - const imageState = - isBlockedImageExtension || isBlockedImageMimeType - ? FileState.NOT_SUPPORTED - : FileState.UPLOADING; + const isNotSupported = isBlockedImageExtension || isBlockedImageMimeType; + + const imageState = isNotSupported ? FileState.NOT_SUPPORTED : FileState.UPLOADING; const newImage: ImageUpload = { file: image, @@ -1119,13 +1110,11 @@ export const MessageInputProvider = < width: image.width, }; - await Promise.all([ - setImageUploads((prevImageUploads) => prevImageUploads.concat([newImage])), - setNumberOfUploads((prevNumberOfUploads) => prevNumberOfUploads + 1), - ]); + setImageUploads((prevImageUploads) => prevImageUploads.concat([newImage])); + setNumberOfUploads((prevNumberOfUploads) => prevNumberOfUploads + 1); - if (!isBlockedImageExtension) { - uploadImage({ newImage }); + if (!isNotSupported) { + await uploadImage({ newImage }); } }; @@ -1229,3 +1218,33 @@ export const withMessageInputContext = < )}`; return WithMessageInputContextComponent; }; + +const createFileUpload = ( + file: File, + blockedFileExtensionTypes: string[] | null | undefined, + blockedFileMimeTypes: string[] | null | undefined, +) => { + const id: string = generateRandomId(); + + const isBlockedFileExtension: boolean | undefined = blockedFileExtensionTypes?.some( + (fileExtensionType: string) => file.name?.includes(fileExtensionType), + ); + const isBlockedFileMimeType: boolean | undefined = blockedFileMimeTypes?.some( + (mimeType: string) => file.name?.includes(mimeType), + ); + + const isNotSupported = !!(isBlockedFileExtension || isBlockedFileMimeType); + + const fileState = isNotSupported ? FileState.NOT_SUPPORTED : FileState.UPLOADING; + + const newFile: FileUpload = { + duration: 0, + file, + id: file.id || id, + paused: true, + progress: 0, + state: fileState, + }; + + return { isNotSupported, newFile }; +}; From 7f90c336517481647c8c582b0a685649f9df6edb Mon Sep 17 00:00:00 2001 From: Santhosh Vaiyapuri Date: Fri, 24 Nov 2023 17:15:07 +0100 Subject: [PATCH 2/3] fix: add await to the async call of send message --- .../MessageInputContext.tsx | 22 ++++++++++--------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/package/src/contexts/messageInputContext/MessageInputContext.tsx b/package/src/contexts/messageInputContext/MessageInputContext.tsx index 0cc269f13b..988836ed5b 100644 --- a/package/src/contexts/messageInputContext/MessageInputContext.tsx +++ b/package/src/contexts/messageInputContext/MessageInputContext.tsx @@ -694,8 +694,6 @@ export const MessageInputProvider = < } }; - // TODO: Figure out why this is async, as it doesn't await any promise. - // eslint-disable-next-line require-await const sendMessage = async () => { if (sending.current) { return; @@ -754,7 +752,7 @@ export const MessageInputProvider = < for (const file of fileUploads) { if (enableOfflineSupport) { if (file.state === FileState.NOT_SUPPORTED) { - return; + continue; } attachments.push(mapFileUploadToAttachment(file)); continue; @@ -805,7 +803,10 @@ export const MessageInputProvider = < sending.current = false; } else { try { - value.sendMessage({ + value.clearQuotedMessageState(); + sending.current = false; + resetInput(attachments); + await value.sendMessage({ attachments, mentioned_users: uniq(mentionedUsers), /** Parent message id - in case of thread */ @@ -815,10 +816,6 @@ export const MessageInputProvider = < show_in_channel: sendThreadMessageInChannel || undefined, text: prevText, } as unknown as StreamMessage); - - value.clearQuotedMessageState(); - sending.current = false; - resetInput(attachments); } catch (_error) { sending.current = false; if (value.quotedMessage && typeof value.quotedMessage !== 'boolean') { @@ -923,8 +920,12 @@ export const MessageInputProvider = < fileState: FileStateValue, extraData: Partial = {}, ): React.SetStateAction => - (prevUploads: UploadType[]) => - prevUploads.map((prevUpload) => { + (prevUploads: UploadType[]) => { + const uploadIndex = prevUploads.findIndex((upload) => upload.id === id); + if (uploadIndex === -1) { + return prevUploads; + } + return prevUploads.map((prevUpload) => { if (prevUpload.id === id) { return { ...prevUpload, @@ -934,6 +935,7 @@ export const MessageInputProvider = < } return prevUpload; }); + }; const handleFileOrImageUploadError = (error: unknown, isImageError: boolean, id: string) => { if (isImageError) { From fd2f7f08370a141b8e3575c303caf8cd09d81a1a Mon Sep 17 00:00:00 2001 From: Santhosh Vaiyapuri Date: Wed, 29 Nov 2023 15:19:38 +0100 Subject: [PATCH 3/3] chore: update podfile --- .../ios/SampleApp.xcodeproj/project.pbxproj | 12 ++---------- 1 file changed, 2 insertions(+), 10 deletions(-) diff --git a/examples/SampleApp/ios/SampleApp.xcodeproj/project.pbxproj b/examples/SampleApp/ios/SampleApp.xcodeproj/project.pbxproj index d520e1ed20..2d2c6612be 100644 --- a/examples/SampleApp/ios/SampleApp.xcodeproj/project.pbxproj +++ b/examples/SampleApp/ios/SampleApp.xcodeproj/project.pbxproj @@ -646,11 +646,7 @@ "-DFOLLY_MOBILE=1", "-DFOLLY_USE_LIBCPP=1", ); - OTHER_LDFLAGS = ( - "$(inherited)", - "-Wl", - "-ld_classic", - ); + OTHER_LDFLAGS = "$(inherited)"; REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native"; SDKROOT = iphoneos; }; @@ -728,11 +724,7 @@ "-DFOLLY_MOBILE=1", "-DFOLLY_USE_LIBCPP=1", ); - OTHER_LDFLAGS = ( - "$(inherited)", - "-Wl", - "-ld_classic", - ); + OTHER_LDFLAGS = "$(inherited)"; REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native"; SDKROOT = iphoneos; VALIDATE_PRODUCT = YES;