From 3f641588fa4a8bf162fe564d80e167d8a29f3821 Mon Sep 17 00:00:00 2001 From: LeonardJouve Date: Mon, 27 Nov 2023 10:52:56 +0100 Subject: [PATCH] handleFileUploadComplete updates wrong draft (#23983) --- .../advanced_create_post.test.tsx | 11 ++++--- .../advanced_create_post.tsx | 31 ++++++++----------- 2 files changed, 19 insertions(+), 23 deletions(-) diff --git a/webapp/channels/src/components/advanced_create_post/advanced_create_post.test.tsx b/webapp/channels/src/components/advanced_create_post/advanced_create_post.test.tsx index 760f2c5d06..a6f5f41d78 100644 --- a/webapp/channels/src/components/advanced_create_post/advanced_create_post.test.tsx +++ b/webapp/channels/src/components/advanced_create_post/advanced_create_post.test.tsx @@ -850,7 +850,9 @@ describe('components/advanced_create_post', () => { ], }; - instance.draftsForChannel[currentChannelProp.id] = uploadsInProgressDraft; + const channelId = 'another_channel_id'; + + instance.draftsForChannel[channelId] = uploadsInProgressDraft; wrapper.setProps({draft: uploadsInProgressDraft}); const fileInfos = [TestHelper.getFileInfoMock({id: 'a'})]; @@ -862,10 +864,9 @@ describe('components/advanced_create_post', () => { ], }; - instance.handleFileUploadComplete(fileInfos, clientIds, currentChannelProp.id); + instance.handleFileUploadComplete(fileInfos, clientIds, channelId); - jest.advanceTimersByTime(Constants.SAVE_DRAFT_TIMEOUT); - expect(setDraft).toHaveBeenCalledWith(StoragePrefixes.DRAFT + currentChannelProp.id, expectedDraft, currentChannelProp.id); + expect(setDraft).toHaveBeenCalledWith(StoragePrefixes.DRAFT + channelId, expectedDraft, channelId); }); it('check for handleUploadError callback', () => { @@ -945,7 +946,7 @@ describe('components/advanced_create_post', () => { jest.advanceTimersByTime(Constants.SAVE_DRAFT_TIMEOUT); expect(setDraft).toHaveBeenCalledTimes(1); - expect(setDraft).toHaveBeenCalledWith(StoragePrefixes.DRAFT + currentChannelProp.id, draftProp, currentChannelProp.id, false); + expect(setDraft).toHaveBeenCalledWith(StoragePrefixes.DRAFT + currentChannelProp.id, draftProp, currentChannelProp.id); expect(instance.handleFileUploadChange).toHaveBeenCalledTimes(1); }); diff --git a/webapp/channels/src/components/advanced_create_post/advanced_create_post.tsx b/webapp/channels/src/components/advanced_create_post/advanced_create_post.tsx index 8f23305787..47a820e429 100644 --- a/webapp/channels/src/components/advanced_create_post/advanced_create_post.tsx +++ b/webapp/channels/src/components/advanced_create_post/advanced_create_post.tsx @@ -565,8 +565,7 @@ class AdvancedCreatePost extends React.PureComponent { } this.isDraftSubmitting = false; - this.props.actions.setDraft(StoragePrefixes.DRAFT + channelId, null, channelId); - this.draftsForChannel[channelId] = null; + this.removeDraft(channelId); }; handleNotifyAllConfirmation = () => { @@ -796,7 +795,6 @@ class AdvancedCreatePost extends React.PureComponent { }; sendReaction(isReaction: RegExpExecArray) { - const channelId = this.props.currentChannel.id; const action = isReaction[1]; const emojiName = isReaction[2]; const postId = this.props.latestReplyablePostId; @@ -805,8 +803,7 @@ class AdvancedCreatePost extends React.PureComponent { this.props.actions.submitReaction(postId, action, emojiName); } - this.props.actions.setDraft(StoragePrefixes.DRAFT + channelId, null, channelId); - this.draftsForChannel[channelId] = null; + this.removeDraft(); } focusTextbox = (keepFocus = false) => { @@ -891,9 +888,7 @@ class AdvancedCreatePost extends React.PureComponent { this.handleDraftChange(draft); }; - handleDraftChange = (draft: PostDraft, instant = false) => { - const channelId = this.props.currentChannel.id; - + handleDraftChange = (draft: PostDraft, channelId = this.props.currentChannel.id, instant = false) => { if (this.saveDraftFrame) { clearTimeout(this.saveDraftFrame); } @@ -909,6 +904,11 @@ class AdvancedCreatePost extends React.PureComponent { this.draftsForChannel[channelId] = draft; }; + removeDraft = (channelId = this.props.currentChannel.id) => { + this.props.actions.setDraft(StoragePrefixes.DRAFT + channelId, null, channelId); + this.draftsForChannel[channelId] = null; + }; + handleFileUploadChange = () => { this.focusTextbox(); }; @@ -921,8 +921,7 @@ class AdvancedCreatePost extends React.PureComponent { uploadsInProgress, }; - this.props.actions.setDraft(StoragePrefixes.DRAFT + channelId, draft, channelId); - this.draftsForChannel[channelId] = draft; + this.handleDraftChange(draft, channelId, true); // this is a bit redundant with the code that sets focus when the file input is clicked, // but this also resets the focus after a drag and drop @@ -955,7 +954,7 @@ class AdvancedCreatePost extends React.PureComponent { draft.fileInfos = sortFileInfos(draft.fileInfos.concat(fileInfos), this.props.locale); } - this.handleDraftChange(draft, true); + this.handleDraftChange(draft, channelId, true); }; handleUploadError = (uploadError: string | ServerError | null, clientId?: string, channelId?: string) => { @@ -971,8 +970,7 @@ class AdvancedCreatePost extends React.PureComponent { ...draft, uploadsInProgress, }; - this.props.actions.setDraft(StoragePrefixes.DRAFT + channelId, modifiedDraft, channelId); - this.draftsForChannel[channelId] = modifiedDraft; + this.handleDraftChange(modifiedDraft, channelId, true); } } } @@ -989,7 +987,6 @@ class AdvancedCreatePost extends React.PureComponent { removePreview = (id: string) => { let modifiedDraft = {} as PostDraft; const draft = {...this.props.draft}; - const channelId = this.props.currentChannel.id; // Clear previous errors this.setState({serverError: null}); @@ -1020,9 +1017,7 @@ class AdvancedCreatePost extends React.PureComponent { }; } - this.props.actions.setDraft(StoragePrefixes.DRAFT + channelId, modifiedDraft, channelId, false); - this.draftsForChannel[channelId] = modifiedDraft; - + this.handleDraftChange(modifiedDraft, this.props.currentChannel.id, true); this.handleFileUploadChange(); if (this.saveDraftFrame) { @@ -1284,7 +1279,7 @@ class AdvancedCreatePost extends React.PureComponent { updatedDraft.metadata = {}; } - this.handleDraftChange(updatedDraft, true); + this.handleDraftChange(updatedDraft, this.props.currentChannel.id, true); this.focusTextbox(); };