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

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
-      ? bodyshop.associations[0].user.dashboardlayout
-      : { items: [], layout: {}, layouts: [] })
+    items: initial.items || [],
+    layout: initial.layout || {},
+    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({
-      ...state,
+    setState((prev) => ({
+      ...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) => {