Fix TypeError: Cannot read property 'name' of null (#2286)

Refactoring props structure, add back the safe navigator operator and add new unit tests References: CV2-6130
meedan · Feb 7, 2025 · a598541 · a598541
1 parent 7465d18
commit a598541
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 13 deletions.
diff --git a/src/app/components/media/MediaOrigin.js b/src/app/components/media/MediaOrigin.js
@@ -115,13 +115,9 @@ const getIconAndMessage = (origin, user) => {
   }
 };
 
-const MediaOrigin = ({
-  projectMedia: {
-    media_cluster_origin: origin,
-    media_cluster_origin_user: user = {},
-  } = {},
-}) => {
-  const { icon, message, tooltipMessage } = getIconAndMessage(origin, user.name);
+const MediaOrigin = ({ projectMedia }) => {
+  const { media_cluster_origin: origin, media_cluster_origin_user: user } = projectMedia;
+  const { icon, message, tooltipMessage } = getIconAndMessage(origin, user?.name);
 
   return (
     <Tooltip arrow title={tooltipMessage}>

diff --git a/src/app/components/media/MediaOrigin.test.js b/src/app/components/media/MediaOrigin.test.js
@@ -35,4 +35,9 @@ describe('<MediaOrigin />', () => {
     const wrapper = mountWithIntl(<MediaOrigin projectMedia={{ media_cluster_origin: 99, media_cluster_origin_user: { name: 'user' } }} />);
     expect(wrapper.find('FormattedMessage').length).toEqual(0);
   });
+
+  it('should not crash when media cluster origin and media cluster origin user are null', () => {
+    const wrapper = mountWithIntl(<MediaOrigin projectMedia={{ media_cluster_origin: null, media_cluster_origin_user: null }} />);
+    expect(wrapper.find('FormattedMessage').length).toEqual(0);
+  });
 });
diff --git a/src/app/components/media/MediaOriginBanner.js b/src/app/components/media/MediaOriginBanner.js
@@ -105,15 +105,14 @@ const getIconAndMessage = (origin, mediaClusterRelationship, user, originTimesta
   }
 };
 
-const MediaOriginBanner = ({
-  projectMedia: {
+const MediaOriginBanner = ({ projectMedia }) => {
+  const {
     media_cluster_origin: origin,
     media_cluster_origin_timestamp: originTimestamp,
-    media_cluster_origin_user: user = {},
+    media_cluster_origin_user: user,
     media_cluster_relationship: mediaClusterRelationship,
-  },
-}) => {
-  const { icon, message } = getIconAndMessage(origin, mediaClusterRelationship, user.name, originTimestamp);
+  } = projectMedia;
+  const { icon, message } = getIconAndMessage(origin, mediaClusterRelationship, user?.name, originTimestamp);
   return (
     <div style={{ marginBottom: '8px' }}>
       <Alert

diff --git a/src/app/components/media/MediaOriginBanner.test.js b/src/app/components/media/MediaOriginBanner.test.js
@@ -42,4 +42,9 @@ describe('<MediaOriginBanner />', () => {
     const wrapper = mountWithIntl(<MediaOriginBanner projectMedia={{ ...projectMedia, media_cluster_origin: 99 }} />);
     expect(wrapper.find('FormattedMessage').length).toEqual(0);
   });
+
+  it('should not crash when media cluster origin and media cluster origin user are null', () => {
+    const wrapper = mountWithIntl(<MediaOriginBanner projectMedia={{ media_cluster_origin: null, media_cluster_origin_user: null }} />);
+    expect(wrapper.find('FormattedMessage').length).toEqual(0);
+  });
 });