From 8197df9f44c8e31eac9b2d8873c1b9f63e18daf7 Mon Sep 17 00:00:00 2001
From: mydearxym <mydearxym@qq.com>
Date: Sun, 11 Jul 2021 17:31:42 +0800
Subject: [PATCH 1/2] refactor(JobItem): basic look

---
 src/components/AvatarsRow/index.tsx           |   4 +-
 src/components/JobItem/CompanyInfo.js         |  46 --------
 src/components/JobItem/DesktopView/Footer.tsx |  14 +++
 src/components/JobItem/DesktopView/Header.tsx |  23 ++++
 src/components/JobItem/DesktopView/index.tsx  |  39 +++++++
 src/components/JobItem/DigestView.js          |  18 ---
 src/components/JobItem/JobInfo.js             |  83 --------------
 src/components/JobItem/helper.js              |  18 ---
 src/components/JobItem/index.js               | 103 ------------------
 src/components/JobItem/index.tsx              |  42 +++++++
 src/components/JobItem/styles/company_info.ts |  67 ------------
 .../JobItem/styles/desktop_view/header.ts     |  13 +++
 .../JobItem/styles/desktop_view/index.ts      |   7 ++
 src/components/JobItem/styles/index.ts        |  24 ++--
 src/components/JobItem/styles/job_info.ts     |  85 ---------------
 src/components/JobItem/styles/metric.ts       |  17 +++
 src/components/PagedArticles/ArticleList.tsx  |   7 +-
 src/components/PagedArticles/JobsList.tsx     |  24 ++--
 src/components/PagedArticles/PostsList.tsx    |  16 +--
 src/components/PagedArticles/index.tsx        |   4 +-
 .../DigestView/DesktopView/Header.tsx         |  16 +--
 .../PostItem/DigestView/DesktopView/index.tsx |   6 +-
 src/components/PostItem/index.tsx             |   6 +-
 src/components/PostItem/styles/index.ts       |   5 +-
 src/components/PostItem/styles/metrics.ts     |   6 +-
 25 files changed, 211 insertions(+), 482 deletions(-)
 delete mode 100755 src/components/JobItem/CompanyInfo.js
 create mode 100644 src/components/JobItem/DesktopView/Footer.tsx
 create mode 100644 src/components/JobItem/DesktopView/Header.tsx
 create mode 100644 src/components/JobItem/DesktopView/index.tsx
 delete mode 100755 src/components/JobItem/DigestView.js
 delete mode 100755 src/components/JobItem/JobInfo.js
 delete mode 100755 src/components/JobItem/helper.js
 delete mode 100755 src/components/JobItem/index.js
 create mode 100755 src/components/JobItem/index.tsx
 delete mode 100755 src/components/JobItem/styles/company_info.ts
 create mode 100644 src/components/JobItem/styles/desktop_view/header.ts
 create mode 100644 src/components/JobItem/styles/desktop_view/index.ts
 delete mode 100755 src/components/JobItem/styles/job_info.ts
 create mode 100644 src/components/JobItem/styles/metric.ts

