Merge pull request #4701 from thematters/feat/update-bookmarked-arich…

…ived-article feat(Bookmarks): Update archived article styles
thematters · Aug 1, 2024 · c5eb0fb · c5eb0fb
2 parents dc69930 + c426e99
commit c5eb0fb
Show file tree

Hide file tree

Showing 8 changed files with 69 additions and 18 deletions.
diff --git a/lang/default.json b/lang/default.json
@@ -1205,6 +1205,9 @@
     "defaultMessage": "New followers",
     "description": "src/views/Me/Settings/Notifications/GeneralSettings/index.tsx"
   },
+  "Jmg5do": {
+    "defaultMessage": "Archived Work"
+  },
   "JpS59y": {
     "defaultMessage": "Accepted",
     "description": "src/views/Circle/Settings/ManageInvitation/Invites/index.tsx"

diff --git a/lang/en.json b/lang/en.json
@@ -1205,6 +1205,9 @@
     "defaultMessage": "New followers",
     "description": "src/views/Me/Settings/Notifications/GeneralSettings/index.tsx"
   },
+  "Jmg5do": {
+    "defaultMessage": "Archived Work"
+  },
   "JpS59y": {
     "defaultMessage": "Accepted",
     "description": "src/views/Circle/Settings/ManageInvitation/Invites/index.tsx"

diff --git a/lang/zh-Hans.json b/lang/zh-Hans.json
@@ -1205,6 +1205,9 @@
     "defaultMessage": "被追踪",
     "description": "src/views/Me/Settings/Notifications/GeneralSettings/index.tsx"
   },
+  "Jmg5do": {
+    "defaultMessage": "作品已归档"
+  },
   "JpS59y": {
     "defaultMessage": "已接受",
     "description": "src/views/Circle/Settings/ManageInvitation/Invites/index.tsx"

diff --git a/lang/zh-Hant.json b/lang/zh-Hant.json
@@ -1205,6 +1205,9 @@
     "defaultMessage": "被追蹤",
     "description": "src/views/Me/Settings/Notifications/GeneralSettings/index.tsx"
   },
