OH2-416 | Fix lock field error for dashoard settings

src/libraries/reduxUtils/createDebounceAsyncThunk.ts

@@ -0,0 +1,76 @@
+import {
+  AsyncThunk,
+  AsyncThunkPayloadCreator,
+  createAsyncThunk,
+} from "@reduxjs/toolkit";
+
+type DebounceSettings = {
+  /**
+   * The maximum time `payloadCreator` is allowed to be delayed before
+   * it's invoked.
+   * @defaultValue `0`
+   */
+  maxWait?: number;
+  /**
+   * Specify invoking on the leading edge of the timeout.
+   * @defaultValue `false`
+   */
+  leading?: boolean;
+};
+
+/**
+ * A debounced analogue of the `createAsyncThunk` from `@reduxjs/toolkit`
+ * @param typePrefix - a string action type value
+ * @param payloadCreator - a callback function that should return a promise containing the result
+ *   of some asynchronous logic
+ * @param wait - the number of milliseconds to delay.
+ * @param options - the options object
+ */
+const createDebouncedAsyncThunk = <Returned, ThunkArg = void>(
+  typePrefix: string,
+  payloadCreator: AsyncThunkPayloadCreator<Returned, ThunkArg>,
+  wait: number = 300,
+  options?: DebounceSettings
+  // eslint-disable-next-line @typescript-eslint/ban-types
+): AsyncThunk<Returned, ThunkArg, {}> => {
+  const { maxWait = 500, leading = false } = options ?? {};
+  let timer = 0;
+  let maxTimer = 0;
+  let resolve: ((value: boolean) => void) | undefined;
+  const invoke = (): void => {
+    window.clearTimeout(maxTimer);
+    maxTimer = 0;
+    if (resolve) {
+      resolve(true);
+      resolve = undefined;
+    }
+  };
+  const cancel = (): void => {
+    if (resolve) {
+      resolve(false);
+      resolve = undefined;
+    }
+  };
+  return createAsyncThunk<Returned, ThunkArg>(
+    typePrefix,
+    payloadCreator as never,
+    {
+      condition() {
+        const immediate = leading && !timer;
+        window.clearTimeout(timer);
+        timer = window.setTimeout(() => {
+          invoke();
+          timer = 0;
+        }, wait);
+        if (immediate) return true;
+        cancel();
+        if (maxWait && !maxTimer) maxTimer = window.setTimeout(invoke, maxWait);
+        return new Promise<boolean>((res) => {
+          resolve = res;
+        });
+      },
+    }
+  );
+};
+
+export default createDebouncedAsyncThunk;

src/state/layouts/slice.ts

@@ -49,7 +49,7 @@ export const layoutSlice = createSlice({
 
         state.getLayouts.status = "SUCCESS";
 
-        savedConfig = payload.configValue;
+        savedConfig = payload?.configValue;
         if (savedConfig && atob(savedConfig) !== null) {
           let decodedConfig = decodeLayoutConfig(savedConfig);
           if (decodedConfig) {

src/state/layouts/thunk.ts

@@ -1,4 +1,5 @@
 import { createAsyncThunk } from "@reduxjs/toolkit";
+import createDebouncedAsyncThunk from "libraries/reduxUtils/createDebounceAsyncThunk";
 import { decodeLayoutConfig } from "../../components/accessories/dashboard/layouts/consts";
 import { UserSettingDTO, UserSettingsApi } from "../../generated";
 import { customConfiguration } from "../../libraries/apiUtils/configuration";
@@ -14,7 +15,7 @@ export const getLayouts = createAsyncThunk(
       .catch((error) => thunkApi.rejectWithValue(error.response))
 );
 
-export const saveLayouts = createAsyncThunk(
+export const saveLayouts = createDebouncedAsyncThunk(
   "layouts/saveLayouts",
   async (setting: UserSettingDTO, thunkApi) =>
     (setting.id > 0