fix: Refactor settings to use Redux
Refactor setting to use boolean which is stored in redux
This commit is contained in:
parent
8f2a41bc13
commit
95117afeea
|
@ -4,11 +4,11 @@ import { Flex } from './Flex';
|
|||
|
||||
type Props = {
|
||||
label: string;
|
||||
value: string;
|
||||
value: string | boolean;
|
||||
active: boolean;
|
||||
inputName?: string;
|
||||
beforeMargins?: string;
|
||||
onClick?: (value: string) => void;
|
||||
onClick?: (value: string | boolean) => void;
|
||||
};
|
||||
|
||||
const StyledInput = styled.input<{
|
||||
|
@ -68,7 +68,7 @@ export const SessionRadio = (props: Props) => {
|
|||
<StyledInput
|
||||
type="radio"
|
||||
name={inputName || ''}
|
||||
value={value}
|
||||
value={value.toString()}
|
||||
aria-checked={active}
|
||||
checked={active}
|
||||
onChange={clickHandler}
|
||||
|
|
|
@ -5,10 +5,10 @@ import styled, { CSSProperties } from 'styled-components';
|
|||
import { SessionRadio } from './SessionRadio';
|
||||
|
||||
interface Props {
|
||||
initialItem: string;
|
||||
items: Array<{ value: string; label: string }>;
|
||||
initialItem: string | boolean;
|
||||
items: Array<{ value: string | boolean; label: string }>;
|
||||
group: string;
|
||||
onClick: (selectedValue: string) => any;
|
||||
onClick: (selectedValue: string | boolean) => void;
|
||||
style?: CSSProperties;
|
||||
}
|
||||
|
||||
|
@ -30,7 +30,7 @@ const StyledFieldSet = styled.fieldset`
|
|||
|
||||
export const SessionRadioGroup = (props: Props) => {
|
||||
const { items, group, initialItem, style } = props;
|
||||
const [activeItem, setActiveItem] = useState('');
|
||||
const [activeItem, setActiveItem] = useState<string | boolean>(initialItem);
|
||||
|
||||
useMount(() => {
|
||||
setActiveItem(initialItem);
|
||||
|
@ -43,12 +43,12 @@ export const SessionRadioGroup = (props: Props) => {
|
|||
|
||||
return (
|
||||
<SessionRadio
|
||||
key={item.value}
|
||||
key={item.value.toString()}
|
||||
label={item.label}
|
||||
active={itemIsActive}
|
||||
value={item.value}
|
||||
inputName={group}
|
||||
onClick={(value: string) => {
|
||||
onClick={(value: string | boolean) => {
|
||||
setActiveItem(value);
|
||||
props.onClick(value);
|
||||
}}
|
||||
|
|
|
@ -834,10 +834,10 @@ class CompositionBoxInner extends React.Component<Props, State> {
|
|||
private async onKeyDown(event: any) {
|
||||
const isEnter = event.key === 'Enter';
|
||||
const isShiftEnter = event.shiftKey && isEnter;
|
||||
const isEnterNewLineSetting = (window.getSettingValue(SettingsKey.settingsEnterKeyFunction) as string) === 'enterNewLine';
|
||||
const isShiftSendEnabled = window.getSettingValue(SettingsKey.hasShiftSendEnabled) as boolean;
|
||||
const isNotComposing = !event.nativeEvent.isComposing;
|
||||
|
||||
if (isEnterNewLineSetting && isEnter && isNotComposing) {
|
||||
|
||||
if (isShiftSendEnabled && isEnter && isNotComposing) {
|
||||
event.preventDefault();
|
||||
if (isShiftEnter) {
|
||||
await this.onSendMessage();
|
||||
|
@ -861,27 +861,27 @@ class CompositionBoxInner extends React.Component<Props, State> {
|
|||
if (!messageBox) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
const { draft } = this.state;
|
||||
const { selectedConversationKey } = this.props;
|
||||
|
||||
|
||||
if (!selectedConversationKey) {
|
||||
return; // add this check to prevent undefined from being used
|
||||
return; // add this check to prevent undefined from being used
|
||||
}
|
||||
|
||||
|
||||
const currentSelectionStart = Number(messageBox.selectionStart);
|
||||
const realSelectionStart = getSelectionBasedOnMentions(draft, currentSelectionStart);
|
||||
|
||||
|
||||
const before = draft.slice(0, realSelectionStart);
|
||||
const after = draft.slice(realSelectionStart);
|
||||
|
||||
|
||||
this.setState({ draft: `${before}\n${after}` });
|
||||
updateDraftForConversation({
|
||||
conversationKey: selectedConversationKey,
|
||||
draft: `${before}\n${after}`,
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
private async onKeyUp() {
|
||||
if (!this.props.selectedConversationKey) {
|
||||
throw new Error('selectedConversationKey is needed');
|
||||
|
|
|
@ -109,7 +109,7 @@ export const SessionNotificationGroupSettings = (props: { hasPassword: boolean |
|
|||
initialItem={initialNotificationEnabled}
|
||||
group={SettingsKey.settingsNotification}
|
||||
items={items}
|
||||
onClick={async (selectedRadioValue: string) => {
|
||||
onClick={async (selectedRadioValue: string | boolean) => {
|
||||
await window.setSettingValue(SettingsKey.settingsNotification, selectedRadioValue);
|
||||
forceUpdate();
|
||||
}}
|
||||
|
|
|
@ -8,7 +8,10 @@ import { toggleAudioAutoplay } from '../../../state/ducks/userConfig';
|
|||
import { getAudioAutoplay } from '../../../state/selectors/userConfig';
|
||||
import { SessionRadioGroup } from '../../basic/SessionRadioGroup';
|
||||
import { BlockedContactsList } from '../BlockedList';
|
||||
import { SessionSettingsItemWrapper, SessionToggleWithDescription } from '../SessionSettingListItem';
|
||||
import {
|
||||
SessionSettingsItemWrapper,
|
||||
SessionToggleWithDescription,
|
||||
} from '../SessionSettingListItem';
|
||||
|
||||
async function toggleCommunitiesPruning() {
|
||||
try {
|
||||
|
@ -83,16 +86,16 @@ const AudioMessageAutoPlaySetting = () => {
|
|||
const EnterKeyFunctionSetting = () => {
|
||||
const forceUpdate = useUpdate();
|
||||
|
||||
const initialSetting = window.getSettingValue(SettingsKey.settingsEnterKeyFunction) || true;
|
||||
const initialSetting = window.getSettingValue(SettingsKey.hasShiftSendEnabled) || false;
|
||||
|
||||
const items = [
|
||||
{
|
||||
label: window.i18n('enterSendNewMessageDescription'),
|
||||
value: 'enterSend',
|
||||
value: false,
|
||||
},
|
||||
{
|
||||
label: window.i18n('enterNewLineDescription'),
|
||||
value: 'enterNewLine',
|
||||
value: true,
|
||||
},
|
||||
];
|
||||
|
||||
|
@ -104,11 +107,14 @@ const EnterKeyFunctionSetting = () => {
|
|||
>
|
||||
<SessionRadioGroup
|
||||
initialItem={initialSetting}
|
||||
group={SettingsKey.settingsEnterKeyFunction} // make sure to define this key in your SettingsKey enum
|
||||
group={SettingsKey.hasShiftSendEnabled} // make sure to define this key in your SettingsKey enum
|
||||
items={items}
|
||||
onClick={async (selectedRadioValue: string) => {
|
||||
await window.setSettingValue(SettingsKey.settingsEnterKeyFunction, selectedRadioValue);
|
||||
forceUpdate();
|
||||
onClick={(selectedRadioValue: string | boolean) => {
|
||||
async function updateSetting() {
|
||||
await window.setSettingValue(SettingsKey.hasShiftSendEnabled, selectedRadioValue);
|
||||
forceUpdate();
|
||||
}
|
||||
updateSetting().catch(error => window.log.error('Error updating setting:', error));
|
||||
}}
|
||||
/>
|
||||
</SessionSettingsItemWrapper>
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
const settingsReadReceipt = 'read-receipt-setting';
|
||||
const settingsTypingIndicator = 'typing-indicators-setting';
|
||||
const settingsAutoUpdate = 'auto-update';
|
||||
const settingsEnterKeyFunction = 'enter-key-function-setting';
|
||||
const hasShiftSendEnabled = 'hasShiftSendEnabled';
|
||||
const settingsMenuBar = 'hide-menu-bar';
|
||||
const settingsSpellCheck = 'spell-check';
|
||||
const settingsLinkPreview = 'link-preview-setting';
|
||||
|
@ -24,7 +24,7 @@ export const SettingsKey = {
|
|||
settingsReadReceipt,
|
||||
settingsTypingIndicator,
|
||||
settingsAutoUpdate,
|
||||
settingsEnterKeyFunction,
|
||||
hasShiftSendEnabled,
|
||||
settingsMenuBar,
|
||||
settingsSpellCheck,
|
||||
settingsLinkPreview,
|
||||
|
|
|
@ -8,6 +8,7 @@ const SettingsBoolsKeyTrackedInRedux = [
|
|||
SettingsKey.someDeviceOutdatedSyncing,
|
||||
SettingsKey.settingsLinkPreview,
|
||||
SettingsKey.hasBlindedMsgRequestsEnabled,
|
||||
SettingsKey.hasShiftSendEnabled,
|
||||
] as const;
|
||||
|
||||
export type SettingsState = {
|
||||
|
@ -20,6 +21,7 @@ export function getSettingsInitialState() {
|
|||
someDeviceOutdatedSyncing: false,
|
||||
'link-preview-setting': false, // this is the value of SettingsKey.settingsLinkPreview
|
||||
hasBlindedMsgRequestsEnabled: false,
|
||||
hasShiftSendEnabled: false,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
@ -47,6 +49,8 @@ const settingsSlice = createSlice({
|
|||
SettingsKey.hasBlindedMsgRequestsEnabled,
|
||||
false
|
||||
);
|
||||
const hasShiftSendEnabled = Storage.get(SettingsKey.hasShiftSendEnabled);
|
||||
|
||||
state.settingsBools.someDeviceOutdatedSyncing = isBoolean(outdatedSync)
|
||||
? outdatedSync
|
||||
: false;
|
||||
|
@ -54,6 +58,9 @@ const settingsSlice = createSlice({
|
|||
state.settingsBools.hasBlindedMsgRequestsEnabled = isBoolean(hasBlindedMsgRequestsEnabled)
|
||||
? hasBlindedMsgRequestsEnabled
|
||||
: false;
|
||||
state.settingsBools.hasShiftSendEnabled = isBoolean(hasShiftSendEnabled)
|
||||
? hasShiftSendEnabled
|
||||
: false;
|
||||
return state;
|
||||
},
|
||||
updateSettingsBoolValue(state, action: PayloadAction<{ id: string; value: boolean }>) {
|
||||
|
|
|
@ -11,6 +11,9 @@ const getHasDeviceOutdatedSyncing = (state: StateType) =>
|
|||
const getHasBlindedMsgRequestsEnabled = (state: StateType) =>
|
||||
state.settings.settingsBools[SettingsKey.hasBlindedMsgRequestsEnabled];
|
||||
|
||||
const getHasShiftSendEnabled = (state: StateType) =>
|
||||
state.settings.settingsBools[SettingsKey.hasShiftSendEnabled];
|
||||
|
||||
export const useHasLinkPreviewEnabled = () => {
|
||||
const value = useSelector(getLinkPreviewEnabled);
|
||||
return Boolean(value);
|
||||
|
@ -25,3 +28,8 @@ export const useHasBlindedMsgRequestsEnabled = () => {
|
|||
const value = useSelector(getHasBlindedMsgRequestsEnabled);
|
||||
return Boolean(value);
|
||||
};
|
||||
|
||||
export const useHasEnterSendEnabled = () => {
|
||||
const value = useSelector(getHasShiftSendEnabled);
|
||||
return Boolean(value);
|
||||
};
|
||||
|
|
Loading…
Reference in New Issue