🐛 Fix Change Position not working with gridstack

src/components/Dashboard/Modals/ChangePosition/ChangeAppPositionModal.tsx

@@ -22,13 +22,17 @@ export const ChangeAppPositionModal = ({
       return;
     }
 
-    updateConfig(configName, (previousConfig) => ({
+    updateConfig(
+      configName,
+      (previousConfig) => ({
         ...previousConfig,
         apps: [
           ...previousConfig.apps.filter((x) => x.id !== innerProps.app.id),
           { ...innerProps.app, shape: { location: { x, y }, size: { width, height } } },
         ],
-    }));
+      }),
+      true
+    );
     context.closeModal(id);
   };
 

src/components/Dashboard/Modals/ChangePosition/ChangeWidgetPositionModal.tsx

@@ -19,7 +19,9 @@ export const ChangeWidgetPositionModal = ({
       return;
     }
 
-    updateConfig(configName, (prev) => {
+    updateConfig(
+      configName,
+      (prev) => {
         let currentWidget = prev.widgets.find((x) => x.id === innerProps.widgetId);
         currentWidget!.shape = {
           location: {
@@ -36,8 +38,9 @@ export const ChangeWidgetPositionModal = ({
           ...prev,
           widgets: [...prev.widgets.filter((x) => x.id !== innerProps.widgetId), currentWidget!],
         };
-    });
+      },
-
+      true
+    );
     context.closeModal(id);
   };
 

src/components/Dashboard/Modals/EditAppModal/EditAppModal.tsx

@@ -83,10 +83,14 @@ export const EditAppModal = ({
       return;
     }
 
-    updateConfig(configName, (previousConfig) => ({
+    updateConfig(
+      configName,
+      (previousConfig) => ({
         ...previousConfig,
         apps: [...previousConfig.apps.filter((x) => x.id !== form.values.id), form.values],
-    }));
+      }),
+      true
+    );
 
     // also close the parent modal
     context.closeAll();

src/components/Dashboard/Modals/SelectElement/Components/WidgetsTab/WidgetElementType.tsx

@@ -26,7 +26,9 @@ export const WidgetElementType = ({ id, image, disabled, widget }: WidgetElement
   };
 
   const handleAddition = async () => {
-    updateConfig(configName, (prev) => ({
+    updateConfig(
+      configName,
+      (prev) => ({
         ...prev,
         widgets: [
           ...prev.widgets.filter((w) => w.id !== widget.id),
@@ -54,7 +56,9 @@ export const WidgetElementType = ({ id, image, disabled, widget }: WidgetElement
             },
           },
         ],
-    }));
+      }),
+      true
+    );
     // TODO: safe to file system
     closeModal('selectElement');
   };

src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx

@@ -45,7 +45,9 @@ export const WidgetsEditModal = ({
   };
 
   const handleSave = () => {
-    updateConfig(configName, (prev) => {
+    updateConfig(
+      configName,
+      (prev) => {
         let currentWidget = prev.widgets.find((x) => x.id === innerProps.widgetId);
         currentWidget!.properties = moduleProperties;
 
@@ -53,7 +55,9 @@ export const WidgetsEditModal = ({
           ...prev,
           widgets: [...prev.widgets.filter((x) => x.id !== innerProps.widgetId), currentWidget!],
         };
-    });
+      },
+      true
+    );
     context.closeModal(id);
   };
 

src/components/Dashboard/Tiles/Widgets/WidgetsRemoveModal.tsx

@@ -19,10 +19,14 @@ export const WidgetsRemoveModal = ({
   if (!configName) return null;
   const updateConfig = useConfigStore((x) => x.updateConfig);
   const handleDeletion = () => {
-    updateConfig(configName, (prev) => ({
+    updateConfig(
+      configName,
+      (prev) => ({
         ...prev,
         widgets: prev.widgets.filter((w) => w.id !== innerProps.widgetId),
-    }));
+      }),
+      true
+    );
     context.closeModal(id);
   };
 

src/components/Dashboard/Wrappers/Category/useCategoryActions.tsx

@@ -29,9 +29,13 @@ export const useCategoryActions = (configName: string | undefined, category: Cat
           };
 
           // Adding category and wrapper and moving other items down
-          updateConfig(configName, (previous) => {
+          updateConfig(
+            configName,
+            (previous) => {
               const aboveWrappers = previous.wrappers.filter((x) => x.position <= abovePosition);
-            const aboveCategories = previous.categories.filter((x) => x.position <= abovePosition);
+              const aboveCategories = previous.categories.filter(
+                (x) => x.position <= abovePosition
+              );
 
               const belowWrappers = previous.wrappers.filter((x) => x.position > abovePosition);
               const belowCategories = previous.categories.filter((x) => x.position > abovePosition);
@@ -51,7 +55,9 @@ export const useCategoryActions = (configName: string | undefined, category: Cat
                   ...belowWrappers.map((x) => ({ ...x, position: x.position + 2 })),
                 ],
               };
-          });
+            },
+            true
+          );
         },
       },
     });
@@ -78,12 +84,16 @@ export const useCategoryActions = (configName: string | undefined, category: Cat
           };
 
           // Adding category and wrapper and moving other items down
-          updateConfig(configName, (previous) => {
+          updateConfig(
+            configName,
+            (previous) => {
               const aboveWrappers = previous.wrappers.filter((x) => x.position < belowPosition);
               const aboveCategories = previous.categories.filter((x) => x.position < belowPosition);
 
               const belowWrappers = previous.wrappers.filter((x) => x.position >= belowPosition);
-            const belowCategories = previous.categories.filter((x) => x.position >= belowPosition);
+              const belowCategories = previous.categories.filter(
+                (x) => x.position >= belowPosition
+              );
 
               return {
                 ...previous,
@@ -100,7 +110,9 @@ export const useCategoryActions = (configName: string | undefined, category: Cat
                   ...belowWrappers.map((x) => ({ ...x, position: x.position + 2 })),
                 ],
               };
-          });
+            },
+            true
+          );
         },
       },
     });
