Skip to content

Commit 1cb4923

Browse files
mydearxymmydearxym
committed
refactor(misc): basic SSR for communities & cell optmize
1 parent 85c723e commit 1cb4923

File tree

12 files changed

+192
-25
lines changed

12 files changed

+192
-25
lines changed

‎components/CategoriesCell/index.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,15 +21,15 @@ import {
2121
AddIcon,
2222
} from './styles'
2323

24-
import { uid } from '../../utils'
24+
import { uid, Trans } from '../../utils'
2525
// import { inject, observer } from 'mobx-react'
2626
// import Link from 'next/link'
2727

2828
const CategoriesList = ({ source, onDelete }) => (
2929
<CategoryWrapper>
3030
{source.categories.map(c => (
3131
<CategoryTag key={uid.gen()}>
32-
{c.title}
32+
{Trans(c.title)}
3333
<DeleteCross onClick={onDelete.bind(this, source.id, c)}>
3434
<Icon type="cross" />
3535
</DeleteCross>

‎components/ContentsCountCell/index.js‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
/*
2+
*
3+
* ContentsCountCell
4+
*
5+
*/
6+
7+
import React from 'react'
8+
import PropTypes from 'prop-types'
9+
10+
import { Wrapper, Content, Label, Count } from './styles'
11+
12+
import { makeDebugger } from '../../utils'
13+
14+
/* eslint-disable no-unused-vars */
15+
const debug = makeDebugger('c:ContentsCountCell:index')
16+
/* eslint-enable no-unused-vars */
17+
18+
const ContentsCountCell = ({
19+
data: { postsCount, jobsCount, videosCount, reposCount },
20+
}) => {
21+
return (
22+
<Wrapper>
23+
<Content empty={postsCount === 0}>
24+
<Label>帖子:</Label>{' '}
25+
<Count empty={postsCount === 0}>{postsCount}</Count>
26+
</Content>
27+
<Content empty={jobsCount === 0}>
28+
<Label>招聘:</Label> <Count empty={jobsCount === 0}>{jobsCount}</Count>
29+
</Content>
30+
<Content empty={videosCount === 0}>
31+
<Label>视频:</Label>{' '}
32+
<Count empty={videosCount === 0}>{videosCount}</Count>
33+
</Content>
34+
<Content empty={reposCount === 0}>
35+
<Label>项目:</Label>{' '}
36+
<Count empty={reposCount === 0}>{reposCount}</Count>
37+
</Content>
38+
</Wrapper>
39+
)
40+
}
41+
42+
ContentsCountCell.propTypes = {
43+
// https://www.npmjs.com/package/prop-types
44+
data: PropTypes.shape({
45+
postsCount: PropTypes.number,
46+
jobsCount: PropTypes.number,
47+
videosCount: PropTypes.number,
48+
reposCount: PropTypes.number,
49+
}),
50+
}
51+
52+
ContentsCountCell.defaultProps = {
53+
data: {
54+
postsCount: 0,
55+
jobsCount: 0,
56+
videosCount: 0,
57+
reposCount: 0,
58+
},
59+
}
60+
61+
export default React.memo(ContentsCountCell)

‎components/ContentsCountCell/styles/index.js‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import styled from 'styled-components'
2+
3+
// import Img from '../../Img'
4+
// import { theme } from '../../../utils'
5+
6+
export const Wrapper = styled.div`
7+
display: flex;
8+
flex-direction: column;
9+
`
10+
export const Content = styled.div`
11+
display: flex;
12+
align-items: center;
13+
opacity: ${({ empty }) => (empty ? 0.4 : 1)};
14+
`
15+
export const Label = styled.div`
16+
font-size: 0.7rem;
17+
margin-right: 5px;
18+
`
19+
export const Count = styled.div`
20+
color: ${({ empty }) => (empty ? 'grey' : 'yellowgreen')};
21+
`

‎components/ContentsCountCell/tests/index.test.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
// import React from 'react'
2+
// import { shallow } from 'enzyme'
3+
4+
// import ContentsCountCell from '../index'
5+
6+
describe('TODO <ContentsCountCell />', () => {
7+
it('Expect to have unit tests specified', () => {
8+
expect(true).toEqual(true)
9+
})
10+
})

‎components/index.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,8 @@ export { default as CategoriesCell } from './CategoriesCell'
3939
export { default as TagsCell } from './TagsCell'
4040
export { default as PermissionCell } from './PermissionCell'
4141
export { default as ThreadsCell } from './ThreadsCell'
42+
43+
export { default as ContentsCountCell } from './ContentsCountCell'
4244
// form
4345
export { default as FormItem } from './FormItem'
4446
export { default as FormInputer } from './FormInputer'

‎containers/CommunitiesBanner/logic.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -153,9 +153,9 @@ const ErrSolver = [
153153

154154
export function init(_store) {
155155
store = _store
156-
if (sub$) return loadCommunities() // loadCategories()
156+
if (sub$) return false // loadCommunities() // loadCategories()
157157
sr71$.data().subscribe($solver(DataSolver, ErrSolver))
158-
loadCommunities()
158+
// loadCommunities()
159159
// loadCategories()
160160
}
161161

‎containers/CommunitiesContent/IndexContent.js‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,11 @@ import {
1313
Popconfirm,
1414
CategoriesCell,
1515
ThreadsCell,
16+
ContentsCountCell,
1617
} from '../../components'
1718

1819
import { CommunityIcon, OperationWrapper } from './styles'
20+
1921
import * as logic from './logic'
2022

2123
/* eslint-disable react/display-name */
@@ -111,6 +113,9 @@ const columns = [
111113
width: 100,
112114
dataIndex: 'postsCount',
113115
align: 'center',
116+
render: (text, record) => {
117+
return <ContentsCountCell data={record} />
118+
},
114119
},
115120
{
116121
title: '创建时间',
@@ -168,10 +173,7 @@ class IndexContent extends React.Component {
168173
}
169174

170175
render() {
171-
const {
172-
data,
173-
restProps: { communitiesLoading },
174-
} = this.props
176+
const { data, restProps: { communitiesLoading } } = this.props
175177

176178
return (
177179
<React.Fragment>

‎containers/CommunitiesContent/logic.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -421,10 +421,10 @@ const ErrSolver = [
421421
export function init(_store) {
422422
store = _store
423423

424-
if (sub$) return loadCommunities() // loadCategories()
424+
if (sub$) return // loadCommunities() // loadCategories()
425425
sub$ = sr71$.data().subscribe($solver(DataSolver, ErrSolver))
426426

427-
loadCommunities() // loadCategories()
427+
// loadCommunities() // loadCategories()
428428
}
429429

430430
export function uninit() {

‎containers/schemas/pages/community.js‎

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,13 +31,28 @@ export const community = `
3131
}
3232
`
3333
export const pagedCommunities = `
34-
query($filter: CommunitiesFilter!, $userHasLogin: Boolean!) {
34+
query($filter: CommunitiesFilter!) {
3535
pagedCommunities(filter: $filter) {
3636
entries {
3737
${F.community}
38+
threads {
39+
id
40+
title
41+
raw
42+
}
43+
categories {
44+
id
45+
title
46+
raw
47+
}
48+
postsCount
49+
jobsCount
50+
videosCount
51+
reposCount
3852
contributesDigest
3953
subscribersCount
40-
viewerHasSubscribed @include(if: $userHasLogin)
54+
insertedAt
55+
updatedAt
4156
}
4257
${F.pagedCounts}
4358
}

‎pages/communities/index.js‎

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -37,21 +37,12 @@ global.Intl = require('intl')
3737
这个函数的存在是 dev 模式下的 bug, 生产环境下是不需要（不起作用的）的，生产环境下会
3838
直接被路由到子文件
3939
*/
40-
/*
41-
const getSubPath = props => {
42-
const asPathList = parsePathList(props)
43-
44-
return asPathList.length > 1 ? asPathList[1] : null
45-
}
46-
*/
47-
4840
async function fetchData(props) {
4941
const token = BStore.cookie.from_req(props.req, 'jwtToken')
5042
const gqClient = makeGQClient(token)
5143

5244
const pagedCommunities = gqClient.request(P.pagedCommunities, {
5345
filter: { page: 1, size: 30 },
54-
userHasLogin: false,
5546
})
5647

5748
return {
@@ -74,7 +65,8 @@ export default class Index extends React.Component {
7465
// messages,
7566
// locale,
7667
communities: pagedCommunities,
77-
communitiesContent: pagedCommunities,
68+
communitiesContent: { pagedCommunities },
69+
communitiesBanner: { totalCount: pagedCommunities.totalCount },
7870
}
7971
}
8072

0 commit comments

Comments
 (0)