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

Commit b98232b

Browse files
mydearxymmydearxym
committed
chore: Merge branch 'hooks' into dev
2 parents 6d6c39f + 87371c2 commit b98232b

Some content is hidden

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

87 files changed

+1308
-3503
lines changed

‎containers/AccountEditor/index.js‎

Lines changed: 102 additions & 112 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,11 @@
55
*/
66

77
import React from 'react'
8-
import { inject, observer } from 'mobx-react'
98

10-
import { Input, Button, Icon, StatusBox } from '@components'
119
import { ICON_CMD } from '@config'
12-
// import Link from 'next/link'
10+
import { buildLog, connectStore } from '@utils'
1311

14-
import { buildLog, storePlug } from '@utils'
12+
import { Input, Button, Icon, StatusBox } from '@components'
1513
import {
1614
Wrapper,
1715
BackIcon,
@@ -29,7 +27,13 @@ import {
2927
GirlIcon,
3028
} from './styles'
3129

32-
import * as logic from './logic'
30+
import {
31+
useInit,
32+
sexChange,
33+
profileChange,
34+
cancleEdit,
35+
updateConfirm,
36+
} from './logic'
3337

3438
/* eslint-disable no-unused-vars */
3539
const log = buildLog('C:AccountEditor')
@@ -47,10 +51,10 @@ const SexItem = ({ label, value }) => (
4751
<FormItemWrapper>
4852
<SexLable>{label}</SexLable>
4953
<SexInput>
50-
<Dude onClick={logic.sexChange.bind(this, 'dude')}>
54+
<Dude onClick={sexChange.bind(this, 'dude')}>
5155
<DudeIcon src={`${ICON_CMD}/dude.svg`} value={value} />
5256
</Dude>
53-
<Girl onClick={logic.sexChange.bind(this, 'girl')}>
57+
<Girl onClick={sexChange.bind(this, 'girl')}>
5458
<GirlIcon src={`${ICON_CMD}/girl.svg`} value={value} />
5559
</Girl>
5660
</SexInput>
@@ -76,111 +80,97 @@ const FormItem = ({ label, textarea, value, onChange }) => (
7680
</FormItemWrapper>
7781
)
7882

79-
class AccountEditorContainer extends React.Component {
80-
componentDidMount() {
81-
const { accountEditor } = this.props
82-
logic.init(accountEditor)
83-
}
84-
85-
render() {
86-
const { accountEditor } = this.props
87-
88-
const {
89-
accountInfo,
90-
updating,
91-
success,
92-
error,
93-
warn,
94-
statusMsg,
95-
} = accountEditor
96-
97-
/* log('accountInfo editing->: ', accountInfo) */
98-
99-
return (
100-
<Wrapper>
101-
{/* eslint-disable */}
102-
<div onClick={logic.goBack}>
103-
<BackIcon src={`${ICON_CMD}/goback.svg`} />
104-
</div>
105-
{/* eslint-enable */}
106-
<Avatar src={accountInfo.avatar} />
107-
<FormItem
108-
label="昵称:"
109-
value={accountInfo.nickname}
110-
onChange={logic.profileChange('nickname')}
111-
/>
112-
<FormItem
113-
label="邮箱:"
114-
value={accountInfo.email}
115-
onChange={logic.profileChange('email')}
116-
/>
117-
<FormItem
118-
label="城市:"
119-
value={accountInfo.location}
120-
onChange={logic.profileChange('location')}
121-
/>
122-
<FormItem
123-
label="公司:"
124-
value={accountInfo.company}
125-
onChange={logic.profileChange('company')}
126-
/>
127-
<FormItem
128-
label="学校:"
129-
value={accountInfo.education}
130-
onChange={logic.profileChange('education')}
131-
/>
132-
<FormItem
133-
label="QQ:"
134-
value={accountInfo.qq}
135-
onChange={logic.profileChange('qq')}
136-
/>
137-
<FormItem
138-
label="微博:"
139-
value={accountInfo.weibo}
140-
onChange={logic.profileChange('weibo')}
141-
/>
142-
<FormItem
143-
label="微信:"
144-
value={accountInfo.weichat}
145-
onChange={logic.profileChange('weichat')}
146-
/>
147-
<SexItem label="性别:" value={accountInfo.sex} />
148-
<FormItem
149-
label="简介:"
150-
textarea
151-
value={accountInfo.bio}
152-
onChange={logic.profileChange('bio')}
153-
/>
154-
155-
<br />
156-
<StatusBox
157-
success={success}
158-
error={error}
159-
warn={warn}
160-
msg={statusMsg}
161-
/>
162-
163-
<Divider />
164-
<ActionBtns>
165-
<Button type="primary" ghost onClick={logic.cancleEdit}>
166-
取消
83+
const AccountEditorContainer = ({ accountEditor }) => {
84+
useInit(accountEditor)
85+
86+
const {
87+
accountInfo,
88+
updating,
89+
success,
90+
error,
91+
warn,
92+
statusMsg,
93+
} = accountEditor
94+
95+
/* log('accountInfo editing->: ', accountInfo) */
96+
97+
return (
98+
<Wrapper>
99+
{/* eslint-disable */}
100+
<div onClick={logic.goBack}>
101+
<BackIcon src={`${ICON_CMD}/goback.svg`} />
102+
</div>
103+
{/* eslint-enable */}
104+
<Avatar src={accountInfo.avatar} />
105+
<FormItem
106+
label="昵称:"
107+
value={accountInfo.nickname}
108+
onChange={profileChange('nickname')}
109+
/>
110+
<FormItem
111+
label="邮箱:"
112+
value={accountInfo.email}
113+
onChange={profileChange('email')}
114+
/>
115+
<FormItem
116+
label="城市:"
117+
value={accountInfo.location}
118+
onChange={profileChange('location')}
119+
/>
120+
<FormItem
121+
label="公司:"
122+
value={accountInfo.company}
123+
onChange={profileChange('company')}
124+
/>
125+
<FormItem
126+
label="学校:"
127+
value={accountInfo.education}
128+
onChange={profileChange('education')}
129+
/>
130+
<FormItem
131+
label="QQ:"
132+
value={accountInfo.qq}
133+
onChange={profileChange('qq')}
134+
/>
135+
<FormItem
136+
label="微博:"
137+
value={accountInfo.weibo}
138+
onChange={profileChange('weibo')}
139+
/>
140+
<FormItem
141+
label="微信:"
142+
value={accountInfo.weichat}
143+
onChange={profileChange('weichat')}
144+
/>
145+
<SexItem label="性别:" value={accountInfo.sex} />
146+
<FormItem
147+
label="简介:"
148+
textarea
149+
value={accountInfo.bio}
150+
onChange={profileChange('bio')}
151+
/>
152+
153+
<br />
154+
<StatusBox success={success} error={error} warn={warn} msg={statusMsg} />
155+
156+
<Divider />
157+
<ActionBtns>
158+
<Button type="primary" ghost onClick={cancleEdit}>
159+
取消
160+
</Button>
161+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
162+
{updating ? (
163+
<Button type="primary" disabled>
164+
<Icon type="loading" /> 保存中
167165
</Button>
168-
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
169-
{updating ? (
170-
<Button type="primary" disabled>
171-
<Icon type="loading" /> 保存中
172-
</Button>
173-
) : (
174-
<Button type="primary" onClick={logic.updateConfirm}>
175-
保存
176-
</Button>
177-
)}
178-
</ActionBtns>
179-
</Wrapper>
180-
)
181-
}
166+
) : (
167+
<Button type="primary" onClick={updateConfirm}>
168+
保存
169+
</Button>
170+
)}
171+
</ActionBtns>
172+
</Wrapper>
173+
)
182174
}
183175

184-
export default inject(storePlug('accountEditor'))(
185-
observer(AccountEditorContainer)
186-
)
176+
export default connectStore(AccountEditorContainer)

‎containers/AccountEditor/logic.js‎

Lines changed: 21 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import R from 'ramda'
2+
import { useEffect } from 'react'
23

34
import {
45
asyncSuit,
@@ -20,6 +21,7 @@ const log = buildLog('L:AccountEditor')
2021
/* eslint-enable no-unused-vars */
2122

2223
let store = null
24+
let sub$ = null
2325

2426
export function goBack() {
2527
send(EVENT.PREVIEW, {
@@ -132,8 +134,23 @@ const ErrSolver = [
132134
},
133135
]
134136

135-
export function init(selectedStore) {
136-
store = selectedStore
137-
store.copyAccountInfo()
138-
sr71$.data().subscribe($solver(DataSolver, ErrSolver))
137+
// ###############################
138+
// init & uninit
139+
// ###############################
140+
export const useInit = _store => {
141+
useEffect(
142+
() => {
143+
store = _store
144+
// log('effect init')
145+
store.copyAccountInfo()
146+
sub$ = sr71$.data().subscribe($solver(DataSolver, ErrSolver))
147+
148+
return () => {
149+
if (sub$) {
150+
sub$.unsubscribe()
151+
}
152+
}
153+
},
154+
[_store]
155+
)
139156
}

0 commit comments

Comments
 (0)