refactor(comments): with real data

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/ArticlePinLabel/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/styles/index.ts

@@ -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/ArticleItemPrefixLabel/tests/index.test.ts → src/components/ArticlePinLabel/tests/index.test.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/ReadLabel.tsx → src/components/ArticleReadLabel/ReadLabel.tsx

@@ -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/ArticleReadLabel/index.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/ArticleItemPrefixLabel/styles/index.ts → src/components/ArticleReadLabel/styles/index.ts

@@ -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/ArticleReadLabel/tests/index.test.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)
+  })
+})

src/components/ArticlesFilter/DesktopView.tsx

@@ -5,14 +5,15 @@
  */
 
 import { FC, memo } from 'react'
-import dynamic from 'next/dynamic'
 
 import type { TArticleFilter, TResState } from '@/spec'
 
 import { TYPE, THREAD } from '@/constant'
 import { buildLog } from '@/utils/logger'
 // import { useViewing } from '@/hooks'
 
+import { LavaLampLoading } from '@/components/dynamic'
+
 import FilterButton from './FilterButton'
 import SelectedFilters from './SelectedFilters'
 import FilterResult from './FilterResult'
@@ -22,15 +23,6 @@ import { Wrapper, MainFilterWrapper } from './styles'
 /* eslint-disable-next-line */
 const log = buildLog('c:ArticlesFilter:index')
 
-const LavaLampLoading = dynamic(
-  () => import('@/components/Loading/LavaLampLoading'),
-  {
-    /* eslint-disable react/display-name */
-    loading: () => <div />,
-    ssr: false,
-  },
-)
-
 type TProps = {
   activeFilter: TArticleFilter
   onSelect: (filter: TArticleFilter) => void

src/components/ArticlesFilter/FilterPanel/RepoSortFilter.tsx

@@ -64,7 +64,7 @@ const RepoSortFilter: FC<TProps> = ({ activeFilter, onSelect }) => (
         active={activeFilter.sort === FILTER.MOST_COMMENTS}
         onClick={() => onSelect({ sort: FILTER.MOST_COMMENTS })}
       >
-        最多评论
+        最多讨论
       </SelectItem>
     </LeftAlignWrapper>
   </ColumnWrapper>

src/components/ArticlesFilter/FilterPanel/SortFilter.tsx

@@ -48,7 +48,7 @@ const SortFilter: FC<TProps> = ({ activeFilter, onSelect }) => (
       active={activeFilter.sort === FILTER.MOST_COMMENTS}
       onClick={() => onSelect({ sort: FILTER.MOST_COMMENTS })}
     >
-      最多评论
+      最多讨论
     </SelectItem>
   </ColumnWrapper>
 )

src/components/ArticlesFilter/SelectedFilters.tsx

@@ -15,7 +15,7 @@ const filterDict = {
   MOST_FAVORITES: '最多收藏',
   MOST_STARS: '最多点赞',
   MOST_VIEWS: '最多浏览',
-  MOST_COMMENTS: '最多评论',
+  MOST_COMMENTS: '最多讨论',
   MOST_WORDS: '字数最多',
   LEAST_WORDS: '字数最少',
   // repo

src/components/ArticleBody/FoldBox.tsx → src/components/ArtimentBody/FoldBox.tsx

@@ -5,21 +5,22 @@ import { Wrapper, Hint, FoldHint, ArrowIcon } from './styles/fold_box'
 
 type TProps = {
   fold: boolean
+  mode: 'article' | 'comment'
   onFold: () => void
   onExpand: () => void
 }
 
-const FoldBox: FC<TProps> = ({ fold, onFold, onExpand }) => {
+const FoldBox: FC<TProps> = ({ fold, onFold, onExpand, mode }) => {
   return (
     <Wrapper fold={fold} onClick={() => (fold ? onExpand() : onFold())}>
       {!fold && (
-        <FoldHint>
+        <FoldHint mode={mode}>
           折叠
           <ArrowIcon src={`${ICON}/shape/arrow-simple.svg`} reverse />
         </FoldHint>
       )}
       {fold && (
-        <Hint>
+        <Hint mode={mode}>
           展开全部
           <ArrowIcon src={`${ICON}/shape/arrow-simple.svg`} />
         </Hint>

src/components/ArticleBody/index.tsx → src/components/ArtimentBody/index.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/no-danger */
 /*
- * ArticleBody
+ * ArtimentBody
  */
 import { FC, memo, useRef, useState, useEffect } from 'react'
 
@@ -13,19 +13,21 @@ import { Br } from '@/components/Common'
 import { Wrapper, Body, HTML } from './styles'
 
 /* eslint-disable-next-line */
-const log = buildLog('c:ArticleBody:index')
+const log = buildLog('c:ArtimentBody:index')
 
 type TProps = {
   testid?: string
   document: TDocument
   // 超过多行就默认折叠
   initLineClampNum?: number
+  mode?: 'article' | 'comment'
 }
 
-const ArticleBody: FC<TProps> = ({
+const ArtimentBody: FC<TProps> = ({
   testid = 'article-body',
   document,
   initLineClampNum = 5,
+  mode = 'article',
 }) => {
   const bodyRef = useRef(null)
   const [fold, setFold] = useState(false)
@@ -61,6 +63,7 @@ const ArticleBody: FC<TProps> = ({
       {needFold ? (
         <FoldBox
           fold={fold}
+          mode={mode}
           onFold={() => {
             setLineClampNum(initLineClampNum)
             setFold(true)
@@ -71,10 +74,10 @@ const ArticleBody: FC<TProps> = ({
           }}
         />
       ) : (
-        <Br bottom={50} />
+        <Br bottom={mode === 'article' ? 50 : 15} />
       )}
     </Wrapper>
   )
 }
 
-export default memo(ArticleBody)
+export default memo(ArtimentBody)

src/components/ArticleBody/styles/fold_box.ts → src/components/ArtimentBody/styles/fold_box.ts

@@ -20,10 +20,10 @@ export const Wrapper = styled.div<{ fold: boolean }>`
 
   transition: all 0.2s;
 `
-export const Hint = styled.div`
+export const Hint = styled.div<{ mode: 'article' | 'comment' }>`
   ${css.flex('align-center')};
   color: #139c9e;
-  font-size: 15px;
+  font-size: ${({ mode }) => (mode === 'article' ? '15px' : '13px')};
   opacity: 0.8;
 
   ${Wrapper}:hover & {

src/components/ArticleBody/styles/index.ts → src/components/ArtimentBody/styles/index.ts

@@ -21,4 +21,5 @@ export const Body = styled.div<{ lineClampNum: number }>`
 `
 export const HTML = styled.div`
   color: ${theme('thread.articleTitle')};
+  opacity: 0.9;
 `

src/components/ArticleBody/tests/index.test.ts → src/components/ArtimentBody/tests/index.test.ts

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

src/components/AvatarsRow/MoreItem.tsx

@@ -36,7 +36,7 @@ const MoreItem: FC<TProps> = ({
           ) : (
             <StateInfoWrapper>
               <TotalCommentStateHint>
-                评论: <Focus>{total}</Focus>
+                讨论: <Focus>{total}</Focus>
               </TotalCommentStateHint>
               <Br top={5} />
               <TotalCommentStateHint>