Merge branch 'develop' into feat/curation-vault-donation

.github/workflows/deploy.yml

@@ -31,6 +31,19 @@ jobs:
           node-version: '18'
           cache: 'npm'
 
+      - name: Setup rclone
+        if: github.base_ref == 'develop' || github.base_ref == 'master'
+        uses: AnimMouse/setup-rclone@v1
+        with:
+          rclone_config: |
+            [r2]
+            type = s3
+            provider = Cloudflare
+            access_key_id = ${{ secrets.RCLONE_CONFIG_R2_ACCESS_KEY_ID }}
+            secret_access_key = ${{ secrets.RCLONE_CONFIG_R2_SECRET_ACCESS_KEY }}
+            endpoint = ${{ secrets.RCLONE_CONFIG_R2_ENDPOINT }}
+          disable_base64: true
+
       - name: Install Dependencies
         run: npm ci
 
@@ -84,15 +97,7 @@ jobs:
 
       - name: Upload Assets (develop - R2)
         if: github.base_ref == 'develop'
-        uses: andreiio/rclone-action@v1
-        env:
-          RCLONE_CONFIG_R2_TYPE: s3
-          RCLONE_CONFIG_R2_PROVIDER: Cloudflare
-          RCLONE_CONFIG_R2_ACCESS_KEY_ID: ${{ secrets.RCLONE_CONFIG_R2_ACCESS_KEY_ID }}
-          RCLONE_CONFIG_R2_SECRET_ACCESS_KEY: ${{ secrets.RCLONE_CONFIG_R2_SECRET_ACCESS_KEY }}
-          RCLONE_CONFIG_R2_ENDPOINT: ${{ secrets.RCLONE_CONFIG_R2_ENDPOINT }}
-        with:
-          args: sync .next/static r2:matters-assets-next-develop/_next/static -P
+        run: rclone sync .next/static r2:matters-assets-next-develop/_next/static -P
 
       - name: Deploy to EB (develop)
         if: github.base_ref == 'develop'
@@ -111,15 +116,7 @@ jobs:
 
       - name: Upload Assets (production - R2)
         if: github.base_ref == 'master'
-        uses: andreiio/rclone-action@v1
-        env:
-          RCLONE_CONFIG_R2_TYPE: s3
-          RCLONE_CONFIG_R2_PROVIDER: Cloudflare
-          RCLONE_CONFIG_R2_ACCESS_KEY_ID: ${{ secrets.RCLONE_CONFIG_R2_ACCESS_KEY_ID }}
-          RCLONE_CONFIG_R2_SECRET_ACCESS_KEY: ${{ secrets.RCLONE_CONFIG_R2_SECRET_ACCESS_KEY }}
-          RCLONE_CONFIG_R2_ENDPOINT: ${{ secrets.RCLONE_CONFIG_R2_ENDPOINT }}
-        with:
-          args: sync .next/static r2:matters-assets-next/_next/static -P
+        run: rclone sync .next/static r2:matters-assets-next/_next/static -P
 
       - name: Deploy to EB (production)
         if: github.base_ref == 'master'

lang/zh-Hans.json

