Skip to content

Commit b0b29a7

Browse files
mydearxymmydearxym
committed
add categories && refactor
1 parent 90059da commit b0b29a7

File tree

48 files changed

+787
-187
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

48 files changed

+787
-187
lines changed

‎containers/CategoryEditor/index.js‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
/*
2+
*
3+
* CategoryEditor
4+
*
5+
*/
6+
7+
import React from 'react'
8+
import { inject, observer } from 'mobx-react'
9+
10+
// import Link from 'next/link'
11+
12+
import { makeDebugger, storePlug } from '../../utils'
13+
14+
import {
15+
Button,
16+
Icon,
17+
Space,
18+
FormInputer,
19+
/* FormSelector, */
20+
/* TagColorSelector, */
21+
} from '../../components'
22+
23+
import { Wrapper, ActionBtns, Divider } from './styles'
24+
import * as logic from './logic'
25+
26+
/* eslint-disable no-unused-vars */
27+
const debug = makeDebugger('C:CategoryEditor')
28+
/* eslint-enable no-unused-vars */
29+
30+
class CategoryEditorContainer extends React.Component {
31+
componentWillMount() {
32+
logic.init(this.props.categoryEditor)
33+
}
34+
35+
render() {
36+
const { categoryEditor } = this.props
37+
const { mutating, categoryData } = categoryEditor
38+
39+
return (
40+
<Wrapper>
41+
coderplanets
42+
<h2>创建社区分类</h2>
43+
<Divider />
44+
<FormInputer
45+
label="名称:"
46+
value={categoryData.title}
47+
onChange={logic.profileChange('title')}
48+
note="一个分类可包含多个社区，同时，一个社区可属于多个分类"
49+
/>
50+
<Divider />
51+
<ActionBtns>
52+
<Button type="primary" ghost onClick={logic.cancleMutate}>
53+
取消
54+
</Button>
55+
<Space right="20px" />
56+
{mutating ? (
57+
<Button type="primary" disabled>
58+
<Icon type="loading" /> 保存中
59+
</Button>
60+
) : (
61+
<Button type="primary" onClick={logic.mutateConfirm}>
62+
保存
63+
</Button>
64+
)}
65+
</ActionBtns>
66+
</Wrapper>
67+
)
68+
}
69+
}
70+
71+
export default inject(storePlug('categoryEditor'))(
72+
observer(CategoryEditorContainer)
73+
)

‎containers/CategoryEditor/logic.js‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
import R from 'ramda'
2+
3+
import {
4+
asyncRes,
5+
TYPE,
6+
makeDebugger,
7+
closePreviewer,
8+
$solver,
9+
castArgs,
10+
} from '../../utils'
11+
import S from './schema'
12+
import SR71 from '../../utils/network/sr71'
13+
14+
const sr71$ = new SR71()
15+
let sub$ = null
16+
17+
/* eslint-disable no-unused-vars */
18+
const debug = makeDebugger('L:CategoryEditor')
19+
/* eslint-enable no-unused-vars */
20+
21+
let categoryEditor = null
22+
23+
export const profileChange = R.curry((part, e) =>
24+
categoryEditor.updateCategory({
25+
[part]: e.target.value,
26+
})
27+
)
28+
29+
export const mutateConfirm = () => {
30+
const requiredArgs = ['title']
31+
const args = { ...categoryEditor.categoryData }
32+
33+
categoryEditor.markState({
34+
mutating: true,
35+
})
36+
const fargs = castArgs(args, requiredArgs)
37+
38+
debug('fargs --> ', fargs)
39+
sr71$.mutate(S.createCategory, fargs)
40+
}
41+
42+
export function cancleMutate() {
43+
categoryEditor.markState({
44+
category: {},
45+
isEdit: false,
46+
})
47+
closePreviewer()
48+
}
49+
50+
// ###############################
51+
// Data & Error handlers
52+
// ###############################
53+
const DataSolver = [
54+
{
55+
match: asyncRes('createCategory'),
56+
action: () => {
57+
debug('createCategory done!')
58+
closePreviewer(TYPE.GATEGORIES_REFRESH)
59+
},
60+
},
61+
]
62+
63+
const ErrSolver = []
64+
65+
export function init(selectedStore) {
66+
categoryEditor = selectedStore
67+
debug(categoryEditor)
68+
if (sub$) sub$.unsubscribe()
69+
sub$ = sr71$.data().subscribe($solver(DataSolver, ErrSolver))
70+
}

‎containers/CategoryEditor/schema.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import gql from 'graphql-tag'
2+
3+
const createCategory = gql`
4+
mutation($title: String!) {
5+
createCategory(title: $title) {
6+
id
7+
}
8+
}
9+
`
10+
11+
const schema = {
12+
createCategory,
13+
}
14+
15+
export default schema

