fix: sync local value to meta in api

Author: artemmufazalov

src/store/reducers/settings/api.ts

@@ -1,19 +1,20 @@
-import type {Action, ThunkAction} from '@reduxjs/toolkit';
+import {isNil} from 'lodash';
 
 import type {
     GetSettingsParams,
     GetSingleSettingParams,
     SetSingleSettingParams,
+    Setting,
 } from '../../../types/api/settings';
-import type {RootState} from '../../defaultStore';
+import type {AppDispatch} from '../../defaultStore';
 import {api} from '../api';
 
 import {SETTINGS_OPTIONS} from './constants';
 
 export const settingsApi = api.injectEndpoints({
     endpoints: (builder) => ({
         getSingleSetting: builder.query({
-            queryFn: async ({name, user}: GetSingleSettingParams) => {
+            queryFn: async ({name, user}: GetSingleSettingParams, baseApi) => {
                 try {
                     if (!window.api.metaSettings) {
                         throw new Error('MetaSettings API is not available');
@@ -24,12 +25,17 @@ export const settingsApi = api.injectEndpoints({
                         // 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};
                 }
             },
-            providesTags: (_, __, args) => [{type: 'UserData', id: `Setting_${args.name}`}],
         }),
         setSingleSetting: builder.mutation({
             queryFn: async (params: SetSingleSettingParams) => {
@@ -66,14 +72,15 @@ export const settingsApi = api.injectEndpoints({
             },
         }),
         getSettings: builder.query({
-            queryFn: async ({name, user}: GetSettingsParams, {dispatch}) => {
+            queryFn: async ({name, user}: GetSettingsParams, baseApi) => {
                 try {
                     if (!window.api.metaSettings) {
                         throw new Error('MetaSettings API is not available');
                     }
                     const data = await window.api.metaSettings.getSettings({name, user});
 
-                    const patches: ThunkAction<unknown, RootState, unknown, Action>[] = [];
+                    const patches: Promise<void>[] = [];
+                    const dispatch = baseApi.dispatch as AppDispatch;
 
                     // Upsert received data in getSingleSetting cache
                     name.forEach((settingName) => {
@@ -91,11 +98,20 @@ export const settingsApi = api.injectEndpoints({
                                 cacheEntryParams,
                                 newValue,
                             ),
-                        );
+                        ).then(() => {
+                            // 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);
+                        });
 
                         patches.push(patch);
                     });
 
+                    // Wait for all patches for proper loading state
                     await Promise.all(patches);
 
                     return {data};
@@ -107,3 +123,17 @@ export const settingsApi = api.injectEndpoints({
     }),
     overrideExisting: 'throw',
 });
+
+function syncLocalValueToMetaIfNoData(params: Setting, dispatch: AppDispatch) {
+    const localValue = localStorage.getItem(params.name);
+
+    if (isNil(params.value) && !isNil(localValue)) {
+        dispatch(
+            settingsApi.endpoints.setSingleSetting.initiate({
+                name: params.name,
+                user: params.user,
+                value: localValue,
+            }),
+        );
+    }
+}

src/store/reducers/settings/useSetting.ts

@@ -14,7 +14,6 @@ import type {SettingKey} from './constants';
 import {DEFAULT_USER_SETTINGS, SETTINGS_OPTIONS} from './constants';
 import {getSettingValue, setSettingValue} from './settings';
 import {
-    deleteValueFromLS,
     parseSettingValue,
     readSettingValueFromLS,
     setSettingValueToLS,
@@ -81,34 +80,6 @@ export function useSetting<T>(
         }
     }, [shouldUseMetaSettings, shouldUseOnlyExternalSettings, metaSetting, name, dispatch]);
 
-    // Load local value to backend
-    React.useEffect(() => {
-        const savedValue = readSettingValueFromLS<T>(name);
-
-        const isMetaSettingEmpty = !isSettingLoading && !metaSetting?.value;
-
-        if (shouldUseMetaSettings && isMetaSettingEmpty && savedValue) {
-            setMetaSetting({name, user, value: stringifySettingValue(savedValue)})
-                .unwrap()
-                .then(() => {
-                    if (shouldUseOnlyExternalSettings) {
-                        deleteValueFromLS(name);
-                    }
-                })
-                .catch((error) => {
-                    console.error('Failed to set setting via meta API:', error);
-                });
-        }
-    }, [
-        shouldUseMetaSettings,
-        shouldUseOnlyExternalSettings,
-        metaSetting,
-        isSettingLoading,
-        name,
-        user,
-        setMetaSetting,
-    ]);
-
     const debouncedSetMetaSetting = React.useMemo(
         () =>
             debounce((params: SetSingleSettingParams) => {

src/store/reducers/settings/utils.ts

@@ -4,14 +4,14 @@ import {parseJson} from '../../../utils/utils';
 export function stringifySettingValue<T>(value?: T): string {
     return typeof value === 'string' ? value : JSON.stringify(value);
 }
-export function parseSettingValue<T>(value: SettingValue) {
+export function parseSettingValue<T>(value?: SettingValue) {
     try {
         return (typeof value === 'string' ? parseJson(value) : value) as T;
     } catch {
         return undefined;
     }
 }
-export function readSettingValueFromLS<T>(name: string | undefined): T | undefined {
+export function readSettingValueFromLS<T = unknown>(name: string | undefined): T | undefined {
     if (!name) {
         return undefined;
     }
@@ -34,10 +34,3 @@ export function setSettingValueToLS(name: string | undefined, value: unknown): v
         localStorage.setItem(name, preparedValue);
     } catch {}
 }
-export function deleteValueFromLS(name: string | undefined) {
-    if (!name) {
-        return;
-    }
-
-    localStorage.removeItem(name);
-}

src/types/api/settings.ts

@@ -6,7 +6,7 @@ export type GetSettingResponse = Record<string, Setting>;
 export interface Setting {
     user: string;
     name: string;
-    value?: string | Record<string, string>;
+    value?: SettingValue;
 }
 export type SettingValue = string | Record<string, string>;
 export interface GetSingleSettingParams {