From 6a11a4c87923204d7406de005554c320d6883b57 Mon Sep 17 00:00:00 2001 From: audric Date: Tue, 17 Aug 2021 16:57:02 +1000 Subject: [PATCH] store staged Attachments in redux still an issue with the File in redux --- .../conversation/StagedAttachmentList.tsx | 42 +++++-- ts/components/session/SessionInboxView.tsx | 2 + .../conversation/SessionCompositionBox.tsx | 28 +++-- .../conversation/SessionConversation.tsx | 64 +++-------- ts/data/data.ts | 8 +- ts/state/ducks/stagedAttachments.ts | 103 ++++++++++++++++++ ts/state/reducer.ts | 6 + ts/state/selectors/stagedAttachments.ts | 28 +++++ ts/state/smart/SessionConversation.ts | 2 + ts/util/attachmentsUtil.ts | 2 +- 10 files changed, 218 insertions(+), 67 deletions(-) create mode 100644 ts/state/ducks/stagedAttachments.ts create mode 100644 ts/state/selectors/stagedAttachments.ts diff --git a/ts/components/conversation/StagedAttachmentList.tsx b/ts/components/conversation/StagedAttachmentList.tsx index e7ce3eca2..6301a95ee 100644 --- a/ts/components/conversation/StagedAttachmentList.tsx +++ b/ts/components/conversation/StagedAttachmentList.tsx @@ -10,21 +10,41 @@ import { getUrl, isVideoAttachment, } from '../../types/Attachment'; +import { useDispatch, useSelector } from 'react-redux'; +import { + removeAllStagedAttachmentsInConversation, + removeStagedAttachmentInConversation, +} from '../../state/ducks/stagedAttachments'; +import { getSelectedConversationKey } from '../../state/selectors/conversations'; type Props = { attachments: Array; - // onError: () => void; onClickAttachment: (attachment: AttachmentType) => void; - onCloseAttachment: (attachment: AttachmentType) => void; onAddAttachment: () => void; - onClose: () => void; }; const IMAGE_WIDTH = 120; const IMAGE_HEIGHT = 120; export const StagedAttachmentList = (props: Props) => { - const { attachments, onAddAttachment, onClickAttachment, onCloseAttachment, onClose } = props; + const { attachments, onAddAttachment, onClickAttachment } = props; + + const dispatch = useDispatch(); + const conversationKey = useSelector(getSelectedConversationKey); + + const onRemoveAllStaged = () => { + if (!conversationKey) { + return; + } + dispatch(removeAllStagedAttachmentsInConversation({ conversationKey })); + }; + + const onRemoveByFilename = (filename: string) => { + if (!conversationKey) { + return; + } + dispatch(removeStagedAttachmentInConversation({ conversationKey, filename })); + }; if (!attachments.length) { return null; @@ -36,7 +56,11 @@ export const StagedAttachmentList = (props: Props) => {
{attachments.length > 1 ? (
-
+
) : null}
@@ -58,7 +82,9 @@ export const StagedAttachmentList = (props: Props) => { url={getUrl(attachment)} closeButton={true} onClick={clickCallback} - onClickClose={onCloseAttachment} + onClickClose={() => { + onRemoveByFilename(attachment.fileName); + }} /> ); } @@ -69,7 +95,9 @@ export const StagedAttachmentList = (props: Props) => { { + onRemoveByFilename(attachment.fileName); + }} /> ); })} diff --git a/ts/components/session/SessionInboxView.tsx b/ts/components/session/SessionInboxView.tsx index bc4a44b09..6937a19e3 100644 --- a/ts/components/session/SessionInboxView.tsx +++ b/ts/components/session/SessionInboxView.tsx @@ -26,6 +26,7 @@ import { SessionMainPanel } from '../SessionMainPanel'; import { PersistGate } from 'redux-persist/integration/react'; import { persistStore } from 'redux-persist'; import { TimerOptionsArray } from '../../state/ducks/timerOptions'; +import { getEmptyStagedAttachmentsState } from '../../state/ducks/stagedAttachments'; // Workaround: A react component's required properties are filtering up through connect() // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31363 @@ -108,6 +109,7 @@ export class SessionInboxView extends React.Component { timerOptions: { timerOptions, }, + stagedAttachments: getEmptyStagedAttachmentsState(), }; this.store = createStore(initialState); diff --git a/ts/components/session/conversation/SessionCompositionBox.tsx b/ts/components/session/conversation/SessionCompositionBox.tsx index 36224b1d2..c0a85c7d0 100644 --- a/ts/components/session/conversation/SessionCompositionBox.tsx +++ b/ts/components/session/conversation/SessionCompositionBox.tsx @@ -54,6 +54,7 @@ import { import { connect } from 'react-redux'; import { StateType } from '../../../state/reducer'; import { getTheme } from '../../../state/selectors/theme'; +import { removeAllStagedAttachmentsInConversation } from '../../../state/ducks/stagedAttachments'; export interface ReplyingToMessageProps { convoId: string; @@ -95,8 +96,6 @@ interface Props { selectedConversation: ReduxConversationType | undefined; quotedMessageProps?: ReplyingToMessageProps; stagedAttachments: Array; - clearAttachments: () => any; - removeAttachment: (toRemove: AttachmentType) => void; onChoseAttachments: (newAttachments: Array) => void; } @@ -736,8 +735,6 @@ class SessionCompositionBoxInner extends React.Component { attachments={stagedAttachments} onClickAttachment={this.onClickAttachment} onAddAttachment={this.onChooseAttachment} - onCloseAttachment={this.props.removeAttachment} - onClose={this.props.clearAttachments} /> {this.renderCaptionEditor(showCaptionEditor)} @@ -886,8 +883,11 @@ class SessionCompositionBoxInner extends React.Component { groupInvitation: undefined, }); - this.props.clearAttachments(); - + window.inboxStore?.dispatch( + removeAllStagedAttachmentsInConversation({ + conversationKey: this.props.selectedConversationKey, + }) + ); // Empty composition box and stagedAttachments this.setState({ showEmojiPanel: false, @@ -907,8 +907,12 @@ class SessionCompositionBoxInner extends React.Component { } // this function is called right before sending a message, to gather really the files behind attachments. - private async getFiles() { + private async getFiles(): Promise> { const { stagedAttachments } = this.props; + + if (_.isEmpty(stagedAttachments)) { + return []; + } // scale them down const files = await Promise.all( stagedAttachments.map(attachment => @@ -917,8 +921,12 @@ class SessionCompositionBoxInner extends React.Component { }) ) ); - this.props.clearAttachments(); - return files; + window.inboxStore?.dispatch( + removeAllStagedAttachmentsInConversation({ + conversationKey: this.props.selectedConversationKey, + }) + ); + return _.compact(files); } private async sendVoiceMessage(audioBlob: Blob) { @@ -940,7 +948,7 @@ class SessionCompositionBoxInner extends React.Component { isVoiceMessage: true, }; - await this.props.sendMessage({ + this.props.sendMessage({ body: '', attachments: [audioAttachment], preview: undefined, diff --git a/ts/components/session/conversation/SessionConversation.tsx b/ts/components/session/conversation/SessionConversation.tsx index 1d9dc99c3..a952d277b 100644 --- a/ts/components/session/conversation/SessionConversation.tsx +++ b/ts/components/session/conversation/SessionConversation.tsx @@ -18,7 +18,7 @@ import styled, { DefaultTheme } from 'styled-components'; import { SessionMessagesListContainer } from './SessionMessagesListContainer'; import { LightboxGallery, MediaItemType } from '../../LightboxGallery'; -import { AttachmentType, AttachmentTypeWithPath } from '../../../types/Attachment'; +import { AttachmentTypeWithPath } from '../../../types/Attachment'; import { ToastUtils, UserUtils } from '../../../session/utils'; import * as MIME from '../../../types/MIME'; import { SessionFileDropzone } from './SessionFileDropzone'; @@ -42,10 +42,10 @@ import { import { SessionButtonColor } from '../SessionButton'; import { updateConfirmModal } from '../../../state/ducks/modalDialog'; +import { addStagedAttachmentsInConversation } from '../../../state/ducks/stagedAttachments'; interface State { showRecordingView: boolean; - stagedAttachments: Array; isDraggingFile: boolean; } export interface LightBoxOptions { @@ -65,6 +65,8 @@ interface Props { // lightbox options lightBoxOptions?: LightBoxOptions; + + stagedAttachments: Array; } const SessionUnreadAboveIndicator = styled.div` @@ -102,7 +104,6 @@ export class SessionConversation extends React.Component { this.state = { showRecordingView: false, - stagedAttachments: [], isDraggingFile: false, }; this.messageContainerRef = React.createRef(); @@ -163,7 +164,6 @@ export class SessionConversation extends React.Component { if (newConversationKey !== oldConversationKey) { this.setState({ showRecordingView: false, - stagedAttachments: [], isDraggingFile: false, }); } @@ -227,7 +227,7 @@ export class SessionConversation extends React.Component { // ~~~~~~~~~~~~~~ RENDER METHODS ~~~~~~~~~~~~~~ // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ public render() { - const { showRecordingView, isDraggingFile, stagedAttachments } = this.state; + const { showRecordingView, isDraggingFile } = this.state; const { selectedConversation, @@ -274,11 +274,9 @@ export class SessionConversation extends React.Component {
@@ -332,45 +330,6 @@ export class SessionConversation extends React.Component { } } - private clearAttachments() { - this.state.stagedAttachments.forEach(attachment => { - if (attachment.url) { - URL.revokeObjectURL(attachment.url); - } - if (attachment.videoUrl) { - URL.revokeObjectURL(attachment.videoUrl); - } - }); - this.setState({ stagedAttachments: [] }); - } - - private removeAttachment(attachment: AttachmentType) { - const { stagedAttachments } = this.state; - const updatedStagedAttachments = (stagedAttachments || []).filter( - m => m.fileName !== attachment.fileName - ); - - this.setState({ stagedAttachments: updatedStagedAttachments }); - } - - private addAttachments(newAttachments: Array) { - const { stagedAttachments } = this.state; - let newAttachmentsFiltered: Array = []; - if (newAttachments?.length > 0) { - if (newAttachments.some(a => a.isVoiceMessage) && stagedAttachments.length > 0) { - throw new Error('A voice note cannot be sent with other attachments'); - } - // do not add already added attachments - newAttachmentsFiltered = newAttachments.filter( - a => !stagedAttachments.some(b => b.file.path === a.file.path) - ); - } - - this.setState({ - stagedAttachments: [...stagedAttachments, ...newAttachmentsFiltered], - }); - } - private renderLightBox({ media, attachment }: LightBoxOptions) { const selectedIndex = media.length > 1 @@ -399,7 +358,7 @@ export class SessionConversation extends React.Component { const fileName = file.name; const contentType = file.type; - const { stagedAttachments } = this.state; + const { stagedAttachments } = this.props; if (window.Signal.Util.isFileDangerous(fileName)) { ToastUtils.pushDangerousFileError(); @@ -568,6 +527,15 @@ export class SessionConversation extends React.Component { } } + private addAttachments(newAttachments: Array) { + window.inboxStore?.dispatch( + addStagedAttachmentsInConversation({ + conversationKey: this.props.selectedConversationKey, + newAttachments, + }) + ); + } + private handleDrag(e: any) { e.preventDefault(); e.stopPropagation(); diff --git a/ts/data/data.ts b/ts/data/data.ts index 15f6bf306..ef0d2ae9b 100644 --- a/ts/data/data.ts +++ b/ts/data/data.ts @@ -208,6 +208,11 @@ function _cleanData(data: any): any { if (_.isFunction(value.toNumber)) { // eslint-disable-next-line no-param-reassign data[key] = value.toNumber(); + } else if (_.isFunction(value)) { + // just skip a function which has not a toNumber function. We don't want to save a function to the db. + // an attachment comes with a toJson() function + // tslint:disable-next-line: no-dynamic-delete + delete data[key]; } else if (Array.isArray(value)) { // eslint-disable-next-line no-param-reassign data[key] = value.map(_cleanData); @@ -619,7 +624,8 @@ export async function updateLastHash(data: { } export async function saveMessage(data: MessageAttributes): Promise { - const id = await channels.saveMessage(_cleanData(data)); + const cleanedData = _cleanData(data); + const id = await channels.saveMessage(cleanedData); window.Whisper.ExpiringMessagesListener.update(); return id; } diff --git a/ts/state/ducks/stagedAttachments.ts b/ts/state/ducks/stagedAttachments.ts new file mode 100644 index 000000000..d4474dbc2 --- /dev/null +++ b/ts/state/ducks/stagedAttachments.ts @@ -0,0 +1,103 @@ +import { createSlice, PayloadAction } from '@reduxjs/toolkit'; +import _ from 'lodash'; +import { StagedAttachmentType } from '../../components/session/conversation/SessionCompositionBox'; + +export type StagedAttachmentsStateType = { + stagedAttachments: { [conversationKey: string]: Array }; +}; + +// Reducer + +export function getEmptyStagedAttachmentsState(): StagedAttachmentsStateType { + return { + stagedAttachments: {}, + }; +} + +const stagedAttachmentsSlice = createSlice({ + name: 'stagedAttachments', + initialState: getEmptyStagedAttachmentsState(), + reducers: { + addStagedAttachmentsInConversation( + state: StagedAttachmentsStateType, + action: PayloadAction<{ + conversationKey: string; + newAttachments: Array; + }> + ) { + const { conversationKey, newAttachments } = action.payload; + if (newAttachments.length === 0) { + return state; + } + const currentStagedAttachments = state.stagedAttachments[conversationKey] || []; + + if (newAttachments.some(a => a.isVoiceMessage) && currentStagedAttachments.length > 0) { + window?.log?.warn('A voice note cannot be sent with other attachments'); + return state; + } + + const allAttachments = _.concat(currentStagedAttachments, newAttachments); + const uniqAttachments = _.uniqBy(allAttachments, m => m.fileName); + + state.stagedAttachments[conversationKey] = uniqAttachments; + return state; + }, + removeAllStagedAttachmentsInConversation( + state: StagedAttachmentsStateType, + action: PayloadAction<{ conversationKey: string }> + ) { + const { conversationKey } = action.payload; + + const currentStagedAttachments = state.stagedAttachments[conversationKey]; + if (!currentStagedAttachments || _.isEmpty(currentStagedAttachments)) { + return state; + } + currentStagedAttachments.forEach(attachment => { + if (attachment.url) { + URL.revokeObjectURL(attachment.url); + } + if (attachment.videoUrl) { + URL.revokeObjectURL(attachment.videoUrl); + } + }); + // tslint:disable-next-line: no-dynamic-delete + delete state.stagedAttachments[conversationKey]; + return state; + }, + removeStagedAttachmentInConversation( + state: StagedAttachmentsStateType, + action: PayloadAction<{ conversationKey: string; filename: string }> + ) { + const { conversationKey, filename } = action.payload; + + const currentStagedAttachments = state.stagedAttachments[conversationKey]; + + if (!currentStagedAttachments || _.isEmpty(currentStagedAttachments)) { + return state; + } + const attachmentToRemove = currentStagedAttachments.find(m => m.fileName === filename); + + if (!attachmentToRemove) { + return state; + } + + if (attachmentToRemove.url) { + URL.revokeObjectURL(attachmentToRemove.url); + } + if (attachmentToRemove.videoUrl) { + URL.revokeObjectURL(attachmentToRemove.videoUrl); + } + state.stagedAttachments[conversationKey] = state.stagedAttachments[conversationKey].filter( + a => a.fileName !== filename + ); + return state; + }, + }, +}); + +export const { actions, reducer } = stagedAttachmentsSlice; +export const { + addStagedAttachmentsInConversation, + removeAllStagedAttachmentsInConversation, + removeStagedAttachmentInConversation, +} = actions; diff --git a/ts/state/reducer.ts b/ts/state/reducer.ts index 1a96f579a..04b206e3b 100644 --- a/ts/state/reducer.ts +++ b/ts/state/reducer.ts @@ -11,6 +11,10 @@ import { defaultOnionReducer as onionPaths, OnionState } from './ducks/onion'; import { modalReducer as modals, ModalState } from './ducks/modalDialog'; import { userConfigReducer as userConfig, UserConfigState } from './ducks/userConfig'; import { timerOptionReducer as timerOptions, TimerOptionsState } from './ducks/timerOptions'; +import { + reducer as stagedAttachments, + StagedAttachmentsStateType, +} from './ducks/stagedAttachments'; export type StateType = { search: SearchStateType; @@ -23,6 +27,7 @@ export type StateType = { modals: ModalState; userConfig: UserConfigState; timerOptions: TimerOptionsState; + stagedAttachments: StagedAttachmentsStateType; }; export const reducers = { @@ -36,6 +41,7 @@ export const reducers = { modals, userConfig, timerOptions, + stagedAttachments, }; // Making this work would require that our reducer signature supported AnyAction, not diff --git a/ts/state/selectors/stagedAttachments.ts b/ts/state/selectors/stagedAttachments.ts new file mode 100644 index 000000000..477e70c60 --- /dev/null +++ b/ts/state/selectors/stagedAttachments.ts @@ -0,0 +1,28 @@ +import { createSelector } from 'reselect'; +import { StagedAttachmentType } from '../../components/session/conversation/SessionCompositionBox'; +import { StagedAttachmentsStateType } from '../ducks/stagedAttachments'; +import { StateType } from '../reducer'; +import { getSelectedConversationKey } from './conversations'; + +export const getStagedAttachmentsState = (state: StateType): StagedAttachmentsStateType => + state.stagedAttachments; + +const getStagedAttachmentsForConversation = ( + state: StagedAttachmentsStateType, + conversationKey: string | undefined +) => { + if (!conversationKey) { + return undefined; + } + return state.stagedAttachments[conversationKey] || []; +}; + +export const getStagedAttachmentsForCurrentConversation = createSelector( + [getSelectedConversationKey, getStagedAttachmentsState], + ( + selectedConversationKey: string | undefined, + state: StagedAttachmentsStateType + ): Array | undefined => { + return getStagedAttachmentsForConversation(state, selectedConversationKey); + } +); diff --git a/ts/state/smart/SessionConversation.ts b/ts/state/smart/SessionConversation.ts index 93c52c0b2..7a70a74b9 100644 --- a/ts/state/smart/SessionConversation.ts +++ b/ts/state/smart/SessionConversation.ts @@ -13,6 +13,7 @@ import { isRightPanelShowing, } from '../selectors/conversations'; import { getOurNumber } from '../selectors/user'; +import { getStagedAttachmentsForCurrentConversation } from '../selectors/stagedAttachments'; const mapStateToProps = (state: StateType) => { return { @@ -25,6 +26,7 @@ const mapStateToProps = (state: StateType) => { isRightPanelShowing: isRightPanelShowing(state), selectedMessages: getSelectedMessageIds(state), lightBoxOptions: getLightBoxOptions(state), + stagedAttachments: getStagedAttachmentsForCurrentConversation(state), }; }; diff --git a/ts/util/attachmentsUtil.ts b/ts/util/attachmentsUtil.ts index 548a50a1a..1871ef31c 100644 --- a/ts/util/attachmentsUtil.ts +++ b/ts/util/attachmentsUtil.ts @@ -99,7 +99,7 @@ export async function autoScale( export async function getFile(attachment: StagedAttachmentType, maxMeasurements?: MaxScaleSize) { if (!attachment) { - return Promise.resolve(); + return null; } const attachmentFlags = attachment.isVoiceMessage