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

Commit d969305

Browse files
mydearxymmydearxym
committed
refactor(cheatsheet): rewrite with new convesion
1 parent f7f1c4a commit d969305

File tree

19 files changed

+316
-119
lines changed

19 files changed

+316
-119
lines changed

‎components/EmptyThread/index.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ const DescContent = ({ community, thread }) => (
3434
<React.Fragment>
3535
<div>
3636
如果你有 {community} 相关的优质
37-
{translator[thread]}
37+
{translator[thread] || thread}
3838
，欢迎一起分享 / 交流
3939
</div>
4040
<div>
@@ -55,7 +55,7 @@ const EmptyThread = ({ community, thread }) => (
5555
<Text>
5656
<Title>
5757
{community} 社区内未找到符合相关条件的
58-
{translator[thread]}
58+
{translator[thread] || thread}
5959
</Title>
6060
<DescWrapper>
6161
<DescContent community={community} thread={thread} />

‎components/EmptyThread/styles/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ export const Wrapper = styled.div`
1010
width: 100%;
1111
height: 100%;
1212
margin-top: 10%;
13+
margin-bottom: 30px;
1314
`
1415

1516
export const Icon404 = styled(Img)`

‎components/LoadingEffects/CheatSheetLoading.js‎

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,25 @@
11
import React from 'react'
22
import PropTypes from 'prop-types'
3-
import Masonry from 'react-masonry-component'
43
import R from 'ramda'
54
import { withTheme } from 'styled-components'
65

7-
// import Loading, { Rect, Circle } from 'react-content-loader'
86
import ContentLoader from 'react-content-loader'
97

8+
import { Wrapper, CheatsheetCard } from './styles'
9+
1010
import { makeDebugger, uid } from '../../utils'
1111
/* eslint-disable no-unused-vars */
1212
const debug = makeDebugger('c:LoadingEffects:index')
1313
/* eslint-enable no-unused-vars */
1414

15-
/* eslint-disable no-unused-vars */
1615
const LoadingBlock = ({ theme }) => (
17-
/* eslint-enable no-unused-vars */
18-
19-
<div style={{ width: '45%', overflow: 'hidden', marginTop: 20, height: 180 }}>
16+
<CheatsheetCard>
2017
<ContentLoader
2118
height={200}
2219
width={280}
2320
speed={2}
24-
primaryColor="#f3f3f3"
25-
secondaryColor="#ecebeb"
21+
primaryColor={theme.loading.basic}
22+
secondaryColor={theme.loading.animate}
2623
>
2724
<rect x="0" y="0" rx="3" ry="3" width="70" height="10" />
2825
<rect x="80" y="0" rx="3" ry="3" width="100" height="10" />
@@ -34,15 +31,15 @@ const LoadingBlock = ({ theme }) => (
3431
<rect x="185" y="40" rx="3" ry="3" width="60" height="10" />
3532
<rect x="0" y="60" rx="3" ry="3" width="30" height="10" />
3633
</ContentLoader>
37-
</div>
34+
</CheatsheetCard>
3835
)
3936

4037
const CheatSheetLoading = ({ column, theme }) => (
41-
<Masonry>
38+
<Wrapper>
4239
{R.range(0, column).map(() => (
4340
<LoadingBlock key={uid.gen()} theme={theme} />
4441
))}
45-
</Masonry>
42+
</Wrapper>
4643
)
4744

4845
CheatSheetLoading.propTypes = {

‎components/LoadingEffects/styles/index.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import styled from 'styled-components'
2+
3+
// import { Img } from '../../../components'
4+
// import { theme } from '../../../utils'
5+
6+
export const Wrapper = styled.div`
7+
display: flex;
8+
flex-wrap: wrap;
9+
`
10+
export const CheatsheetCard = styled.div`
11+
width: 44%;
12+
overflow: hidden;
13+
margin-top: 20px;
14+
height: 180px;
15+
margin-right: 50px;
16+
`

‎config/endpoint.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,3 +28,6 @@ export const GITHUB_ADDR = 'https://github.com/coderplanets/coderplanets_web'
2828
export const GITHUB_ME = 'https://github.com/mydearxym'
2929
export const ISSUE_ADDR = `${GITHUB_ADDR}/issues/new`
3030
export const MENTION_USER_ADDR = 'https://coderplanets.com/users/'
31+
32+
export const COMMUNITY_WIKI =
33+
'https://github.com/coderplanets/cps_cheatsheets/blob/master'

‎config/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,5 +5,6 @@ export {
55
GITHUB_ADDR,
66
GITHUB_ME,
77
MENTION_USER_ADDR,
8+
COMMUNITY_WIKI,
89
} from './endpoint'
910
export { ASSETS_ENDPOINT, ICON_BASE, ICON_CMD, DEFAULT_ICON } from './assets'

‎containers/CheatsheetThread/Cheatsheet.js‎

Lines changed: 45 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,16 @@ import Masonry from 'react-masonry-component'
33
import Remarkable from 'remarkable'
44
import remarkableemoj from 'remarkable-emoji'
55
// import Prism from 'mastani-codehighlight'
6+
import { COMMUNITY_WIKI } from '../../config'
67

7-
import { Wrapper, CardWrapper } from './styles/cheatsheet'
8+
import {
9+
Wrapper,
10+
CardWrapper,
11+
ErrorWrapper,
12+
ErrorTitle,
13+
ErrorLink,
14+
} from './styles/cheatsheet'
15+
import parser from './parser'
816
import CheatSheetStyle from './styles/CheatsheetMarkStyles'
917

1018
import { uid } from '../../utils'
@@ -26,22 +34,41 @@ const Cards = ({ cards }) =>
2634
</CardWrapper>
2735
))
2836

29-
const Cheatsheet = ({ source }) => (
30-
<Wrapper>
31-
{source.map(item => (
32-
<CheatSheetStyle key={uid.gen()}>
33-
<div
34-
className="cheatsheet-body"
35-
dangerouslySetInnerHTML={{
36-
__html: md.render(item.header),
37-
}}
38-
/>
39-
<Masonry>
40-
<Cards cards={item.cards} />
41-
</Masonry>
42-
</CheatSheetStyle>
43-
))}
44-
</Wrapper>
45-
)
37+
const Cheatsheet = ({ source, communityRaw }) => {
38+
let data = null
39+
try {
40+
data = parser(source)
41+
return (
42+
<Wrapper>
43+
{data.map(item => (
44+
<CheatSheetStyle key={uid.gen()}>
45+
<div
46+
className="cheatsheet-body"
47+
dangerouslySetInnerHTML={{
48+
__html: md.render(item.header),
49+
}}
50+
/>
51+
<Masonry>
52+
<Cards cards={item.cards} />
53+
</Masonry>
54+
</CheatSheetStyle>
55+
))}
56+
</Wrapper>
57+
)
58+
} catch (e) {
59+
return (
60+
<ErrorWrapper>
61+
<ErrorTitle>解析错误</ErrorTitle>
62+
<ErrorLink
63+
href={`${COMMUNITY_WIKI}/${communityRaw}.md`}
64+
rel="noopener noreferrer"
65+
target="_blank"
66+
>
67+
查看: {`${communityRaw}.md`}
68+
</ErrorLink>
69+
</ErrorWrapper>
70+
)
71+
}
72+
}
4673

4774
export default Cheatsheet

‎containers/CheatsheetThread/Note.js‎

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react'
22

3-
import { DotDivider, ContributorList } from '../../components'
3+
import { DotDivider, ContributorList, Button } from '../../components'
44

55
import {
66
Wrapper,
@@ -9,18 +9,28 @@ import {
99
Title,
1010
JoinText,
1111
ViewsText,
12+
SyncWrapper,
1213
} from './styles/note'
1314

14-
import fakeusers from './fakeusers'
15+
// import fakeusers from './fakeusers'
1516

16-
const Note = () => (
17+
const Note = ({ onSync, contributors, views, addContributor }) => (
1718
<Wrapper>
1819
<Divider />
1920
<Text>
2021
<Title>本页贡献者</Title> <DotDivider /> <JoinText>参与编辑</JoinText>
21-
<ViewsText>浏览: 244</ViewsText>
22+
<ViewsText>浏览: {views}</ViewsText>
2223
</Text>
23-
<ContributorList users={fakeusers} showAdder />
24+
<ContributorList
25+
users={contributors}
26+
showAdder
27+
addContributor={addContributor}
28+
/>
29+
<SyncWrapper>
30+
<Button size="small" type="primary" ghost onClick={onSync}>
31+
同步 cheatseet
32+
</Button>
33+
</SyncWrapper>
2434
</Wrapper>
2535
)
2636

‎containers/CheatsheetThread/index.js‎

Lines changed: 25 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -10,43 +10,36 @@ import Prism from 'mastani-codehighlight'
1010

1111
import { Wrapper } from './styles'
1212

13-
// import { NotFound, CheatSheetLoading } from '../../components'
13+
import { EmptyThread, CheatSheetLoading } from '../../components'
1414

1515
import Cheatsheet from './Cheatsheet'
1616
import Note from './Note'
1717

18-
import { makeDebugger, storePlug } from '../../utils'
18+
import { makeDebugger, storePlug, TYPE } from '../../utils'
1919
import * as logic from './logic'
2020
/* eslint-disable no-unused-vars */
2121
const debug = makeDebugger('C:CheatsheetThread')
2222
/* eslint-enable no-unused-vars */
2323

24-
/*
25-
const renderContent = (source, state, errMsg) => {
26-
switch (state) {
27-
case 'init': {
28-
return <div>init la</div>
29-
}
30-
case 'loading': {
24+
const renderView = (cheatsheetData, type, communityRaw) => {
25+
switch (type) {
26+
case TYPE.LOADING: {
3127
return <CheatSheetLoading />
3228
}
33-
case '404': {
34-
return <NotFound />
35-
}
36-
case 'empty': {
37-
return <div>isEmpty</div>
29+
case TYPE.NOT_FOUND: {
30+
return <EmptyThread community={communityRaw} thread="cheatsheet" />
3831
}
39-
case 'loaded': {
40-
return <Cheatsheet source={source} />
32+
default: {
33+
return (
34+
<Cheatsheet
35+
source={cheatsheetData.readme}
36+
communityRaw={communityRaw}
37+
/>
38+
)
4139
}
42-
case 'parse_error': {
43-
return <h3>parse error</h3>
44-
}
45-
default:
46-
return <div>default</div>
4740
}
4841
}
49-
*/
42+
// TODO: NOT_FOUND, parse_error
5043

5144
class CheatsheetThreadContainer extends React.Component {
5245
componentWillMount() {
@@ -60,17 +53,19 @@ class CheatsheetThreadContainer extends React.Component {
6053

6154
render() {
6255
const { cheatsheetThread } = this.props
63-
const { sourceData /* state, errMsg */ } = cheatsheetThread
64-
65-
// console.log('sourceData --> ', sourceData)
66-
// <div>{renderContent(source, state, errMsg)}</div>
67-
68-
// <div>{renderContent(sourceData, state, errMsg)}</div>
56+
const { cheatsheetData, curView, curCommunity } = cheatsheetThread
57+
const communityRaw = curCommunity.raw
6958

7059
return (
7160
<Wrapper>
72-
<Cheatsheet source={sourceData} />
73-
<Note />
61+
{renderView(cheatsheetData, curView, communityRaw)}
62+
<Note
63+
onSync={logic.syncCheetsheetFromGithub}
64+
contributors={cheatsheetData.contributors}
65+
views={cheatsheetData.views}
66+
addContributor={logic.addContributor}
67+
curView={curView}
68+
/>
7469
</Wrapper>
7570
)
7671
}

0 commit comments

Comments
 (0)