Merge pull request #4980 from thematters/fix/ann-label

fix(campaign): correct article label for non-announcement

src/views/CampaignDetail/ArticleFeeds/MainFeed/gql.ts

@@ -21,6 +21,7 @@ export const CAMPAIGN_ARTICLES_PUBLIC = gql`
           edges {
             cursor
             featured
+            announcement
             node {
               id
               campaigns {

src/views/CampaignDetail/ArticleFeeds/MainFeed/index.tsx

@@ -49,17 +49,21 @@ const getArticleStage = (article: CampaignArticlesPublicQueryArticle) => {
   return stage
 }
 
-const getArticleStageName = (
+const getLabel = (
   article: CampaignArticlesPublicQueryArticle,
-  lang: string
+  lang: string,
+  announcement: boolean
 ) => {
   const stage = getArticleStage(article)
 
-  // announcement if nullish
-  if (!stage) {
+  if (announcement) {
     return <FormattedMessage defaultMessage="Announcement" id="Sj+TN8" />
   }
 
+  if (!stage) {
+    return ''
+  }
+
   return stage[
     `name${lang === 'en' ? 'En' : lang === 'zh-Hans' ? 'ZhHans' : 'ZhHant'}`
   ]
@@ -218,20 +222,22 @@ const MainFeed = ({ feedType, camapign }: MainFeedProps) => {
   return (
     <InfiniteScroll hasNextPage={pageInfo.hasNextPage} loadMore={loadMore} eof>
       <List>
-        {edges.map(({ node, featured }, i) => (
+        {edges.map(({ node, featured, announcement }, i) => (
           <List.Item key={`${feedType}:${i}`}>
             <ArticleDigestFeed
               article={node}
               label={
                 <>
-                  {(isAll || isFeatured) && (
+                  {(isAll ||
+                    isFeatured ||
+                    getLabel(node, lang, announcement)) && (
                     <span
                       className={[
                         styles.articleLabel,
-                        getArticleStage(node)?.id ? '' : styles.announcement,
+                        announcement ? styles.announcement : '',
                       ].join(' ')}
                     >
-                      {getArticleStageName(node, lang)}
+                      {getLabel(node, lang, announcement)}
                     </span>
                   )}
                   {!isFeatured && featured && <FeaturedLabel />}