@@ -109,7 +121,9 @@ export const useCategoryActions = (configName: string | undefined, category: Cat
   const moveCategoryUp = () => {
     if (!configName) return;
 
-    updateConfig(configName, (previous) => {
+    updateConfig(
+      configName,
+      (previous) => {
         const currentItem = previous.categories.find((x) => x.id === category.id);
         if (!currentItem) return previous;
 
@@ -128,13 +142,17 @@ export const useCategoryActions = (configName: string | undefined, category: Cat
             { ...currentItem },
           ],
         };
-    });
+      },
+      true
+    );
   };
 
   const moveCategoryDown = () => {
     if (!configName) return;
 
-    updateConfig(configName, (previous) => {
+    updateConfig(
+      configName,
+      (previous) => {
         const currentItem = previous.categories.find((x) => x.id === category.id);
         if (!currentItem) return previous;
 
@@ -153,7 +171,9 @@ export const useCategoryActions = (configName: string | undefined, category: Cat
             { ...belowItem },
           ],
         };
-    });
+      },
+      true
+    );
   };
 
   const edit = async () => {

src/components/Dashboard/Wrappers/WrapperContent.tsx

@@ -14,6 +14,7 @@ interface WrapperContentProps {
     wrapper: RefObject<HTMLDivElement>;
     items: MutableRefObject<Record<string, RefObject<HTMLDivElement>>>;
     gridstack: MutableRefObject<GridStack | undefined>;
+    updateGridstackRef: MutableRefObject<(() => void) | undefined>;
   };
 }
 

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

@@ -54,6 +54,7 @@ export const initializeGridstack = (
     if (!firstNode) return;
     events.onAdd(firstNode);
   });
+
   grid.batchUpdate();
   grid.removeAll(false);
   items.forEach(

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

@@ -31,7 +31,7 @@ export const useGridstack = (
   areaId: string
 ): UseGristackReturnType => {
   const isEditMode = useEditModeStore((x) => x.enabled);
-  const { config, name: configName } = useConfigContext();
+  const { config, configVersion, name: configName } = useConfigContext();
   const updateConfig = useConfigStore((x) => x.updateConfig);
   // define reference for wrapper - is used to calculate the width of the wrapper
   const wrapperRef = useRef<HTMLDivElement>(null);
@@ -51,7 +51,7 @@ export const useGridstack = (
             ? x.area.properties.location === areaId
             : x.area.properties.id === areaId)
       ) ?? [],
-    [config]
+    [configVersion]
   );
   const widgets = useMemo(() => {
     if (!config) return [];
@@ -62,7 +62,7 @@ export const useGridstack = (
           ? w.area.properties.location === areaId
           : w.area.properties.id === areaId)
     );
-  }, [config]);
+  }, [configVersion]);
 
   // define items in itemRefs for easy access and reference to items
   if (Object.keys(itemRefs.current).length !== items.length + (widgets ?? []).length) {
@@ -208,7 +208,7 @@ export const useGridstack = (
         onAdd,
       }
     );
