WIP Dashboard work.

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

@@ -1,35 +1,54 @@
-import React from "react";
-import GridLayout from "react-grid-layout";
 import { Card } from "antd";
-
+import React, { useState } from "react";
+import { Responsive, WidthProvider } from "react-grid-layout";
 //Combination of the following:
 // /node_modules/react-grid-layout/css/styles.css
 // /node_modules/react-resizable/css/styles.css
 import "./dashboard-grid.styles.css";
 
+const ResponsiveReactGridLayout = WidthProvider(Responsive);
 export default function DashboardGridComponent() {
-  const layout = [
-    { i: "a", x: 0, y: 0, w: 1, h: 2, static: true },
-    { i: "b", x: 1, y: 0, w: 3, h: 2, minW: 2, maxW: 4 },
-    { i: "c", x: 4, y: 0, w: 1, h: 2 }
-  ];
+  const [state, setState] = useState({
+    layout: [
+      { x: 0, y: 0, w: 2, h: 2 },
+      { x: 1, y: 0, w: 2, h: 2 },
+      { x: 4, y: 0, w: 2, h: 2 }
+    ]
+  });
+
+  const defaultProps = {
+    className: "layout",
+    breakpoints: { lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 },
+    cols: { lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 },
+    rowHeight: 100
+  };
+
+  // We're using the cols coming back from this to calculate where to add new items.
+  const onBreakpointChange = (breakpoint, cols) => {
+    console.log("breakpoint, cols", breakpoint, cols);
+    setState({ ...state, breakpoint: breakpoint, cols: cols });
+  };
+
   return (
-    <div>
+    <div style={{ width: "100%", height: " 100%" }}>
       The Grid.
-      <GridLayout
-        className="layout"
-        layout={layout}
-        cols={12}
-        rowHeight={30}
-        width={1200}
+      <ResponsiveReactGridLayout
+        {...defaultProps}
+        onBreakpointChange={onBreakpointChange}
         onLayoutChange={layout => {
-          console.log(layout);
+          console.log("layout", layout);
+          setState({ ...state, layout });
         }}
       >
-        <Card key="a">a</Card>
-        <Card key="b">b</Card>
-        <Card key="c">c</Card>
-      </GridLayout>
+        {state.layout.map((item, index) => {
+          console.log("item", item);
+          return (
+            <Card style={{ width: "100px" }} key={index} data-grid={item}>
+              A Card {index}
+            </Card>
+          );
+        })}
+      </ResponsiveReactGridLayout>
     </div>
   );
 }