Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 1 commit into from
Nov 27, 2023
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion assets/am-news/components/AmNewsListItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
Expand Down
4 changes: 2 additions & 2 deletions assets/components/cards/render/LargePictureTextCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand Down
4 changes: 2 additions & 2 deletions assets/components/cards/render/MediaGalleryCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand Down
4 changes: 2 additions & 2 deletions assets/components/cards/render/TopNewsOneByOneCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand Down
8 changes: 4 additions & 4 deletions assets/components/cards/render/TopNewsTwoByTwoCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand All @@ -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);

Expand Down
2 changes: 1 addition & 1 deletion assets/interfaces/content.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
29 changes: 16 additions & 13 deletions assets/wire/utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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
}

/**
Expand All @@ -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;
Expand All @@ -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 : [];
}

Expand All @@ -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 {
Expand Down Expand Up @@ -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;
Expand Down
Loading