open-eats#11 Hide news carousel if there are none

ownrecipes · Feb 19, 2022 · 65d30bc · 65d30bc
1 parent 316e522
commit 65d30bc
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 15 deletions.
diff --git a/src/news/container/News.tsx b/src/news/container/News.tsx
@@ -45,22 +45,22 @@ const News: React.FC = () => {
     dispatch(NewsActions.load());
   }, [newsList]);
 
-  const carouselItems = newsList?.map(entry => (
+  const carouselItems = newsList?.filter(entry => entry.frontpage).map(entry => (
     <Carousel.Item key={entry.id}>
       {entry.image && <img className='d-block w-100' src={entry.image} alt={entry.title} />}
       <Carousel.Caption>
         <h2>{entry.title}</h2>
         <P>{entry.content}</P>
       </Carousel.Caption>
     </Carousel.Item>
-    ));
+  )) ?? [];
 
   return (
     <PageWrapper title={intl.messages['nav.home'] as string}>
       {news.pending === PendingState.LOADING && (
         <Loading />
       )}
-      {carouselItems != null && (
+      {carouselItems.length > 0 && (
         <Carousel controls={carouselItems.length > 1} indicators={carouselItems.length > 1}>
           {carouselItems}
         </Carousel>

diff --git a/src/news/store/types.ts b/src/news/store/types.ts
@@ -3,24 +3,27 @@ import ArrayReducerType from '../../common/store/ArrayReducerType';
 import { ACTION, GenericArrayReducerAction } from '../../common/store/ReduxHelper';
 
 export type NewsItemDto = {
-  id:      number;
-  image:   string;
-  title:   string;
-  content: string;
+  id:        number;
+  image:     string;
+  title:     string;
+  content:   string;
+  frontpage: boolean;
 }
 
 export type NewsItem = {
-  id:      number;
-  image:   string;
-  title:   string;
-  content: string;
+  id:        number;
+  image:     string;
+  title:     string;
+  content:   string;
+  frontpage: boolean;
 }
 
 export const toNewsItem = (dto: NewsItemDto): NewsItem => ({
-  id:      dto.id,
-  image:   dto.image,
-  title:   dto.title,
-  content: dto.content,
+  id:        dto.id,
+  image:     dto.image,
+  title:     dto.title,
+  content:   dto.content,
+  frontpage: dto.frontpage,
 });
 
 export const NEWS_STORE = '@@news';