‎containers/CategoryEditor/styles/index.js‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import styled from 'styled-components'
2+
3+
// import { Img } from '../../../components'
4+
import { Animate } from '../../../utils'
5+
6+
export const Wrapper = styled.div`
7+
background: #ffffff;
8+
padding-top: 20px;
9+
padding-bottom: 50px;
10+
height: 100%;
11+
min-height: 80vh;
12+
margin-top: 15px;
13+
margin-left: 15px;
14+
margin-right: 15px;
15+
background: #f9fcfc;
16+
border-radius: 5px;
17+
display: flex;
18+
flex-direction: column;
19+
align-items: center;
20+
position: relative;
21+
animation: ${Animate.fadeInRight} 0.2s linear;
22+
`
23+
24+
export const Divider = styled.div`
25+
border-top: 1px solid #e3eeed;
26+
margin-top: 15px;
27+
width: 75%;
28+
margin-bottom: 20px;
29+
`
30+
31+
export const ActionBtns = styled.div``

‎containers/CategoryEditor/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 CategoryEditor from '../index'
5+
6+
describe('TODO <CategoryEditor />', () => {
7+
it('Expect to have unit tests specified', () => {
8+
expect(true).toEqual(true)
9+
})
10+
})

‎containers/CommunitiesBanner/CategoryBanner.js‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import React from 'react'
2+
3+
import { ICON_ASSETS } from '../../config'
4+
import * as logic from './logic'
5+
import { Tag, Popover, BannerCountBrief } from '../../components'
6+
7+
import {
8+
BannerContentWrapper,
9+
Operation,
10+
OperationItem,
11+
OperationDivider,
12+
OperationTitle,
13+
FilterTags,
14+
OperationIcon,
15+
OperationIconChart,
16+
} from './styles/common_banner'
17+
18+
class CategoryBanner extends React.Component {
19+
componentWillMount() {
20+
logic.loadCategories()
21+
}
22+
23+
render() {
24+
const { filteredCount, totalCount } = this.props
25+
return (
26+
<BannerContentWrapper>
27+
<BannerCountBrief
28+
filteredCount={filteredCount}
29+
totalCount={totalCount}
30+
part="社区分类"
31+
unit="个"
32+
/>
33+
<Operation>
34+
<OperationItem>
35+
<OperationIcon src={`${ICON_ASSETS}/cmd/filter2.svg`} />
36+
<Popover
37+
content={<div>兼容各个页面的 Filter 菜单</div>}
38+
trigger="hover"
39+
>
40+
<OperationTitle>过滤</OperationTitle>
41+
</Popover>
42+
<FilterTags>
43+
<Tag closable>最多xx</Tag>
44+
<Tag closable>最少..</Tag>
45+
</FilterTags>
46+
</OperationItem>
47+
<OperationDivider />
48+
<OperationItem onClick={logic.onAdd.bind(this, 'categories')}>
49+
<OperationIconChart src={`${ICON_ASSETS}/cmd/plus.svg`} />
50+
添加
51+
</OperationItem>
52+
<OperationDivider />
53+
<OperationItem>
54+
<OperationIcon src={`${ICON_ASSETS}/cmd/chart.svg`} />
55+
{/* <OperationIconChart src={`${ICON_ASSETS}/cmd/list.svg`} /> */}
56+
统计
57+
</OperationItem>
58+
</Operation>
59+
</BannerContentWrapper>
60+
)
61+
}
62+
}
63+
64+
export default CategoryBanner

‎containers/CommunitiesBanner/IndexBanner.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import {
1717

1818
class IndexBanner extends React.Component {
1919
componentWillMount() {
20+
console.log('准备 load loadCommunities !')
2021
logic.loadCommunities()
2122
}
2223
render() {

‎containers/CommunitiesBanner/index.js‎

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,9 @@ import * as logic from './logic'
88
import IndexBanner from './IndexBanner'
99
import EditorsBanner from './EditorsBanner'
1010
import PostsBanner from './PostsBanner'
11+
import CategoryBanner from './CategoryBanner'
1112
import TagsBanner from './TagsBanner'
1213

13-
// TODO: extract banner styles to common components
1414
import { BannerContainer } from './styles'
1515

1616
/* eslint-disable no-unused-vars */
@@ -19,15 +19,30 @@ const debug = makeDebugger('C:CommunitiesBanner')
1919

2020
const renderChildBanner = (route, store) => {
2121
const {
22+
// communities
2223
totalCount,
2324
filteredTotalCount,
25+
// tags
2426
tagsTotalCount,
2527
filterdTagsCount,
28+
// posts
2629
postsTotalCount,
2730
filteredPostsCount,
31+
// categories
32+
categoriesTotalCount,
33+
filterdCategoriesCount,
2834
} = store
2935

3036
switch (route.subQuery) {
37+
case ROUTE.CATEGORIES: {
38+
return (
39+
<CategoryBanner
40+
totalCount={categoriesTotalCount}
41+
filteredCount={filterdCategoriesCount}
42+
/>
43+
)
44+
}
45+
3146
case ROUTE.TAGS: {
3247
return (
3348
<TagsBanner
@@ -66,8 +81,8 @@ class CommunitiesBannerContainer extends React.Component {
6681
const { communitiesBanner } = this.props
6782
const { route } = communitiesBanner
6883
/* const { detail } = banner */
69-
// debug('route ccc: ', route)
70-
// const restProps = { ...this.props.communitiesBanner }
84+
debug('--> 在 Banner 中的 route: ', route.subQuery)
85+
/* const restProps = { ...this.props.communitiesBanner } */
7186

7287
return (
7388
<BannerContainer>

0 commit comments

Comments
 (0)