fix: Refactor settings to use Redux

Refactor setting to use boolean which is stored in redux

ts/components/basic/SessionRadio.tsx

@@ -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}

ts/components/basic/SessionRadioGroup.tsx

@@ -5,10 +5,10 @@ import styled, { CSSProperties } from 'styled-components';
 import { SessionRadio } from './SessionRadio';
 
 interface Props {
-  initialItem: string;
+  initialItem: string | boolean;
-  items: Array<{ value: string; label: string }>;
+  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);
             }}

ts/components/conversation/composition/CompositionBox.tsx

@@ -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();

ts/components/settings/SessionNotificationGroupSettings.tsx

@@ -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();
             }}

ts/components/settings/section/CategoryConversations.tsx

@@ -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) => {
+        onClick={(selectedRadioValue: string | boolean) => {
-          await window.setSettingValue(SettingsKey.settingsEnterKeyFunction, selectedRadioValue);
+          async function updateSetting() {
+            await window.setSettingValue(SettingsKey.hasShiftSendEnabled, selectedRadioValue);
             forceUpdate();
+          }
+          updateSetting().catch(error => window.log.error('Error updating setting:', error));
         }}
       />
     </SessionSettingsItemWrapper>

ts/data/settings-key.ts

@@ -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,

ts/state/ducks/settings.tsx

@@ -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 }>) {

ts/state/selectors/settings.ts

@@ -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);
+};