🐛 Fix some issues with change position modal

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

@@ -44,10 +44,6 @@ export const ChangePositionModal = ({
     onSubmit(form.values.x, form.values.y, form.values.width, form.values.height);
   };
 
-  console.log(`Initial: (${form.values.width} / ${form.values.height})`);
-  console.log(widthData);
-  console.log(heightData);
-
   return (
     <form onSubmit={form.onSubmit(handleSubmit)}>
       <Grid>

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

@@ -2,12 +2,11 @@ import { SelectItem } from '@mantine/core';
 import { closeModal, ContextModalProps } from '@mantine/modals';
 import { useConfigContext } from '../../../../config/provider';
 import { useConfigStore } from '../../../../config/store';
-import { WidgetChangePositionModalInnerProps } from '../../Tiles/Widgets/WidgetsMenu';
-import { Tiles } from '../../Tiles/tilesDefinitions';
-import { ChangePositionModal } from './ChangePositionModal';
 import widgets from '../../../../widgets';
+import { WidgetChangePositionModalInnerProps } from '../../Tiles/Widgets/WidgetsMenu';
+import { ChangePositionModal } from './ChangePositionModal';
 
-export const ChangeIntegrationPositionModal = ({
+export const ChangeWidgetPositionModal = ({
   context,
   id,
   innerProps,
@@ -20,13 +19,9 @@ export const ChangeIntegrationPositionModal = ({
       return;
     }
 
-    updateConfig(configName, (prev) => ({
-      ...prev,
-      widgets: {
-        ...prev.widgets,
-        [innerProps.integration]: {
-          ...prev.widgets[innerProps.integration],
-          shape: {
+    updateConfig(configName, (prev) => {
+      let currentWidget = prev.widgets.find((x) => x.id === innerProps.widgetId);
+      currentWidget!.shape = {
         location: {
           x,
           y,
@@ -35,10 +30,14 @@ export const ChangeIntegrationPositionModal = ({
           height,
           width,
         },
-          },
-        },
-      },
-    }));
+      };
+
+      return {
+        ...prev,
+        widgets: [...prev.widgets.filter((x) => x.id !== innerProps.widgetId), currentWidget!],
+      };
+    });
+
     context.closeModal(id);
   };
 
@@ -46,8 +45,8 @@ export const ChangeIntegrationPositionModal = ({
     closeModal(id);
   };
 
-  const widthData = useWidthData(innerProps.integration);
-  const heightData = useHeightData(innerProps.integration);
+  const widthData = useWidthData(innerProps.widgetId);
+  const heightData = useHeightData(innerProps.widgetId);
 
   return (
     <ChangePositionModal

src/components/Dashboard/Modals/EditAppModal/Tabs/IntegrationTab/Components/InputElements/IntegrationSelector.tsx

@@ -55,13 +55,13 @@ export const IntegrationSelector = ({ form }: IntegrationSelectorProps) => {
 
   const getNewProperties = (value: string | null): AppIntegrationPropertyType[] => {
     if (!value) return [];
-    const integrationType = value as AppIntegrationType['type'];
+    const integrationType = value as Exclude<AppIntegrationType['type'], null>;
     if (integrationType === null) {
       return [];
     }
 
     const requiredProperties = Object.entries(integrationFieldDefinitions).filter(([k, v]) => {
-      const val = integrationFieldProperties[integrationType['type']];
+      const val = integrationFieldProperties[integrationType];
       return val.includes(k as IntegrationField);
     })!;
     return requiredProperties.map(([k, value]) => ({
@@ -97,7 +97,6 @@ export const IntegrationSelector = ({ form }: IntegrationSelectorProps) => {
       }
       onChange={(value) => {
         form.setFieldValue('integration.properties', getNewProperties(value));
-        console.log(`changed to value ${value}`);
         inputProps.onChange(value);
       }}
       {...inputProps}

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

@@ -7,7 +7,7 @@ import { WidgetEditModalInnerProps } from './WidgetsEditModal';
 import { WidgetsRemoveModalInnerProps } from './WidgetsRemoveModal';
 
 export type WidgetChangePositionModalInnerProps = {
-  integration: string;
+  widgetId: string;
   widget: IWidget<string, any>;
 };
 
@@ -37,7 +37,7 @@ export const WidgetsMenu = ({ integration, widget }: WidgetsMenuProps) => {
       size: 'xl',
       title: null,
       innerProps: {
-        integration,
+        widgetId: integration,
         widget: widget,
       },
     });

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

@@ -60,7 +60,6 @@ export const initializeGridstack = (
     ({ id }) =>
       itemRefs.current[id] && grid.makeWidget(itemRefs.current[id].current as HTMLDivElement)
   );
-  console.log('widgets', widgets, itemRefs.current);
   widgets.forEach(
     ({ id }) =>
       itemRefs.current[id] && grid.makeWidget(itemRefs.current[id].current as HTMLDivElement)

src/pages/_app.tsx

@@ -10,7 +10,7 @@ import { AppProps } from 'next/app';
 import Head from 'next/head';
 import { useState } from 'react';
 import { ChangeAppPositionModal } from '../components/Dashboard/Modals/ChangePosition/ChangeAppPositionModal';
-import { ChangeIntegrationPositionModal } from '../components/Dashboard/Modals/ChangePosition/ChangeIntegrationPositionModal';
+import { ChangeWidgetPositionModal } from '../components/Dashboard/Modals/ChangePosition/ChangeWidgetPositionModal';
 import { EditAppModal } from '../components/Dashboard/Modals/EditAppModal/EditAppModal';
 import { SelectElementModal } from '../components/Dashboard/Modals/SelectElement/SelectElementModal';
 import { WidgetsEditModal } from '../components/Dashboard/Tiles/Widgets/WidgetsEditModal';
@@ -92,7 +92,7 @@ function App(this: any, props: AppProps & { colorScheme: ColorScheme }) {
                       integrationRemove: WidgetsRemoveModal,
                       categoryEditModal: CategoryEditModal,
                       changeAppPositionModal: ChangeAppPositionModal,
-                      changeIntegrationPositionModal: ChangeIntegrationPositionModal,
+                      changeIntegrationPositionModal: ChangeWidgetPositionModal,
                     }}
                   >
                     <Component {...pageProps} />

src/types/app.ts

@@ -63,7 +63,7 @@ type ConfigAppIntegrationPropertyType = Omit<AppIntegrationPropertyType, 'isDefi
 export type IntegrationField = 'apiKey' | 'password' | 'username';
 
 export const integrationFieldProperties: {
-  [key in AppIntegrationType['type']]: IntegrationField[];
+  [key in Exclude<AppIntegrationType['type'], null>]: IntegrationField[];
 } = {
   lidarr: ['apiKey'],
   radarr: ['apiKey'],

src/widgets/dashDot/DashDotCompactStorage.tsx

@@ -58,7 +58,7 @@ const useDashDotStorage = () => {
       'dashdot/storage',
       {
         configName,
-        url: config?.widgets.dashDot?.properties.url,
+        url: config?.widgets.find((x) => x.id === 'dashdot')?.properties.url,
       },
     ],
     queryFn: () => fetchDashDotStorageLoad(configName),
@@ -66,7 +66,6 @@ const useDashDotStorage = () => {
 };
 
 async function fetchDashDotStorageLoad(configName: string | undefined) {
-  console.log(`storage request: ${configName}`);
   if (!configName) throw new Error('configName is undefined');
   return (await (
     await axios.get('/api/modules/dashdot/storage', { params: { configName } })