fix: enable extract and set user settings manually (#629)

Author: artemmufazalov

src/services/settings.ts

@@ -23,7 +23,7 @@ export type SettingsObject = Record<string, unknown>;
 const USE_LOCAL_STORAGE_FOR_SETTINGS_KEY = 'useLocalStorageForSettings';
 
 /** User settings keys and their default values */
-const DEFAULT_USER_SETTINGS: SettingsObject = {
+export const DEFAULT_USER_SETTINGS: SettingsObject = {
     [THEME_KEY]: 'system',
     [LANGUAGE_KEY]: undefined,
     [INVERTED_DISKS_KEY]: false,
@@ -59,20 +59,13 @@ class SettingsManager {
         }
     }
 
-    /**
-     * User settings - settings stored in LS or external store
-     */
-    getUserSettings() {
-        return this.extractSettingsFromLS();
-    }
-
     /**
      * Returns parsed settings value.
      * If value cannot be parsed, returns initially stored string.
      * If there is no value, return default value
      */
     readUserSettingsValue(key: string, defaultValue?: unknown) {
-        return this.readValueFromLS(key) ?? defaultValue ?? DEFAULT_USER_SETTINGS[key];
+        return this.readValueFromLS(key) ?? defaultValue;
     }
 
     /**
@@ -82,8 +75,11 @@ class SettingsManager {
         return this.setValueToLS(key, value);
     }
 
-    private extractSettingsFromLS = () => {
-        return Object.entries(DEFAULT_USER_SETTINGS).reduce<SettingsObject>((acc, [key, value]) => {
+    /**
+     * Extract values by provided settings object
+     */
+    extractSettingsFromLS = (settings: SettingsObject) => {
+        return Object.entries(settings).reduce<SettingsObject>((acc, [key, value]) => {
             acc[key] = this.readUserSettingsValue(key, value);
             return acc;
         }, {});

src/store/reducers/settings/settings.ts

@@ -2,7 +2,7 @@ import type {Reducer} from 'redux';
 import type {ThunkAction} from 'redux-thunk';
 
 import '../../../services/api';
-import {settingsManager} from '../../../services/settings';
+import {DEFAULT_USER_SETTINGS, SettingsObject, settingsManager} from '../../../services/settings';
 
 import type {RootState} from '..';
 import type {
@@ -15,13 +15,14 @@ import type {
 
 const CHANGE_PROBLEM_FILTER = 'settings/CHANGE_PROBLEM_FILTER';
 export const SET_SETTING_VALUE = 'settings/SET_VALUE';
+export const SET_USER_SETTINGS = 'settings/SET_USER_SETTINGS';
 
 export const ProblemFilterValues = {
     ALL: 'All',
     PROBLEMS: 'With problems',
 } as const;
 
-const userSettings = settingsManager.getUserSettings();
+const userSettings = settingsManager.extractSettingsFromLS(DEFAULT_USER_SETTINGS);
 const systemSettings = window.systemSettings || {};
 
 export const initialState = {
@@ -49,7 +50,15 @@ const settings: Reducer<SettingsState, SettingsAction> = (state = initialState,
                 userSettings: newSettings,
             };
         }
-
+        case SET_USER_SETTINGS: {
+            return {
+                ...state,
+                userSettings: {
+                    ...state.userSettings,
+                    ...action.data,
+                },
+            };
+        }
         default:
             return state;
     }
@@ -66,6 +75,10 @@ export const setSettingValue = (
     };
 };
 
+export const setUserSettings = (data: SettingsObject) => {
+    return {type: SET_USER_SETTINGS, data} as const;
+};
+
 export const getSettingValue = (state: SettingsRootStateSlice, name: string) => {
     return state.settings.userSettings[name];
 };

src/store/reducers/settings/types.ts

@@ -1,6 +1,6 @@
 import type {ValueOf} from '../../../types/common';
 import type {SettingsObject} from '../../../services/settings';
-import {changeFilter, ProblemFilterValues, SET_SETTING_VALUE} from './settings';
+import {changeFilter, setUserSettings, ProblemFilterValues, SET_SETTING_VALUE} from './settings';
 
 export type ProblemFilterValue = ValueOf<typeof ProblemFilterValues>;
 
@@ -15,7 +15,10 @@ export type SetSettingValueAction = {
     data: {name: string; value: unknown};
 };
 
-export type SettingsAction = ReturnType<typeof changeFilter> | SetSettingValueAction;
+export type SettingsAction =
+    | ReturnType<typeof changeFilter>
+    | ReturnType<typeof setUserSettings>
+    | SetSettingValueAction;
 
 export interface SettingsRootStateSlice {
     settings: SettingsState;