fix UI error when there is an association with null value (#668)

assets/am-news/components/AmNewsListItem.tsx

@@ -92,7 +92,7 @@ class AmNewsListItem extends React.Component<any, any> {
             'time-label--stories': !isDataItem(item),
         });
         const picture = getPicture(item);
-        const thumbnailRendition = getThumbnailRendition(picture);
+        const thumbnailRendition = picture ? getThumbnailRendition(picture) : null;
 
 
         return (

assets/components/cards/render/LargePictureTextCard.tsx

@@ -7,8 +7,8 @@ import CardBody from './CardBody';
 import CardRow from './CardRow';
 import {ICardProps} from '../utils';
 
-const getPictureTextPanel = (item: IArticle, picture: IArticle, openItem: any, cardId: string, listConfig: IListConfig) => {
-    const rendition = getThumbnailRendition(picture);
+const getPictureTextPanel = (item: IArticle, picture: IArticle | null, openItem: any, cardId: string, listConfig: IListConfig) => {
+    const rendition = picture ? getThumbnailRendition(picture) : null;
     const imageUrl = rendition && rendition.href;
     const caption = rendition && getCaption(picture);
 

assets/components/cards/render/MediaGalleryCard.tsx

@@ -7,8 +7,8 @@ import CardRow from './CardRow';
 import {Embargo} from '../../../wire/components/fields/Embargo';
 import {ICardProps} from '../utils';
 
-const getMediaPanel = (item: IArticle, picture: IArticle, openItem: any, cardId: string) => {
-    const rendition = getThumbnailRendition(picture);
+const getMediaPanel = (item: IArticle, picture: IArticle | null, openItem: any, cardId: string) => {
+    const rendition = picture ? getThumbnailRendition(picture) : null;
     const imageUrl = rendition && rendition.href;
     const caption = rendition && getCaption(picture);
 

assets/components/cards/render/TopNewsOneByOneCard.tsx

@@ -6,8 +6,8 @@ import CardMeta from './CardMeta';
 import {Embargo} from '../../../wire/components/fields/Embargo';
 import {ICardProps} from '../utils';
 
-const getTopNewsPanel = (item: IArticle, picture: IArticle, openItem: any, cardId: string, listConfig: IListConfig) => {
-    const rendition = getThumbnailRendition(picture, true);
+const getTopNewsPanel = (item: IArticle, picture: IArticle | null, openItem: any, cardId: string, listConfig: IListConfig) => {
+    const rendition = picture ? getThumbnailRendition(picture, true) : null;
     const imageUrl = rendition && rendition.href;
     const caption = rendition && getCaption(picture);
 

assets/components/cards/render/TopNewsTwoByTwoCard.tsx

@@ -11,8 +11,8 @@ import CardMeta from './CardMeta';
 import CardBody from './CardBody';
 import {Embargo} from '../../../wire/components/fields/Embargo';
 
-const getTopNewsLeftPanel = (item: IArticle, picture: IArticle, openItem: any, cardId: string, listConfig: IListConfig) => {
-    const rendition = getThumbnailRendition(picture, true);
+const getTopNewsLeftPanel = (item: IArticle, picture: IArticle | null, openItem: any, cardId: string, listConfig: IListConfig) => {
+    const rendition = picture ? getThumbnailRendition(picture, true) : null;
     const imageUrl = rendition && rendition.href;
     const caption = rendition && getCaption(picture);
 
@@ -39,8 +39,8 @@ const getTopNewsLeftPanel = (item: IArticle, picture: IArticle, openItem: any, c
     );
 };
 
-const getTopNewsRightPanel = (item: IArticle, picture: IArticle, openItem: any, cardId: string, listConfig?: IListConfig): any => {
-    const rendition = getThumbnailRendition(picture);
+const getTopNewsRightPanel = (item: IArticle, picture: IArticle | null, openItem: any, cardId: string, listConfig?: IListConfig): any => {
+    const rendition = picture ? getThumbnailRendition(picture) : null;
     const imageUrl = rendition && rendition.href;
     const caption = rendition && getCaption(picture);
 

assets/interfaces/content.ts

@@ -15,7 +15,7 @@ export interface IArticle extends IResourceItem {
     type: IContentType;
     ancestors?: Array<IArticle['_id']>;
     nextversion?: IArticle['_id'];
-    associations?: {[key: string]: IArticle};
+    associations?: {[key: string]: IArticle | null};
     renditions?: {[key: string]: IRendition};
     slugline: string;
     headline: string;

assets/wire/utils.ts

@@ -35,22 +35,22 @@ export function getVideos(item: any) {
     return getRelatedItemsByType(item, 'video');
 }
 
-const isMedia = (item: any) => item.type === 'audio' || item.type === 'video';
+const isMedia = (item: IArticle) => item.type === 'audio' || item.type === 'video';
 
 /**
  *
  * @param {*} item
  */
-export function getItemMedia(item: any) {
+export function getItemMedia(item: IArticle) {
     if (isMedia(item)) {
         return [item];
     }
 
-    return Object.values(get(item, 'associations', {}) || {}).filter((assoc: any) => assoc != null && isMedia(assoc));
+    return Object.values(item.associations || {}).filter((assoc) => assoc != null && isMedia(assoc));
 }
 
-function getRelatedItemsByType(item: any, type: any) {
-    return item.type === type ? [item] : Object.values(get(item, 'associations', {}) || {}).filter((assoc: any) => get(assoc, 'type') === type);
+function getRelatedItemsByType(item: IArticle, type: string) {
+    return item.type === type ? [item] : Object.values(item.associations || {}).filter((assoc) => assoc?.type === type);
 }
 
 export function getFeatureMedia(item: IArticle): IArticle | null {
@@ -79,7 +79,7 @@ export function getOtherMedia(item: IArticle): Array<IArticle> | null {
             mediaItem != null &&
             ['video', 'audio'].includes(mediaItem.type)
         ))
-        .map((args) => args[1]);
+        .map((args) => args[1]) as IArticle[]; // it's filtering out null values in .filter
 }
 
 /**
@@ -90,12 +90,12 @@ export function getOtherMedia(item: IArticle): Array<IArticle> | null {
  * @param {Object} item
  * @return {Object}
  */
-export function getPicture(item: any) {
+export function getPicture(item: IArticle) {
     if (item.type === 'picture') {
         return item;
     }
 
-    const featured = get(item, 'associations.featuremedia');
+    const featured = item.associations?.featuremedia;
 
     if (featured != null && featured.type === 'picture') {
         return featured;
@@ -106,13 +106,13 @@ export function getPicture(item: any) {
 
 function getBodyPicture(item: IArticle): IArticle | null {
     const pictures = Object.values(item.associations ?? {})
-        .filter((association) => association.type === 'picture');
+        .filter((association) => association?.type === 'picture');
     return pictures.length ? pictures[0] : null;
 }
 
 export function getPictureList(item: IArticle): Array<IArticle> {
     const pictures = Object.values(item.associations ?? {})
-        .filter((association) => association.type === 'picture');
+        .filter((association) => association?.type === 'picture') as IArticle[];
     return pictures.length ? pictures : [];
 }
 
@@ -124,8 +124,9 @@ export function getPictureList(item: IArticle): Array<IArticle> {
  * @return {Object}
  */
 export function getThumbnailRendition(picture: IArticle, large?: boolean): IRendition | undefined {
-    const rendition = large ? 'renditions._newsroom_thumbnail_large' : 'renditions._newsroom_thumbnail';
-    return get(picture, rendition, get(picture, 'renditions.thumbnail'));
+    const rendition = large ? picture.renditions?._newsroom_thumbnail_large : picture.renditions?._newsroom_thumbnail;
+
+    return rendition ?? picture.renditions?.thumbnail;
 }
 
 export function getImageForList(item: IArticle): {item: IArticle, href: string} | undefined {
@@ -333,7 +334,9 @@ export function getContentTypes(item: IArticle): Set<IContentType> {
     contentTypes.add(item.type);
     Object.values(item.associations ?? {})
         .forEach((item) => {
-            contentTypes.add(item.type);
+            if (item != null) {
+                contentTypes.add(item.type);
+            }
         });
 
     return contentTypes;