refactor(comments): time divider , pin concept && re-org (#1058)

* style(comment-concepet): pin & time divider UI

* refactor(comment-list): re-org codebase

Author: mydearxym

src/containers/unit/Comments/Comment/DesktopView.tsx

@@ -17,6 +17,9 @@ import {
   CommentWrapper,
   CommentContent,
   CommentBodyInfo,
+  PinState,
+  PinIcon,
+  PinText,
 } from '../styles/comment/desktop_view'
 
 const getSelection = () => {
@@ -33,8 +36,16 @@ type TProps = {
 }
 
 const Comment: React.FC<TProps> = ({ data, tobeDeleteId, accountInfo }) => {
+  const pined = data.id === '360' || data.id === '377'
+
   return (
-    <Wrapper>
+    <Wrapper pined={pined}>
+      {pined && (
+        <PinState>
+          <PinIcon />
+          <PinText>置顶评论</PinText>
+        </PinState>
+      )}
       <DeleteMask show={data.id === tobeDeleteId} />
       <CommentWrapper tobeDelete={data.id === tobeDeleteId}>
         <Upvote data={data} />
@@ -45,7 +56,6 @@ const Comment: React.FC<TProps> = ({ data, tobeDeleteId, accountInfo }) => {
             {data.replyTo && <ReplyBar data={data.replyTo} />}
             <MarkDownRender body={data.body} />
           </CommentContent>
-
           <Footer data={data} accountInfo={accountInfo} />
         </CommentBodyInfo>
       </CommentWrapper>

src/containers/unit/Comments/CommentsList.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+
+import { Wrapper, SlashSign, DateText } from '../styles/list/date_divider'
+
+type TProps = {
+  text: string
+}
+
+const DateDivider: React.FC<TProps> = ({ text }) => (
+  <Wrapper>
+    <SlashSign>&#47;&#47;</SlashSign> <DateText>{text}</DateText>
+  </Wrapper>
+)
+
+export default React.memo(DateDivider)

src/containers/unit/Comments/List/DateDivider.tsx

@@ -0,0 +1,32 @@
+import React from 'react'
+
+import Filter from '../CommentsFilter'
+
+import {
+  Wrapper,
+  TotalTitle,
+  TotalCountWrapper,
+  TotalNum,
+} from '../styles/list/header'
+
+type TProps = {
+  totalCount: number
+  filterType: string
+}
+
+const Header: React.FC<TProps> = ({ totalCount, filterType }) => {
+  return (
+    <Wrapper>
+      <TotalCountWrapper>
+        {totalCount > 0 && (
+          <TotalTitle id="lists-info">
+            共收到 <TotalNum>{totalCount}</TotalNum> 条评论:
+          </TotalTitle>
+        )}
+      </TotalCountWrapper>
+      <Filter filterType={filterType} show={totalCount >= 2} />
+    </Wrapper>
+  )
+}
+
+export default React.memo(Header)

src/containers/unit/Comments/List/Header.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+
+import type { TAccount, TComment } from '@/spec'
+import Comment from '../Comment'
+
+import DateDivider from './DateDivider'
+
+type TProps = {
+  entries: TComment[]
+  tobeDeleteId: string
+  accountInfo: TAccount
+}
+
+const List: React.FC<TProps> = ({ entries, tobeDeleteId, accountInfo }) => (
+  <React.Fragment>
+    {entries.map((c, index) => (
+      <React.Fragment key={c.id}>
+        <Comment
+          data={c}
+          tobeDeleteId={tobeDeleteId}
+          accountInfo={accountInfo}
+        />
+        {(index === 1 || index === 3) && <DateDivider text="一个月后" />}
+      </React.Fragment>
+    ))}
+  </React.Fragment>
+)
+
+export default React.memo(List)

src/containers/unit/Comments/List/List.tsx

@@ -0,0 +1,62 @@
+import React from 'react'
+
+import type { TPagedComments, TUser } from '@/spec'
+import Pagi from '@/components/Pagi'
+import { CommentLoading } from '@/components/LoadingEffects'
+
+import Header from './Header'
+import List from './List'
+
+import { pageChange } from '../logic'
+
+import { ListsWrapper, CommentBlock } from '../styles/list'
+
+type TProps = {
+  accountInfo: TUser
+  pagedComments: TPagedComments
+  restProps: {
+    loading: boolean
+    loadingFresh: boolean
+    tobeDeleteId: string
+    filterType: string
+  }
+}
+
+const CommentsList: React.FC<TProps> = ({
+  accountInfo,
+  pagedComments: { entries, totalCount, pageSize, pageNumber },
+  restProps: { loading, loadingFresh, tobeDeleteId, filterType },
+}) => (
+  <React.Fragment>
+    <Header totalCount={totalCount} filterType={filterType} />
+    {loadingFresh && (
+      <CommentBlock>
+        <CommentLoading />
+      </CommentBlock>
+    )}
+    <ListsWrapper>
+      {loading ? (
+        <CommentBlock>
+          <CommentLoading />
+        </CommentBlock>
+      ) : (
+        <List
+          entries={entries}
+          accountInfo={accountInfo}
+          tobeDeleteId={tobeDeleteId}
+        />
+      )}
+    </ListsWrapper>
+    <Pagi
+      pageNumber={pageNumber}
+      pageSize={pageSize}
+      totalCount={totalCount}
+      onChange={pageChange}
+      showBottomMsg
+      noMoreMsg="没有更多的评论了"
+      emptyMsg="目前还没有评论"
+    />
+  </React.Fragment>
+)
+
+export default React.memo(CommentsList)

src/containers/unit/Comments/List/index.tsx

@@ -10,7 +10,7 @@ import { pluggedIn, buildLog } from '@/utils'
 import Modal from '@/components/Modal'
 
 import CommentEditor from './CommentEditor'
-import CommentsList from './CommentsList'
+import List from './List'
 import CommentReplyEditor from './CommentReplyEditor'
 import LockedMessage from './LockedMessage'
 
@@ -75,7 +75,7 @@ const CommentsContainer: React.FC<TProps> = ({
         />
       )}
 
-      <CommentsList
+      <List
         accountInfo={accountInfo}
         pagedComments={pagedCommentsData}
         restProps={{ ...store }}

src/containers/unit/Comments/index.tsx

@@ -3,20 +3,39 @@ import styled from 'styled-components'
 import Img from '@/Img'
 import { theme, css } from '@/utils'
 
-export const Wrapper = styled.div`
+import PinSVG from '@/SvgIcons/PinSVG'
+
+export const Wrapper = styled.div<{ pined: boolean }>`
+  position: relative;
   ${css.flex()};
-  /* margin-bottom: 16px; */
   margin-bottom: 14px;
   padding: 15px 5px;
-  /* padding-left: 20px; */
+  padding-top: ${({ pined }) => (pined ? '24px' : '15px')};
   position: relative;
-  /* box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04); */
-  /* border-radius: 3px; */
-  /* background: ${theme('comment.bg')}; */
   background: transparent;
   border-bottom: 1px solid;
   border-bottom-color: #0b4252;
 `
+export const PinState = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  ${css.flex('align-center')};
+  margin-left: 5px;
+`
+export const PinIcon = styled(PinSVG)`
+  fill: ${theme('thread.articleDigest')};
+  ${css.size(14)};
+  opacity: 0.8;
+  transform: rotate(-30deg);
+`
+export const PinText = styled.div`
+  font-size: 12px;
+  color: ${theme('thread.articleDigest')};
+  margin-left: 12px;
+  opacity: 0.8;
+`
+
 // filter: blur(3px);
 export const CommentWrapper = styled.div<{ tobeDelete: boolean }>`
   ${css.flexGrow()};

src/containers/unit/Comments/styles/comment/desktop_view.ts

@@ -0,0 +1,21 @@
+import styled from 'styled-components'
+
+import { theme, css } from '@/utils'
+
+export const Wrapper = styled.div`
+  ${css.flex('align-center')};
+  color: ${theme('thread.articleDigest')};
+  padding-bottom: 10px;
+`
+export const SlashSign = styled.div`
+  font-size: 10px;
+  font-weight: bolder;
+  font-family: cursive;
+  margin-right: 10px;
+  margin-left: 6px;
+  opacity: 0.8;
+`
+export const DateText = styled.div`
+  font-size: 12px;
+  opacity: 0.8;
+`

src/containers/unit/Comments/styles/list/date_divider.ts

@@ -2,15 +2,10 @@ import styled from 'styled-components'
 
 import { theme, css } from '@/utils'
 
-// min-height: 300px;
-export const ListsContainer = styled.div`
-  ${css.flexColumn('')};
-  border-radius: 4px;
-`
-export const TotalHeader = styled.div`
+export const Wrapper = styled.div`
   ${css.flex('align-center')};
   margin-top: 25px;
-  margin-bottom: 10px;
+  margin-bottom: 20px;
 
   ${css.media.mobile`
     border-bottom: 1px solid;
@@ -22,7 +17,7 @@ export const TotalHeader = styled.div`
 export const TotalCountWrapper = styled.div`
   flex-grow: 1;
 `
-export const ListTitle = styled.div`
+export const TotalTitle = styled.div`
   color: ${theme('comment.title')};
   font-size: 14px;
   margin-left: 2px;