feature/IO-3255-simplified-parts-management - Revert dashboard

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

@@ -26,26 +26,18 @@ const ResponsiveReactGridLayout = WidthProvider(Responsive);
 const mapStateToProps = createStructuredSelector({
   currentUser: selectCurrentUser,
   bodyshop: selectBodyshop
-  //
 });
 
 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({
-    items: initial.items || [],
-    layout: initial.layout || {},
-    layouts: coerceLayouts(initial.layouts)
+    ...(bodyshop.associations[0].user.dashboardlayout
+      ? bodyshop.associations[0].user.dashboardlayout
+      : { items: [], layout: {}, layouts: [] })
   });
   const notification = useNotification();
 
@@ -59,13 +51,12 @@ export function DashboardGridComponent({ currentUser, bodyshop }) {
   const handleLayoutChange = async (layout, layouts) => {
     logImEXEvent("dashboard_change_layout");
 
-    const nextState = { ...state, layout, layouts };
-    setState(nextState);
+    setState({ ...state, layout, layouts });
 
     const result = await updateLayout({
       variables: {
         email: currentUser.email,
-        layout: nextState
+        layout: { ...state, layout, layouts }
       }
     });
 
@@ -90,19 +81,19 @@ export function DashboardGridComponent({ currentUser, bodyshop }) {
 
   const handleAddComponent = (e) => {
     logImEXEvent("dashboard_add_component", { name: e });
-    setState((prev) => ({
-      ...prev,
+    setState({
+      ...state,
       items: [
-        ...prev.items,
+        ...state.items,
         {
           i: e.key,
-          x: (prev.items.length * 2) % 12,
+          x: (state.items.length * 2) % (state.cols || 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]);
@@ -139,7 +130,8 @@ 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 }}
-        layouts={state.layouts || {}}
+        width="100%"
+        layouts={state.layouts}
         onLayoutChange={handleLayoutChange}
       >
         {state.items.map((item) => {