test store sync

Author: artemmufazalov

src/store/reducers/settings/api.ts

@@ -6,11 +6,12 @@ import type {
     SetSingleSettingParams,
     Setting,
 } from '../../../types/api/settings';
-import type {AppDispatch} from '../../defaultStore';
+import type {AppDispatch, RootState} from '../../defaultStore';
 import {api} from '../api';
 
 import type {SettingKey} from './constants';
 import {DEFAULT_USER_SETTINGS, SETTINGS_OPTIONS} from './constants';
+import {getSettingValue, setSettingValue} from './settings';
 import {parseSettingValue, readSettingValueFromLS, setSettingValueToLS} from './utils';
 
 export const settingsApi = api.injectEndpoints({
@@ -51,7 +52,8 @@ export const settingsApi = api.injectEndpoints({
                         if (SETTINGS_OPTIONS[name]?.preventSyncWithLS) {
                             const savedValue = readSettingValueFromLS(name);
                             const value = savedValue ?? DEFAULT_USER_SETTINGS[name as SettingKey];
-                            dispatch(settingsApi.util.upsertQueryData('setting', {name}, value));
+                            // dispatch(settingsApi.util.upsertQueryData('setting', {name}, value));
+                            dispatch(setSettingValue(name, value));
                         }
 
                         if (!user) {
@@ -74,7 +76,8 @@ export const settingsApi = api.injectEndpoints({
                         setSettingValueToLS(name, data.value);
 
                         const parsedValue = parseSettingValue(data.value);
-                        dispatch(settingsApi.util.upsertQueryData('setting', {name}, parsedValue));
+                        dispatch(setSettingValue(name, parsedValue));
+                        // dispatch(settingsApi.util.upsertQueryData('setting', {name}, parsedValue));
                     }
 
                     return {data: data};
@@ -109,21 +112,31 @@ export const settingsApi = api.injectEndpoints({
                     return {error};
                 }
             },
-            async onQueryStarted(args, {dispatch, queryFulfilled}) {
+            async onQueryStarted(args, {dispatch, queryFulfilled, getState}) {
                 const {name, value} = args;
 
+                if (!name) {
+                    return;
+                }
+
+                const prev = getSettingValue(getState() as RootState, name);
+                // console.log({prev, state: getState(), name});
+
+                dispatch(setSettingValue(name, value));
+
                 // Optimistically update existing cache entry
-                const patchResult = dispatch(
-                    settingsApi.util.updateQueryData('setting', {name}, () => {
-                        return value;
-                    }),
-                );
+                // const patchResult = dispatch(
+                //     settingsApi.util.updateQueryData('setting', {name}, () => {
+                //         return value;
+                //     }),
+                // );
 
                 try {
                     await queryFulfilled;
                     setSettingValueToLS(name, value);
                 } catch {
-                    patchResult.undo();
+                    // patchResult.undo();
+                    dispatch(setSettingValue(name, prev));
                 }
             },
         }),
@@ -170,13 +183,15 @@ export const settingsApi = api.injectEndpoints({
                                 setSettingValueToLS(settingName, data.value);
 
                                 const parsedValue = parseSettingValue(settingData.value);
-                                dispatch(
-                                    settingsApi.util.upsertQueryData(
-                                        'setting',
-                                        {name: settingName},
-                                        parsedValue,
-                                    ),
-                                );
+                                dispatch(setSettingValue(settingName, parsedValue));
+
+                                // dispatch(
+                                //     settingsApi.util.upsertQueryData(
+                                //         'setting',
+                                //         {name: settingName},
+                                //         parsedValue,
+                                //     ),
+                                // );
                             }
                         });
 

src/store/reducers/settings/settings.ts

@@ -1,12 +1,14 @@
 import type {Store} from '@reduxjs/toolkit';
-import {createSlice} from '@reduxjs/toolkit';
+import {createSelector, createSlice} from '@reduxjs/toolkit';
+import {isNil} from 'lodash';
 
-// import {settingsManager} from '../../../services/settings';
 import {parseJson} from '../../../utils/utils';
-import type {AppDispatch} from '../../defaultStore';
+import type {AppDispatch, RootState} from '../../defaultStore';
 
-import {DEFAULT_USER_SETTINGS} from './constants';
+import type {SettingKey} from './constants';
+import {DEFAULT_USER_SETTINGS, SETTINGS_OPTIONS} from './constants';
 import type {SettingsState} from './types';
+import {readSettingValueFromLS} from './utils';
 
 export const initialState: SettingsState = {
     userSettings: {},
@@ -21,18 +23,36 @@ const settingsSlice = createSlice({
             state.userSettings[action.payload.name] = action.payload.value;
         }),
     }),
-    selectors: {
-        getSettingValue: (state, name?: string) => {
-            if (!name) {
-                return undefined;
-            }
-
-            return state.userSettings[name];
-        },
-    },
 });
 
-export const {getSettingValue} = settingsSlice.selectors;
+export const getSettingValue = createSelector(
+    (state: RootState) => state.settings.userSettings,
+    (_state: RootState, name?: string) => name,
+    (userSettings, name) => {
+        if (!name) {
+            return undefined;
+        }
+
+        const storeValue = userSettings[name];
+
+        if (!isNil(storeValue)) {
+            return storeValue;
+        }
+
+        const defaultValue = DEFAULT_USER_SETTINGS[name as SettingKey] as unknown;
+
+        // Do not load LS value from always sync values.
+        // In case there is no settings service
+        // Such setting will be loaded from LS with getSingleSetting
+        if (SETTINGS_OPTIONS[name]?.preventSyncWithLS) {
+            return defaultValue;
+        }
+
+        const savedValue = readSettingValueFromLS(name);
+
+        return savedValue;
+    },
+);
 
 export const setSettingValue = (name: string | undefined, value: unknown) => {
     return (dispatch: AppDispatch) => {

src/store/reducers/settings/useSetting.ts

@@ -9,6 +9,7 @@ import {selectID, selectUser} from '../authentication/authentication';
 
 import {settingsApi} from './api';
 import {SETTINGS_OPTIONS} from './constants';
+import {getSettingValue} from './settings';
 
 type SaveSettingValue<T> = (value: T | undefined) => void;
 
@@ -21,7 +22,9 @@ export function useSetting<T>(
     name?: string,
     {debounceTime = 0}: UseSettingOptions = {},
 ): {value: T | undefined; saveValue: SaveSettingValue<T>; isLoading: boolean} {
-    const {data: settingValue} = settingsApi.useSettingQuery({name});
+    // const {data: settingValue} = settingsApi.useSettingQuery({name});
+
+    const settingValue = useTypedSelector((state) => getSettingValue(state, name) as T | undefined);
 
     const preventSyncWithLS = Boolean(name && SETTINGS_OPTIONS[name]?.preventSyncWithLS);
 

src/uiFactory/uiFactory.ts

@@ -21,7 +21,7 @@ const uiFactoryBase: UIFactory = {
     hasAccess: true,
     useDatabaseId: false,
     // useMetaSettings: true,
-    // useMetaSettings: false,
+    useMetaSettings: false,
 };
 
 export function configureUIFactory<H extends string, T extends string = string>(