feat(useSetting); sync values with LS and store in api

artemmufazalov · artemmufazalov · commit 57e834535454 · 2025-11-19T18:54:13.000+03:00
diff --git a/src/services/api/metaSettings.ts b/src/services/api/metaSettings.ts
@@ -25,7 +25,7 @@ export class MetaSettingsAPI extends BaseMetaAPI {
         preventBatching,
     }: GetSingleSettingParams & {preventBatching?: boolean}) {
         if (preventBatching) {
-            return this.get<Setting>(this.getPath('/meta/user_settings'), {name, user});
+            return this.get<Setting | undefined>(this.getPath('/meta/user_settings'), {name, user});
         }
 
         return new Promise<Setting>((resolve, reject) => {
diff --git a/src/store/reducers/settings/api.ts b/src/store/reducers/settings/api.ts
@@ -6,45 +6,105 @@ import type {
     SetSingleSettingParams,
     Setting,
 } from '../../../types/api/settings';
-import type {AppDispatch} from '../../defaultStore';
+import type {AppDispatch, RootState} from '../../defaultStore';
 import {api} from '../api';
 
 import {SETTINGS_OPTIONS} from './constants';
+import {getSettingValue, setSettingValue} from './settings';
+import {
+    getSettingDefault,
+    parseSettingValue,
+    readSettingValueFromLS,
+    setSettingValueToLS,
+    shouldSyncSettingToLS,
+    stringifySettingValue,
+} from './utils';
+
+const invalidParamsError =
+    'Missing required parameters (name, user) or MetaSettings API is not available';
 
 export const settingsApi = api.injectEndpoints({
     endpoints: (builder) => ({
-        getSingleSetting: builder.query({
-            queryFn: async ({name, user}: GetSingleSettingParams, baseApi) => {
+        getSingleSetting: builder.query<Setting | undefined, Partial<GetSingleSettingParams>>({
+            queryFn: async ({name, user}) => {
                 try {
-                    if (!window.api.metaSettings) {
-                        throw new Error('MetaSettings API is not available');
+                    // In this case localStorage should be used for settings
+                    // Actual value will be loaded to store in onQueryStarted
+                    if (!name || !user || !window.api.metaSettings) {
+                        throw new Error(invalidParamsError);
                     }
+
                     const data = await window.api.metaSettings.getSingleSetting({
                         name,
                         user,
                         // Directly access options here to avoid them in cache key
                         preventBatching: SETTINGS_OPTIONS[name]?.preventBatching,
                     });
 
-                    const dispatch = baseApi.dispatch as AppDispatch;
-
-                    // Try to sync local value if there is no backend value
-                    syncLocalValueToMetaIfNoData(data, dispatch);
-
                     return {data};
                 } catch (error) {
                     return {error};
                 }
             },
+            async onQueryStarted(args, {dispatch, queryFulfilled}) {
+                const {name, user} = args;
+
+                if (!name) {
+                    return;
+                }
+
+                const shouldUseLocalSettings =
+                    !user || !window.api.metaSettings || shouldSyncSettingToLS(name);
+
+                const defaultValue = getSettingDefault(name);
+
+                // Preload value from LS or default to store
+                if (shouldUseLocalSettings) {
+                    const savedValue = readSettingValueFromLS(name);
+                    const value = savedValue ?? defaultValue;
+
+                    dispatch(setSettingValue(name, value));
+                } else {
+                    dispatch(setSettingValue(name, defaultValue));
+                }
+
+                try {
+                    const {data} = await queryFulfilled;
+
+                    // Load api value to store if present
+                    // In case local storage should be used
+                    // query will finish with an error and this code will not run
+                    const parsedValue = parseSettingValue(data?.value);
+
+                    if (isNil(data?.value)) {
+                        // Try to sync local value if there is no backend value
+                        syncLocalValueToMetaIfNoData({...data}, dispatch);
+                    } else {
+                        dispatch(setSettingValue(name, parsedValue));
+
+                        if (shouldSyncSettingToLS(name)) {
+                            setSettingValueToLS(name, data.value);
+                        }
+                    }
+                } catch {}
+            },
         }),
         setSingleSetting: builder.mutation({
-            queryFn: async (params: SetSingleSettingParams) => {
+            queryFn: async ({
+                name,
+                user,
+                value,
+            }: Partial<Omit<SetSingleSettingParams, 'value'>> & {value: unknown}) => {
                 try {
-                    if (!window.api.metaSettings) {
-                        throw new Error('MetaSettings API is not available');
+                    if (!name || !user || !window.api.metaSettings) {
+                        throw new Error(invalidParamsError);
                     }
 
-                    const data = await window.api.metaSettings.setSingleSetting(params);
+                    const data = await window.api.metaSettings.setSingleSetting({
+                        name,
+                        user,
+                        value: stringifySettingValue(value),
+                    });
 
                     if (data.status !== 'SUCCESS') {
                         throw new Error('Setting status is not SUCCESS');
@@ -55,34 +115,51 @@ export const settingsApi = api.injectEndpoints({
                     return {error};
                 }
             },
-            async onQueryStarted(args, {dispatch, queryFulfilled}) {
+            async onQueryStarted(args, {dispatch, queryFulfilled, getState}) {
                 const {name, user, value} = args;
 
-                // Optimistically update existing cache entry
-                const patchResult = dispatch(
-                    settingsApi.util.updateQueryData('getSingleSetting', {name, user}, (draft) => {
-                        return {...draft, name, user, value};
-                    }),
-                );
+                if (!name) {
+                    return;
+                }
+
+                // Extract previous value to revert to it if set is not succesfull
+                const previousSettingValue = getSettingValue(getState() as RootState, name);
+
+                // Optimistically update store
+                dispatch(setSettingValue(name, value));
+
+                // If local storage settings should be used
+                // Update LS and do not do any further code
+                if (!user || !window.api.metaSettings) {
+                    setSettingValueToLS(name, value);
+                    return;
+                }
+
                 try {
                     await queryFulfilled;
+
+                    // If mutation is successful, we can store new value in LS
+                    if (shouldSyncSettingToLS(name)) {
+                        setSettingValueToLS(name, value);
+                    }
                 } catch {
-                    patchResult.undo();
+                    // Set previous value to store in case of error
+                    dispatch(setSettingValue(name, previousSettingValue));
                 }
             },
         }),
         getSettings: builder.query({
-            queryFn: async ({name, user}: GetSettingsParams, baseApi) => {
+            queryFn: async ({name, user}: Partial<GetSettingsParams>, baseApi) => {
                 try {
-                    if (!window.api.metaSettings) {
-                        throw new Error('MetaSettings API is not available');
+                    if (!window.api.metaSettings || !name || !user) {
+                        throw new Error(invalidParamsError);
                     }
                     const data = await window.api.metaSettings.getSettings({name, user});
 
-                    const patches: Promise<void>[] = [];
+                    const patches: Promise<unknown>[] = [];
                     const dispatch = baseApi.dispatch as AppDispatch;
 
-                    // Upsert received data in getSingleSetting cache
+                    // Upsert received data in getSingleSetting cache to prevent further redundant requests
                     name.forEach((settingName) => {
                         const settingData = data[settingName] ?? {};
 
@@ -98,15 +175,18 @@ export const settingsApi = api.injectEndpoints({
                                 cacheEntryParams,
                                 newValue,
                             ),
-                        ).then(() => {
+                        );
+                        if (isNil(settingData.value)) {
                             // Try to sync local value if there is no backend value
-                            // Do it after upsert if finished to ensure proper values update order
-                            // 1. New entry added to cache with nil value
-                            // 2. Positive entry update - local storage value replace nil in cache
-                            // 3.1. Set is successful, local value in cache
-                            // 3.2. Set is not successful, cache value reverted to previous nil
                             syncLocalValueToMetaIfNoData(settingData, dispatch);
-                        });
+                        } else {
+                            const parsedValue = parseSettingValue(settingData.value);
+                            dispatch(setSettingValue(settingName, parsedValue));
+
+                            if (shouldSyncSettingToLS(settingName)) {
+                                setSettingValueToLS(settingName, settingData.value);
+                            }
+                        }
 
                         patches.push(patch);
                     });
@@ -124,7 +204,11 @@ export const settingsApi = api.injectEndpoints({
     overrideExisting: 'throw',
 });
 
-function syncLocalValueToMetaIfNoData(params: Setting, dispatch: AppDispatch) {
+function syncLocalValueToMetaIfNoData(params: Partial<Setting>, dispatch: AppDispatch) {
+    if (!params.name) {
+        return;
+    }
+
     const localValue = localStorage.getItem(params.name);
 
     if (isNil(params.value) && !isNil(localValue)) {
diff --git a/src/store/reducers/settings/constants.ts b/src/store/reducers/settings/constants.ts
@@ -73,7 +73,7 @@ export const DEFAULT_USER_SETTINGS = {
     [SETTING_KEYS.ACL_SYNTAX]: AclSyntax.YdbShort,
 } as const satisfies Record<SettingKey, unknown>;
 
-export const SETTINGS_OPTIONS: Record<string, SettingOptions> = {
+export const SETTINGS_OPTIONS: Record<string, SettingOptions | undefined> = {
     [SETTING_KEYS.THEME]: {
         preventBatching: true,
     },
diff --git a/src/store/reducers/settings/useSetting.ts b/src/store/reducers/settings/useSetting.ts
@@ -1,22 +1,10 @@
 import React from 'react';
 
-import {skipToken} from '@reduxjs/toolkit/query';
-
-import {uiFactory} from '../../../uiFactory/uiFactory';
-import {useTypedDispatch} from '../../../utils/hooks/useTypedDispatch';
 import {useTypedSelector} from '../../../utils/hooks/useTypedSelector';
 import {selectID, selectUser} from '../authentication/authentication';
 
 import {settingsApi} from './api';
-import type {SettingKey} from './constants';
-import {DEFAULT_USER_SETTINGS, SETTINGS_OPTIONS} from './constants';
-import {getSettingValue, setSettingValue} from './settings';
-import {
-    parseSettingValue,
-    readSettingValueFromLS,
-    setSettingValueToLS,
-    stringifySettingValue,
-} from './utils';
+import {getSettingValue} from './settings';
 
 type SaveSettingValue<T> = (value: T | undefined) => void;
 
@@ -25,70 +13,21 @@ export function useSetting<T>(name?: string): {
     saveValue: SaveSettingValue<T>;
     isLoading: boolean;
 } {
-    const dispatch = useTypedDispatch();
-
-    const preventSyncWithLS = Boolean(name && SETTINGS_OPTIONS[name]?.preventSyncWithLS);
-
     const settingValue = useTypedSelector((state) => getSettingValue(state, name)) as T | undefined;
 
     const authUserSID = useTypedSelector(selectUser);
     const anonymousUserId = useTypedSelector(selectID);
-
     const user = authUserSID || anonymousUserId;
-    const shouldUseMetaSettings = uiFactory.useMetaSettings && user && name;
-
-    const shouldUseOnlyExternalSettings = shouldUseMetaSettings && preventSyncWithLS;
-
-    const params = React.useMemo(() => {
-        return shouldUseMetaSettings ? {user, name} : skipToken;
-    }, [shouldUseMetaSettings, user, name]);
 
-    const {currentData: metaSetting, isLoading: isSettingLoading} =
-        settingsApi.useGetSingleSettingQuery(params);
+    const {isLoading} = settingsApi.useGetSingleSettingQuery({user, name});
 
     const [setMetaSetting] = settingsApi.useSetSingleSettingMutation();
 
-    // Add loading state to settings that are stored externally
-    const isLoading = shouldUseMetaSettings ? isSettingLoading : false;
-
-    // Load initial value
-    React.useEffect(() => {
-        let value = name ? (DEFAULT_USER_SETTINGS[name as SettingKey] as T | undefined) : undefined;
-
-        if (!shouldUseOnlyExternalSettings) {
-            const savedValue = readSettingValueFromLS<T>(name);
-            value = savedValue ?? value;
-        }
-
-        dispatch(setSettingValue(name, value));
-    }, [name, shouldUseOnlyExternalSettings, dispatch]);
-
-    // Sync value from backend with LS and store
-    React.useEffect(() => {
-        if (shouldUseMetaSettings && metaSetting?.value) {
-            if (!shouldUseOnlyExternalSettings) {
-                setSettingValueToLS(name, metaSetting.value);
-            }
-            const parsedValue = parseSettingValue<T>(metaSetting.value);
-            dispatch(setSettingValue(name, parsedValue));
-        }
-    }, [shouldUseMetaSettings, shouldUseOnlyExternalSettings, metaSetting, name, dispatch]);
-
     const saveValue = React.useCallback<SaveSettingValue<T>>(
         (value) => {
-            if (shouldUseMetaSettings) {
-                setMetaSetting({
-                    user,
-                    name: name,
-                    value: stringifySettingValue(value),
-                });
-            }
-
-            if (!shouldUseOnlyExternalSettings) {
-                setSettingValueToLS(name, value);
-            }
+            setMetaSetting({user, name: name, value: value});
         },
-        [shouldUseMetaSettings, shouldUseOnlyExternalSettings, user, name, setMetaSetting],
+        [user, name, setMetaSetting],
     );
 
     return {value: settingValue, saveValue, isLoading} as const;
diff --git a/src/store/reducers/settings/utils.ts b/src/store/reducers/settings/utils.ts
@@ -1,6 +1,9 @@
 import type {SettingValue} from '../../../types/api/settings';
 import {parseJson} from '../../../utils/utils';
 
+import type {SettingKey} from './constants';
+import {DEFAULT_USER_SETTINGS, SETTINGS_OPTIONS} from './constants';
+
 export function stringifySettingValue<T>(value?: T): string {
     return typeof value === 'string' ? value : JSON.stringify(value);
 }
@@ -34,3 +37,9 @@ export function setSettingValueToLS(name: string | undefined, value: unknown): v
         localStorage.setItem(name, preparedValue);
     } catch {}
 }
+export function getSettingDefault(name: string) {
+    return DEFAULT_USER_SETTINGS[name as SettingKey];
+}
+export function shouldSyncSettingToLS(name: string) {
+    return !SETTINGS_OPTIONS[name]?.preventSyncWithLS;
+}

Original file line number	Diff line number	Diff line change
`@@ -25,7 +25,7 @@ export class MetaSettingsAPI extends BaseMetaAPI {`
`25`	`25`	`preventBatching,`
`26`	`26`	`}: GetSingleSettingParams & {preventBatching?: boolean}) {`
`27`	`27`	`if (preventBatching) {`
`28`		`- return this.get<Setting>(this.getPath('/meta/user_settings'), {name, user});`
	`28`	`+ return this.get<Setting \| undefined>(this.getPath('/meta/user_settings'), {name, user});`
`29`	`29`	`}`
`30`	`30`
`31`	`31`	`return new Promise<Setting>((resolve, reject) => {`