You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
79 lines
2.2 KiB
TypeScript
79 lines
2.2 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { useDispatch, useSelector } from 'react-redux';
|
|
import styled from 'styled-components';
|
|
import { setDisappearingMessagesByConvoId } from '../../../../interactions/conversationInteractions';
|
|
import { resetRightOverlayMode } from '../../../../state/ducks/section';
|
|
import { getSelectedConversationKey } from '../../../../state/selectors/conversations';
|
|
import { getTimerOptions } from '../../../../state/selectors/timerOptions';
|
|
import { SessionButton } from '../../../basic/SessionButton';
|
|
import { PanelButtonGroup } from '../../../buttons';
|
|
import { PanelRadioButton } from '../../../buttons/PanelRadioButton';
|
|
|
|
const StyledContainer = styled.div`
|
|
width: 100%;
|
|
|
|
.session-button {
|
|
font-weight: 500;
|
|
min-width: 90px;
|
|
width: fit-content;
|
|
margin: 35px auto 0;
|
|
}
|
|
`;
|
|
|
|
type TimerOptionsProps = {
|
|
options: any[];
|
|
selected: number;
|
|
setSelected: (value: number) => void;
|
|
};
|
|
|
|
const TimeOptions = (props: TimerOptionsProps) => {
|
|
const { options, selected, setSelected } = props;
|
|
|
|
return (
|
|
<PanelButtonGroup>
|
|
{options.map((option: any) => (
|
|
<PanelRadioButton
|
|
key={option.name}
|
|
text={option.name}
|
|
value={option.name}
|
|
isSelected={selected === option.value}
|
|
onSelect={() => {
|
|
setSelected(option.value);
|
|
}}
|
|
disableBg={true}
|
|
/>
|
|
))}
|
|
</PanelButtonGroup>
|
|
);
|
|
};
|
|
|
|
export const OverlayDisappearingMessages = () => {
|
|
const dispatch = useDispatch();
|
|
const selectedConversationKey = useSelector(getSelectedConversationKey);
|
|
const timerOptions = useSelector(getTimerOptions).timerOptions;
|
|
|
|
const [selected, setSelected] = useState(timerOptions[0].value);
|
|
|
|
return (
|
|
<StyledContainer>
|
|
<div
|
|
onClick={() => {
|
|
dispatch(resetRightOverlayMode());
|
|
}}
|
|
>
|
|
TODO
|
|
</div>
|
|
<TimeOptions options={timerOptions} selected={selected} setSelected={setSelected} />
|
|
<SessionButton
|
|
onClick={() => {
|
|
if (selectedConversationKey) {
|
|
void setDisappearingMessagesByConvoId(selectedConversationKey, selected);
|
|
}
|
|
}}
|
|
>
|
|
{window.i18n('set')}
|
|
</SessionButton>
|
|
</StyledContainer>
|
|
);
|
|
};
|