🐛 Fix issues with updating tiles

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

@@ -28,7 +28,7 @@ export const ChangeWidgetPositionModal = ({
     updateConfig(
       configName,
       (prev) => {
-        const currentWidget = prev.widgets.find((x) => x.type === innerProps.widgetType);
+        const currentWidget = prev.widgets.find((x) => x.id === innerProps.widgetId);
         currentWidget!.shape[shapeSize] = {
           location: {
             x,
@@ -42,10 +42,7 @@ export const ChangeWidgetPositionModal = ({
 
         return {
           ...prev,
-          widgets: [
+          widgets: [...prev.widgets.filter((x) => x.id !== innerProps.widgetId), currentWidget!],
-            ...prev.widgets.filter((x) => x.type !== innerProps.widgetType),
-            currentWidget!,
-          ],
         };
       },
       true

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

@@ -25,6 +25,7 @@ import { IWidget } from '../../../../widgets/widgets';
 import { DraggableList } from './DraggableList';
 
 export type WidgetEditModalInnerProps = {
+  widgetId: string;
   widgetType: string;
   options: IWidget<string, any>['properties'];
   widgetOptions: IWidget<string, any>['properties'];
@@ -37,7 +38,6 @@ export const WidgetsEditModal = ({
   id,
   innerProps,
 }: ContextModalProps<WidgetEditModalInnerProps>) => {
-  console.log('?');
   const { t } = useTranslation([`modules/${innerProps.widgetType}`, 'common']);
   const [moduleProperties, setModuleProperties] = useState(innerProps.options);
   const items = Object.entries(innerProps.widgetOptions ?? {}) as [
@@ -64,15 +64,12 @@ export const WidgetsEditModal = ({
     updateConfig(
       configName,
       (prev) => {
-        const currentWidget = prev.widgets.find((x) => x.type === innerProps.widgetType);
+        const currentWidget = prev.widgets.find((x) => x.id === innerProps.widgetId);
         currentWidget!.properties = moduleProperties;
 
         return {
           ...prev,
-          widgets: [
+          widgets: [...prev.widgets.filter((x) => x.id !== innerProps.widgetId), currentWidget!],
-            ...prev.widgets.filter((x) => x.type !== innerProps.widgetType),
-            currentWidget!,
-          ],
         };
       },
       true
@@ -80,8 +77,6 @@ export const WidgetsEditModal = ({
     context.closeModal(id);
   };
 
-  console.log('??');
-
   return (
     <Stack>
       {items.map(([key, _], index) => {

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

@@ -9,6 +9,7 @@ import { WidgetEditModalInnerProps } from './WidgetsEditModal';
 import { WidgetsRemoveModalInnerProps } from './WidgetsRemoveModal';
 
 export type WidgetChangePositionModalInnerProps = {
+  widgetId: string;
   widgetType: string;
   widget: IWidget<string, any>;
   wrapperColumnCount: number;
@@ -38,14 +39,9 @@ export const WidgetsMenu = ({ integration, widget }: WidgetsMenuProps) => {
       modal: 'integrationRemove',
       title: <Title order={4}>{t('common:remove')}</Title>,
       innerProps: {
+        widgetId: widget.id,
         widgetType: integration,
       },
-      styles: {
-        inner: {
-          position: 'sticky',
-          top: 30,
-        },
-      },
     });
   };
 
@@ -55,6 +51,7 @@ export const WidgetsMenu = ({ integration, widget }: WidgetsMenuProps) => {
       size: 'xl',
       title: null,
       innerProps: {
+        widgetId: widget.id,
         widgetType: integration,
         widget,
         wrapperColumnCount,
@@ -65,8 +62,9 @@ export const WidgetsMenu = ({ integration, widget }: WidgetsMenuProps) => {
   const handleEditClick = () => {
     openContextModalGeneric<WidgetEditModalInnerProps>({
       modal: 'integrationOptions',
-      title: t('descriptor.settings.title'),
+      title: <Title order={4}>{t('descriptor.settings.title')}</Title>,
       innerProps: {
+        widgetId: widget.id,
         widgetType: integration,
         options: widget.properties,
         // Cast as the right type for the correct widget

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

@@ -6,6 +6,7 @@ import { useConfigContext } from '../../../../config/provider';
 import { useConfigStore } from '../../../../config/store';
 
 export type WidgetsRemoveModalInnerProps = {
+  widgetId: string;
   widgetType: string;
 };
 
@@ -23,7 +24,7 @@ export const WidgetsRemoveModal = ({
       configName,
       (prev) => ({
         ...prev,
-        widgets: prev.widgets.filter((w) => w.type !== innerProps.widgetType),
+        widgets: prev.widgets.filter((w) => w.id !== innerProps.widgetId),
       }),
       true
     );

src/components/Dashboard/Wrappers/WrapperContent.tsx

@@ -46,7 +46,6 @@ export function WrapperContent({ apps, refs, widgets }: WrapperContentProps) {
           | IWidgetDefinition
           | undefined;
         if (!definition) return null;
-        console.log(definition);
 
         return (
           <GridstackTileWrapper

src/config/store.ts

@@ -48,6 +48,7 @@ export const useConfigStore = create<UseConfigStoreType>((set, get) => ({
     const previousConfig: ConfigType = JSON.parse(JSON.stringify(currentConfig.value));
 
     const updatedConfig = updateCallback(currentConfig.value);
+
     set((old) => ({
       ...old,
       configs: [

src/widgets/WidgetWrapper.tsx

@@ -16,7 +16,6 @@ interface WidgetWrapperProps {
 const useWidget = <T extends IWidget<string, any>>(widget: T): T => {
   const definition = Widgets[widget.type as keyof typeof Widgets];
 
-  return useMemo(() => {
   const newProps = { ...widget.properties };
 
   Object.entries(definition.options).forEach(([key, option]) => {
@@ -29,7 +28,6 @@ const useWidget = <T extends IWidget<string, any>>(widget: T): T => {
     ...widget,
     properties: newProps,
   };
-  }, [widget]);
 };
 
 export const WidgetWrapper = ({