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';
import CustomResizeHandle from '../../CanvasComponents/CustomResizeHandle';
import FirstWidgetButton from '../../CanvasComponents/FirstWidgetButton';

export default function MyDashboard({layout, onLayoutChange, isEditable, isDelete, DeleteWidget, widgetArray, appendWidget}) {
  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)
      };
    });
  };

  // Show large 'Add Widget' button when dashboard is empty
  if ( !layout.length ) {
    return (
      <Flex
        align="center"
        justify="center"
        h="100%"
        w="100%"
        bg="gray.150"
        borderRadius="md"
      >
        <FirstWidgetButton appendWidget={ appendWidget } />  
      </Flex>
    );
  }

  // Show responsive grid of widgets 
  return (
    <chakra.div width="100%">
      <ResponsiveGridLayout
        useCSSTransforms={false}  // remove the sliding animation of the widgets
        className="layout"
        layout={layout}
        cols={16} // Total columns in grid
        rowHeight={30} // Height of a single row in px
        isBounded={true} // Total width of the grid
        margin={[15, 5]} // [horizontal, vertical] gap
        onLayoutChange={onLayoutChange}
        draggableHandle=".widget-handle" // Make only the header draggable
        onDragStart={handleDragStart}
        onDragStop={handleDragStop}
        position="relative"
        resizeHandle={<CustomResizeHandle isVisable={isEditable} />}
      >
         { merged.map((item) => {
            const Widget = item.widget;
            return (
              <Flex key={item.i} css={styles.root} boxShadow="md" height="100%" >
                <Widget id={item.i} isEditable={isEditable} isDelete={isDelete} DeleteWidget={DeleteWidget} appendWidget={appendWidget}/>
              </Flex>
            );
          })
        }
      </ResponsiveGridLayout>
    </chakra.div>
  );
}