Add useSavedState and useLocalStorage (#77)

* add storage state

* Update useSavedState to the latest version

* Fix lint errors

---------

Co-authored-by: asimonok <[email protected]>

Author: vitPinchuk

Diff for: package-lock.json

@@ -89,5 +89,5 @@
     "typecheck": "tsc --emitDeclarationOnly false --noEmit"
   },
   "types": "dist/index.d.ts",
-  "version": "3.9.0"
+  "version": "4.0.0"
 }

Diff for: packages/components/package.json

@@ -6,3 +6,5 @@ export * from './useData';
 export * from './useDatasourceRequest';
 export * from './useDatasources';
 export * from './useFormBuilder';
+export * from './useLocalStorage';
+export * from './useSavedState';

Diff for: packages/components/src/hooks/index.ts

@@ -0,0 +1,58 @@
+import { act, renderHook } from '@testing-library/react';
+
+import { useLocalStorage } from './useLocalStorage';
+
+describe('Use Local Storage', () => {
+  const key = 'testKey';
+  const version = 1;
+
+  beforeEach(() => {
+    window.localStorage.clear();
+  });
+
+  it('Should return undefined if item does not exist', async () => {
+    const { result } = renderHook(() => useLocalStorage(key, version));
+    const data = await result.current.get();
+    expect(data).toBeUndefined();
+  });
+
+  it('Should return data if item exists with correct version', async () => {
+    const { result } = renderHook(() => useLocalStorage(key, version));
+
+    window.localStorage.setItem(key, JSON.stringify({ version, data: 'testData' }));
+
+    const data = await result.current.get();
+    expect(data).toBe('testData');
+  });
+
+  it('Should return undefined if item  does not exist correct version', async () => {
+    const { result } = renderHook(() => useLocalStorage(key, version));
+
+    window.localStorage.setItem(key, JSON.stringify({ version: 2, data: 'testData' }));
+
+    const data = await result.current.get();
+    expect(data).toBeUndefined();
+  });
+
+  it('Should update localStorage with new data', async () => {
+    const { result } = renderHook(() => useLocalStorage(key, version));
+
+    await act(async () => {
+      await result.current.update('newData');
+    });
+
+    const data = await result.current.get();
+    expect(data).toBe('newData');
+  });
+
+  it('Should update localStorage with correct version', async () => {
+    const { result } = renderHook(() => useLocalStorage(key, version));
+
+    await act(async () => {
+      await result.current.update('newData');
+    });
+
+    const storedData = JSON.parse(window.localStorage.getItem(key)!);
+    expect(storedData).toEqual({ version, data: 'newData' });
+  });
+});

Diff for: packages/components/src/hooks/useLocalStorage.test.ts

@@ -0,0 +1,46 @@
+import { useCallback, useMemo } from 'react';
+
+/**
+ * Local Storage Model
+ */
+export const useLocalStorage = (key: string, version: number) => {
+  const get = useCallback(async () => {
+    const json = window.localStorage.getItem(key);
+    if (json) {
+      const parsed = JSON.parse(json);
+
+      if (parsed?.version === version) {
+        return parsed.data;
+      }
+
+      return undefined;
+    }
+
+    return undefined;
+  }, [key, version]);
+
+  /**
+   * Update
+   */
+  const update = useCallback(
+    async <T>(data: T) => {
+      window.localStorage.setItem(
+        key,
+        JSON.stringify({
+          version,
+          data,
+        })
+      );
+      return data;
+    },
+    [key, version]
+  );
+
+  return useMemo(
+    () => ({
+      get,
+      update,
+    }),
+    [get, update]
+  );
+};

Diff for: packages/components/src/hooks/useLocalStorage.ts

