From 8c59ab0846ae8e60d518b13a58f9de0665b7f875 Mon Sep 17 00:00:00 2001 From: Meier Lukas Date: Thu, 30 Mar 2023 22:54:08 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Fix=20issues=20with=20updating?= =?UTF-8?q?=20tiles?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ChangeWidgetPositionModal.tsx | 7 ++---- .../Tiles/Widgets/WidgetsEditModal.tsx | 11 +++------- .../Dashboard/Tiles/Widgets/WidgetsMenu.tsx | 12 +++++----- .../Tiles/Widgets/WidgetsRemoveModal.tsx | 3 ++- .../Dashboard/Wrappers/WrapperContent.tsx | 1 - src/config/store.ts | 1 + src/widgets/WidgetWrapper.tsx | 22 +++++++++---------- 7 files changed, 23 insertions(+), 34 deletions(-) diff --git a/src/components/Dashboard/Modals/ChangePosition/ChangeWidgetPositionModal.tsx b/src/components/Dashboard/Modals/ChangePosition/ChangeWidgetPositionModal.tsx index 439460cfa..b6a9e3677 100644 --- a/src/components/Dashboard/Modals/ChangePosition/ChangeWidgetPositionModal.tsx +++ b/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: [ - ...prev.widgets.filter((x) => x.type !== innerProps.widgetType), - currentWidget!, - ], + widgets: [...prev.widgets.filter((x) => x.id !== innerProps.widgetId), currentWidget!], }; }, true diff --git a/src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx b/src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx index f92409919..e89d32176 100644 --- a/src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx +++ b/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['properties']; widgetOptions: IWidget['properties']; @@ -37,7 +38,6 @@ export const WidgetsEditModal = ({ id, innerProps, }: ContextModalProps) => { - 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: [ - ...prev.widgets.filter((x) => x.type !== innerProps.widgetType), - currentWidget!, - ], + widgets: [...prev.widgets.filter((x) => x.id !== innerProps.widgetId), currentWidget!], }; }, true @@ -80,8 +77,6 @@ export const WidgetsEditModal = ({ context.closeModal(id); }; - console.log('??'); - return ( {items.map(([key, _], index) => { diff --git a/src/components/Dashboard/Tiles/Widgets/WidgetsMenu.tsx b/src/components/Dashboard/Tiles/Widgets/WidgetsMenu.tsx index 327ca2133..491ae346f 100644 --- a/src/components/Dashboard/Tiles/Widgets/WidgetsMenu.tsx +++ b/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; wrapperColumnCount: number; @@ -38,14 +39,9 @@ export const WidgetsMenu = ({ integration, widget }: WidgetsMenuProps) => { modal: 'integrationRemove', title: {t('common:remove')}, 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({ modal: 'integrationOptions', - title: t('descriptor.settings.title'), + title: {t('descriptor.settings.title')}, innerProps: { + widgetId: widget.id, widgetType: integration, options: widget.properties, // Cast as the right type for the correct widget diff --git a/src/components/Dashboard/Tiles/Widgets/WidgetsRemoveModal.tsx b/src/components/Dashboard/Tiles/Widgets/WidgetsRemoveModal.tsx index 336bb1034..e50229c0b 100644 --- a/src/components/Dashboard/Tiles/Widgets/WidgetsRemoveModal.tsx +++ b/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 ); diff --git a/src/components/Dashboard/Wrappers/WrapperContent.tsx b/src/components/Dashboard/Wrappers/WrapperContent.tsx index 6eff1f62c..12927e588 100644 --- a/src/components/Dashboard/Wrappers/WrapperContent.tsx +++ b/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 ( ((set, get) => ({ const previousConfig: ConfigType = JSON.parse(JSON.stringify(currentConfig.value)); const updatedConfig = updateCallback(currentConfig.value); + set((old) => ({ ...old, configs: [ diff --git a/src/widgets/WidgetWrapper.tsx b/src/widgets/WidgetWrapper.tsx index 9d50b06e1..7b7daa3be 100644 --- a/src/widgets/WidgetWrapper.tsx +++ b/src/widgets/WidgetWrapper.tsx @@ -16,20 +16,18 @@ interface WidgetWrapperProps { const useWidget = >(widget: T): T => { const definition = Widgets[widget.type as keyof typeof Widgets]; - return useMemo(() => { - const newProps = { ...widget.properties }; + const newProps = { ...widget.properties }; - Object.entries(definition.options).forEach(([key, option]) => { - if (newProps[key] == null) { - newProps[key] = option.defaultValue; - } - }); + Object.entries(definition.options).forEach(([key, option]) => { + if (newProps[key] == null) { + newProps[key] = option.defaultValue; + } + }); - return { - ...widget, - properties: newProps, - }; - }, [widget]); + return { + ...widget, + properties: newProps, + }; }; export const WidgetWrapper = ({