From f23a8457d4d857498f595660349eca2d7bf3247c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Tue, 7 Jul 2020 12:57:29 +0100
Subject: [PATCH] fix(ui): fix a regression in alert group width calculation

---
 ui/src/Components/Grid/AlertGrid/index.js     | 53 +++++++++++--------
 .../Components/Grid/AlertGrid/index.test.js   |  1 +
 ui/src/Hooks/useWindowSize.ts                 | 30 +++++++++++
 3 files changed, 63 insertions(+), 21 deletions(-)
 create mode 100644 ui/src/Hooks/useWindowSize.ts

diff --git a/ui/src/Components/Grid/AlertGrid/index.js b/ui/src/Components/Grid/AlertGrid/index.js
index 88d9555ff..f5eb67c63 100644
--- a/ui/src/Components/Grid/AlertGrid/index.js
+++ b/ui/src/Components/Grid/AlertGrid/index.js
@@ -1,6 +1,7 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import PropTypes from "prop-types";
 
+import { autorun } from "mobx";
 import { useObserver } from "mobx-react-lite";
 
 import useDimensions from "react-cool-dimensions";
@@ -8,40 +9,50 @@ import useDimensions from "react-cool-dimensions";
 import { AlertStore } from "Stores/AlertStore";
 import { Settings } from "Stores/Settings";
 import { SilenceFormStore } from "Stores/SilenceFormStore";
+import { useWindowSize } from "Hooks/useWindowSize";
 import { Grid } from "./Grid";
 import { GridSizesConfig, GetGridElementWidth } from "./GridSize";
 
 const AlertGrid = ({ alertStore, settingsStore, silenceFormStore }) => {
-  const getGridSizesConfig = (windowWidth) =>
-    GridSizesConfig(windowWidth, settingsStore.gridConfig.config.groupWidth);
+  const { width: windowWidth } = useWindowSize();
+  const { ref, width: bodyWidth } = useDimensions();
 
-  const getGroupWidth = (canvasWidth, windowWidth) =>
+  const [gridSizesConfig, setGridSizesConfig] = useState(
+    GridSizesConfig(windowWidth, settingsStore.gridConfig.config.groupWidth)
+  );
+  const [groupWidth, setGroupWidth] = useState(
     GetGridElementWidth(
-      canvasWidth,
+      bodyWidth || document.body.clientWidth,
       windowWidth,
       alertStore.data.gridPadding * 2,
       settingsStore.gridConfig.config.groupWidth
-    );
-
-  const [gridSizesConfig, setGridSizesConfig] = useState(
-    getGridSizesConfig(window.innerWidth)
-  );
-  const [groupWidth, setGroupWidth] = useState(
-    getGroupWidth(document.body.clientWidth, window.innerWidth)
+    )
   );
 
-  const handleResize = ({ width }) => {
-    setGridSizesConfig(getGridSizesConfig(window.innerWidth));
-    setGroupWidth(getGroupWidth(width, window.innerWidth));
-  };
-
-  const { ref } = useDimensions({
-    onResize: handleResize,
-  });
+  useEffect(
+    () =>
+      autorun(() => {
+        setGridSizesConfig(
+          GridSizesConfig(
+            windowWidth,
+            settingsStore.gridConfig.config.groupWidth
+          )
+        );
+        setGroupWidth(
+          GetGridElementWidth(
+            bodyWidth || document.body.clientWidth,
+            windowWidth,
+            alertStore.data.gridPadding * 2,
+            settingsStore.gridConfig.config.groupWidth
+          )
+        );
+      }),
+    [windowWidth, bodyWidth] // eslint-disable-line react-hooks/exhaustive-deps
+  );
 
   return useObserver(() => (
     <React.Fragment>
-      <div ref={ref}></div>
+      <div ref={ref} />
       {alertStore.data.grids.map((grid) => (
         <Grid
           key={`${grid.labelName}/${grid.labelValue}`}
diff --git a/ui/src/Components/Grid/AlertGrid/index.test.js b/ui/src/Components/Grid/AlertGrid/index.test.js
index 1206fd9ad..d2d85f1b1 100644
--- a/ui/src/Components/Grid/AlertGrid/index.test.js
+++ b/ui/src/Components/Grid/AlertGrid/index.test.js
@@ -457,6 +457,7 @@ describe("<AlertGrid />", () => {
     document.body.clientWidth = 1000;
     window.innerWidth = 1000;
     act(() => {
+      window.dispatchEvent(new Event("resize"));
       resizeCallback([{ contentRect: { width: 1000, height: 1000 } }]);
     });
     wrapper.update();
diff --git a/ui/src/Hooks/useWindowSize.ts b/ui/src/Hooks/useWindowSize.ts
new file mode 100644
index 000000000..e3f3a8cdd
--- /dev/null
+++ b/ui/src/Hooks/useWindowSize.ts
@@ -0,0 +1,30 @@
+import { useState, useEffect } from "react";
+
+interface Dimentions {
+  width: number;
+  height: number;
+}
+
+function getSize(): Dimentions {
+  return {
+    width: window.innerWidth,
+    height: window.innerHeight,
+  };
+}
+
+function useWindowSize() {
+  const [windowSize, setWindowSize] = useState(getSize());
+
+  useEffect(() => {
+    const handleResize = () => {
+      setWindowSize(getSize());
+    };
+
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
+  return windowSize;
+}
+
+export { useWindowSize };