🐛 Fix moving between wrappers not working

src/components/Dashboard/Wrappers/gridstack/use-gridstack.ts

@@ -12,6 +12,7 @@ import { useConfigContext } from '../../../../config/provider';
 import { useConfigStore } from '../../../../config/store';
 import { useResize } from '../../../../hooks/use-resize';
 import { AppType } from '../../../../types/app';
+import { AreaType } from '../../../../types/area';
 import { IWidget } from '../../../../widgets/widgets';
 import { useEditModeStore } from '../../Views/useEditModeStore';
 import { initializeGridstack } from './init-gridstack';
@@ -51,7 +52,7 @@ export const useGridstack = (
             ? x.area.properties.location === areaId
             : x.area.properties.id === areaId)
       ) ?? [],
-    [configVersion]
+    [configVersion, config?.apps.length]
   );
   const widgets = useMemo(() => {
     if (!config) return [];
@@ -62,7 +63,7 @@ export const useGridstack = (
           ? w.area.properties.location === areaId
           : w.area.properties.id === areaId)
     );
-  }, [configVersion]);
+  }, [configVersion, config?.widgets.length]);
 
   // define items in itemRefs for easy access and reference to items
   if (Object.keys(itemRefs.current).length !== items.length + (widgets ?? []).length) {
@@ -137,58 +138,90 @@ export const useGridstack = (
         if (!itemType || !itemId) return;
 
         // Updates the config and defines the new position and wrapper of the item
-        updateConfig(configName, (previous) => {
+        updateConfig(
-          const currentItem =
+          configName,
-            itemType === 'app'
+          (previous) => {
-              ? previous.apps.find((x) => x.id === itemId)
+            const currentItem =
-              : previous.widgets.find((x) => x.id === itemId);
+              itemType === 'app'
-          if (!currentItem) return previous;
+                ? previous.apps.find((x) => x.id === itemId)
+                : previous.widgets.find((x) => x.id === itemId);
+            if (!currentItem) return previous;
 
-          if (areaType === 'sidebar') {
+            if (areaType === 'sidebar') {
-            currentItem.area = {
+              currentItem.area = {
-              type: areaType,
+                type: areaType,
-              properties: {
+                properties: {
-                location: areaId as 'right' | 'left',
+                  location: areaId as 'right' | 'left',
+                },
+              };
+            } else {
+              currentItem.area = {
+                type: areaType,
+                properties: {
+                  id: areaId,
+                },
+              };
+            }
+
+            currentItem.shape = {
+              location: {
+                x: addedNode.x ?? currentItem.shape.location.x,
+                y: addedNode.y ?? currentItem.shape.location.y,
+              },
+              size: {
+                width: addedNode.w ?? currentItem.shape.size.width,
+                height: addedNode.h ?? currentItem.shape.size.height,
               },
             };
-          } else {
-            currentItem.area = {
-              type: areaType,
-              properties: {
-                id: areaId,
-              },
-            };
-          }
 
-          currentItem.shape = {
+            if (itemType === 'app') {
-            location: {
+              return {
-              x: addedNode.x ?? currentItem.shape.location.x,
+                ...previous,
-              y: addedNode.y ?? currentItem.shape.location.y,
+                apps: [
-            },
+                  ...previous.apps.filter((x) => x.id !== itemId),
-            size: {
+                  { ...(currentItem as AppType) },
-              width: addedNode.w ?? currentItem.shape.size.width,
+                ],
-              height: addedNode.h ?? currentItem.shape.size.height,
+              };
-            },
+            }
-          };
 
-          if (itemType === 'app') {
             return {
               ...previous,
-              apps: [
+              widgets: [
-                ...previous.apps.filter((x) => x.id !== itemId),
+                ...previous.widgets.filter((x) => x.id !== itemId),
-                { ...(currentItem as AppType) },
+                { ...(currentItem as IWidget<string, any>) },
               ],
             };
-          }
+          },
+          (prev, curr) => {
+            const isApp = itemType === 'app';
 
-          return {
+            if (isApp) {
-            ...previous,
+              const currItem = curr.apps.find((x) => x.id === itemId);
-            widgets: [
+              const prevItem = prev.apps.find((x) => x.id === itemId);
-              ...previous.widgets.filter((x) => x.id !== itemId),
+              if (!currItem || !prevItem) return false;
-              { ...(currentItem as IWidget<string, any>) },
+
-            ],
+              return (
-          };
+                currItem.area.type !== prevItem.area.type ||
-        });
+                Object.entries(currItem.area.properties).some(
+                  ([key, value]) =>
+                    prevItem.area.properties[key as keyof AreaType['properties']] !== value
+                )
+              );
+            }
+
+            const currItem = curr.widgets.find((x) => x.id === itemId);
+            const prevItem = prev.widgets.find((x) => x.id === itemId);
+            if (!currItem || !prevItem) return false;
+
+            return (
+              currItem.area.type !== prevItem.area.type ||
+              Object.entries(currItem.area.properties).some(
+                ([key, value]) =>
+                  prevItem.area.properties[key as keyof AreaType['properties']] !== value
+              )
+            );
+          }
+        );
       }
     : () => {};
 

src/config/store.ts

@@ -20,6 +20,8 @@ export const useConfigStore = create<UseConfigStoreType>((set, get) => ({
     const { configs } = get();
     const currentConfig = configs.find((x) => x.value.configProperties.name === name);
     if (!currentConfig) return;
+    // copies the value of currentConfig and creates a non reference object named previousConfig
+    const previousConfig: ConfigType = JSON.parse(JSON.stringify(currentConfig.value));
 
     // TODO: update config on server
     const updatedConfig = updateCallback(currentConfig.value);
@@ -31,7 +33,11 @@ export const useConfigStore = create<UseConfigStoreType>((set, get) => ({
       ],
     }));
 
-    if (shouldRegenerateGridstack) {
+    if (
+      (typeof shouldRegenerateGridstack === 'boolean' && shouldRegenerateGridstack) ||
+      (typeof shouldRegenerateGridstack === 'function' &&
+        shouldRegenerateGridstack(previousConfig, updatedConfig))
+    ) {
       currentConfig.increaseVersion();
     }
   },
@@ -43,6 +49,8 @@ interface UseConfigStoreType {
   updateConfig: (
     name: string,
     updateCallback: (previous: ConfigType) => ConfigType,
-    shouldRegenerateGridstack?: boolean
+    shouldRegenerateGridstace?:
+      | boolean
+      | ((previousConfig: ConfigType, currentConfig: ConfigType) => boolean)
   ) => Promise<void>;
 }