🐛 Fix Change Position not working with gridstack

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 (name, updateCallback: (previous: ConfigType) => ConfigType) => {
+  updateConfig: async (
+    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[];
-  initConfig: (name: string, config: ConfigType) => void;
+  configs: { increaseVersion: () => void; value: ConfigType }[];
+  initConfig: (name: string, config: ConfigType, increaseVersion: () => void) => void;
   updateConfig: (
     name: string,
-    updateCallback: (previous: ConfigType) => ConfigType
+    updateCallback: (previous: ConfigType) => ConfigType,
+    shouldRegenerateGridstack?: boolean
   ) => Promise<void>;
 }