refactor(thread): common articles card comp (#1111)

* refactor(thread): extract article card comp

* refactor(ThreadCard): adjust styles

* refactor(ThreadCard): fix

Author: mydearxym

src/components/JobItem/DesktopView/Footer.tsx renamed to src/components/ArticleCard/Footer.tsx

@@ -5,7 +5,7 @@ import Upvote from '@/components/Upvote'
 import DotDivider from '@/components/DotDivider'
 import IconText from '@/components/IconText'
 
-import { Wrapper, PublishWrapper, Bottom } from '../styles/desktop_view/footer'
+import { Wrapper, PublishWrapper, Bottom } from './styles/footer'
 
 const Footer: FC = () => {
   return (

src/components/JobItem/DesktopView/Header.tsx renamed to src/components/ArticleCard/Header.tsx

@@ -4,7 +4,7 @@ import type { TTag } from '@/spec'
 import { cutRest } from '@/utils'
 import InlineTags from '@/components/InlineTags'
 
-import { Wrapper, Title } from '../styles/desktop_view/header'
+import { Wrapper, Title } from './styles/header'
 
 type TProps = {
   title: string

src/components/ArticleCard/index.tsx

@@ -0,0 +1,48 @@
+import { FC, memo } from 'react'
+
+import type { TJob } from '@/spec'
+// import { THREAD } from '@/constant'
+
+import { cutRest } from '@/utils'
+import DigestSentence from '@/components/DigestSentence'
+import { Br, SpaceGrow } from '@/components/Common'
+import ArticleImgWindow from '@/components/ArticleImgWindow'
+
+import Header from './Header'
+import Footer from './Footer'
+
+import { Wrapper } from './styles'
+import { SIZE } from '@/constant'
+
+type TProps = {
+  data: TJob
+  // thread?: TThread
+}
+const fakeDigest =
+  '网络监测数据显示，从 7 月 12 日开始古巴限制了社交媒体和消息应用，此举被认为旨在限制信息流动。古巴上周末爆发了罕见的大规模反政府抗议。受到干扰的通讯平台包括了 WhatsApp、Facebook、Instagram 和部分 Telegram 服务。VPN 服务可以绕过这一干扰。古巴的反政府抗议与经济困难，疫苗短缺等问题有关。'
+
+const ArticleCard: FC<TProps> = ({ data }) => {
+  const { title, tags } = data
+
+  return (
+    <Wrapper>
+      <Header title={title} tags={tags} />
+      <Br top={15} />
+      <DigestSentence
+        top={5}
+        bottom={15}
+        size={SIZE.MEDIUM}
+        onPreview={() => console.log('send preview')}
+      >
+        {cutRest(fakeDigest, 150)}
+      </DigestSentence>
+      <Br top={4} />
+      <ArticleImgWindow />
+      <Br top={16} />
+      <SpaceGrow />
+      <Footer />
+    </Wrapper>
+  )
+}
+
+export default memo(ArticleCard)

src/components/JobItem/styles/desktop_view/footer.ts renamed to src/components/ArticleCard/styles/footer.ts

@@ -8,6 +8,7 @@ export const Wrapper = styled.div`
 export const PublishWrapper = styled.div`
   ${css.flex('align-center')};
   margin-left: 3px;
+  margin-bottom: 3px;
   font-size: 13px;
 `
 export const Bottom = styled.div`

src/components/JobItem/styles/desktop_view/header.ts renamed to src/components/ArticleCard/styles/header.ts

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

src/components/JobItem/styles/desktop_view/index.ts renamed to src/components/ArticleCard/styles/index.ts

@@ -6,6 +6,8 @@
 
 import { FC, ReactNode, memo } from 'react'
 
+import type { TSIZE_SM } from '@/spec'
+import { SIZE } from '@/constant'
 import { ICON } from '@/config'
 import { buildLog } from '@/utils'
 
@@ -31,6 +33,7 @@ type TProps = {
   bottom?: number
   left?: number
   right?: number
+  size?: TSIZE_SM
   onPreview: () => void
 }
 
@@ -42,6 +45,7 @@ const DigestSentence: FC<TProps> = ({
   bottom = 0,
   left = 0,
   right = 0,
+  size = SIZE.SMALL,
 }) => {
   return (
     <Wrapper
@@ -51,6 +55,7 @@ const DigestSentence: FC<TProps> = ({
       bottom={bottom}
       left={left}
       right={right}
+      size={size}
     >
       {children}
       <Space left={8} />

src/components/ArticleCard/tests/index.test.ts

@@ -1,14 +1,17 @@
 import styled from 'styled-components'
 
-import type { TTestable, TSpace } from '@/spec'
+import type { TTestable, TSpace, TSIZE_SM } from '@/spec'
 import Img from '@/Img'
 import { css, theme } from '@/utils'
 
+import { getFontSize } from './metric'
+
+type TWrapper = TTestable & TSpace & { size: TSIZE_SM }
 export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
   'data-test-id': testid,
-}))<TTestable & TSpace>`
+}))<TWrapper>`
   color: ${theme('thread.articleDigest')};
-  font-size: 13px;
+  font-size: ${({ size }) => getFontSize(size)};
 
   padding-top: ${({ top }) => `${top}px`};
   padding-bottom: ${({ bottom }) => `${bottom}px`};

src/components/DigestSentence/index.tsx

@@ -0,0 +1,15 @@
+import type { TSIZE_SM } from '@/spec'
+import { SIZE } from '@/constant'
+
+export const getFontSize = (size: TSIZE_SM): string => {
+  switch (size) {
+    case SIZE.MEDIUM: {
+      return '14px'
+    }
+
+    default:
+      return '13px'
+  }
+}
+
+export const holder = 1