From 1187add411aec380f762e9bfb20378d9eecad0dd Mon Sep 17 00:00:00 2001 From: Dan Labrecque Date: Sat, 28 Sep 2024 13:33:53 -0400 Subject: [PATCH] Check refs' current prop --- src/routes/components/charts/costChart/costChart.tsx | 4 ++-- .../components/charts/costExplorerChart/costExplorerChart.tsx | 4 ++-- .../components/charts/dailyCostChart/dailyCostChart.tsx | 4 ++-- .../components/charts/dailyTrendChart/dailyTrendChart.tsx | 4 ++-- .../charts/historicalCostChart/historicalCostChart.tsx | 4 ++-- .../charts/historicalTrendChart/historicalTrendChart.tsx | 4 ++-- .../charts/historicalUsageChart/historicalUsageChart.tsx | 4 ++-- src/routes/components/charts/trendChart/trendChart.tsx | 4 ++-- src/routes/components/charts/usageChart/usageChart.tsx | 4 ++-- src/routes/details/components/pvcChart/pvcChart.tsx | 4 ++-- src/routes/details/components/usageChart/usageChart.tsx | 4 ++-- src/utils/chrome.tsx | 2 +- src/utils/hooks.ts | 2 +- 13 files changed, 24 insertions(+), 24 deletions(-) diff --git a/src/routes/components/charts/costChart/costChart.tsx b/src/routes/components/charts/costChart/costChart.tsx index 07f36485c..430375b21 100644 --- a/src/routes/components/charts/costChart/costChart.tsx +++ b/src/routes/components/charts/costChart/costChart.tsx @@ -70,7 +70,7 @@ class CostChartBase extends React.Component { public componentDidMount() { this.initDatum(); - this.observer = getResizeObserver(this.containerRef.current, this.handleResize); + this.observer = getResizeObserver(this.containerRef?.current, this.handleResize); } public componentDidUpdate(prevProps: CostChartProps) { @@ -301,7 +301,7 @@ class CostChartBase extends React.Component { private handleResize = () => { const { width } = this.state; - const { clientWidth = 0 } = this.containerRef.current || {}; + const { clientWidth = 0 } = this.containerRef?.current || {}; if (clientWidth !== width) { this.setState({ width: clientWidth }); diff --git a/src/routes/components/charts/costExplorerChart/costExplorerChart.tsx b/src/routes/components/charts/costExplorerChart/costExplorerChart.tsx index 8d1a161e4..c1681b4ef 100644 --- a/src/routes/components/charts/costExplorerChart/costExplorerChart.tsx +++ b/src/routes/components/charts/costExplorerChart/costExplorerChart.tsx @@ -74,7 +74,7 @@ class CostExplorerChartBase extends React.Component { const { width } = this.state; - const { clientWidth = 0 } = this.containerRef.current || {}; + const { clientWidth = 0 } = this.containerRef?.current || {}; if (clientWidth !== width) { this.setState({ width: clientWidth }); diff --git a/src/routes/components/charts/dailyCostChart/dailyCostChart.tsx b/src/routes/components/charts/dailyCostChart/dailyCostChart.tsx index f07a9d133..3b810686d 100644 --- a/src/routes/components/charts/dailyCostChart/dailyCostChart.tsx +++ b/src/routes/components/charts/dailyCostChart/dailyCostChart.tsx @@ -73,7 +73,7 @@ class DailyCostChartBase extends React.Component { public componentDidMount() { this.initDatum(); - this.observer = getResizeObserver(this.containerRef.current, this.handleResize); + this.observer = getResizeObserver(this.containerRef?.current, this.handleResize); } public componentDidUpdate(prevProps: DailyCostChartProps) { @@ -352,7 +352,7 @@ class DailyCostChartBase extends React.Component { private handleResize = () => { const { width } = this.state; - const { clientWidth = 0 } = this.containerRef.current || {}; + const { clientWidth = 0 } = this.containerRef?.current || {}; if (clientWidth !== width) { this.setState({ width: clientWidth }); diff --git a/src/routes/components/charts/dailyTrendChart/dailyTrendChart.tsx b/src/routes/components/charts/dailyTrendChart/dailyTrendChart.tsx index a5dbf4977..ded4cfc4b 100644 --- a/src/routes/components/charts/dailyTrendChart/dailyTrendChart.tsx +++ b/src/routes/components/charts/dailyTrendChart/dailyTrendChart.tsx @@ -76,7 +76,7 @@ class DailyTrendChartBase extends React.Component { public componentDidMount() { this.initDatum(); - this.observer = getResizeObserver(this.containerRef.current, this.handleResize); + this.observer = getResizeObserver(this.containerRef?.current, this.handleResize); } public componentDidUpdate(prevProps: DailyTrendChartProps) { @@ -374,7 +374,7 @@ class DailyTrendChartBase extends React.Component { private handleResize = () => { const { width } = this.state; - const { clientWidth = 0 } = this.containerRef.current || {}; + const { clientWidth = 0 } = this.containerRef?.current || {}; if (clientWidth !== width) { this.setState({ width: clientWidth }); diff --git a/src/routes/components/charts/historicalCostChart/historicalCostChart.tsx b/src/routes/components/charts/historicalCostChart/historicalCostChart.tsx index f67692215..09d2ec394 100644 --- a/src/routes/components/charts/historicalCostChart/historicalCostChart.tsx +++ b/src/routes/components/charts/historicalCostChart/historicalCostChart.tsx @@ -71,7 +71,7 @@ class HistoricalCostChartBase extends React.Component { const { width } = this.state; - const { clientWidth = 0 } = this.containerRef.current || {}; + const { clientWidth = 0 } = this.containerRef?.current || {}; if (clientWidth !== width) { this.setState({ width: clientWidth }); diff --git a/src/routes/components/charts/historicalTrendChart/historicalTrendChart.tsx b/src/routes/components/charts/historicalTrendChart/historicalTrendChart.tsx index 678907680..ed3710ebe 100644 --- a/src/routes/components/charts/historicalTrendChart/historicalTrendChart.tsx +++ b/src/routes/components/charts/historicalTrendChart/historicalTrendChart.tsx @@ -71,7 +71,7 @@ class HistoricalTrendChartBase extends React.Component { const { width } = this.state; - const { clientWidth = 0 } = this.containerRef.current || {}; + const { clientWidth = 0 } = this.containerRef?.current || {}; if (clientWidth !== width) { this.setState({ width: clientWidth }); diff --git a/src/routes/components/charts/historicalUsageChart/historicalUsageChart.tsx b/src/routes/components/charts/historicalUsageChart/historicalUsageChart.tsx index c77b54ae7..aa1498a89 100644 --- a/src/routes/components/charts/historicalUsageChart/historicalUsageChart.tsx +++ b/src/routes/components/charts/historicalUsageChart/historicalUsageChart.tsx @@ -84,7 +84,7 @@ class HistoricalUsageChartBase extends React.Component { const { width } = this.state; - const { clientWidth = 0 } = this.containerRef.current || {}; + const { clientWidth = 0 } = this.containerRef?.current || {}; if (clientWidth !== width) { this.setState({ width: clientWidth }); diff --git a/src/routes/components/charts/trendChart/trendChart.tsx b/src/routes/components/charts/trendChart/trendChart.tsx index 2869f75af..3543360a3 100644 --- a/src/routes/components/charts/trendChart/trendChart.tsx +++ b/src/routes/components/charts/trendChart/trendChart.tsx @@ -73,7 +73,7 @@ class TrendChartBase extends React.Component { public componentDidMount() { this.initDatum(); - this.observer = getResizeObserver(this.containerRef.current, this.handleResize); + this.observer = getResizeObserver(this.containerRef?.current, this.handleResize); } public componentDidUpdate(prevProps: TrendChartProps) { @@ -325,7 +325,7 @@ class TrendChartBase extends React.Component { private handleResize = () => { const { width } = this.state; - const { clientWidth = 0 } = this.containerRef.current || {}; + const { clientWidth = 0 } = this.containerRef?.current || {}; if (clientWidth !== width) { this.setState({ width: clientWidth }); diff --git a/src/routes/components/charts/usageChart/usageChart.tsx b/src/routes/components/charts/usageChart/usageChart.tsx index 74cb82b72..11964f4bb 100644 --- a/src/routes/components/charts/usageChart/usageChart.tsx +++ b/src/routes/components/charts/usageChart/usageChart.tsx @@ -69,7 +69,7 @@ class UsageChartBase extends React.Component { public componentDidMount() { this.initDatum(); - this.observer = getResizeObserver(this.containerRef.current, this.handleResize); + this.observer = getResizeObserver(this.containerRef?.current, this.handleResize); } public componentDidUpdate(prevProps: UsageChartProps) { @@ -262,7 +262,7 @@ class UsageChartBase extends React.Component { private handleResize = () => { const { width } = this.state; - const { clientWidth = 0 } = this.containerRef.current || {}; + const { clientWidth = 0 } = this.containerRef?.current || {}; if (clientWidth !== width) { this.setState({ width: clientWidth }); diff --git a/src/routes/details/components/pvcChart/pvcChart.tsx b/src/routes/details/components/pvcChart/pvcChart.tsx index 2da25ae18..c7af55c84 100644 --- a/src/routes/details/components/pvcChart/pvcChart.tsx +++ b/src/routes/details/components/pvcChart/pvcChart.tsx @@ -92,7 +92,7 @@ class PvcChartBase extends React.Component { }; public componentDidMount() { - this.observer = getResizeObserver(this.containerRef.current, this.handleResize); + this.observer = getResizeObserver(this.containerRef?.current, this.handleResize); this.updateReport(); } @@ -111,7 +111,7 @@ class PvcChartBase extends React.Component { private handleResize = () => { const { width } = this.state; - const { clientWidth = 0 } = this.containerRef.current || {}; + const { clientWidth = 0 } = this.containerRef?.current || {}; if (clientWidth !== width) { this.setState({ width: clientWidth }); diff --git a/src/routes/details/components/usageChart/usageChart.tsx b/src/routes/details/components/usageChart/usageChart.tsx index 528da7dac..f1070170d 100644 --- a/src/routes/details/components/usageChart/usageChart.tsx +++ b/src/routes/details/components/usageChart/usageChart.tsx @@ -67,7 +67,7 @@ class UsageChartBase extends React.Component { }; public componentDidMount() { - this.observer = getResizeObserver(this.containerRef.current, this.handleResize); + this.observer = getResizeObserver(this.containerRef?.current, this.handleResize); this.updateReport(); } @@ -86,7 +86,7 @@ class UsageChartBase extends React.Component { private handleResize = () => { const { width } = this.state; - const { clientWidth = 0 } = this.containerRef.current || {}; + const { clientWidth = 0 } = this.containerRef?.current || {}; if (clientWidth !== width) { this.setState({ width: clientWidth }); diff --git a/src/utils/chrome.tsx b/src/utils/chrome.tsx index b15ce6ba6..947b6e66a 100644 --- a/src/utils/chrome.tsx +++ b/src/utils/chrome.tsx @@ -32,7 +32,7 @@ export const withChrome = Component => { useLayoutEffect(() => { isOrgAdmin(auth).then(val => { - if (isMounted.current) { + if (isMounted?.current) { setOrgAdmin(val); setInitialized(true); } diff --git a/src/utils/hooks.ts b/src/utils/hooks.ts index e112965da..8d63aba19 100644 --- a/src/utils/hooks.ts +++ b/src/utils/hooks.ts @@ -30,7 +30,7 @@ export const useStateCallback = (initialState: T): [T, (state: T, cb?: (_stat useEffect(() => { // cb.current is `undefined` on initial render, // so we only invoke callback on state *updates* - if (cbRef.current) { + if (cbRef?.current) { cbRef.current(state); cbRef.current = undefined; // reset callback after execution }