feat(article): add <MetaInfo> to revision

thematters · Feb 28, 2024 · 8a3bf29 · 8a3bf29
1 parent 1393c8c
commit 8a3bf29
Show file tree

Hide file tree

Showing 10 changed files with 180 additions and 51 deletions.
diff --git a/lang/default.json b/lang/default.json
@@ -139,6 +139,9 @@
     "defaultMessage": "Article successfully published. Share it on different platforms to receive more likes and donations!",
     "description": "src/views/Me/DraftDetail/PublishState/PublishedState.tsx"
   },
+  "17K30q": {
+    "defaultMessage": "Translating by Google..."
+  },
   "1COpAA": {
     "defaultMessage": "Failed",
     "description": "src/components/Transaction/State/index.tsx"
@@ -2161,6 +2164,9 @@
   "tio9Gt": {
     "defaultMessage": "IPFS"
   },
+  "twEps9": {
+    "defaultMessage": "published"
+  },
   "tzq2+W": {
     "defaultMessage": "Send",
     "description": "src/views/Circle/Settings/ManageInvitation/AddInvitationDialog/PreSend.tsx"
@@ -2200,6 +2206,9 @@
   "uw32VR": {
     "defaultMessage": "tutorial"
   },
+  "ux4p3j": {
+    "defaultMessage": "published on"
+  },
   "v6YjIn": {
     "defaultMessage": "Account",
     "description": "src/components/Forms/WalletAuthForm/Select.tsx"

diff --git a/lang/en.json b/lang/en.json
@@ -139,6 +139,9 @@
     "defaultMessage": "Article successfully published. Share it on different platforms to receive more likes and donations!",
     "description": "src/views/Me/DraftDetail/PublishState/PublishedState.tsx"
   },
+  "17K30q": {
+    "defaultMessage": "Translating by Google..."
+  },
   "1COpAA": {
     "defaultMessage": "Failed",
     "description": "src/components/Transaction/State/index.tsx"
@@ -2161,6 +2164,9 @@
   "tio9Gt": {
     "defaultMessage": "IPFS"
   },
+  "twEps9": {
+    "defaultMessage": " published"
+  },
   "tzq2+W": {
     "defaultMessage": "Send",
     "description": "src/views/Circle/Settings/ManageInvitation/AddInvitationDialog/PreSend.tsx"
@@ -2200,6 +2206,9 @@
   "uw32VR": {
     "defaultMessage": "tutorial"
   },
+  "ux4p3j": {
+    "defaultMessage": " published on"
+  },
   "v6YjIn": {
     "defaultMessage": "Account",
     "description": "src/components/Forms/WalletAuthForm/Select.tsx"

diff --git a/lang/zh-Hans.json b/lang/zh-Hans.json
@@ -139,6 +139,9 @@
     "defaultMessage": "作品发布成功，快把作品分享到不同渠道，吸引更多人为你拍手！",
     "description": "src/views/Me/DraftDetail/PublishState/PublishedState.tsx"
   },
+  "17K30q": {
+    "defaultMessage": "正在通过 Google 翻译..."
+  },
   "1COpAA": {
     "defaultMessage": "失败",
     "description": "src/components/Transaction/State/index.tsx"
@@ -2161,6 +2164,9 @@
   "tio9Gt": {
     "defaultMessage": "分布式入口"
   },
+  "twEps9": {
+    "defaultMessage": "更新"
+  },
   "tzq2+W": {
     "defaultMessage": "寄出邀请",
     "description": "src/views/Circle/Settings/ManageInvitation/AddInvitationDialog/PreSend.tsx"
@@ -2200,6 +2206,9 @@
   "uw32VR": {
     "defaultMessage": "教学指南"
   },
+  "ux4p3j": {
+    "defaultMessage": "更新于"
+  },
   "v6YjIn": {
     "defaultMessage": "账户",
     "description": "src/components/Forms/WalletAuthForm/Select.tsx"

diff --git a/lang/zh-Hant.json b/lang/zh-Hant.json
@@ -139,6 +139,9 @@
     "defaultMessage": "作品發布成功，快把作品分享到不同渠道，吸引更多人為你拍手！",
     "description": "src/views/Me/DraftDetail/PublishState/PublishedState.tsx"
   },
+  "17K30q": {
+    "defaultMessage": "正在透過 Google 翻譯..."
+  },
   "1COpAA": {
     "defaultMessage": "失敗",
     "description": "src/components/Transaction/State/index.tsx"
@@ -2161,6 +2164,9 @@
   "tio9Gt": {
     "defaultMessage": "分佈式入口"
   },
+  "twEps9": {
+    "defaultMessage": "更新"
+  },
   "tzq2+W": {
     "defaultMessage": "寄出邀請",
     "description": "src/views/Circle/Settings/ManageInvitation/AddInvitationDialog/PreSend.tsx"
@@ -2200,6 +2206,9 @@
   "uw32VR": {
     "defaultMessage": "教學指南"
   },
+  "ux4p3j": {
+    "defaultMessage": "更新於"
+  },
   "v6YjIn": {
     "defaultMessage": "帳戶",
     "description": "src/components/Forms/WalletAuthForm/Select.tsx"

diff --git a/src/views/ArticleDetail/MetaInfo/gql.ts b/src/views/ArticleDetail/MetaInfo/gql.ts
@@ -10,10 +10,18 @@ export const fragments = {
       language
       slug
       mediaHash
+      revisedAt
+      createdAt
       author {
         id
         userName
       }
     }
   `,
+  articleVersion: gql`
+    fragment MetaInfoArticleVersion on ArticleVersion {
+      id
+      createdAt
+    }
+  `,
 }
diff --git a/src/views/ArticleDetail/MetaInfo/index.tsx b/src/views/ArticleDetail/MetaInfo/index.tsx
@@ -8,34 +8,37 @@ import {
   DateTime,
   DotDivider,
   IconEdit16,
-  Media,
   TextIcon,
-  Translate,
   UserDigest,
   ViewerContext,
 } from '~/components'
-import { MetaInfoArticleFragment } from '~/gql/graphql'
+import {
+  MetaInfoArticleFragment,
+  MetaInfoArticleVersionFragment,
+} from '~/gql/graphql'
 
 import { fragments } from './gql'
 import styles from './styles.module.css'
 import TranslationButton from './TranslationButton'
 
 type MetaInfoProps = {
   article: MetaInfoArticleFragment
+  version?: MetaInfoArticleVersionFragment
   translated: boolean
   canTranslate: boolean
   toggleTranslate: () => any
   canReadFullContent: boolean
-  disabled: boolean
+  editable?: boolean
 }
 
 const MetaInfo = ({
   article,
+  version,
   translated,
   canTranslate,
   toggleTranslate,
   canReadFullContent,
-  disabled,
+  editable,
 }: MetaInfoProps) => {
   const viewer = useContext(ViewerContext)
   const authorId = article.author.id
@@ -45,41 +48,45 @@ const MetaInfo = ({
 
   return (
     <section className={styles.info}>
-      <Media at="sm">
-        {/* TODO: Confirm display word length with product */}
-        <section className={styles.author}>
-          <UserDigest.Plain user={article.author} />
-          <section className={styles.dot}>
-            <DotDivider />
-          </section>
+      {/* TODO: Confirm display word length with product */}
+      <section className={styles.author}>
+        <UserDigest.Plain user={article.author} />
+        <section className={styles.dot}>
+          <DotDivider />
         </section>
-      </Media>
+      </section>
 
       <section className={styles.time}>
         <DateTime
-          date={article.revisedAt ? article.revisedAt : article.createdAt}
+          date={version?.createdAt || article.revisedAt || article.createdAt}
           size="xs"
           color="greyDarker"
         />
-        <span className={styles.edited}>
-          <Translate zh_hant="更新於" zh_hans="更新于" en=" published on" />
+        <span>
+          {version?.createdAt ? (
+            <FormattedMessage defaultMessage=" published" id="twEps9" />
+          ) : (
+            <FormattedMessage defaultMessage=" published on" id="ux4p3j" />
+          )}
         </span>
       </section>
 
-      <Button
-        textColor="black"
-        textActiveColor="greyDarker"
-        href={
-          toPath({
-            page: 'articleRevision',
-            article,
-          }).href
-        }
-      >
-        <TextIcon size="xs">
-          <FormattedMessage defaultMessage="IPFS" id="tio9Gt" />
-        </TextIcon>
-      </Button>
+      {!version && (
+        <Button
+          textColor="black"
+          textActiveColor="greyDarker"
+          href={
+            toPath({
+              page: 'articleRevision',
+              article,
+            }).href
+          }
+        >
+          <TextIcon size="xs">
+            <FormattedMessage defaultMessage="IPFS" id="tio9Gt" />
+          </TextIcon>
+        </Button>
+      )}
 
       {canReadFullContent && (
         <>
@@ -96,7 +103,8 @@ const MetaInfo = ({
               />
             </>
           )}
-          {isAuthor && (
+
+          {isAuthor && !version && (
             <>
               <section className={styles.dot}>
                 <DotDivider />
@@ -106,11 +114,11 @@ const MetaInfo = ({
                 textColor="black"
                 textActiveColor="greyDarker"
                 href={
-                  !disabled
+                  editable
                     ? `${href}?${URL_QS.MODE_EDIT.key}=${URL_QS.MODE_EDIT.value}`
                     : undefined
                 }
-                disabled={disabled}
+                disabled={!editable}
               >
                 <TextIcon icon={<IconEdit16 />} size="xs">
                   <FormattedMessage

diff --git a/src/views/ArticleDetail/MetaInfo/styles.module.css b/src/views/ArticleDetail/MetaInfo/styles.module.css
@@ -11,6 +11,10 @@
     display: flex;
     margin-right: 0;
     color: var(--color-grey-darker);
+
+    @media (--sm-up) {
+      display: none;
+    }
   }
 
   & :global(button) {

diff --git a/src/views/ArticleDetail/Revision/gql.ts b/src/views/ArticleDetail/Revision/gql.ts
@@ -2,6 +2,7 @@ import gql from 'graphql-tag'
 
 import { UserDigest } from '~/components/UserDigest'
 
+import MetaInfo from '../MetaInfo'
 import { fragments as circleWallFragments } from '../Wall/Circle/gql'
 import InfoHeader from './InfoHeader'
 import Versions from './Versions'
@@ -37,13 +38,15 @@ const articleRevisionPublicFragment = gql`
     availableTranslations
     ...InfoHeaderArticle
     ...VersionsArticle
+    ...MetaInfoArticle
   }
   ${UserDigest.Rich.fragments.user.public}
   ${UserDigest.Rich.fragments.user.private}
   ${circleWallFragments.circle.public}
   ${circleWallFragments.circle.private}
   ${InfoHeader.fragments.article}
   ${Versions.fragments.article}
+  ${MetaInfo.fragments.article}
 `
 
 const articleVersionFragment = gql`
@@ -58,8 +61,10 @@ const articleVersionFragment = gql`
       html
     }
     ...InfoHeaderArticleVersion
+    ...MetaInfoArticleVersion
   }
   ${InfoHeader.fragments.articleVersion}
+  ${MetaInfo.fragments.articleVersion}
 `
 
 export const ARTICLE_REVISION_DETAIL_PUBLIC = gql`
@@ -151,3 +156,19 @@ export const ARTICLE_LATEST_VERSION_BY_NODE_ID = gql`
     }
   }
 `
+
+export const ARTICLE_REVISION_TRANSLATION = gql`
+  query ArticleRevisionTranslation($version: ID!, $language: UserLanguage!) {
+    version: node(input: { id: $version }) {
+      ... on ArticleVersion {
+        id
+        translation(input: { language: $language }) {
+          content
+          title
+          summary
+          language
+        }
+      }
+    }
+  }
+`