From 8a3bf296e4470bc8cbdac97c1fa838d136a83dac Mon Sep 17 00:00:00 2001
From: robertu <4065233+robertu7@users.noreply.github.com>
Date: Wed, 28 Feb 2024 19:06:04 +0800
Subject: [PATCH] feat(article): add <MetaInfo> to revision

---
 lang/default.json                             |  9 +++
 lang/en.json                                  |  9 +++
 lang/zh-Hans.json                             |  9 +++
 lang/zh-Hant.json                             |  9 +++
 src/views/ArticleDetail/MetaInfo/gql.ts       |  8 ++
 src/views/ArticleDetail/MetaInfo/index.tsx    | 74 ++++++++++--------
 .../ArticleDetail/MetaInfo/styles.module.css  |  4 +
 src/views/ArticleDetail/Revision/gql.ts       | 21 +++++
 src/views/ArticleDetail/Revision/index.tsx    | 77 ++++++++++++++++---
 src/views/ArticleDetail/index.tsx             | 11 ++-
 10 files changed, 180 insertions(+), 51 deletions(-)

diff --git a/lang/default.json b/lang/default.json
index 08791bfae7..0f9b850f23 100644
--- 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
index b4139fd5ab..01dce3c91f 100644
--- 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
index c384a584a6..d8987b6025 100644
--- 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
index 90f92d482e..bcdb130b43 100644
--- 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
index e1f5c1f6b4..b362fc71b6 100644
--- 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
index 49bc852210..8e0d0b1c7a 100644
--- a/src/views/ArticleDetail/MetaInfo/index.tsx
+++ b/src/views/ArticleDetail/MetaInfo/index.tsx
@@ -8,13 +8,14 @@ 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'
@@ -22,20 +23,22 @@ 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
index ef9fd85c5b..048ba5fdee 100644
--- 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
index 76ce06bbc5..59e9d50fd4 100644
--- 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,6 +38,7 @@ const articleRevisionPublicFragment = gql`
     availableTranslations
     ...InfoHeaderArticle
     ...VersionsArticle
+    ...MetaInfoArticle
   }
   ${UserDigest.Rich.fragments.user.public}
   ${UserDigest.Rich.fragments.user.private}
@@ -44,6 +46,7 @@ const articleRevisionPublicFragment = gql`
   ${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
+        }
+      }
+    }
+  }
+`
diff --git a/src/views/ArticleDetail/Revision/index.tsx b/src/views/ArticleDetail/Revision/index.tsx
index 7ab1354f92..31726632e8 100644
--- a/src/views/ArticleDetail/Revision/index.tsx
+++ b/src/views/ArticleDetail/Revision/index.tsx
@@ -1,5 +1,7 @@
+import { useLazyQuery } from '@apollo/react-hooks'
 import dynamic from 'next/dynamic'
 import { useContext, useEffect, useState } from 'react'
+import { FormattedMessage } from 'react-intl'
 
 import { toGlobalId, toPath } from '~/common/utils'
 import {
@@ -7,12 +9,14 @@ import {
   EmptyLayout,
   Error,
   Head,
+  LanguageContext,
   Layout,
   Media,
   QueryError,
   Spinner,
   Throw404,
   Title,
+  toast,
   Translate,
   usePublicQuery,
   useRoute,
@@ -23,12 +27,13 @@ import {
   ArticleLatestVersionByNodeIdQuery,
   ArticleLatestVersionQuery,
   ArticleRevisionDetailPublicQuery,
+  ArticleRevisionTranslationQuery,
 } from '~/gql/graphql'
 
 import Content from '../Content'
 import CustomizedSummary from '../CustomizedSummary'
 import License from '../License'
-// import MetaInfo from '../MetaInfo'
+import MetaInfo from '../MetaInfo'
 import Placeholder from '../Placeholder'
 import StickyTopBanner from '../StickyTopBanner'
 import styles from '../styles.module.css'
@@ -38,6 +43,7 @@ import {
   ARTICLE_REVISION_DETAIL_PRIVATE,
   ARTICLE_REVISION_DETAIL_PUBLIC,
   ARTICLE_REVISION_DETAIL_PUBLIC_BY_NODE_ID,
+  ARTICLE_REVISION_TRANSLATION,
 } from './gql'
 import InfoHeader from './InfoHeader'
 import Versions from './Versions'
@@ -87,11 +93,54 @@ const BaseArticleDetailRevision = ({
     circle.isMember ||
     article.access.type === ArticleAccessType.Public
   )
+  const currVersion = (version = (
+    version.__typename === 'ArticleVersion' ? version : undefined
+  )!)
+
+  // translation
+  const [translated, setTranslate] = useState(false)
+  const originalLang = article.language
+  const { lang: preferredLang } = useContext(LanguageContext)
+  const canTranslate = !!(originalLang && originalLang !== preferredLang)
+  const [getTranslation, { data: translationData, loading: translating }] =
+    useLazyQuery<ArticleRevisionTranslationQuery>(ARTICLE_REVISION_TRANSLATION)
+
+  const translate = () => {
+    getTranslation({
+      variables: { version: currVersion.id, language: preferredLang },
+    })
+
+    toast.success({
+      message: (
+        <FormattedMessage
+          defaultMessage="Translating by Google..."
+          id="17K30q"
+        />
+      ),
+    })
+  }
+
+  const toggleTranslate = () => {
+    setTranslate(!translated)
 
-  version = (version.__typename === 'ArticleVersion' ? version : undefined)!
-  const title = article.title
-  const summary = version.summary
-  const content = version.contents.html
+    if (!translated) {
+      translate()
+    }
+  }
+
+  const {
+    title: translatedTitle,
+    summary: translatedSummary,
+    content: translatedContent,
+  } = (translationData?.version?.__typename === 'ArticleVersion' &&
+    translationData.version.translation) ||
+  {}
+  const title = translated && translatedTitle ? translatedTitle : article.title
+  const summary =
+    translated && translatedSummary ? translatedSummary : version.summary
+  const originalContent = version.contents.html
+  const content =
+    translated && translatedContent ? translatedContent : originalContent
 
   return (
     <Layout.Main aside={<Versions.Sidebar article={article} />}>
@@ -122,14 +171,14 @@ const BaseArticleDetailRevision = ({
         <section className={styles.title}>
           <Title type="article">{title}</Title>
 
-          {/* <MetaInfo
+          <MetaInfo
             article={article}
-            translated={false}
-            canTranslate={false}
-            toggleTranslate={() => {}} // TODO
+            version={version}
+            translated={translated}
+            canTranslate={canTranslate}
+            toggleTranslate={toggleTranslate}
             canReadFullContent={canReadFullContent}
-            disabled
-          /> */}
+          />
         </section>
 
         {article?.summaryCustomized && <CustomizedSummary summary={summary} />}
@@ -144,7 +193,11 @@ const BaseArticleDetailRevision = ({
 
         {!isSensitive && (
           <>
-            <Content articleId={article.id} content={content} />
+            <Content
+              articleId={article.id}
+              content={content}
+              translating={translating}
+            />
 
             {circle && !canReadFullContent && (
               <DynamicCircleWall circle={circle} />
diff --git a/src/views/ArticleDetail/index.tsx b/src/views/ArticleDetail/index.tsx
index 5e7a67f027..e2e90a7553 100644
--- a/src/views/ArticleDetail/index.tsx
+++ b/src/views/ArticleDetail/index.tsx
@@ -2,7 +2,7 @@ import { useLazyQuery } from '@apollo/react-hooks'
 import formatISO from 'date-fns/formatISO'
 import dynamic from 'next/dynamic'
 import { useContext, useEffect, useState } from 'react'
-import { useIntl } from 'react-intl'
+import { FormattedMessage, useIntl } from 'react-intl'
 import { Waypoint } from 'react-waypoint'
 
 import {
@@ -192,10 +192,9 @@ const BaseArticleDetail = ({
 
     toast.success({
       message: (
-        <Translate
-          zh_hant="正在透過 Google 翻譯..."
-          zh_hans="正在通过 Google 翻译..."
-          en="Translating by Google..."
+        <FormattedMessage
+          defaultMessage="Translating by Google..."
+          id="17K30q"
         />
       ),
     })
@@ -345,7 +344,7 @@ const BaseArticleDetail = ({
             canTranslate={canTranslate}
             toggleTranslate={toggleTranslate}
             canReadFullContent={canReadFullContent}
-            disabled={lock}
+            editable={!lock}
           />
         </section>