- updated zustand and react libraries;

- added 'put in draft' btn;

src/store/actions.js

@@ -1,35 +1,41 @@
 import { head } from 'ramda';
 
-export const actionsAlpha = (set, get, api) => ({
+export const actionsAlpha = ({ set, get }) => ({
     setAsyncRequest:        () => {
-        const num = get.isAsyncRequest();
-        set.isAsyncRequest(num + 1);
+        const num = get('isAsyncRequest');
+        set('isAsyncRequest', num + 1);
     },
     unsetAsyncRequest:      () => {
-        const num = get.isAsyncRequest();
-        set.isAsyncRequest(num - 1 < 0 ? 0 : num - 1);
+        const num = get('isAsyncRequest');
+        set('isAsyncRequest', num - 1 < 0 ? 0 : num - 1);
     },
 })
 
-export const actionsBeta = (set, get, api) => ({
+export const actionsBeta = ({ set, get }) => ({
     setAuthData: ({ userData, token }) => {
-        set.userData(userData);
-        set.token(token);
+        set('state', (draft) => {
+            draft.userData = userData;
+            draft.token = token;
+            return draft;
+        });
     },
     doLogout: () => {
-        set.userData({});
-        set.token('');
+        set('state', (draft) => {
+            draft.userData = {};
+            draft.token = '';
+            return draft;
+        });
     },
     removeElement: (id) => {
-        const elements = get.formElements();
+        const elements = get('formElements');
         const newElements = elements.filter(o => o.id !== id);
-        set.formElements(newElements);
+        set('formElements', newElements);
     },
     moveElement: (dragIndex, hoverIndex, item) => {
-        const prevFields = get.formElements();
+        const prevFields = get('formElements');
 
         if (dragIndex === -1) {
-            const configs = get.elementItems();
+            const configs = get('elementItems');
             const itemCfg = head(configs.filter(o => o.id === item.dbId));
             const newItem = {
                 ...itemCfg,
@@ -37,11 +43,11 @@ export const actionsBeta = (set, get, api) => ({
                 dbId: item.dbId
             }
             const newElements = prevFields.toSpliced(hoverIndex, 0, newItem);
-            set.formElements(newElements);
+            set('formElements', newElements);
         } else {
             let newFields = prevFields.toSpliced(dragIndex, 1);
             const newElements = newFields.toSpliced(hoverIndex, 0, prevFields[dragIndex]);
-            set.formElements(newElements);
+            set('formElements', newElements);
         }
     }
 });

src/store/index.js

@@ -1,20 +1,24 @@
-import { mapValuesKey } from 'zustand-x';
-
 // stores
 import { mainStore } from './main';
+import {
+    useStoreValue as useStoreValueOriginal,
+    useStoreState as useStoreStateOriginal,
+    useTracked
+} from 'zustand-x';
 
-// Global store - initial data
-const dashboardStore = {
-    main:       mainStore
-};
+// migration: useStore -> useStoreValue
+// old: useStore().main.getRole() -- new: useStoreValue('getRole')
+export const useStoreValue = (key, ...args) => useStoreValueOriginal(mainStore, key, ...args);
 
-// Global hook selectors
-export const useStore = () => mapValuesKey('use', dashboardStore);
-// Global tracked hook selectors
-export const useTrackedStore = () => mapValuesKey('useTracked', dashboardStore);
-// Global getter selectors
-export const storeGet = mapValuesKey('get', dashboardStore);
-// Global actions
-export const storeSet = mapValuesKey('set', dashboardStore);
+export const useStoreState = (key, ...args) => useStoreStateOriginal(mainStore, key, ...args);
 
-export default dashboardStore;
+// migration: useTrackedStore -> useTrackedValue
+export const useTrackedValue = (key) => useTracked(mainStore, key);
+
+// old: storeGet.main.getRole() -- new: storeGet('getRole')
+export const storeGet = (key, ...args) => mainStore.get(key, ...args);
+
+// old: storeSet.main.removeElement(id) -- new: storeSet('removeElement', id)
+export const storeSet = (key, ...args) => mainStore.set(key, ...args);
+
+export default mainStore;

src/store/main.js

@@ -5,7 +5,11 @@ import initialStore from './initial';
 import selectors from './selectors';
 import { actionsAlpha, actionsBeta } from './actions';
 
-export const mainStore = createStore('main')(initialStore, zustandXOpts)
+export const mainStore = createStore(
+    initialStore,
+    {
+        ...zustandXOpts
+    })
     .extendSelectors(selectors)
     .extendActions(actionsAlpha)
     .extendActions(actionsBeta);

src/store/selectors.js

@@ -1,13 +1,13 @@
-const selectors = (state, get, api) => ({
+const selectors = ({ get }) => ({
     getToken: () => {
-        return get.token();
+        return get('token');
     },
     getRole: () => {
-        const userData = get.userData();
+        const userData = get('userData');
         return userData.role ? userData.role.roleType : '';
     },
     getPermissions: () => {
-        const userData = get.userData();
+        const userData = get('userData');
         return userData.role ? userData.role.permissions : [];
     },
 })

src/store/zustand-x-opts.js

@@ -5,7 +5,6 @@ const zustandXOpts = {
     persist: {
         enabled: true,
         partialize: (state) => ({
-            //userData: state.userData,
             token: state.token,
             chosenCompanyId: state.chosenCompanyId,
         }),