AB#803 Introduce react-resize-detector

Replace unmaintained react-container-dimensions. Replace unmaintained react-use-dimensions.
NCI-Agency · Mar 28, 2024 · 24f0125 · 24f0125
1 parent fe49771
commit 24f0125
Show file tree

Hide file tree

Showing 19 changed files with 339 additions and 399 deletions.
diff --git a/client/package.json b/client/package.json
@@ -165,18 +165,17 @@
     "react": "18.2.0",
     "react-advanced-cropper": "^0.19.4",
     "react-bootstrap": "2.4.0",
-    "react-container-dimensions": "1.4.1",
     "react-dom": "18.2.0",
     "react-moment-proptypes": "1.8.1",
     "react-mosaic-component": "6.1.0",
     "react-redux": "9.1.0",
     "react-redux-loading-bar": "5.0.8",
+    "react-resize-detector": "10.0.1",
     "react-router-bootstrap": "0.26.2",
     "react-router-dom": "6.3.0",
     "react-scroll": "1.9.0",
     "react-toastify": "10.0.5",
     "react-ultimate-pagination": "1.3.2",
-    "react-use-dimensions": "1.2.1",
     "reduce-css-calc": "2.1.8",
     "redux": "5.0.1",
     "redux-persist": "6.0.0",

diff --git a/client/src/components/CancelledEngagementReports.js b/client/src/components/CancelledEngagementReports.js
@@ -20,7 +20,7 @@ import _escape from "lodash/escape"
 import _isEqual from "lodash/isEqual"
 import PropTypes from "prop-types"
 import React, { useMemo, useState } from "react"