+  "Jmg5do": {
+    "defaultMessage": "作品已封存"
+  },
   "JpS59y": {
     "defaultMessage": "已接受",
     "description": "src/views/Circle/Settings/ManageInvitation/Invites/index.tsx"

diff --git a/src/components/ArticleDigest/Feed/index.tsx b/src/components/ArticleDigest/Feed/index.tsx
@@ -29,6 +29,7 @@ export type ArticleDigestFeedControls = {
   hasCircle?: boolean
   hasAuthor?: boolean
   isFirstFold?: boolean
+  disabledArchived?: boolean
 }
 
 export type ArticleDigestFeedProps = {
@@ -52,6 +53,7 @@ const BaseArticleDigestFeed = ({
   onClickAuthor,
 
   isFirstFold = false,
+  disabledArchived = false,
 
   hasReadTime,
   hasDonationCount,
@@ -61,8 +63,9 @@ const BaseArticleDigestFeed = ({
 }: ArticleDigestFeedProps) => {
   const { author, summary } = article
   const isBanned = article.articleState === 'banned'
-  const cover = !isBanned ? article.cover : null
-  const cleanedSummary = isBanned ? '' : makeSummary(summary)
+  const isArchived = article.articleState === 'archived'
+  const cover = !isBanned && !isArchived ? article.cover : null
+  const cleanedSummary = isBanned && !isArchived ? '' : makeSummary(summary)
 
   const path = toPath({
     page: 'articleDetail',
@@ -98,6 +101,9 @@ const BaseArticleDigestFeed = ({
                     user={author}
                     avatarSize={20}
                     textSize={12}
+                    nameColor={
+                      author.status?.state === 'archived' ? 'grey' : undefined
+                    }
                     hasAvatar
                     hasDisplayName
                     onClick={onClickAuthor}
@@ -120,13 +126,16 @@ const BaseArticleDigestFeed = ({
                 textSize={16}
                 lineClamp={2}
                 onClick={onClick}
+                disabledArchived={disabledArchived}
               />
             </section>
           </section>
 
-          <LinkWrapper {...path} onClick={onClick}>
-            <p className={styles.description}>{cleanedSummary}</p>
-          </LinkWrapper>
+          {!(isArchived && disabledArchived) && (
+            <LinkWrapper {...path} onClick={onClick}>
+              <p className={styles.description}>{cleanedSummary}</p>
+            </LinkWrapper>
+          )}
 
           <Media greaterThan="sm">{footerActions}</Media>
         </section>

diff --git a/src/components/ArticleDigest/Title/index.tsx b/src/components/ArticleDigest/Title/index.tsx
@@ -4,7 +4,7 @@ import { FormattedMessage } from 'react-intl'
 
 import { TEST_ID } from '~/common/enums'
 import { capitalizeFirstLetter, toPath } from '~/common/utils'
-import { LinkWrapper, LinkWrapperProps } from '~/components'
+import { LinkWrapper, LinkWrapperProps, toast } from '~/components'
 import { ArticleDigestTitleArticleFragment } from '~/gql/graphql'
 
 import styles from './styles.module.css'
@@ -21,6 +21,7 @@ type ArticleDigestTitleProps = {
   textWeight?: ArticleDigestTitleTextWeight
   lineClamp?: boolean | 1 | 2 | 3
   is?: ArticleDigestTitleIs
+  disabledArchived?: boolean
 
   disabled?: boolean
   onClick?: () => void
@@ -52,6 +53,7 @@ export const ArticleDigestTitle = ({
   is = 'h2',
 
   disabled,
+  disabledArchived,
   onClick,
 
   ...restProps
@@ -63,6 +65,7 @@ export const ArticleDigestTitle = ({
     collectionId,
   })
   const isBanned = state === 'banned'
+  const isArchived = state === 'archived'
   const title = isBanned ? (
     <FormattedMessage
       defaultMessage="The article has been archived due to violation of terms"
@@ -77,9 +80,41 @@ export const ArticleDigestTitle = ({
     [styles[`font${capitalizeFirstLetter(textWeight)}`]]: !!textWeight,
     [styles.lineClamp]: !!lineClamp,
     [styles[`lineClampLine${lineClamp}`]]: lineClamp === 1 || lineClamp === 3,
+    [styles.archived]: isArchived && disabledArchived,
   })
   const isClickable = !disabled && !isBanned
 
+  const Title = () => (
+    <>
+      {is === 'h2' ? (
+        <h2 className={titleClasses}>{title}</h2>
+      ) : is === 'h3' ? (
+        <h3 className={titleClasses}>{title}</h3>
+      ) : is === 'h4' ? (
+        <h4 className={titleClasses}>{title}</h4>
+      ) : (
+        <h5 className={titleClasses}>{title}</h5>
+      )}
+    </>
+  )
+
+  if (isArchived && disabledArchived) {
+    return (
+      <section
+        role="button"
+        onClick={() => {
+          toast.success({
+            message: (
+              <FormattedMessage defaultMessage="Archived Work" id="Jmg5do" />
+            ),
+          })
+        }}
+      >
+        <Title />
+      </section>
+    )
+  }
+
   return (
     <LinkWrapper
       {...path}
@@ -89,17 +124,7 @@ export const ArticleDigestTitle = ({
       testId={TEST_ID.DIGEST_ARTICLE_TITLE}
       {...restProps}
     >
-      <>
-        {is === 'h2' ? (
-          <h2 className={titleClasses}>{title}</h2>
-        ) : is === 'h3' ? (
-          <h3 className={titleClasses}>{title}</h3>
-        ) : is === 'h4' ? (
-          <h4 className={titleClasses}>{title}</h4>
-        ) : (
-          <h5 className={titleClasses}>{title}</h5>
-        )}
-      </>
+      <Title />
     </LinkWrapper>
   )
 }

diff --git a/src/components/ArticleDigest/Title/styles.module.css b/src/components/ArticleDigest/Title/styles.module.css
@@ -52,3 +52,8 @@
 .lineClampLine3 {
   -webkit-line-clamp: 3;
 }
+
+.archived {
+  color: var(--color-grey);
+  cursor: pointer;
+}
diff --git a/src/views/Me/Bookmarks/index.tsx b/src/views/Me/Bookmarks/index.tsx
@@ -74,7 +74,7 @@ const BaseMeBookmarks = () => {
       <List>
         {edges.map(({ node, cursor }) => (
           <List.Item key={node.id}>
-            <ArticleDigestFeed article={node} />
+            <ArticleDigestFeed article={node} disabledArchived />
           </List.Item>
         ))}
       </List>