fix picture text card display error with missing picture (#672)

* fix picture text card display error with missing picture CPCN-488 * add missing types
superdesk · Nov 28, 2023 · 8200a35 · 8200a35
1 parent a40ca3f
commit 8200a35
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 6 deletions.
diff --git a/assets/components/cards/render/PictureTextCard.tsx b/assets/components/cards/render/PictureTextCard.tsx
@@ -4,19 +4,27 @@ import CardBody from './CardBody';
 import CardFooter from './CardFooter';
 import CardRow from './CardRow';
 import {ICardProps} from '../utils';
+import {IArticle, IListConfig} from 'interfaces';
 
-const getPictureTextPanel = (item: any, picture: any, openItem: any, withPictures: any, cardId: any, listConfig: any) => {
-    const rendition = withPictures && getThumbnailRendition(picture);
+const getPictureTextPanel = (
+    item: IArticle,
+    picture: IArticle | null,
+    openItem: ICardProps['openItem'],
+    withPictures: boolean,
+    cardId: ICardProps['cardId'],
+    listConfig: IListConfig,
+) => {
+    const rendition = withPictures && picture != null && getThumbnailRendition(picture);
     const imageUrl = rendition && rendition.href;
     const caption = rendition && getCaption(picture);
 
     return (<div key={item._id} className="col-sm-6 col-lg-4 col-xl-3 d-flex mb-4">
         <div className="card card--home" onClick={() => openItem(item, cardId)}>
-            {rendition &&
+            {(rendition && imageUrl) ? (
                 <div className="card-img-top-wrapper card-img-top-wrapper--aspect-16-9">
                     <img className="card-img-top" src={imageUrl} alt={caption} />
                 </div>
-            }
+            ) : null}
             <CardBody item={item} displayMeta={false} listConfig={listConfig} />
             <CardFooter
                 item={item}

diff --git a/assets/components/cards/utils.ts b/assets/components/cards/utils.ts
@@ -1,6 +1,6 @@
 import {memoize} from 'lodash';
 
-import {IListConfig} from 'interfaces';
+import {IArticle, IListConfig} from 'interfaces';
 
 import ConfigEvent from 'components/cards/edit/ConfigEvent';
 import ConfigExternalMedia from 'components/cards/edit/ConfigExternalMedia';
@@ -41,7 +41,7 @@ export interface ICardProps {
     items: Array<any>;
     title: string;
     id: string;
-    openItem: any;
+    openItem: (item: IArticle, cardId: string) => void;
     isActive: boolean;
     cardId: string;
     listConfig: IListConfig;