-import ContainerDimensions from "react-container-dimensions"
+import { useResizeDetector } from "react-resize-detector"
 import Settings from "settings"
 
 const GQL_GET_REPORT_LIST_BY_ORG = gql`
@@ -59,6 +59,7 @@ const ChartByOrg = ({
   goToSelection,
   selectedBarClass
 }) => {
+  const { width, height, ref } = useResizeDetector()
   const reportQuery = Object.assign({}, queryParams, { pageSize: 0 })
   const { loading, error, data } = API.useApiQuery(GQL_GET_REPORT_LIST_BY_ORG, {
     reportQuery
@@ -117,31 +118,27 @@ const ChartByOrg = ({
   }
 
   return (
-    <div className="non-scrollable">
-      <ContainerDimensions>
-        {({ width, height }) => (
-          <BarChart
-            width={width}
-            height={height}
-            chartId={chartId}
-            data={graphData}
-            xProp="advisorOrg.uuid"
-            yProp="cancelledByOrg"
-            xLabel="advisorOrg.shortName"
-            onBarClick={goToSelection}
-            tooltip={d => `
-              <h4>${_escape(d.advisorOrg.shortName)}</h4>
-              <p>${_escape(d.cancelledByOrg)}</p>
-            `}
-            selectedBarClass={selectedBarClass}
-            selectedBar={
-              focusedSelection && focusedSelection.focusedIsOrg
-                ? "bar_" + focusedSelection.focusedSelection.advisorOrg.uuid
-                : ""
-            }
-          />
-        )}
-      </ContainerDimensions>
+    <div ref={ref} className="non-scrollable">
+      <BarChart
+        width={width}
+        height={height}
+        chartId={chartId}
+        data={graphData}
+        xProp="advisorOrg.uuid"
+        yProp="cancelledByOrg"
+        xLabel="advisorOrg.shortName"
+        onBarClick={goToSelection}
+        tooltip={d => `
+          <h4>${_escape(d.advisorOrg.shortName)}</h4>
+          <p>${_escape(d.cancelledByOrg)}</p>
+        `}
+        selectedBarClass={selectedBarClass}
+        selectedBar={
+          focusedSelection && focusedSelection.focusedIsOrg
+            ? "bar_" + focusedSelection.focusedSelection.advisorOrg.uuid
+            : ""
+        }
+      />
     </div>
   )
 }
@@ -163,6 +160,7 @@ const ChartByReason = ({
   goToSelection,
   selectedBarClass
 }) => {
+  const { width, height, ref } = useResizeDetector()
   const reportQuery = Object.assign({}, queryParams, { pageSize: 0 })
   const { loading, error, data } = API.useApiQuery(
     GQL_GET_REPORT_LIST_BY_REASON,
@@ -215,31 +213,27 @@ const ChartByReason = ({
   }
 
   return (
-    <div className="non-scrollable">
-      <ContainerDimensions>
-        {({ width, height }) => (
-          <BarChart
-            width={width}
-            height={height}
-            chartId={chartId}
-            data={graphData}
-            xProp="cancelledReason"
-            yProp="cancelledByReason"
-            xLabel="reason"
-            onBarClick={goToSelection}
-            tooltip={d => `
-              <h4>${_escape(d.reason)}</h4>
-              <p>${_escape(d.cancelledByReason)}</p>
-            `}
-            selectedBarClass={selectedBarClass}
-            selectedBar={
-              focusedSelection && !focusedSelection.focusedIsOrg
-                ? "bar_" + focusedSelection.focusedSelection.cancelledReason
-                : ""
-            }
-          />
-        )}
-      </ContainerDimensions>
+    <div ref={ref} className="non-scrollable">
+      <BarChart
+        width={width}
+        height={height}
+        chartId={chartId}
+        data={graphData}
+        xProp="cancelledReason"
+        yProp="cancelledByReason"
+        xLabel="reason"
+        onBarClick={goToSelection}
+        tooltip={d => `
+          <h4>${_escape(d.reason)}</h4>
+          <p>${_escape(d.cancelledByReason)}</p>
+        `}
+        selectedBarClass={selectedBarClass}
+        selectedBar={
+          focusedSelection && !focusedSelection.focusedIsOrg
+            ? "bar_" + focusedSelection.focusedSelection.cancelledReason
+            : ""
+        }
+      />
     </div>
   )
 
@@ -285,21 +279,20 @@ Collection.propTypes = {
   queryParams: PropTypes.object
 }
 
-const Map = ({ queryParams }) => (
-  <div className="non-scrollable">
-    <ContainerDimensions>
-      {({ width, height }) => (
-        <ReportCollection
-          queryParams={queryParams}
-          width={width}
-          height={height}
-          marginBottom={0}
-          viewFormats={[FORMAT_MAP]}
-        />
-      )}
-    </ContainerDimensions>
-  </div>
-)
+const Map = ({ queryParams }) => {
+  const { width, height, ref } = useResizeDetector()
+  return (
+    <div ref={ref} className="non-scrollable">
+      <ReportCollection
+        queryParams={queryParams}
+        width={width}
+        height={height}
+        marginBottom={0}
+        viewFormats={[FORMAT_MAP]}
+      />
+    </div>
+  )
+}
 
 Map.propTypes = {
   queryParams: PropTypes.object

diff --git a/client/src/components/DailyRollupChart.js b/client/src/components/DailyRollupChart.js
@@ -7,7 +7,6 @@ import { addD3Tooltip } from "./D3Tooltip"
 
 const DailyRollupChart = ({
   width,
-  height,
   chartId,
   data,
   onBarClick,
@@ -180,14 +179,13 @@ const DailyRollupChart = ({
       .style("text-anchor", "end")
       .text(d => d.cancelled || "")
       .attr("fill", utils.getContrastYIQ(barColors.cancelled))
-  }, [node, width, height, data, onBarClick, tooltip, barColors])
+  }, [node, width, data, onBarClick, tooltip, barColors])
 
-  return <svg id={chartId} ref={node} width={width} height={height} />
+  return <svg id={chartId} ref={node} width={width} />
 }
 
 DailyRollupChart.propTypes = {
   width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   chartId: PropTypes.string,
   data: PropTypes.array,
   onBarClick: PropTypes.func,

diff --git a/client/src/components/FutureEngagementsByLocation.js b/client/src/components/FutureEngagementsByLocation.js
@@ -21,7 +21,7 @@ import _isEqual from "lodash/isEqual"
 import moment from "moment"
 import PropTypes from "prop-types"
 import React, { useMemo, useState } from "react"
-import ContainerDimensions from "react-container-dimensions"
+import { useResizeDetector } from "react-resize-detector"
 import Settings from "settings"
 
 const GQL_GET_REPORT_LIST = gql`
