🐛 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,7 +138,9 @@ export const useGridstack = (
         if (!itemType || !itemId) return;
 
         // Updates the config and defines the new position and wrapper of the item
-        updateConfig(configName, (previous) => {
+        updateConfig(
+          configName,
+          (previous) => {
             const currentItem =
               itemType === 'app'
                 ? previous.apps.find((x) => x.id === itemId)
@@ -188,7 +191,37 @@ export const useGridstack = (
                 { ...(currentItem as IWidget<string, any>) },
               ],
             };
-        });
+          },
+          (prev, curr) => {
+            const isApp = itemType === 'app';
+
+            if (isApp) {
+              const currItem = curr.apps.find((x) => x.id === itemId);
+              const prevItem = prev.apps.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
+                )
+              );
+            }
+
+            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>;
 }