WIP Download Images + Invoice Tables

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

@@ -1,54 +1,64 @@
 import { Card } from "antd";
 import React, { useState } from "react";
 import { Responsive, WidthProvider } from "react-grid-layout";
+import styled from "styled-components";
 //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 Sdiv = styled.div`
+  position: absolute;
+  height: 80%;
+  width: 80%;
+  top: 10%;
+  left: 10%;
+  background-color: #ffcc00;
+`;
+
 const ResponsiveReactGridLayout = WidthProvider(Responsive);
 export default function DashboardGridComponent() {
   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 }
+      { i: "1", x: 0, y: 0, w: 2, h: 2 },
+      { i: "2", x: 2, y: 0, w: 2, h: 2 },
+      { i: "3", 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
+    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 });
+    // setState({ ...state, breakpoint: breakpoint, cols: cols });
   };
 
   return (
-    <div style={{ width: "100%", height: " 100%" }}>
+    <Sdiv>
       The Grid.
       <ResponsiveReactGridLayout
         {...defaultProps}
         onBreakpointChange={onBreakpointChange}
+        width="100%"
         onLayoutChange={layout => {
           console.log("layout", layout);
           setState({ ...state, layout });
         }}
       >
         {state.layout.map((item, index) => {
-          console.log("item", item);
           return (
-            <Card style={{ width: "100px" }} key={index} data-grid={item}>
+            <Card style={{ width: "100px" }} key={item.i} data-grid={item}>
               A Card {index}
             </Card>
           );
         })}
       </ResponsiveReactGridLayout>
-    </div>
+    </Sdiv>
   );
 }