-  }, [items.length, wrapperRef.current, (widgets ?? []).length]);
+  }, [items, wrapperRef.current, widgets]);
 
   return {
     apps: items,

src/components/Settings/Customization/Layout/LayoutSelector.tsx

@@ -45,7 +45,9 @@ export const LayoutSelector = ({ defaultLayout }: LayoutSelectorProps) => {
   ) => {
     const value = event.target.checked;
     setState(value);
-    updateConfig(configName, (prev) => {
+    updateConfig(
+      configName,
+      (prev) => {
         const { layout } = prev.settings.customization;
 
         layout[key] = value;
@@ -60,7 +62,9 @@ export const LayoutSelector = ({ defaultLayout }: LayoutSelectorProps) => {
             },
           },
         };
-    });
+      },
+      true
+    );
   };
 
   return (

src/config/init.ts

@@ -4,12 +4,12 @@ import { useConfigContext } from './provider';
 import { useConfigStore } from './store';
 
 export const useInitConfig = (initialConfig: ConfigType) => {
-  const { setConfigName } = useConfigContext();
+  const { setConfigName, increaseVersion } = useConfigContext();
   const configName = initialConfig.configProperties?.name ?? 'default';
   const initConfig = useConfigStore((x) => x.initConfig);
 
   useEffect(() => {
     setConfigName(configName);
-    initConfig(configName, initialConfig);
+    initConfig(configName, initialConfig, increaseVersion);
   }, [configName]);
 };

src/config/provider.tsx

@@ -7,21 +7,26 @@ import { useConfigStore } from './store';
 export type ConfigContextType = {
   config: ConfigType | undefined;
   name: string | undefined;
+  configVersion: number | undefined;
+  increaseVersion: () => void;
   setConfigName: (name: string) => void;
 };
 
 const ConfigContext = createContext<ConfigContextType>({
   name: 'unknown',
   config: undefined,
+  configVersion: undefined,
+  increaseVersion: () => console.error('Provider not set'),
   setConfigName: () => console.error('Provider not set'),
 });
 
 export const ConfigProvider = ({ children }: { children: ReactNode }) => {
   const [configName, setConfigName] = useState<string>();
+  const [configVersion, setConfigVersion] = useState(0);
   const { configs } = useConfigStore((s) => ({ configs: s.configs }), shallow);
   const { setPrimaryColor, setSecondaryColor, setPrimaryShade } = useColorTheme();
 
-  const currentConfig = configs.find((c) => c.configProperties.name === configName);
+  const currentConfig = configs.find((c) => c.value.configProperties.name === configName)?.value;
 
   useEffect(() => {
     setPrimaryColor(currentConfig?.settings.customization.colors.primary || 'red');
@@ -34,6 +39,8 @@ export const ConfigProvider = ({ children }: { children: ReactNode }) => {
       value={{
         name: configName,
         config: currentConfig,
+        configVersion,
+        increaseVersion: () => setConfigVersion((v) => v + 1),
         setConfigName: (name: string) => setConfigName(name),
       }}
     >

src/config/store.ts

@@ -3,33 +3,46 @@ import { ConfigType } from '../types/config';
 
 export const useConfigStore = create<UseConfigStoreType>((set, get) => ({
   configs: [],
-  initConfig: (name, config) => {
+  initConfig: (name, config, increaseVersion) => {
     set((old) => ({
       ...old,
-      configs: [...old.configs.filter((x) => x.configProperties?.name !== name), config],
+      configs: [
+        ...old.configs.filter((x) => x.value.configProperties?.name !== name),
+        { increaseVersion, value: config },
+      ],
     }));
   },
-  // TODO: use callback with current config as input
+  updateConfig: async (
-  updateConfig: async (name, updateCallback: (previous: ConfigType) => ConfigType) => {
+    name,
+    updateCallback: (previous: ConfigType) => ConfigType,
+    shouldRegenerateGridstack = false
+  ) => {
     const { configs } = get();
-    const currentConfig = configs.find((x) => x.configProperties.name === name);
+    const currentConfig = configs.find((x) => x.value.configProperties.name === name);
     if (!currentConfig) return;
 
     // TODO: update config on server
-    const updatedConfig = updateCallback(currentConfig);
+    const updatedConfig = updateCallback(currentConfig.value);
-
     set((old) => ({
       ...old,
-      configs: [...old.configs.filter((x) => x.configProperties.name !== name), updatedConfig],
+      configs: [
+        ...old.configs.filter((x) => x.value.configProperties.name !== name),
+        { value: updatedConfig, increaseVersion: currentConfig.increaseVersion },
+      ],
     }));
+
+    if (shouldRegenerateGridstack) {
+      currentConfig.increaseVersion();
+    }
   },
 }));
 
 interface UseConfigStoreType {
-  configs: ConfigType[];
+  configs: { increaseVersion: () => void; value: ConfigType }[];
-  initConfig: (name: string, config: ConfigType) => void;
+  initConfig: (name: string, config: ConfigType, increaseVersion: () => void) => void;
   updateConfig: (
     name: string,
-    updateCallback: (previous: ConfigType) => ConfigType
+    updateCallback: (previous: ConfigType) => ConfigType,
+    shouldRegenerateGridstack?: boolean
   ) => Promise<void>;
 }