diff --git a/ts/components/conversation/right-panel/overlay/OverlayDisappearingMessages.tsx b/ts/components/conversation/right-panel/overlay/OverlayDisappearingMessages.tsx index 66523b207..b6cae9310 100644 --- a/ts/components/conversation/right-panel/overlay/OverlayDisappearingMessages.tsx +++ b/ts/components/conversation/right-panel/overlay/OverlayDisappearingMessages.tsx @@ -5,7 +5,6 @@ import { setDisappearingMessagesByConvoId } from '../../../../interactions/conve import { closeRightPanel } from '../../../../state/ducks/conversations'; import { resetRightOverlayMode } from '../../../../state/ducks/section'; import { getSelectedConversationKey } from '../../../../state/selectors/conversations'; -import { getTimerOptions } from '../../../../state/selectors/timerOptions'; import { Flex } from '../../../basic/Flex'; import { SessionButton } from '../../../basic/SessionButton'; import { SpacerLG, SpacerXL } from '../../../basic/Text'; @@ -18,6 +17,9 @@ import { DisappearingMessageConversationSetting, DisappearingMessageConversationType, } from '../../../../util/expiringMessages'; +import { TimerOptionsArray } from '../../../../state/ducks/timerOptions'; +import { useTimerOptionsByMode } from '../../../../hooks/useParamSelector'; +import { isEmpty } from 'lodash'; const StyledScrollContainer = styled.div` width: 100%; @@ -139,7 +141,7 @@ const DisappearingModes = (props: DisappearingModesProps) => { }; type TimerOptionsProps = { - options: Array; + options: TimerOptionsArray | null; selected?: number; setSelected: (value: number) => void; }; @@ -147,6 +149,10 @@ type TimerOptionsProps = { const TimeOptions = (props: TimerOptionsProps) => { const { options, selected, setSelected } = props; + if (!options || isEmpty(options)) { + return null; + } + return ( <> {window.i18n('timer')} @@ -172,7 +178,6 @@ export const OverlayDisappearingMessages = () => { const dispatch = useDispatch(); const selectedConversationKey = useSelector(getSelectedConversationKey); const disappearingModeOptions = DisappearingMessageConversationSetting; - const timerOptions = useSelector(getTimerOptions).timerOptions; const convoProps = useSelector(getSelectedConversationExpirationSettings); @@ -182,6 +187,7 @@ export const OverlayDisappearingMessages = () => { const [modeSelected, setModeSelected] = useState(convoProps.expirationType); const [timeSelected, setTimeSelected] = useState(convoProps.expireTimer); + const timerOptions = useTimerOptionsByMode(modeSelected); useEffect(() => { if (modeSelected !== convoProps.expirationType) { diff --git a/ts/hooks/useParamSelector.ts b/ts/hooks/useParamSelector.ts index 2a5706af6..7377d6a2a 100644 --- a/ts/hooks/useParamSelector.ts +++ b/ts/hooks/useParamSelector.ts @@ -183,3 +183,34 @@ export function useMessageReactsPropsById(messageId?: string) { return messageReactsProps; }); } + +export function useTimerOptionsByMode(disappearingMessageMode?: string) { + return useSelector((state: StateType) => { + let options = state.timerOptions.timerOptions; + + switch (disappearingMessageMode) { + case 'deleteAfterSend': + return options.filter(option => { + return ( + option.value === 43200 || // 12 hours + option.value === 86400 || // 1 day + option.value === 604800 || // 1 week + option.value === 1209600 // 2 weeks + ); + }); + case 'deleteAfterRead': + return options.filter(option => { + return ( + option.value === 300 || // 5 minutes + option.value === 3600 || // 1 hour + option.value === 43200 || // 12 hours + option.value === 86400 || // 1 day + option.value === 604800 || // 1 week + option.value === 1209600 // 2 weeks + ); + }); + default: + return options; + } + }); +} diff --git a/ts/util/expiringMessages.ts b/ts/util/expiringMessages.ts index 2f5baab26..92d594d39 100644 --- a/ts/util/expiringMessages.ts +++ b/ts/util/expiringMessages.ts @@ -153,6 +153,7 @@ const timerOptionsDurations: Array<{ { time: 12, unit: 'hours' as moment.DurationInputArg2 }, { time: 1, unit: 'day' as moment.DurationInputArg2 }, { time: 1, unit: 'week' as moment.DurationInputArg2 }, + { time: 2, unit: 'weeks' as moment.DurationInputArg2 }, ].map(o => { const duration = moment.duration(o.time, o.unit); // 5, 'seconds' return {