Fix/archived comment detail

lang/default.json

@@ -1057,6 +1057,9 @@
   "N2IrpM": {
     "defaultMessage": "Confirm"
   },
+  "N8ISx8": {
+    "defaultMessage": "Oops! This comment has been deleted by author"
+  },
   "NAidKb": {
     "defaultMessage": "Notifications"
   },

lang/en.json

@@ -1057,6 +1057,9 @@
   "N2IrpM": {
     "defaultMessage": "Confirm"
   },
+  "N8ISx8": {
+    "defaultMessage": "Oops! This comment has been deleted by author"
+  },
   "NAidKb": {
     "defaultMessage": "Notifications"
   },

lang/zh-Hans.json

@@ -1057,6 +1057,9 @@
   "N2IrpM": {
     "defaultMessage": "确认"
   },
+  "N8ISx8": {
+    "defaultMessage": "Oops！该评论已被原作者删除"
+  },
   "NAidKb": {
     "defaultMessage": "通知"
   },

lang/zh-Hant.json

@@ -1057,6 +1057,9 @@
   "N2IrpM": {
     "defaultMessage": "確認"
   },
+  "N8ISx8": {
+    "defaultMessage": "Oops！該評論已被原作者刪除"
+  },
   "NAidKb": {
     "defaultMessage": "通知"
   },

src/components/CommentBeta/Content/index.tsx

@@ -61,6 +61,7 @@ const Content = ({
   const contentClasses = classNames({
     [styles.content]: true,
     [size ? styles[`size${capitalizeFirstLetter(size)}`] : '']: !!size,
+    [styles.inactive]: state === 'archived',
   })
 
   if (state === 'collapsed' || state === 'banned' || isBlocked) {
@@ -104,7 +105,7 @@ const Content = ({
 
   if (state === 'archived') {
     return (
-      <p className={`${contentClasses} inactive`}>
+      <p className={contentClasses}>
         <FormattedMessage
           defaultMessage="This {type} has been deleted by the author"
           id="fDdcbi"

src/components/CommentBeta/Content/styles.module.css

@@ -1,12 +1,6 @@
 .content {
   &.inactive {
-    @mixin flex-center-space-between;
-
     color: var(--color-grey);
-
-    & button {
-      margin: 0 0 0 var(--spacing-tight);
-    }
   }
 }
 

src/components/Notice/NoticeComment.tsx

@@ -1,7 +1,8 @@
 import gql from 'graphql-tag'
+import { FormattedMessage } from 'react-intl'
 
 import { toPath } from '~/common/utils'
-import { LinkWrapper } from '~/components'
+import { LinkWrapper, toast } from '~/components'
 import CommentContent from '~/components/Comment/Content'
 import { NoticeCommentFragment } from '~/gql/graphql'
 
@@ -54,16 +55,35 @@ const NoticeComment = ({
     return null
   }
 
+  if (comment.state === 'archived') {
+    return (
+      <button
+        onClick={() => {
+          toast.success({
+            message: (
+              <FormattedMessage
+                defaultMessage="Oops! This comment has been deleted by author"
+                id="N8ISx8"
+              />
+            ),
+          })
+        }}
+      >
+        <section>
+          <NoticeContentDigest content={comment.content || ''} />
+        </section>
+      </button>
+    )
+  }
   const path =
-    comment.state === 'active'
+    comment.state === 'active' || comment.state === 'collapsed'
       ? toPath({
           page: 'commentDetail',
           comment,
           article,
           circle,
         })
       : { href: '' }
-
   return (
     <LinkWrapper {...path}>
       <section>

src/views/ArticleDetail/Comments/CommentDetail/index.tsx

@@ -10,6 +10,7 @@ import { CommentDetailQuery } from '~/gql/graphql'
 
 import { Placeholder } from '../Placeholder'
 import { COMMENT_DETAIL } from './gql'
+import styles from './styles.module.css'
 
 const CommentDetail = () => {
   /**
@@ -110,7 +111,7 @@ const CommentDetail = () => {
   const comment = data?.node as ThreadCommentType
 
   return (
-    <section>
+    <section className={styles.container}>
       <ThreadCommentBeta
         comment={comment}
         type="article"

src/views/ArticleDetail/Comments/CommentDetail/styles.module.css

@@ -0,0 +1,5 @@
+.container {
+  @media (--sm-up) {
+    width: 22.5rem;
+  }
+}