Merge pull request #109 from aso1124/help-modal

fix: null pointer bug in HelpModal
newrelic · Sep 20, 2024 · 9a29a94 · 9a29a94
2 parents 2ffb353 + 007cb80
commit 9a29a94
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;