diff --git a/src/components/AvatarsRow/index.tsx b/src/components/AvatarsRow/index.tsx
index a06239cce..4c5cb046a 100755
--- a/src/components/AvatarsRow/index.tsx
+++ b/src/components/AvatarsRow/index.tsx
@@ -48,8 +48,8 @@ export type TProps = {
   reverse?: boolean
   scrollPosition?: any
 
-  onUserSelect: (user: TUser) => void
-  onTotalSelect: () => void
+  onUserSelect?: (user: TUser) => void
+  onTotalSelect?: () => void
 }
 
 const AvatarsRow: FC<TProps> = ({
diff --git a/src/components/JobItem/CompanyInfo.js b/src/components/JobItem/CompanyInfo.js
deleted file mode 100755
index 175439d1d..000000000
--- a/src/components/JobItem/CompanyInfo.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import React from 'react'
-import { isEmpty } from 'ramda'
-
-import { cutRest } from '@/utils'
-import {
-  Wrapper,
-  TopHalf,
-  BaseInfo,
-  CompanyLogo,
-  Header,
-  Middle,
-  Footer,
-  Title,
-  StatesWrapper,
-  StateItem,
-  FinanceState,
-} from './styles/company_info'
-
-const CompanyInfo = ({
-  entry: { company, companyLogo, desc, field, finance, scale },
-  onPreview,
-}) => (
-  <Wrapper onClick={onPreview}>
-    <TopHalf>
-      <BaseInfo>
-        <Header>
-          <Title>{cutRest(company, 12)}</Title>
-        </Header>
-        <Middle>
-          <StatesWrapper>
-            <StateItem>{field} </StateItem>
-            <FinanceState>{finance}</FinanceState>
-            <StateItem>{scale}</StateItem>
-          </StatesWrapper>
-        </Middle>
-      </BaseInfo>
-      <CompanyLogo src={companyLogo} />
-    </TopHalf>
-    <Footer>
-      &quot;
-      {isEmpty(desc) ? '---' : desc} &quot;
-    </Footer>
-  </Wrapper>
-)
-
-export default React.memo(CompanyInfo)
diff --git a/src/components/JobItem/DesktopView/Footer.tsx b/src/components/JobItem/DesktopView/Footer.tsx
new file mode 100644
index 000000000..240bc428f
--- /dev/null
+++ b/src/components/JobItem/DesktopView/Footer.tsx
@@ -0,0 +1,14 @@
+import { FC, memo } from 'react'
+
+const Footer: FC = () => {
+  return (
+    <div>
+      <div>mydearxym 发布于： 3 天前</div>
+      <div>
+        你和 头像 Raw 等 24 人觉得不错 -- 评论 35，收藏, 分享, 举报(more 里面)
+      </div>
+    </div>
+  )
+}
+
+export default memo(Footer)
diff --git a/src/components/JobItem/DesktopView/Header.tsx b/src/components/JobItem/DesktopView/Header.tsx
new file mode 100644
index 000000000..05ea9cd23
--- /dev/null
+++ b/src/components/JobItem/DesktopView/Header.tsx
@@ -0,0 +1,23 @@
+import { FC, memo } from 'react'
+
+import type { TTag } from '@/spec'
+import { cutRest } from '@/utils'
+import InlineTags from '@/components/InlineTags'
+
+import { Wrapper, Title } from '../styles/desktop_view/header'
+
+type TProps = {
+  title: string
+  tags: TTag[]
+}
+
+const Header: FC<TProps> = ({ title, tags }) => {
+  return (
+    <Wrapper>
+      <Title>{cutRest(title, 100)}</Title>
+      <InlineTags data={tags} />
+    </Wrapper>
+  )
+}
+
+export default memo(Header)
diff --git a/src/components/JobItem/DesktopView/index.tsx b/src/components/JobItem/DesktopView/index.tsx
new file mode 100644
index 000000000..8a34afd75
--- /dev/null
+++ b/src/components/JobItem/DesktopView/index.tsx
@@ -0,0 +1,39 @@
+import { FC, memo } from 'react'
+
+import type { TJob } from '@/spec'
+
+import { cutRest } from '@/utils'
+import DigestSentence from '@/components/DigestSentence'
+import { Br } from '@/components/Common'
+
+import Header from './Header'
+import Footer from './Footer'
+
+import { Wrapper } from '../styles/desktop_view'
+
+type TProps = {
+  entry: TJob
+}
+
+const DesktopView: FC<TProps> = ({ entry }) => {
+  const { title, tags } = entry
+
+  return (
+    <Wrapper>
+      <Header title={title} tags={tags} />
+      <Br top={15} />
+      <DigestSentence top={5} bottom={15} onPreview={() => console.log}>
+        {cutRest(
+          '我是一家很酷的团队, 我是一家很酷的团队, 我是一家很酷的团队,我是一家很酷的团队, 我是一家很酷的团队, 我是一家很酷的团队',
+          100,
+        )}
+      </DigestSentence>
+      <Br top={10} />
+      <div>图片列表，可预览</div>
+      <Br top={20} />
+      <Footer />
+    </Wrapper>
+  )
+}
+
+export default memo(DesktopView)
diff --git a/src/components/JobItem/DigestView.js b/src/components/JobItem/DigestView.js
deleted file mode 100755
index b63779da2..000000000
--- a/src/components/JobItem/DigestView.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from 'react'
-
-import JobInfo from './JobInfo'
-import CompanyInfo from './CompanyInfo'
-
-const DigestView = ({ entry, community, onPreview, onAuthorSelect }) => (
-  <>
-    <JobInfo
-      entry={entry}
-      onPreview={onPreview}
-      onAuthorSelect={onAuthorSelect}
-      community={community}
-    />
-    <CompanyInfo entry={entry} onPreview={onPreview} />
-  </>
-)
-
-export default React.memo(DigestView)
diff --git a/src/components/JobItem/JobInfo.js b/src/components/JobItem/JobInfo.js
deleted file mode 100755
index 9ae92e9c9..000000000
--- a/src/components/JobItem/JobInfo.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import React from 'react'
-import TimeAgo from 'timeago-react'
-
-import { HCN } from '@/constant'
-import { cutRest } from '@/utils'
-import InlineCommunities from '@/components/InlineCommunities'
-import InlineTags from '@/components/InlineTags'
-import DotDivider from '@/components/DotDivider'
-
-import {
-  Wrapper,
-  Header,
-  Middle,
-  Footer,
-  Title,
-  CommunitiesWrapper,
-  SalaryWrapper,
-  Background,
-  TagsWrapper,
-  Degree,
-  Exp,
-  ExpLabel,
-  ExpDivider,
-  Extra,
-  PublishInfo,
-} from './styles/job_info'
-
-const JobInfo = ({
-  entry: {
-    author,
-    insertedAt,
-    views,
-    commentsCount,
-    title,
-    salary,
-    education,
-    exp,
-    tags,
-    communities,
-  },
-  onPreview,
-  onAuthorSelect,
-  community,
-}) => (
-  <Wrapper>
-    <Header>
-      <Title onClick={onPreview}>{cutRest(title, 30)}</Title>
-      <CommunitiesWrapper>
-        <InlineCommunities data={communities} show={community === HCN} />
-      </CommunitiesWrapper>
-    </Header>
-    <Middle onClick={onPreview}>
-      <SalaryWrapper>{salary}</SalaryWrapper>
-      <Background>
-        <Degree>{education}</Degree>
-        <ExpDivider>&</ExpDivider>
-        <Exp>
-          <ExpLabel>经验 </ExpLabel>
-          {exp}
-        </Exp>
-      </Background>
-      <TagsWrapper>
-        <InlineTags data={tags} />
-      </TagsWrapper>
-    </Middle>
-    <Footer>
-      <Extra>
-        <PublishInfo onClick={() => onAuthorSelect(author)}>
-          {author.nickname} <DotDivider />
-          <TimeAgo datetime={insertedAt} locale="zh_CN" />
-          <DotDivider />
-        </PublishInfo>
-        浏览:
-        {views}
-        <DotDivider />
-        评论:
-        {commentsCount}
-      </Extra>
-    </Footer>
-  </Wrapper>
-)
-
-export default React.memo(JobInfo)
diff --git a/src/components/JobItem/helper.js b/src/components/JobItem/helper.js
deleted file mode 100755
index 373d6f781..000000000
--- a/src/components/JobItem/helper.js
+++ /dev/null
@@ -1,18 +0,0 @@
-export const getOpacity = (entry, active, accountInfo) => {
-  const {
-    isLogin,
-    customization: { markViewed },
-  } = accountInfo
-  const { viewerHasViewed } = entry
-
-  if (active.id) {
-    return entry.id !== active.id ? 0.6 : 1
-  }
-  if (isLogin && markViewed && viewerHasViewed) {
-    return 0.85
-  }
-
-  return 1
-}
-
-export const holder = 1
diff --git a/src/components/JobItem/index.js b/src/components/JobItem/index.js
deleted file mode 100755
index 104c7e7c5..000000000
--- a/src/components/JobItem/index.js
+++ /dev/null
@@ -1,103 +0,0 @@
-/*
- *
- * JobItem
- *
- */
-
-import React from 'react'
-import T from 'prop-types'
-
-import { C11N } from '@/constant'
-import { buildLog } from '@/utils'
-
-import ArticleItemPrefixLabel from '@/components/ArticleItemPrefixLabel'
-import DigestView from './DigestView'
-
-import { Wrapper } from './styles'
-import { getOpacity } from './helper'
-
-/* eslint-disable-next-line */
-const log = buildLog('c:JobItem:index')
-
-const JobItem = ({
-  entry,
-  active,
-  onPreview,
-  onAuthorSelect,
-  accountInfo,
-  community,
-}) => {
-  const {
-    customization: { contentDivider },
-  } = accountInfo
-
-  return (
-    <Wrapper
-      opacity={getOpacity(entry, active, accountInfo)}
-      divider={contentDivider}
-    >
-      <ArticleItemPrefixLabel entry={entry} topOffset="9px" />
-      <DigestView
-        entry={entry}
-        onPreview={onPreview}
-        onAuthorSelect={onAuthorSelect}
-        community={community}
-      />
-    </Wrapper>
-  )
-}
-
-JobItem.propTypes = {
-  active: T.object,
-  entry: T.shape({
-    title: T.string,
-    digest: T.string,
-    views: T.number,
-    tags: T.arrayOf(
-      T.shape({
-        id: T.string,
-        title: T.string,
-        color: T.string,
-        raw: T.string,
-      }),
-    ),
-    communities: T.arrayOf(
-      T.shape({
-        id: T.string,
-        title: T.string,
-        logo: T.string,
-      }),
-    ),
-    author: T.shape({
-      nickname: T.string,
-      avatar: T.string,
-    }),
-  }).isRequired,
-  accountInfo: T.shape({
-    isLogin: T.bool,
-    customization: T.shape({
-      markViewed: T.bool,
-      contentDivider: T.bool,
-      displayDensity: T.oneOf(['20', '25', '30']),
-    }),
-  }),
-  community: T.string.isRequired,
-  onPreview: T.func,
-  onAuthorSelect: T.func,
-}
-
-JobItem.defaultProps = {
-  onPreview: log,
-  onAuthorSelect: log,
-  active: {},
-  accountInfo: {
-    isLogin: false,
-    customization: T.shape({
-      contentDivider: false,
-      markViewed: true,
-      displayDensity: '20',
-    }),
-  },
-}
-
-export default React.memo(JobItem)
diff --git a/src/components/JobItem/index.tsx b/src/components/JobItem/index.tsx
new file mode 100755
index 000000000..a30ccaa09
--- /dev/null
+++ b/src/components/JobItem/index.tsx
@@ -0,0 +1,42 @@
+/*
+ *
+ * JobItem
+ *
+ */
+
+import { FC, memo } from 'react'
+
+import type { TJob, TID } from '@/spec'
+import { buildLog, getRandomInt } from '@/utils'
+import { useAccount } from '@/hooks'
+
+import ArticleItemPrefixLabel from '@/components/ArticleItemPrefixLabel'
+import DesktopView from './DesktopView'
+
+import { Wrapper } from './styles'
+
+/* eslint-disable-next-line */
+const log = buildLog('c:JobItem:index')
+
+const randomHeight = () => {
+  return `${getRandomInt(200, 420)}px`
+}
+
+type TProps = {
+  entry: TJob
+  activeId: TID | null
+}
+
+const JobItem: FC<TProps> = ({ entry, activeId }) => {
+  const height = randomHeight()
+  const { c11n } = useAccount()
+
+  return (
+    <Wrapper entry={entry} activeId={activeId} c11n={c11n} height={height}>
+      <ArticleItemPrefixLabel entry={entry} topOffset="9px" />
+      <DesktopView entry={entry} />
+    </Wrapper>
+  )
+}
+
+export default memo(JobItem)
diff --git a/src/components/JobItem/styles/company_info.ts b/src/components/JobItem/styles/company_info.ts
deleted file mode 100755
index 124082285..000000000
--- a/src/components/JobItem/styles/company_info.ts
+++ /dev/null
@@ -1,67 +0,0 @@
-import styled from 'styled-components'
-
-import { theme, css } from '@/utils'
-import Img from '@/Img'
-
-export const Wrapper = styled.div`
-  ${css.flexColumn()};
-  flex-grow: 1;
-  width: 30%;
-`
-export const TopHalf = styled.div`
-  ${css.flex()};
-`
-export const BaseInfo = styled.div`
-  flex-grow: 1;
-  margin-bottom: 6px;
-  ${css.media.mobile`
-    max-width: 75%;
- `};
-`
-export const CompanyLogo = styled(Img)`
-  width: 50px;
-  height: 50px;
-  border-radius: 4px;
-  ${css.media.mobile`
-    width: 40px;
-    height: 40px;
-  `};
-`
-export const Header = styled.div``
-export const Middle = styled.div`
-  ${css.flex()};
-  margin-top: 7px;
-  margin-left: -2px;
-`
-export const Footer = styled.div`
-  font-size: 0.8rem;
-  color: ${theme('thread.articleDigest')};
-  ${css.media.mobile`
-    ${css.cutRest('100px')};
-  `};
-`
-export const Title = styled.div`
-  color: ${theme('thread.articleTitle')};
-  font-size: 0.9rem;
-  ${css.media.mobile`
-    ${css.cutRest('90px')};
-  `};
-`
-export const StatesWrapper = styled.div`
-  ${css.flex()};
-  color: ${theme('thread.articleDigest')};
-`
-const BaseState = styled.div`
-  border: 1px solid;
-  border-color: ${theme('thread.articleDigest')};
-  border-radius: 5px;
-  font-size: 0.75rem;
-  padding: 0 5px;
-  margin-right: 6px;
-`
-
-export const StateItem = styled(BaseState)`
-  ${css.media.mobile`display: none`};
-`
-
-export const FinanceState = styled(BaseState)``
diff --git a/src/components/JobItem/styles/desktop_view/header.ts b/src/components/JobItem/styles/desktop_view/header.ts
new file mode 100644
index 000000000..f76c0b0a3
--- /dev/null
+++ b/src/components/JobItem/styles/desktop_view/header.ts
@@ -0,0 +1,13 @@
+import styled from 'styled-components'
+
+import { theme, css } from '@/utils'
+
+export const Wrapper = styled.div``
+
+export const Title = styled.div`
+  color: ${theme('thread.articleTitle')};
+  font-size: 16px;
+  ${css.media.mobile`
+    ${css.cutRest('150px')};
+  `};
+`
diff --git a/src/components/JobItem/styles/desktop_view/index.ts b/src/components/JobItem/styles/desktop_view/index.ts
new file mode 100644
index 000000000..dd028c9bc
--- /dev/null
+++ b/src/components/JobItem/styles/desktop_view/index.ts
@@ -0,0 +1,7 @@
+import styled from 'styled-components'
+
+// import { theme, css } from '@/utils'
+
+export const Wrapper = styled.div``
+
+export const Holder = styled.div``
diff --git a/src/components/JobItem/styles/index.ts b/src/components/JobItem/styles/index.ts
index aa704fd5d..b5161d985 100755
--- a/src/components/JobItem/styles/index.ts
+++ b/src/components/JobItem/styles/index.ts
@@ -1,22 +1,22 @@
 import styled from 'styled-components'
 
-// import Img from '@/Img'
-import { theme, css } from '@/utils'
+import type { TJob, TID, TC11N } from '@/spec'
+import { css } from '@/utils'
+import { getOpacity } from './metric'
 
-type TWrapper = { opacity: number; divider: boolean }
+type TWrapper = { entry: TJob; activeId: TID; c11n: TC11N; height?: string }
 export const Wrapper = styled.article<TWrapper>`
   ${css.flex('align-start')};
+  width: 100%;
+  height: ${({ height }) => height};
+  margin-bottom: 18px;
+  margin-right: 0;
+  background: #0d3644;
+  border-radius: 8px;
 
   position: relative;
-  padding-left: 8px;
-  padding-right: 8px;
-  border-radius: 4px;
-  opacity: ${({ opacity }) => opacity};
-
-  padding-top: ${({ divider }) => (divider ? '10px' : '6px')};
-  padding-bottom: ${({ divider }) => (divider ? '10px' : '6px')};
-  border-bottom: ${({ divider }) => (divider ? '1px solid' : '0')};
-  border-bottom-color: ${theme('thread.articleDivider')};
+  padding: 15px;
+  opacity: ${({ entry, activeId, c11n }) => getOpacity(entry, activeId, c11n)};
 
   transition: all 0.25s;
 `
diff --git a/src/components/JobItem/styles/job_info.ts b/src/components/JobItem/styles/job_info.ts
deleted file mode 100755
index a697c2ecc..000000000
--- a/src/components/JobItem/styles/job_info.ts
+++ /dev/null
@@ -1,85 +0,0 @@
-import styled from 'styled-components'
-
-import { theme, css } from '@/utils'
-
-export const Wrapper = styled.div`
-  ${css.flexColumn()};
-  flex-grow: 1;
-  width: 48%;
-  max-width: 60%;
-`
-export const Header = styled.div`
-  ${css.flex('align-center')};
-  &:hover {
-    cursor: pointer;
-  }
-`
-export const Middle = styled.div`
-  ${css.flex('align-end')};
-  padding: 5px 0;
-  margin-bottom: 2px;
-  &:hover {
-    cursor: pointer;
-  }
-`
-export const Footer = styled.div`
-  color: ${theme('thread.articleDigest')};
-`
-export const Title = styled.div`
-  color: ${theme('thread.articleTitle')};
-  font-size: 1rem;
-  ${css.media.mobile`
-    ${css.cutRest('150px')};
-`};
-`
-export const CommunitiesWrapper = styled.div`
-  margin-left: 5px;
-  margin-top: -1px;
-`
-export const SalaryWrapper = styled.div`
-  font-size: 0.9rem;
-  color: ${theme('contrastFg')};
-  margin-right: 16px;
-  margin-top: -1px;
-`
-export const BackgroundWrapper = styled.div`
-  ${css.flex()};
-`
-export const TagsWrapper = styled.div`
-  margin-top: -1px;
-`
-
-export const Background = styled.div`
-  ${css.flex('align-center')};
-  color: ${theme('thread.articleDigest')};
-  font-size: 0.85rem;
-  ${css.media.mobile`display: none`};
-`
-export const Degree = styled.div``
-export const Exp = styled.div``
-export const ExpLabel = styled.span`
-  ${css.media.tablet`display: none`};
-`
-
-export const Extra = styled.div`
-  ${css.flex('align-center')};
-  opacity: 0.7;
-  transition: opacity 0.2s;
-  font-size: 0.8rem;
-`
-export const ExpDivider = styled.div`
-  margin-left: 4px;
-  margin-right: 4px;
-`
-
-export const PublishInfo = styled.div`
-  ${css.flex('align-center')};
-  ${css.media.tablet`
-display: none;
-`};
-
-  &:hover {
-    cursor: pointer;
-    text-decoration: underline;
-  }
-`
diff --git a/src/components/JobItem/styles/metric.ts b/src/components/JobItem/styles/metric.ts
new file mode 100644
index 000000000..2b1a6db8e
--- /dev/null
+++ b/src/components/JobItem/styles/metric.ts
@@ -0,0 +1,17 @@
+import type { TJob, TC11N, TID } from '@/spec'
+
+export const getOpacity = (entry: TJob, activeId: TID, c11n: TC11N): number => {
+  const { isLogin, markViewed } = c11n
+  const { viewerHasViewed } = entry
+
+  if (activeId) {
+    return entry.id !== activeId ? 0.6 : 1
+  }
+  if (isLogin && markViewed && viewerHasViewed) {
+    return 0.85
+  }
+
+  return 1
+}
+
+export const holder = 1
diff --git a/src/components/PagedArticles/ArticleList.tsx b/src/components/PagedArticles/ArticleList.tsx
index 938733a7c..63ddcb4ab 100755
--- a/src/components/PagedArticles/ArticleList.tsx
+++ b/src/components/PagedArticles/ArticleList.tsx
@@ -33,13 +33,14 @@ const ArticleList = (props) => {
 
   switch (thread) {
     case THREAD.JOB:
-      return <JobsList props={props} />
+      return <JobsList {...props} />
 
     case THREAD.REPO:
-      return <ReposList props={props} />
+      return <ReposList {...props} />
 
     default:
-      return <PostsList props={props} />
+      return <JobsList {...props} />
+    // return <PostsList {...props} />
   }
 }
 
diff --git a/src/components/PagedArticles/JobsList.tsx b/src/components/PagedArticles/JobsList.tsx
index c817c91da..1d87f41e9 100755
--- a/src/components/PagedArticles/JobsList.tsx
+++ b/src/components/PagedArticles/JobsList.tsx
@@ -1,23 +1,21 @@
-import { Fragment, memo } from 'react'
+import { FC, memo } from 'react'
 
+import type { TJob, TID } from '@/spec'
 import JobItem from '@/components/JobItem'
+import MasonryCards from '@/components/MasonryCards'
 
-const JobsList = ({ props }) => {
-  const { entries, active, community, onAuthorSelect, accountInfo } = props
+type TProps = {
+  entries: TJob[]
+  activeId: TID | null
+}
 
+const JobsList: FC<TProps> = ({ entries, activeId }) => {
   return (
-    <Fragment>
+    <MasonryCards column={2}>
       {entries.map((entry) => (
-        <JobItem
-          key={entry.id}
-          entry={entry}
-          community={community}
-          active={active}
-          accountInfo={accountInfo}
-          onAuthorSelect={onAuthorSelect}
-        />
+        <JobItem key={entry.id} entry={entry} activeId={activeId} />
       ))}
-    </Fragment>
+    </MasonryCards>
   )
 }
 
diff --git a/src/components/PagedArticles/PostsList.tsx b/src/components/PagedArticles/PostsList.tsx
index ae3d7a6e8..fd5d8e383 100755
--- a/src/components/PagedArticles/PostsList.tsx
+++ b/src/components/PagedArticles/PostsList.tsx
@@ -1,18 +1,18 @@
-import { Fragment, memo } from 'react'
+import { FC, Fragment, memo } from 'react'
 
+import type { TPost, TID } from '@/spec'
 import PostItem from '@/components/PostItem'
 
-const PostsList = ({ props }) => {
-  const { entries, activeArticleId } = props
+type TProps = {
+  entries: TPost[]
+  activeId: TID
+}
 
+const PostsList: FC<TProps> = ({ entries, activeId }) => {
   return (
     <Fragment>
       {entries.map((entry) => (
-        <PostItem
-          key={entry.id}
-          entry={entry}
-          activeArticleId={activeArticleId}
-        />
+        <PostItem key={entry.id} entry={entry} activeId={activeId} />
       ))}
     </Fragment>
   )
diff --git a/src/components/PagedArticles/index.tsx b/src/components/PagedArticles/index.tsx
index 3b3b74219..718dad7f4 100755
--- a/src/components/PagedArticles/index.tsx
+++ b/src/components/PagedArticles/index.tsx
@@ -6,7 +6,7 @@
 
 import { Fragment, FC, memo } from 'react'
 
-import type { TThread, TArticle, TPagedArticles, TResState } from '@/spec'
+import type { TThread, TPagedArticles, TResState } from '@/spec'
 import { EVENT } from '@/constant'
 import { buildLog, send } from '@/utils'
 import { useViewing } from '@/hooks'
@@ -34,7 +34,7 @@ const PagedArticles: FC<TProps> = ({ thread, data, resState, emptyPrefix }) => {
     <Fragment>
       <ArticleList
         thread={thread}
-        activeArticleId={viewingArticle.id}
+        activeId={viewingArticle.id}
         entries={entries}
         resState={resState}
         emptyPrefix={emptyPrefix}
diff --git a/src/components/PostItem/DigestView/DesktopView/Header.tsx b/src/components/PostItem/DigestView/DesktopView/Header.tsx
index b16f807bc..641d58cdf 100644
--- a/src/components/PostItem/DigestView/DesktopView/Header.tsx
+++ b/src/components/PostItem/DigestView/DesktopView/Header.tsx
@@ -1,7 +1,7 @@
 import { FC } from 'react'
 import Link from 'next/link'
 
-import type { TPost, TUser } from '@/spec'
+import type { TPost } from '@/spec'
 import { ROUTE } from '@/constant'
 import { ICON_CMD } from '@/config'
 import { parseDomain } from '@/utils'
@@ -20,10 +20,9 @@ import {
 
 type TProps = {
   item: TPost
-  onUserSelect?: (obj: TUser) => void
 }
 
-const Header: FC<TProps> = ({ item, onUserSelect }) => {
+const Header: FC<TProps> = ({ item }) => {
   return (
     <Wrapper>
       <Brief>
@@ -40,13 +39,10 @@ const Header: FC<TProps> = ({ item, onUserSelect }) => {
           <InlineTags data={item.tags} />
         </TagListWrapper>
       </Brief>
-      <div>
-        <AvatarsRow
-          onUserSelect={onUserSelect}
-          users={item.commentsParticipators}
-          total={item.commentsCount}
-        />
-      </div>
+      <AvatarsRow
+        users={item.commentsParticipators}
+        total={item.commentsCount}
+      />
     </Wrapper>
   )
 }
diff --git a/src/components/PostItem/DigestView/DesktopView/index.tsx b/src/components/PostItem/DigestView/DesktopView/index.tsx
index cd72aaed7..9c3c1f47c 100644
--- a/src/components/PostItem/DigestView/DesktopView/index.tsx
+++ b/src/components/PostItem/DigestView/DesktopView/index.tsx
@@ -17,12 +17,12 @@ type TProps = {
   onAuthorSelect?: (obj: TAccount) => void
 }
 
-const DigestView: FC<TProps> = ({ entry, onUserSelect, onAuthorSelect }) => {
+const DigestView: FC<TProps> = ({ entry }) => {
   return (
     <Fragment>
-      <TheAvatar user={entry.author} onSelect={onAuthorSelect} />
+      <TheAvatar user={entry.author} />
       <Main>
-        <Header item={entry} onUserSelect={onUserSelect} />
+        <Header item={entry} />
         <Body item={entry} />
       </Main>
     </Fragment>
diff --git a/src/components/PostItem/index.tsx b/src/components/PostItem/index.tsx
index 2cf9d1e3a..1c4b3768f 100755
--- a/src/components/PostItem/index.tsx
+++ b/src/components/PostItem/index.tsx
@@ -21,7 +21,7 @@ import { Wrapper } from './styles'
 const log = buildLog('c:PostItem:index')
 
 type TProps = {
-  activeArticleId?: TID | null
+  activeId?: TID | null
   entry: TPost
 
   onUserSelect?: (obj: TUser) => void
@@ -32,12 +32,12 @@ const PostItem: FC<TProps> = ({
   entry,
   onUserSelect = log,
   onAuthorSelect = log,
-  activeArticleId = null,
+  activeId = null,
 }) => {
   const { c11n } = useAccount()
 
   return (
-    <Wrapper entry={entry} activeArticleId={activeArticleId} c11n={c11n}>
+    <Wrapper entry={entry} activeId={activeId} c11n={c11n}>
       <ArticleItemPrefixLabel entry={entry} />
       <DigestView
         entry={entry}
diff --git a/src/components/PostItem/styles/index.ts b/src/components/PostItem/styles/index.ts
index 8147376a3..ec9007703 100755
--- a/src/components/PostItem/styles/index.ts
+++ b/src/components/PostItem/styles/index.ts
@@ -7,15 +7,14 @@ import { getOpacity } from './metrics'
 
 type TWrapper = {
   entry: TPost
-  activeArticleId?: TID | null
+  activeId?: TID | null
   c11n: TC11N
 }
 
 export const Wrapper = styled.article<TWrapper>`
   ${css.flex()};
   position: relative;
-  opacity: ${({ entry, activeArticleId, c11n }) =>
-    getOpacity(entry, activeArticleId, c11n)};
+  opacity: ${({ entry, activeId, c11n }) => getOpacity(entry, activeId, c11n)};
 
   padding-top: ${({ c11n }) => (c11n.contentDivider ? '10px' : '6px')};
   padding-bottom: ${({ c11n }) => (c11n.contentDivider ? '10px' : '6px')};
diff --git a/src/components/PostItem/styles/metrics.ts b/src/components/PostItem/styles/metrics.ts
index ea248b3e6..ef285e0fd 100644
--- a/src/components/PostItem/styles/metrics.ts
+++ b/src/components/PostItem/styles/metrics.ts
@@ -2,13 +2,13 @@ import type { TPost, TC11N, TID } from '@/spec'
 
 export const getOpacity = (
   entry: TPost,
-  activeArticleId: TID | null,
+  activeId: TID | null,
   c11n: TC11N,
 ): number => {
   const { viewerHasViewed } = entry
 
-  if (activeArticleId) {
-    return entry.id !== activeArticleId ? 0.6 : 1
+  if (activeId) {
+    return entry.id !== activeId ? 0.6 : 1
   }
   if (c11n.isLogin && c11n.markViewed && viewerHasViewed) {
     return 0.85

From 307a59f4bb9cd72263faf9c36d6702e3ab56c2a4 Mon Sep 17 00:00:00 2001
From: mydearxym <mydearxym@qq.com>
Date: Sun, 11 Jul 2021 18:14:21 +0800
Subject: [PATCH 2/2] refactor(JobItem): fix ci

---
 src/components/PagedArticles/ArticleList.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/PagedArticles/ArticleList.tsx b/src/components/PagedArticles/ArticleList.tsx
index 63ddcb4ab..653ef375f 100755
--- a/src/components/PagedArticles/ArticleList.tsx
+++ b/src/components/PagedArticles/ArticleList.tsx
@@ -39,8 +39,7 @@ const ArticleList = (props) => {
       return <ReposList {...props} />
 
     default:
-      return <JobsList {...props} />
-    // return <PostsList {...props} />
+      return <PostsList {...props} />
   }
 }