Skip to content
This repository was archived by the owner on Nov 8, 2022. It is now read-only.

Commit 32628ff

Browse files
mydearxymmydearxym
authored
refactor(cards): cards concept for job & community (#1037)
* refactor(job-thread): move card to cards/JobCard * refactor(cards): extract basic CommunityCard && clean up
1 parent dd51b54 commit 32628ff

File tree

7 files changed

+230
-83
lines changed

7 files changed

+230
-83
lines changed

‎src/components/Cards/CommunityCard.tsx‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
/*
2+
* cards for job MasonryCards view
3+
*/
4+
5+
import React from 'react'
6+
7+
import { cutRest } from '@/utils'
8+
9+
import {
10+
Wrapper,
11+
CommunityLogo,
12+
Info,
13+
SubsCount,
14+
Header,
15+
Title,
16+
Desc,
17+
} from './styles/community_card'
18+
19+
type TProps = {
20+
item: {
21+
id: string
22+
logo: string
23+
title: string
24+
raw: string
25+
desc: string
26+
subscribersCount: number
27+
}
28+
}
29+
30+
const CommunityCard: React.FC<TProps> = ({
31+
item: { id, logo, title, raw, desc, subscribersCount },
32+
}) => {
33+
return (
34+
<Wrapper key={id}>
35+
<Header>
36+
<CommunityLogo src={logo} />
37+
<Info>
38+
<Title href={`/${raw}/posts`}>{title}</Title>
39+
<SubsCount>{subscribersCount} 人已加入</SubsCount>
40+
</Info>
41+
</Header>
42+
<Desc>{cutRest(desc, 50)}</Desc>
43+
</Wrapper>
44+
)
45+
}
46+
47+
export default React.memo(CommunityCard)

‎src/components/Cards/JobCard.tsx‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
/*
2+
* cards for job MasonryCards view
3+
*/
4+
5+
import React from 'react'
6+
import TimeAgo from 'timeago-react'
7+
8+
import { ICON } from '@/config'
9+
import { buildLog } from '@/utils'
10+
11+
import { Space } from '@/components/Common'
12+
import IconText from '@/components/IconText'
13+
import Tooltip from '@/components/Tooltip'
14+
15+
import CommunityCard from './CommunityCard'
16+
17+
import {
18+
Wrapper,
19+
Header,
20+
TeamScale,
21+
Title,
22+
Info,
23+
Sallery,
24+
Body,
25+
Footer,
26+
Publisher,
27+
Avatar,
28+
PublisherInfo,
29+
AuthorName,
30+
PublishExtra,
31+
TechKeywords,
32+
Keyword,
33+
} from './styles/job_card'
34+
35+
/* eslint-disable-next-line */
36+
const log = buildLog('c:JobCard')
37+
38+
type TProps = {
39+
item: {
40+
id: string
41+
title: string
42+
body: string
43+
commentsCount: number
44+
insertedAt: string
45+
author: {
46+
title: string
47+
avatar: string
48+
}
49+
}
50+
}
51+
52+
const JobCard: React.FC<TProps> = ({
53+
item: { title, body, author, insertedAt, commentsCount },
54+
}) => {
55+
const fakeCommunity = {
56+
id: '1',
57+
title: 'react',
58+
raw: 'react',
59+
logo:
60+
'https://cps-oss.oss-cn-shanghai.aliyuncs.com/icons/static/new-logo.jpg',
61+
desc:
62+
'maybe the most popular UI framework for web, maybe the most popular UI framework for web',
63+
subscribersCount: 100,
64+
}
65+
66+
return (
67+
<Wrapper>
68+
<Header>
69+
<Title>{title}</Title>
70+
<TeamScale>10~15 人</TeamScale>
71+
</Header>
72+
<Info>
73+
<Sallery>成都</Sallery>
74+
<Sallery>前端</Sallery>
75+
<Sallery>15k-30k</Sallery>
76+
</Info>
77+
<Body>{body}</Body>
78+
<Footer>
79+
<Publisher>
80+
<Avatar src={author.avatar} />
81+
<PublisherInfo>
82+
<AuthorName>{author.title}</AuthorName>
83+
<PublishExtra>
84+
<IconText iconSrc={`${ICON}/edit/publish-pen.svg`}>
85+
<TimeAgo datetime={insertedAt} locale="zh_CN" />
86+
</IconText>
87+
<Space right={10} />
88+
<IconText iconSrc={`${ICON}/article/comment.svg`}>
89+
{commentsCount}
90+
</IconText>
91+
</PublishExtra>
92+
</PublisherInfo>
93+
</Publisher>
94+
<TechKeywords>
95+
{/* @ts-ignore */}
96+
<Tooltip
97+
content={<CommunityCard item={fakeCommunity} />}
98+
placement="top"
99+
>
100+
<Keyword>React</Keyword>
101+
</Tooltip>
102+
<Keyword>TS</Keyword>
103+
</TechKeywords>
104+
</Footer>
105+
</Wrapper>
106+
)
107+
}
108+
109+
export default React.memo(JobCard)

‎src/components/Cards/styles/community_card.ts‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import styled from 'styled-components'
2+
3+
// import type { TTestable } from '@/spec'
4+
5+
import Img from '@/Img'
6+
import { css, theme } from '@/utils'
7+
8+
export const Wrapper = styled.div`
9+
${css.flexColumn()};
10+
width: 200px;
11+
min-height: 100px;
12+
`
13+
export const CommunityLogo = styled(Img)`
14+
${css.size(30)};
15+
`
16+
export const SubsCount = styled.div`
17+
color: ${theme('thread.articleDigest')};
18+
font-size: 12px;
19+
`
20+
export const Info = styled.div`
21+
${css.flexColumn()};
22+
margin-left: 12px;
23+
`
24+
export const Header = styled.div`
25+
${css.flex('align-center')};
26+
margin-bottom: 10px;
27+
`
28+
export const Title = styled.a`
29+
text-decoration: none;
30+
color: ${theme('thread.articleTitle')};
31+
font-size: 16px;
32+
font-weight: bold;
33+
34+
&:hover {
35+
text-decoration: underline;
36+
}
37+
`
38+
export const Desc = styled.div`
39+
color: ${theme('thread.articleDigest')};
40+
font-size: 14px;
41+
`

‎src/containers/thread/JobsThread/styles/card.ts‎ renamed to ‎src/components/Cards/styles/job_card.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import styled from 'styled-components'
22

3-
import type { TTestable } from '@/spec'
3+
// import type { TTestable } from '@/spec'
44

55
import Img from '@/Img'
66
import { css, theme } from '@/utils'

‎src/containers/thread/JobsThread/Card.tsx‎

Lines changed: 0 additions & 79 deletions
This file was deleted.

‎src/containers/thread/JobsThread/fakeJobItems.ts‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,29 +2,59 @@ const fakeItems = [
22
{
33
id: '1',
44
title: '美团 # 校园招聘',
5+
commentsCount: 10,
6+
insertedAt: new Date().toDateString(),
7+
author: {
8+
title: 'mydearxym',
9+
avatar: 'https://avatars.githubusercontent.com/u/809410?s=64&v=4',
10+
},
511
body:
612
'美团校招内推启动啦！！！校园招聘已启动～2021届应届生&&2022届实习, 美团校招内推启动啦！！！内推的优势： 免简历筛选，直通笔试，更大概率被发起面试， 极大增加通过概率 !… ',
713
},
814
{
915
id: '2',
1016
title: 'Another item',
17+
commentsCount: 20,
18+
insertedAt: new Date().toDateString(),
19+
author: {
20+
title: 'mydearxym',
21+
avatar: 'https://avatars.githubusercontent.com/u/809410?s=64&v=4',
22+
},
1123
body:
1224
'美团校招内推启动啦！！！校园招聘已启动～2021届应届生&&2022届实习, 我们是？我们是字节跳动教育部门，部门发展迅猛，公司投入极大！今年更是海量 HC！ 真正的海量 HC！HC 高达三位数！并非某些公司我们是？我们是字节跳动教育部门，部门发展迅猛，公司投入极大！今年更是海量 HC！ 真正的海量 HC！HC 高达三位数！并非某些公司',
1325
},
1426
{
1527
id: '3',
1628
title: '多益网络',
29+
commentsCount: 30,
30+
insertedAt: new Date().toDateString(),
31+
author: {
32+
title: 'mydearxym',
33+
avatar: 'https://avatars.githubusercontent.com/u/809410?s=64&v=4',
34+
},
1735
body:
1836
'岗位多样，开发，美术，市场，运营，产品，设计，财务，法律等。不卡学历！各类岗位面试难度一般，对学历无歧视，内推保证直通笔试面试，拿个保底offer吧各位',
1937
},
2038
{
2139
id: '4',
2240
title: 'Here is the Fourth',
41+
commentsCount: 40,
42+
insertedAt: new Date().toDateString(),
43+
author: {
44+
title: 'mydearxym',
45+
avatar: 'https://avatars.githubusercontent.com/u/809410?s=64&v=4',
46+
},
2347
body: '美团校招内推启动啦！！！校园招聘已启动～2021届应届生&&2022届实习',
2448
},
2549
{
2650
id: '5',
2751
title: 'High Five',
52+
commentsCount: 50,
53+
insertedAt: new Date().toDateString(),
54+
author: {
55+
title: 'mydearxym',
56+
avatar: 'https://avatars.githubusercontent.com/u/809410?s=64&v=4',
57+
},
2858
body: '美团校招内推启动啦！！！校园招聘已启动～2021届应届生&&2022届实习',
2959
},
3060
]

‎src/containers/thread/JobsThread/index.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,12 +20,11 @@ import { PublishButton } from '@/components/Buttons'
2020
import Maybe from '@/components/Maybe'
2121
// import PagedContents from '@/components/PagedContents'
2222
import ContentFilter from '@/components/ContentFilter'
23+
import JobCard from '@/components/Cards/JobCard'
2324

2425
import type { TStore } from './store'
2526

26-
import Card from './Card'
2727
import PublishNote from './PublishNote'
28-
2928
import filtersItems from './fakeFiltersItems'
3029
import fakeJobItems from './fakeJobItems'
3130

@@ -91,7 +90,7 @@ const JobsThreadContainer: React.FC<TProps> = ({ jobsThread: store }) => {
9190
</Maybe>
9291
<MasonryCards>
9392
{fakeJobItems.map((item) => (
94-
<Card key={item.id} item={item} />
93+
<JobCard key={item.id} item={item} />
9594
))}
9695
</MasonryCards>
9796

0 commit comments

Comments
 (0)