Web-Frontend/client/src/components/Canvas/views/HomeTabs/MyDashboard.jsx

import GridLayout, { WidthProvider } from 'react-grid-layout';
import { useSlotRecipe, chakra, Flex } from '@chakra-ui/react';

export default function WidgetCanvas({layout, onLayoutChange, isEditable, isDelete, DeleteWidget, widgetArray}) {
  console.log("rendering MyDashboard");
  const recipe = useSlotRecipe({ key: "widget" });
  const styles = recipe(); // using root recipe for widget below
  const ResponsiveGridLayout = WidthProvider(GridLayout); // canvas width now adjusts to window size
  const handleDragStart = () => { document.body.style.userSelect = "none"; }; // don't allow text highlighting when dragging
  const handleDragStop = () => { document.body.style.userSelect = ""; }; // allow text highlighting all other times
  let merged = [];

  console.log("widgetArray: ", widgetArray);
  console.log("layout: ", layout);
  if (widgetArray.length && layout.length) {
    const widgetMap = new Map(widgetArray.map(item => [item.i, item]));
    merged = layout.map(item => {
      return {
        ...item,
        ...widgetMap.get(item.i)
      };
    });
  };

  return (
    <chakra.div width="100%">
      <ResponsiveGridLayout
        className="layout"
        layout={layout}
        cols={12} // Total columns in grid
        rowHeight={30} //Height of a single row in px
        isBounded={true} // Total width of the grid
        margin={[10, 10]} // [horizontal, vertical] gap
        onLayoutChange={onLayoutChange}
        draggableHandle=".widget-handle" // Make only the header draggable
        onDragStart={handleDragStart}
        onDragStop={handleDragStop}
      >
        {merged.map((item) => {
          const Widget = item.widget;
          return (
            <Flex key={item.i} css={styles.root} height="100%" >
              <Widget id={item.i} isEditable={isEditable} isDelete={isDelete} DeleteWidget={DeleteWidget}/>
            </Flex>
          )
        })}
      </ResponsiveGridLayout>
    </chakra.div>
  );
}