@@ -48,6 +48,7 @@ const Chart = ({
   goToSelection,
   selectedBarClass
 }) => {
+  const { width, ref } = useResizeDetector()
   const reportQuery = Object.assign({}, queryParams, { pageSize: 0 })
   const { loading, error, data } = API.useApiQuery(GQL_GET_REPORT_LIST, {
     reportQuery
@@ -140,29 +141,25 @@ const Chart = ({
   }
 
   return (
-    <div className="scrollable-y">
-      <ContainerDimensions>
-        {({ width }) => (
-          <HorizontalBarChart
-            width={width}
-            chartId={chartId}
-            data={graphData}
-            onBarClick={goToSelection}
-            tooltip={d => `
+    <div ref={ref} className="scrollable-y">
+      <HorizontalBarChart
+        width={width}
+        chartId={chartId}
+        data={graphData}
+        onBarClick={goToSelection}
+        tooltip={d => `
               <h4>${_escape(graphData.categoryLabels[d.parentKey])}</h4>
               <p>${_escape(graphData.leavesLabels[d.key])}: ${_escape(
-              d.value
-            )}</p>
+          d.value
+        )}</p>
             `}
-            selectedBarClass={selectedBarClass}
-            selectedBar={
-              focusedSelection
-                ? "bar_" + focusedSelection.key + focusedSelection.parentKey
-                : ""
-            }
-          />
-        )}
-      </ContainerDimensions>
+        selectedBarClass={selectedBarClass}
+        selectedBar={
+          focusedSelection
+            ? "bar_" + focusedSelection.key + focusedSelection.parentKey
+            : ""
+        }
+      />
     </div>
   )
 }
@@ -196,21 +193,20 @@ Collection.propTypes = {
   queryParams: PropTypes.object
 }
 
-const Map = ({ queryParams }) => (
-  <div className="non-scrollable">
-    <ContainerDimensions>
-      {({ width, height }) => (
-        <ReportCollection
-          queryParams={queryParams}
-          width={width}
-          height={height}
-          marginBottom={0}
-          viewFormats={[FORMAT_MAP]}
-        />
-      )}
-    </ContainerDimensions>
-  </div>
-)
+const Map = ({ queryParams }) => {
+  const { width, height, ref } = useResizeDetector()
+  return (
+    <div ref={ref} className="non-scrollable">
+      <ReportCollection
+        queryParams={queryParams}
+        width={width}
+        height={height}
+        marginBottom={0}
+        viewFormats={[FORMAT_MAP]}
+      />
+    </div>
+  )
+}
 
 Map.propTypes = {
   queryParams: PropTypes.object

diff --git a/client/src/components/HorizontalBarChart.js b/client/src/components/HorizontalBarChart.js
@@ -11,7 +11,6 @@ import { addD3Tooltip } from "./D3Tooltip"
  */
 const HorizontalBarChart = ({
   width,
-  height,
   chartId,
   data,
   onBarClick,
@@ -273,7 +272,6 @@ const HorizontalBarChart = ({
   }, [
     node,
     width,
-    height,
     chartId,
     data,
     onBarClick,
@@ -287,7 +285,7 @@ const HorizontalBarChart = ({
       <div>
         <em>No data</em>
       </div>
-    )) || <svg id={chartId} ref={node} width={width} height={height} />
+    )) || <svg id={chartId} ref={node} width={width} />
   )
 
   function bindElementOnClick(element, onClickHandler) {
@@ -299,7 +297,6 @@ const HorizontalBarChart = ({
 
 HorizontalBarChart.propTypes = {
   width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   chartId: PropTypes.string,
   data: PropTypes.object,
   onBarClick: PropTypes.func,