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>
   );
 }

client/src/components/email-overlay/email-overlay.component.jsx

@@ -31,6 +31,11 @@ export default function EmailOverlayComponent({
         editor={ClassicEditor}
         data={messageOptions.html}
         onChange={(event, editor) => {
+          // handleHtmlChange(editor.getData());
+          //TODO Ensure that removing onchange never introduces a race condition 
+        }}
+        onBlur={(event, editor) => {
+          console.log("Blur.");
           handleHtmlChange(editor.getData());
         }}
       />

client/src/components/email-overlay/email-overlay.container.jsx

@@ -24,15 +24,17 @@ const mapDispatchToProps = dispatch => ({
 export default connect(
   mapStateToProps,
   mapDispatchToProps
-)(function EmailOveralContainer({
+)(function EmailOverlayContainer({
   emailConfig,
   modalVisible,
   toggleEmailOverlayVisible
 }) {
   const { t } = useTranslation();
+
   const [messageOptions, setMessageOptions] = useState(
     emailConfig.messageOptions
   );
+
   useEffect(() => {
     setMessageOptions(emailConfig.messageOptions);
   }, [setMessageOptions, emailConfig.messageOptions]);
@@ -60,7 +62,6 @@ export default connect(
       html: ReactDOMServer.renderToStaticMarkup(
         <emailConfig.template data={data} />
       )
-      //html: renderEmail(<emailConfig.template data={data} />)
     });
   }
 
@@ -80,6 +81,7 @@ export default connect(
         });
       });
   };
+
   const handleConfigChange = event => {
     const { name, value } = event.target;
     setMessageOptions({ ...messageOptions, [name]: value });