fix: null pointer bug in HelpModal

Add null handling to OwnerBadge to allow for the optional submission of either the logo or the blurb. Set the loading state to be dependent on the presence of a logo.
newrelic · Sep 19, 2024 · 007cb80 · 007cb80
1 parent 2ffb353
commit 007cb80
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 24 deletions.
diff --git a/src/components/help-modal/index.js b/src/components/help-modal/index.js
@@ -11,9 +11,11 @@ const HelpModal = ({
   setModalOpen,
   about,
   urls,
-  ownerBadge
+  ownerBadge,
 }) => {
-  const [loadingBadge, setLoadingBadge] = useState(true);
+  const [loadingBadge, setLoadingBadge] = useState(
+    ownerBadge.logo ? true : false
+  );
 
   return (
     <Modal hidden={!isModalOpen} onClose={() => setModalOpen(false)}>
@@ -73,20 +75,20 @@ HelpModal.propTypes = {
     blurb: PropTypes.string.isRequired,
     moreInfo: PropTypes.shape({
       link: PropTypes.string.isRequired,
-      text: PropTypes.string.isRequired
-    })
+      text: PropTypes.string.isRequired,
+    }),
   }),
   urls: PropTypes.shape({
     docs: PropTypes.string,
     createIssue: PropTypes.string,
     createQuestion: PropTypes.string,
-    createFeature: PropTypes.string
+    createFeature: PropTypes.string,
   }),
-  ownerBadge: PropTypes.object
+  ownerBadge: PropTypes.object,
 };
 
 HelpModal.defaultProps = {
-  isModalOpen: false
+  isModalOpen: false,
 };
 
 export default HelpModal;
diff --git a/src/components/help-modal/owner-badge.js b/src/components/help-modal/owner-badge.js
@@ -13,26 +13,28 @@ const OwnerBadge = ({ logo, blurb, className, style, loading, setLoading }) => {
       style={getStyles(className, style, {
         marginTop: '10%',
         display: 'flex',
-        alignItems: 'center'
+        alignItems: 'center',
       })}
     >
-      <img
-        className={logo.className}
-        style={getStyles(logo.className, logo.style, {
-          height: '65px'
-        })}
-        src={logo.src}
-        alt={logo.alt}
-        onLoad={() => setLoading(false)}
-        onError={() => setLoading(false)}
-      />
-      {!loading && (
+      {logo && (
+        <img
+          className={logo.className}
+          style={getStyles(logo.className, logo.style, {
+            height: '65px',
+          })}
+          src={logo.src}
+          alt={logo.alt}
+          onLoad={() => setLoading(false)}
+          onError={() => setLoading(false)}
+        />
+      )}
+      {!loading && blurb && (
         <div
           className={blurb.className}
           style={getStyles(blurb.className, blurb.style, {
             display: 'flex',
             flexDirection: 'column',
-            alignItems: 'start'
+            alignItems: 'start',
           })}
         >
           <BlockText>{blurb.text}</BlockText>
@@ -48,21 +50,21 @@ OwnerBadge.propTypes = {
     src: PropTypes.string,
     alt: PropTypes.string,
     style: PropTypes.object,
-    className: PropTypes.string
+    className: PropTypes.string,
   }),
   blurb: PropTypes.shape({
     text: PropTypes.string,
     link: PropTypes.shape({
       text: PropTypes.string,
-      url: PropTypes.string
+      url: PropTypes.string,
     }),
     style: PropTypes.object,
-    className: PropTypes.string
+    className: PropTypes.string,
   }),
   style: PropTypes.object,
   className: PropTypes.string,
   loading: PropTypes.bool,
-  setLoading: PropTypes.func
+  setLoading: PropTypes.func,
 };
 
 export default OwnerBadge;