@@ -0,0 +1,98 @@
+import { act, renderHook } from '@testing-library/react';
+
+import { useLocalStorage } from './useLocalStorage';
+import { useSavedState } from './useSavedState';
+
+/**
+ * Mock hook
+ */
+jest.mock('./useLocalStorage', () => ({
+  useLocalStorage: jest.fn(),
+}));
+
+describe('Use Saved State', () => {
+  it('Should get initial value from model', async () => {
+    jest.mocked(useLocalStorage).mockImplementation(() => ({
+      get: jest.fn(() => Promise.resolve(111)),
+      update: jest.fn(),
+    }));
+
+    const { result } = await act(async () => renderHook(() => useSavedState('abc', 123)));
+
+    expect(result.current[0]).toEqual(111);
+  });
+
+  it('Should merge initial value if object', async () => {
+    const getValue = jest.fn(() =>
+      Promise.resolve({
+        a: 'saved',
+      })
+    );
+    jest.mocked(useLocalStorage).mockImplementation(() => ({
+      get: getValue,
+      update: jest.fn(),
+    }));
+
+    const { result } = await act(async () =>
+      renderHook(() =>
+        useSavedState(
+          'abc',
+          {
+            a: 'initial',
+            b: 'initial',
+          },
+          0,
+          ({ a }) => ({ a })
+        )
+      )
+    );
+
+    expect(result.current[0]).toEqual({
+      a: 'saved',
+      b: 'initial',
+    });
+  });
+
+  it('Should save value in model', async () => {
+    const update = jest.fn();
+    jest.mocked(useLocalStorage).mockImplementation(() => ({
+      get: jest.fn(() => Promise.resolve(111)),
+      update,
+    }));
+
+    const { result } = await act(async () => renderHook(() => useSavedState('abc', 123)));
+
+    await act(async () => result.current[1](123));
+
+    expect(update).toHaveBeenCalledWith(123);
+  });
+
+  it('Should save value by function', async () => {
+    const update = jest.fn();
+    jest.mocked(useLocalStorage).mockImplementation(() => ({
+      get: jest.fn(() => Promise.resolve(null)),
+      update,
+    }));
+
+    const { result } = await act(async () =>
+      renderHook(() =>
+        useSavedState('abc', {
+          a: 'hello',
+          b: 'hello',
+        })
+      )
+    );
+
+    await act(async () =>
+      result.current[1]((value) => ({
+        ...value,
+        b: 'bye',
+      }))
+    );
+
+    expect(update).toHaveBeenCalledWith({
+      a: 'hello',
+      b: 'bye',
+    });
+  });
+});

Diff for: packages/components/src/hooks/useSavedState.test.ts

@@ -0,0 +1,77 @@
+import { merge } from 'lodash';
+import { Dispatch, useCallback, useEffect, useRef, useState } from 'react';
+
+import { RecursivePartial } from '../types';
+import { useLocalStorage } from './useLocalStorage';
+
+/**
+ * Get State For Save
+ */
+type GetStateForSave<TValue> = (value: TValue) => TValue extends object ? RecursivePartial<TValue> : TValue;
+
+/**
+ * Set Value Action
+ */
+type SetValueAction<TValue> = TValue | ((value: TValue) => TValue);
+
+/**
+ * Use Saved State
+ */
+export const useSavedState = <TValue extends object | string | number | []>(
+  key: string,
+  initialValue: TValue,
+  version = 2,
+  getStateForSave: GetStateForSave<TValue> = (value) => value as never
+): [TValue, Dispatch<SetValueAction<TValue>>, boolean] => {
+  /**
+   * Value
+   */
+  const [value, setValue] = useState(initialValue);
+  const [loaded, setLoaded] = useState(false);
+
+  /**
+   * Get state for save
+   */
+  const getStateForSaveRef = useRef<GetStateForSave<TValue>>(getStateForSave);
+
+  /**
+   * Local Storage Model
+   */
+  const { get: getValue, update: saveValue } = useLocalStorage(key, version);
+
+  /**
+   * Load Initial Value
+   */
+  useEffect(() => {
+    const getSavedValue = async () => {
+      const savedValue = await getValue();
+
+      if (savedValue) {
+        if (typeof savedValue === 'object' && !Array.isArray(savedValue)) {
+          setValue((value) => merge({ ...(value as object) }, savedValue));
+        } else {
+          setValue(savedValue);
+        }
+      }
+      setLoaded(true);
+    };
+
+    getSavedValue();
+  }, [getValue]);
+
+  /**
+   * Update Value
+   */
+  const update = useCallback(
+    (updated: SetValueAction<TValue>) => {
+      setValue((value) => {
+        const newValue = typeof updated === 'function' ? updated(value) : updated;
+        saveValue(getStateForSaveRef.current(newValue));
+        return newValue;
+      });
+    },
+    [saveValue]
+  );
+
+  return [value, update, loaded];
+};

Diff for: packages/components/src/hooks/useSavedState.ts

@@ -1,2 +1,3 @@
 export * from './editors';
 export * from './form-builder';
+export * from './storage';

Diff for: packages/components/src/types/index.ts

@@ -0,0 +1,10 @@
+/**
+ * Recursive Partial
+ */
+export type RecursivePartial<T> = {
+  [P in keyof T]?: T[P] extends Array<infer U>
+    ? Array<RecursivePartial<U>>
+    : T[P] extends object | undefined
+      ? RecursivePartial<T[P]>
+      : T[P];
+};