feature/IO-3255-simplified-parts-management - Update and fix dashboard-grid.component.jsx

client/package-lock.json

@@ -59,7 +59,7 @@
         "react-dom": "^18.3.1",
         "react-drag-listview": "^2.0.0",
         "react-grid-gallery": "^1.0.1",
-        "react-grid-layout": "1.3.4",
+        "react-grid-layout": "^1.5.2",
         "react-i18next": "^15.7.1",
         "react-icons": "^5.5.0",
         "react-image-lightbox": "^5.1.4",
@@ -8228,6 +8228,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/fast-equals": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/fast-equals/-/fast-equals-4.0.3.tgz",
+      "integrity": "sha512-G3BSX9cfKttjr+2o1O22tYMLq0DPluZnYtq1rXumE1SpL/F/SLIfHx08WYQoWSIpeMYf8sRbJ8++71+v6Pnxfg==",
+      "license": "MIT"
+    },
     "node_modules/fast-json-stable-stringify": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
@@ -10524,13 +10530,6 @@
       "integrity": "sha512-chi4NHZlZqZD18a0imDHnZPrDeBbTtVN7GXMwuGdRH9qotxAjYs3aVLKc7zNOG9eddR5Ksd8rvFEBc9SsggPpg==",
       "license": "MIT"
     },
-    "node_modules/lodash.isequal": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
-      "integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==",
-      "deprecated": "This package is deprecated. Use require('node:util').isDeepStrictEqual instead.",
-      "license": "MIT"
-    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -13330,22 +13329,32 @@
       }
     },
     "node_modules/react-grid-layout": {
-      "version": "1.3.4",
+      "version": "1.5.2",
-      "resolved": "https://registry.npmjs.org/react-grid-layout/-/react-grid-layout-1.3.4.tgz",
+      "resolved": "https://registry.npmjs.org/react-grid-layout/-/react-grid-layout-1.5.2.tgz",
-      "integrity": "sha512-sB3rNhorW77HUdOjB4JkelZTdJGQKuXLl3gNg+BI8gJkTScspL1myfZzW/EM0dLEn+1eH+xW+wNqk0oIM9o7cw==",
+      "integrity": "sha512-vT7xmQqszTT+sQw/LfisrEO4le1EPNnSEMVHy6sBZyzS3yGkMywdOd+5iEFFwQwt0NSaGkxuRmYwa1JsP6OJdw==",
       "license": "MIT",
       "dependencies": {
-        "clsx": "^1.1.1",
+        "clsx": "^2.1.1",
-        "lodash.isequal": "^4.0.0",
+        "fast-equals": "^4.0.3",
         "prop-types": "^15.8.1",
-        "react-draggable": "^4.0.0",
+        "react-draggable": "^4.4.6",
-        "react-resizable": "^3.0.4"
+        "react-resizable": "^3.0.5",
+        "resize-observer-polyfill": "^1.5.1"
       },
       "peerDependencies": {
         "react": ">= 16.3.0",
         "react-dom": ">= 16.3.0"
       }
     },
+    "node_modules/react-grid-layout/node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/react-i18next": {
       "version": "15.7.1",
       "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-15.7.1.tgz",

client/package.json

@@ -58,7 +58,7 @@
     "react-dom": "^18.3.1",
     "react-drag-listview": "^2.0.0",
     "react-grid-gallery": "^1.0.1",
-    "react-grid-layout": "1.3.4",
+    "react-grid-layout": "^1.5.2",
     "react-i18next": "^15.7.1",
     "react-icons": "^5.5.0",
     "react-image-lightbox": "^5.1.4",

client/src/components/dashboard-grid/dashboard-grid.component.jsx

@@ -32,12 +32,19 @@ const mapDispatchToProps = () => ({
   //setUserLanguage: language => dispatch(setUserLanguage(language))
 });
 
+// Coerce incoming layouts to the object shape expected by ResponsiveRGL
+const coerceLayouts = (layouts) => {
+  if (!layouts) return {};
+  return Array.isArray(layouts) ? {} : layouts;
+};
+
 export function DashboardGridComponent({ currentUser, bodyshop }) {
   const { t } = useTranslation();
+  const initial = bodyshop?.associations?.[0]?.user?.dashboardlayout || { items: [], layout: {}, layouts: {} };
   const [state, setState] = useState({
-    ...(bodyshop.associations[0].user.dashboardlayout
+    items: initial.items || [],
-      ? bodyshop.associations[0].user.dashboardlayout
+    layout: initial.layout || {},
-      : { items: [], layout: {}, layouts: [] })
+    layouts: coerceLayouts(initial.layouts)
   });
   const notification = useNotification();
 
@@ -51,12 +58,13 @@ export function DashboardGridComponent({ currentUser, bodyshop }) {
   const handleLayoutChange = async (layout, layouts) => {
     logImEXEvent("dashboard_change_layout");
 
-    setState({ ...state, layout, layouts });
+    const nextState = { ...state, layout, layouts };
+    setState(nextState);
 
     const result = await updateLayout({
       variables: {
         email: currentUser.email,
-        layout: { ...state, layout, layouts }
+        layout: nextState
       }
     });
 
@@ -81,19 +89,19 @@ export function DashboardGridComponent({ currentUser, bodyshop }) {
 
   const handleAddComponent = (e) => {
     logImEXEvent("dashboard_add_component", { name: e });
-    setState({
+    setState((prev) => ({
-      ...state,
+      ...prev,
       items: [
-        ...state.items,
+        ...prev.items,
         {
           i: e.key,
-          x: (state.items.length * 2) % (state.cols || 12),
+          x: (prev.items.length * 2) % 12,
           y: 99, // puts it at the bottom
           w: componentList[e.key].w || 2,
           h: componentList[e.key].h || 2
         }
       ]
-    });
+    }));
   };
 
   const dashboardData = useMemo(() => GenerateDashboardData(data), [data]);
@@ -130,8 +138,7 @@ export function DashboardGridComponent({ currentUser, bodyshop }) {
         className="layout"
         breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
         cols={{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }}
-        width="100%"
+        layouts={state.layouts || {}}
-        layouts={state.layouts}
         onLayoutChange={handleLayoutChange}
       >
         {state.items.map((item) => {