@@ -2784,7 +2784,7 @@
     "description": "src/components/Forms/CreateCircleForm/Profile.tsx"
   },
   "m1wKuC": {
-    "defaultMessage": "参与七日书活动"
+    "defaultMessage": "参与活动"
   },
   "m4GG4b": {
     "defaultMessage": "删除选集"

lang/zh-Hant.json

@@ -2784,7 +2784,7 @@
     "description": "src/components/Forms/CreateCircleForm/Profile.tsx"
   },
   "m1wKuC": {
-    "defaultMessage": "參與七日書活動"
+    "defaultMessage": "參與活動"
   },
   "m4GG4b": {
     "defaultMessage": "刪除選集"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "matters-web",
-  "version": "5.7.0",
+  "version": "5.7.1",
   "description": "codebase of Matters' website",
   "author": "Matters <hi@matters.town>",
   "engines": {
@@ -32,7 +32,7 @@
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "prepare": "husky install",
-    "vercel-build": "set -xe; npm run gen:type && if [[ \"$NEXT_PUBLIC_VERCEL_GIT_COMMIT_REF\" =~ release/* ]] ; then cp -va .env.prod .env.local ; echo 'NEXT_PUBLIC_SITE_DOMAIN=web-next.matters.town' | tee -a .env.local; else cp -va .env.dev .env.local ; echo 'NEXT_PUBLIC_SITE_DOMAIN=web-dev.matters.town' | tee -a .env.local ; fi && { echo 'NEXT_PUBLIC_NEXT_ASSET_DOMAIN='; echo 'NEXT_PUBLIC_ADMIN_VIEW=true'; } | tee -a .env.local && npm run build",
+    "vercel-build": "set -xe; if [[ \"$NEXT_PUBLIC_VERCEL_GIT_COMMIT_REF\" =~ release/* ]] ; then npm run gen:type:prod && cp -va .env.prod .env.local ; echo 'NEXT_PUBLIC_SITE_DOMAIN=web-next.matters.town' | tee -a .env.local; else npm run gen:type && cp -va .env.dev .env.local ; echo 'NEXT_PUBLIC_SITE_DOMAIN=web-dev.matters.town' | tee -a .env.local ; fi && { echo 'NEXT_PUBLIC_NEXT_ASSET_DOMAIN='; echo 'NEXT_PUBLIC_ADMIN_VIEW=true'; } | tee -a .env.local && npm run build",
     "i18n:extract": "formatjs extract 'src/**/*.ts*' --ignore='**/*.d.ts' --id-interpolation-pattern '[sha512:contenthash:base64:6]' --out-file lang/default.json",
     "i18n:generate": "node bin/i18nGenerate.js",
     "i18n:compile": "formatjs compile-folder --ast lang compiled-lang",

src/common/utils/route.ts

@@ -94,6 +94,7 @@ type ToPathArgs =
       campaign: CampaignArgs
       stage?: CampaignStageArgs
       featured?: boolean
+      announcement?: boolean
     }
   | {
       page: 'userProfile' | 'userCollections'
@@ -247,7 +248,7 @@ export const toPath = (
         href = `${href}?type=${args.stage.id}`
       } else if (args.featured) {
         href = `${href}?type=featured`
-      } else {
+      } else if (args.announcement) {
         href = `${href}?type=announcement`
       }
       break

src/components/Editor/BottomBar/MobileSettingsDialog/index.tsx

@@ -63,7 +63,7 @@ const BaseMobileSettingsDialog = ({
 
         <Dialog.Content noSpacing>
           {/* campaign */}
-          {campaigns && selectedCampaign && editCampaign && (
+          {campaigns && campaigns.length > 0 && editCampaign && (
             <section className={styles.campaign}>
               <h3 className={styles.title}>
                 <FormattedMessage

src/components/Editor/TagCustomStagingArea/RecommendedTags/index.tsx

@@ -7,7 +7,7 @@ import { EditorRecommendedTagsQuery } from '~/gql/graphql'
 import styles from './styles.module.css'
 
 type EditorRecommendedTagsUserTagsEdgesNode = NonNullable<
-  NonNullable<EditorRecommendedTagsQuery['user']>['tags']['edges']
+  NonNullable<EditorRecommendedTagsQuery['viewer']>['tags']['edges']
 >[0]['node'] & { __typename: 'Tag' }
 
 type RecommendedTagsProps = {

src/components/Editor/TagCustomStagingArea/SelectedTags/index.tsx

@@ -5,7 +5,7 @@ import { EditorRecommendedTagsQuery } from '~/gql/graphql'
 import styles from './styles.module.css'
 
 type EditorRecommendedTagsUserTagsEdgesNode = NonNullable<
-  NonNullable<EditorRecommendedTagsQuery['user']>['tags']['edges']
+  NonNullable<EditorRecommendedTagsQuery['viewer']>['tags']['edges']
 >[0]['node'] & { __typename: 'Tag' }
 
 type SelectedTagsProps = {

src/components/Editor/TagCustomStagingArea/gql.ts

@@ -3,8 +3,8 @@ import gql from 'graphql-tag'
 import { ListTag } from '~/components/Tag'
 
 export const EDITOR_RECOMMENDED_TAGS = gql`
-  query EditorRecommendedTags($userName: String!) {
-    user(input: { userName: $userName }) {
+  query EditorRecommendedTags {
+    viewer {
       id
       tags(input: { first: 10 }) {
         edges {

src/components/Editor/TagCustomStagingArea/index.tsx

@@ -1,8 +1,8 @@
+import { useQuery } from '@apollo/react-hooks'
 import _uniqBy from 'lodash/uniqBy'
-import { useContext } from 'react'
 
 import { MAX_ARTICLE_TAG_LENGTH } from '~/common/enums'
-import { SpinnerBlock, usePublicQuery, ViewerContext } from '~/components'
+import { SpinnerBlock } from '~/components'
 import { SelectTag } from '~/components/SearchSelect/SearchingArea'
 import { CustomStagingAreaProps } from '~/components/SearchSelect/StagingArea'
 import { EditorRecommendedTagsQuery } from '~/gql/graphql'
@@ -14,7 +14,7 @@ import styles from './styles.module.css'
 
 type EditorRecommendedTagsUserTagsEdgesNode = Required<
   NonNullable<
-    NonNullable<EditorRecommendedTagsQuery['user']>['tags']['edges']
+    NonNullable<EditorRecommendedTagsQuery['viewer']>['tags']['edges']
   >[0]['node']
 >
 
@@ -24,21 +24,16 @@ const TagCustomStagingArea = ({
   hint,
   toStagingArea,
 }: CustomStagingAreaProps) => {
-  const viewer = useContext(ViewerContext)
-
   /**
    * Data Fetching
    */
   // public data
-  const { data, loading } = usePublicQuery<EditorRecommendedTagsQuery>(
-    EDITOR_RECOMMENDED_TAGS,
-    {
-      variables: { userName: viewer.userName },
-    }
+  const { data, loading } = useQuery<EditorRecommendedTagsQuery>(
+    EDITOR_RECOMMENDED_TAGS
   )
 
   // recommended tags
-  const userTagsEdges = data?.user?.tags.edges || []
+  const userTagsEdges = data?.viewer?.tags.edges || []
 
   let recommendedTags = [...userTagsEdges]?.map((edge) => edge.node)
   // remove duplicated tags

src/components/Hook/useReadTimer.ts

@@ -25,7 +25,7 @@ export const useReadTimer = ({ articleId, container }: Props) => {
     }, 3000)
 
     const storeReadTime = () => {
-      if (articleId && readTimer?.current)
+      if (articleId && readTimer)
         analytics.trackEvent('read_time', {
           articleId,
           time: readTimer.current,

src/views/ArticleDetail/Edit/Hooks/useCampaignState.ts

@@ -22,7 +22,7 @@ export const useCampaignState = (article: Article) => {
   })
 
   const [campaign, setCampaign] = useState<ArticleCampaignInput | undefined>(
-    initialSelectedCampaign?.id && initialSelectedStage
+    initialSelectedCampaign?.id
       ? {
           campaign: initialSelectedCampaign.id,
           stage: initialSelectedStage,

src/views/ArticleDetail/Header/gql.ts

@@ -13,6 +13,9 @@ export const fragments = {
             nameZhHant: name(input: { language: zh_hant })
             nameZhHans: name(input: { language: zh_hans })
             nameEn: name(input: { language: en })
+            announcements {
+              id
+            }
           }
         }
         stage {

src/views/ArticleDetail/Header/index.tsx

@@ -22,6 +22,9 @@ const Header = ({ article }: HeaderProps) => {
   const campaign = article.campaigns[0]?.campaign
   const campaignStage = article.campaigns[0]?.stage
   const { lang } = useContext(LanguageContext)
+  const isAnnouncement = article.campaigns[0]?.campaign?.announcements?.some(
+    (announcement: { id: string }) => announcement.id === article.id
+  )
 
   return (
     <section className={styles.header}>
@@ -36,6 +39,7 @@ const Header = ({ article }: HeaderProps) => {
                 page: 'campaignDetail',
                 campaign,
                 stage: campaignStage || undefined,
+                announcement: isAnnouncement,
               }).href
             }
             onClick={() => {

src/views/CampaignDetail/Apply/Button/index.tsx

@@ -34,7 +34,8 @@ const ApplyCampaignButton = ({
   const isRejected = applicationState === 'rejected'
   const isNotApplied = !applicationState
   const isAppliedDuringPeriod =
-    appliedAt && new Date(appliedAt) <= new Date(appEnd)
+    (appliedAt && appEnd && new Date(appliedAt) <= new Date(appEnd)) ||
+    (appliedAt && !appEnd)
   const isApplicationStarted = now >= new Date(appStart)
   const isActiveCampaign = campaign.state === 'active'
 

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 />}