From f87f7530435ce18db89b6d7f8233bc497cecbafd Mon Sep 17 00:00:00 2001
From: Dan Labrecque <dlabrecq@redhat.com>
Date: Sat, 28 Sep 2024 13:33:20 -0400
Subject: [PATCH] Check refs' current prop

---
 .../components/resourceTypeahead/resourceInput.tsx   | 12 ++++++------
 .../optimizationsBreakdownChart.tsx                  |  4 ++--
 src/utils/chrome.tsx                                 |  2 +-
 src/utils/hooks.ts                                   |  2 +-
 4 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/routes/components/resourceTypeahead/resourceInput.tsx b/src/routes/components/resourceTypeahead/resourceInput.tsx
index b7d22a46..75f935cf 100644
--- a/src/routes/components/resourceTypeahead/resourceInput.tsx
+++ b/src/routes/components/resourceTypeahead/resourceInput.tsx
@@ -50,7 +50,7 @@ const ResourceInput: React.FC<ResourceInputProps> = ({
 
   // apply focus to the text input
   const focusTextInput = () => {
-    textInputGroupRef.current.querySelector('input').focus();
+    textInputGroupRef?.current.querySelector('input').focus();
   };
 
   const getInputGroup = () => {
@@ -149,9 +149,9 @@ const ResourceInput: React.FC<ResourceInputProps> = ({
   // Close menu when a click occurs outside the menu or text input group
   const handleOnPopperClick = event => {
     if (
-      menuRef.current &&
-      !menuRef.current.contains(event.target) &&
-      !textInputGroupRef.current.contains(event.target)
+      menuRef?.current &&
+      !menuRef?.current.contains(event.target) &&
+      !textInputGroupRef?.current.contains(event.target)
     ) {
       setIsOpen(false);
     }
@@ -171,7 +171,7 @@ const ResourceInput: React.FC<ResourceInputProps> = ({
       case 'ArrowUp':
       case 'ArrowDown':
         // Allow focus on the menu and navigate using the arrow keys
-        if (menuRef.current) {
+        if (menuRef?.current) {
           const firstElement = menuRef.current.querySelector('li > button:not(:disabled)');
           (firstElement as any)?.focus();
         }
@@ -186,7 +186,7 @@ const ResourceInput: React.FC<ResourceInputProps> = ({
     <Popper
       trigger={getInputGroup()}
       popper={getMenu()}
-      appendTo={() => textInputGroupRef.current}
+      appendTo={() => textInputGroupRef?.current}
       isVisible={isOpen}
       onDocumentClick={handleOnPopperClick}
     />
diff --git a/src/routes/optimizations/optimizationsBreakdown/optimizationsBreakdownChart.tsx b/src/routes/optimizations/optimizationsBreakdown/optimizationsBreakdownChart.tsx
index e87a736c..521ac9af 100644
--- a/src/routes/optimizations/optimizationsBreakdown/optimizationsBreakdownChart.tsx
+++ b/src/routes/optimizations/optimizationsBreakdown/optimizationsBreakdownChart.tsx
@@ -279,7 +279,7 @@ const OptimizationsBreakdownChart: React.FC<OptimizationsBreakdownChartProps> =
   };
 
   const handleOnResize = () => {
-    const { clientWidth = 0 } = containerRef.current || {};
+    const { clientWidth = 0 } = containerRef?.current || {};
 
     if (clientWidth !== width) {
       setWidth(clientWidth);
@@ -400,7 +400,7 @@ const OptimizationsBreakdownChart: React.FC<OptimizationsBreakdownChartProps> =
   }, [limitData, requestData, usageData]);
 
   useEffect(() => {
-    const unobserve = getResizeObserver(containerRef.current, handleOnResize);
+    const unobserve = getResizeObserver(containerRef?.current, handleOnResize);
     return () => {
       if (unobserve) {
         unobserve();
diff --git a/src/utils/chrome.tsx b/src/utils/chrome.tsx
index b15ce6ba..947b6e66 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 4a3fe380..063a8654 100644
--- a/src/utils/hooks.ts
+++ b/src/utils/hooks.ts
@@ -26,7 +26,7 @@ export const useStateCallback = <T>(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
     }