From c80cdf8f7adf157fbb98dd66cb8bf17f7b0c0f29 Mon Sep 17 00:00:00 2001
From: maksis <maksis@adrenaline-network.com>
Date: Sun, 27 Oct 2024 18:44:36 +0200
Subject: [PATCH] WidgetLayout: remove conflicting data-grid prop from the
 widgets

The same information is added by react-grid-layout via the 'layouts' prop
---
 src/routes/Home/components/WidgetLayout.tsx | 31 ++++++++-------------
 1 file changed, 11 insertions(+), 20 deletions(-)

diff --git a/src/routes/Home/components/WidgetLayout.tsx b/src/routes/Home/components/WidgetLayout.tsx
index 8bc73a49..a38eac72 100644
--- a/src/routes/Home/components/WidgetLayout.tsx
+++ b/src/routes/Home/components/WidgetLayout.tsx
@@ -38,7 +38,6 @@ const mapWidget = (
       componentId={layoutItem.i!}
       widgetInfo={widgetInfo}
       settings={settings}
-      data-grid={layoutItem}
       rootWidgetT={rootWidgetT}
     />
   );
@@ -46,7 +45,6 @@ const mapWidget = (
 
 const WidgetLayout = React.memo(function WidgetLayout() {
   const [breakpoint, setBreakpoint] = useState('lg');
-  const [initialLayoutUpdateFired, setInitialLayoutUpdateFired] = useState(false);
 
   const { t } = useTranslation();
   const rootWidgetT = getModuleT(
@@ -57,34 +55,27 @@ const WidgetLayout = React.memo(function WidgetLayout() {
   const layouts = useStore<Layouts>(WidgetStore);
 
   const widgets = React.useMemo(() => {
-    console.debug('WidgetLayout: layouts loaded', breakpoint);
+    // console.debug('WidgetLayout: layouts loaded', breakpoint, layouts[breakpoint]);
     return layouts[breakpoint]
       .map((w) => mapWidget(w, rootWidgetT))
       .filter((widget) => widget);
   }, [layouts, breakpoint]);
 
-  React.useEffect(() => console.log('RERENDER', breakpoint));
+  const onLayoutChanged = (layout: Layout[], layouts: Layouts) => {
+    //console.debug(
+    //  'WidgetLayout: saving layout',
+    //  layout,
+    //);
+
+    WidgetStore.onLayoutChange(layout, layouts);
+  };
+
   return (
     <>
       <ResponsiveReactGridLayout
         className="ui cards layout"
         rowHeight={50}
-        onLayoutChange={(layout, layouts) => {
-          // The initial render without correct breakpoint usually contains unwanted data
-          if (!initialLayoutUpdateFired) {
-            // console.debug('WidgetLayout: initial layout update fired');
-            setInitialLayoutUpdateFired(true);
-            return;
-          }
-
-          //console.debug(
-          //  'WidgetLayout: layout changed',
-          //  JSON.stringify(layout, null, 2),
-          //  breakpoint,
-          //);
-
-          WidgetStore.onLayoutChange(layout, layouts);
-        }}
+        onLayoutChange={onLayoutChanged}
         onBreakpointChange={(bp) => {
           // console.debug('WidgetLayout: breakpoint changed', bp);
           setBreakpoint(bp);