From 1ab3fa404efe16bc97addf43fabb879e21be2b50 Mon Sep 17 00:00:00 2001
From: bramoo <brad.moorfield@gmail.com>
Date: Sun, 1 Mar 2020 17:22:25 +1300
Subject: [PATCH] sidebar: Update scale of rate graph when width changes

Bug: Flood-UI/flood#851
Cherry-Pick: Flood-UI/flood#864
Signed-off-by: Jesse Chan <jc@linux.com>
---
 .../components/sidebar/TransferData.js        | 41 ++++++++-----------
 package-lock.json                             | 21 ++++++++++
 package.json                                  |  1 +
 3 files changed, 40 insertions(+), 23 deletions(-)

diff --git a/client/src/javascript/components/sidebar/TransferData.js b/client/src/javascript/components/sidebar/TransferData.js
index 74a91150..8aa47a25 100644
--- a/client/src/javascript/components/sidebar/TransferData.js
+++ b/client/src/javascript/components/sidebar/TransferData.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import Measure from 'react-measure';
 
 import ClientStatusStore from '../../stores/ClientStatusStore';
 import connectStores from '../../util/connectStores';
@@ -12,16 +13,6 @@ class TransferData extends React.Component {
     sidebarWidth: 0,
   };
 
-  componentDidMount() {
-    const wrapperNode = this.wrapperRef;
-
-    if (wrapperNode != null) {
-      this.setState({
-        sidebarWidth: wrapperNode.offsetWidth,
-      });
-    }
-  }
-
   handleGraphHover = (graphInspectorPoint) => {
     this.setState({graphInspectorPoint});
   };
@@ -67,20 +58,24 @@ class TransferData extends React.Component {
 
   render() {
     return (
-      <div
-        className="client-stats__wrapper sidebar__item"
-        ref={(ref) => {
-          this.wrapperRef = ref;
+      <Measure
+        offset
+        onResize={(contentRect) => {
+          this.setState({sidebarWidth: contentRect.offset.width});
         }}>
-        <div
-          className="client-stats"
-          onMouseMove={this.handleMouseMove}
-          onMouseOut={this.handleMouseOut}
-          onMouseOver={this.handleMouseOver}>
-          <TransferRateDetails inspectorPoint={this.state.graphInspectorPoint} />
-          {this.renderTransferRateGraph()}
-        </div>
-      </div>
+        {({measureRef}) => (
+          <div ref={measureRef} className="client-stats__wrapper sidebar__item">
+            <div
+              className="client-stats"
+              onMouseMove={this.handleMouseMove}
+              onMouseOut={this.handleMouseOut}
+              onMouseOver={this.handleMouseOver}>
+              <TransferRateDetails inspectorPoint={this.state.graphInspectorPoint} />
+              {this.renderTransferRateGraph()}
+            </div>
+          </div>
+        )}
+      </Measure>
     );
   }
 }
diff --git a/package-lock.json b/package-lock.json
index 9b4e9eef..51c357e2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7670,6 +7670,11 @@
       "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
       "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg=="
     },
+    "get-node-dimensions": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/get-node-dimensions/-/get-node-dimensions-1.2.1.tgz",
+      "integrity": "sha512-2MSPMu7S1iOTL+BOa6K1S62hB2zUAYNF/lV0gSVlOaacd087lc6nR1H1r0e3B1CerTo+RceOmi1iJW+vp21xcQ=="
+    },
     "get-stdin": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-6.0.0.tgz",
@@ -13056,6 +13061,17 @@
         "xtend": "^4.0.1"
       }
     },
+    "react-measure": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/react-measure/-/react-measure-2.3.0.tgz",
+      "integrity": "sha512-dwAvmiOeblj5Dvpnk8Jm7Q8B4THF/f1l1HtKVi0XDecsG6LXwGvzV5R1H32kq3TW6RW64OAf5aoQxpIgLa4z8A==",
+      "requires": {
+        "@babel/runtime": "^7.2.0",
+        "get-node-dimensions": "^1.2.1",
+        "prop-types": "^15.6.2",
+        "resize-observer-polyfill": "^1.5.0"
+      }
+    },
     "react-router": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.0.tgz",
@@ -13836,6 +13852,11 @@
         "lodash": "^4.17.14"
       }
     },
+    "resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
+    },
     "resolve": {
       "version": "1.10.1",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.10.1.tgz",
diff --git a/package.json b/package.json
index 99dabffb..09ba8fa6 100644
--- a/package.json
+++ b/package.json
@@ -78,6 +78,7 @@
     "react-dropzone": "^4.3.0",
     "react-intl": "^2.9.0",
     "react-markdown": "^4.3.1",
+    "react-measure": "^2.3.0",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
     "react-transition-group": "^4.4.1",