refactor(comments): with real data (#1158)

* refactor(article-thread): extract ReadableDate Comp

* refactor(comments): debug wip

* refactor(article): add align judage on fixedheader

* refactor(article): add align judage on fixedheader

* refactor(comment): debug emotion

* refactor(comments): debug emotion

* refactor(comment): emotion display make nice

* refactor(comment): comment sticker use real participants

* refactor(article-label): re-org code

* refactor(comments): replies with real data

* refactor(comments): indent & schema debug

* refactor(comments): fold/expand enhance

* refactor(comments): foldAll/expandAll done

* refactor(comments): mode switch

* refactor(comments): text adjust

* refactor(comments): text adjust

* refactor(comments): add DateDivider for timeline mode

* fix(footer): post particle layout

* refactor(comment): adjust reply bar

Author: mydearxym

package.json

@@ -160,7 +160,7 @@
     "jest": "26.2.2",
     "npm-run-all": "^4.1.1",
     "plop": "2.7.4",
-    "prettier": "2.2.1",
+    "prettier": "2.3.2",
     "pretty-quick": "^1.10.0",
     "react-test-renderer": "16.10.0",
     "shelljs": "0.8.4",

src/components/ArchivedSign/DetailPanel.tsx

@@ -11,7 +11,7 @@ const DetailPanel: FC<TProps> = ({ date }) => {
   return (
     <Wrapper>
       <Title>本帖已于 {date} 存档</Title>
-      <Text>存档后无法编辑，删除及评论。</Text>
+      <Text>存档后无法编辑，删除及讨论。</Text>
 
       <LinksWrapper>
         <Button size="tiny" ghost noBorder>

src/components/ArticleItemPrefixLabel/index.tsx

@@ -0,0 +1,28 @@
+/*
+ *
+ * ArticlePinLabel
+ *
+ */
+
+import { FC, memo } from 'react'
+
+import { buildLog } from '@/utils/logger'
+import { PinIcon } from './styles'
+
+/* eslint-disable-next-line */
+const log = buildLog('c:ArticlePinLabel:index')
+
+export type TProps = {
+  top?: number
+  left?: number
+  entry: {
+    isPinned?: boolean
+  }
+}
+const ArticlePinLabel: FC<TProps> = ({ entry, top = 24, left = -30 }) => {
+  if (entry.isPinned) return <PinIcon top={top} left={left} />
+
+  return null
+}
+
+export default memo(ArticlePinLabel)

src/components/ArticlePinLabel/index.tsx

@@ -0,0 +1,20 @@
+import styled from 'styled-components'
+
+import { theme } from '@/utils/themes'
+import css from '@/utils/css'
+import PinSVG from '@/icons/Pin'
+import { pixelAdd } from '@/utils/dom'
+
+type TPos = { top: number; left: number }
+
+export const PinIcon = styled(PinSVG)<TPos>`
+  fill: ${theme('thread.articleDigest')};
+  position: absolute;
+  ${css.size(18)};
+  top: ${({ top }) => pixelAdd(`${top}px`, -4)};
+  left: ${({ left }) => `${left}px`};
+  opacity: 0.8;
+  transform: rotate(-30deg);
+`
+
+export const holder = 1

src/components/ArticlePinLabel/styles/index.ts

@@ -1,9 +1,9 @@
 // import React from 'react'
 // import { shallow } from 'enzyme'
 
-// import ArticleItemPrefixLabel from '../index'
+// import ArticlePinLabel from '../index'
 
-describe('TODO <ArticleItemPrefixLabel />', () => {
+describe('TODO <ArticlePinLabel />', () => {
   it('Expect to have unit tests specified', () => {
     expect(true).toEqual(true)
   })

src/components/ArticleItemPrefixLabel/tests/index.test.ts renamed to src/components/ArticlePinLabel/tests/index.test.ts

@@ -4,15 +4,15 @@ import { useAccount } from '@/hooks'
 import { ReadedLabel } from './styles'
 import type { TProps } from './index'
 
-const ReadLabel: FC<TProps> = ({ entry, topOffset = '20px' }) => {
+const ReadLabel: FC<TProps> = ({ entry, top, left }) => {
   const { c11n } = useAccount()
   const { isLogin, markViewed } = c11n
 
   const { viewerHasViewed } = entry
 
   if (!isLogin) return null
   if (markViewed && viewerHasViewed) {
-    return <ReadedLabel topOffset={topOffset} />
+    return <ReadedLabel top={top} left={left} />
   }
 
   return null

src/components/ArticleItemPrefixLabel/ReadLabel.tsx renamed to src/components/ArticleReadLabel/ReadLabel.tsx

@@ -0,0 +1,39 @@
+/*
+ * ArticleReadLabel
+ */
+
+import { FC, memo } from 'react'
+
+import { buildLog } from '@/utils/logger'
+import { useAccount } from '@/hooks'
+
+import { ReadedLabel } from './styles'
+
+/* eslint-disable-next-line */
+const log = buildLog('c:ArticleReadLabel:index')
+
+export type TProps = {
+  top?: number
+  left?: number
+  entry: {
+    viewerHasViewed?: boolean
+    pin?: boolean
+  }
+}
+const ArticleReadLabel: FC<TProps> = ({ entry, top = 24, left = -30 }) => {
+  const { c11n } = useAccount()
+  const { isLogin, markViewed } = c11n
+
+  const { viewerHasViewed } = entry
+
+  if (entry.pin) return null
+  // return <ReadedLabel top={top} left={left} />
+  if (!isLogin) return null
+  if (markViewed && viewerHasViewed) {
+    return <ReadedLabel top={top} left={left} />
+  }
+
+  return null
+}
+
+export default memo(ArticleReadLabel)

src/components/ArticleReadLabel/index.tsx

@@ -5,32 +5,26 @@ import css from '@/utils/css'
 import PinSVG from '@/icons/Pin'
 import { pixelAdd } from '@/utils/dom'
 
-export const ReadedLabel = styled.div<{ topOffset: string }>`
+type TPos = { top: number; left: number }
+
+export const ReadedLabel = styled.div<TPos>`
   background: ${theme('thread.articleDigest')};
-  width: 8px;
-  height: 3px;
-  border-radius: 3px;
+  ${css.circle(8)};
   position: absolute;
-  top: ${({ topOffset }) => topOffset};
-  left: -30px;
+  top: ${({ top }) => `${top}px`};
+  left: ${({ left }) => `${left}px`};
   opacity: 0.5;
   ${css.media.mobile`
     left: -12px;
     font-size: 0.8rem;
   `};
 `
-export const PinIcon = styled(PinSVG)<{ top: string }>`
+export const PinIcon = styled(PinSVG)<TPos>`
   fill: ${theme('thread.articleDigest')};
   position: absolute;
   ${css.size(18)};
-  top: ${({ top }) => pixelAdd(top, -4)};
-  left: -35px;
+  top: ${({ top }) => pixelAdd(`${top}px`, -4)};
+  left: ${({ left }) => `${left}px`};
   opacity: 0.8;
   transform: rotate(-30deg);
-
-  ${css.media.mobile`
-    ${css.size(16)};
-    top: 35px;
-    left: -20px;
-  `};
 `

src/components/ArticleItemPrefixLabel/styles/index.ts renamed to src/components/ArticleReadLabel/styles/index.ts

@@ -0,0 +1,10 @@
+// import React from 'react'
+// import { shallow } from 'enzyme'
+
+// import ArticleReadLabel from '../index'
+
+describe('TODO <ArticleReadLabel />', () => {
+  it('Expect to have unit tests specified', () => {
+    expect(true).toEqual(true)
+  })
+})