diff --git a/ts/components/conversation/right-panel/overlay/disappearing-messages/DisappearingModes.tsx b/ts/components/conversation/right-panel/overlay/disappearing-messages/DisappearingModes.tsx index 0dd579ea3..ae8842f1d 100644 --- a/ts/components/conversation/right-panel/overlay/disappearing-messages/DisappearingModes.tsx +++ b/ts/components/conversation/right-panel/overlay/disappearing-messages/DisappearingModes.tsx @@ -7,10 +7,16 @@ type DisappearingModesProps = { options: Record; selected?: DisappearingMessageConversationType; setSelected: (value: string) => void; + hasOnlyOneMode?: boolean; }; export const DisappearingModes = (props: DisappearingModesProps) => { - const { options, selected, setSelected } = props; + const { options, selected, setSelected, hasOnlyOneMode } = props; + + if (hasOnlyOneMode) { + return null; + } + return ( <> {window.i18n('disappearingMessagesModeLabel')} diff --git a/ts/components/conversation/right-panel/overlay/disappearing-messages/OverlayDisappearingMessages.tsx b/ts/components/conversation/right-panel/overlay/disappearing-messages/OverlayDisappearingMessages.tsx index 11304a307..f4a3a43cd 100644 --- a/ts/components/conversation/right-panel/overlay/disappearing-messages/OverlayDisappearingMessages.tsx +++ b/ts/components/conversation/right-panel/overlay/disappearing-messages/OverlayDisappearingMessages.tsx @@ -57,6 +57,14 @@ export const OverlayDisappearingMessages = (props: OverlayDisappearingMessagesPr : getSelectedConversationExpirationModesWithLegacy ); + // NOTE if there is only 'off' and one disappearing message mode then we trigger single mode + const singleMode = + disappearingModeOptions['off'] !== undefined && + Object.keys(disappearingModeOptions).length === 2 + ? Object.keys(disappearingModeOptions)[1] + : undefined; + const hasOnlyOneMode = Boolean(singleMode && singleMode.length > 0); + const convoProps = useSelector(getSelectedConversationExpirationSettings); if (!convoProps) { @@ -75,7 +83,27 @@ export const OverlayDisappearingMessages = (props: OverlayDisappearingMessagesPr ); // TODO verify that this if fine compared to updating in the useEffect - const timerOptions = useTimerOptionsByMode(modeSelected); + const timerOptions = useTimerOptionsByMode(modeSelected, hasOnlyOneMode); + + const handleSetMode = async () => { + if (hasOnlyOneMode) { + if (selectedConversationKey && singleMode) { + await setDisappearingMessagesByConvoId( + selectedConversationKey, + timeSelected === 0 ? 'off' : singleMode, + timeSelected + ); + dispatch(closeRightPanel()); + dispatch(resetRightOverlayMode()); + } + } else { + if (selectedConversationKey && modeSelected && timeSelected) { + await setDisappearingMessagesByConvoId(selectedConversationKey, modeSelected, timeSelected); + dispatch(closeRightPanel()); + dispatch(resetRightOverlayMode()); + } + } + }; useEffect(() => { if (modeSelected !== convoProps.expirationType) { @@ -91,21 +119,35 @@ export const OverlayDisappearingMessages = (props: OverlayDisappearingMessagesPr
- {modeSelected !== 'off' && ( + {(hasOnlyOneMode || modeSelected !== 'off') && ( <> - + {!hasOnlyOneMode && } )} @@ -120,18 +162,14 @@ export const OverlayDisappearingMessages = (props: OverlayDisappearingMessagesPr )} { - if (selectedConversationKey && modeSelected && timeSelected) { - await setDisappearingMessagesByConvoId( - selectedConversationKey, - modeSelected, - timeSelected - ); - dispatch(closeRightPanel()); - dispatch(resetRightOverlayMode()); - } - }} - disabled={modeSelected ? disappearingModeOptions[modeSelected] : undefined} + onClick={handleSetMode} + disabled={ + singleMode + ? disappearingModeOptions[singleMode] + : modeSelected + ? disappearingModeOptions[modeSelected] + : undefined + } > {window.i18n('set')} diff --git a/ts/components/conversation/right-panel/overlay/disappearing-messages/TimeOptions.tsx b/ts/components/conversation/right-panel/overlay/disappearing-messages/TimeOptions.tsx index 37904c2f6..861779deb 100644 --- a/ts/components/conversation/right-panel/overlay/disappearing-messages/TimeOptions.tsx +++ b/ts/components/conversation/right-panel/overlay/disappearing-messages/TimeOptions.tsx @@ -8,11 +8,12 @@ type TimerOptionsProps = { options: TimerOptionsArray | null; selected?: number; setSelected: (value: number) => void; + hasOnlyOneMode?: boolean; disabled?: boolean; }; export const TimeOptions = (props: TimerOptionsProps) => { - const { options, selected, setSelected, disabled } = props; + const { options, selected, setSelected, hasOnlyOneMode, disabled } = props; if (!options || isEmpty(options)) { return null; @@ -20,21 +21,23 @@ export const TimeOptions = (props: TimerOptionsProps) => { return ( <> - {window.i18n('timer')} + {!hasOnlyOneMode && {window.i18n('timer')}} - {options.map((option: any) => ( - { - setSelected(option.value); - }} - noBackgroundColor={true} - disabled={disabled} - /> - ))} + {options.map((option: any) => { + return ( + { + setSelected(option.value); + }} + noBackgroundColor={true} + disabled={disabled} + /> + ); + })} ); diff --git a/ts/hooks/useParamSelector.ts b/ts/hooks/useParamSelector.ts index 48a1b2564..f6e2bab88 100644 --- a/ts/hooks/useParamSelector.ts +++ b/ts/hooks/useParamSelector.ts @@ -185,7 +185,7 @@ export function useMessageReactsPropsById(messageId?: string) { } // TODO remove 10 seconds timer -export function useTimerOptionsByMode(disappearingMessageMode?: string) { +export function useTimerOptionsByMode(disappearingMessageMode?: string, hasOnlyOneMode?: boolean) { return useSelector((state: StateType) => { const options = state.timerOptions.timerOptions; @@ -194,6 +194,7 @@ export function useTimerOptionsByMode(disappearingMessageMode?: string) { case 'legacy': return options.filter(option => { return ( + (hasOnlyOneMode && option.value === 0) || option.value === 5 || // 5 seconds option.value === 10 || // 10 seconds option.value === 30 || // 30 seconds @@ -210,6 +211,7 @@ export function useTimerOptionsByMode(disappearingMessageMode?: string) { case 'deleteAfterSend': return options.filter(option => { return ( + (hasOnlyOneMode && option.value === 0) || option.value === 10 || // 10 seconds (for development) option.value === 30 || // 30 seconds (for development) option.value === 60 || // 1 minute (for testing) @@ -222,6 +224,7 @@ export function useTimerOptionsByMode(disappearingMessageMode?: string) { case 'deleteAfterRead': return options.filter(option => { return ( + (hasOnlyOneMode && option.value === 0) || option.value === 10 || // 10 seconds (for development) option.value === 30 || // 30 seconds (for development) option.value === 60 || // 1 minute (for testing)