Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings
This repository was archived by the owner on Nov 1, 2021. It is now read-only.

Commit87371c2

Browse files
committed
refactor(containers): use hooks & connectStore
1 parent6d6c39f commit87371c2

File tree

87 files changed

+1308
-3503
lines changed

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
importReactfrom'react'
8-
import{inject,observer}from'mobx-react'
98

10-
import{Input,Button,Icon,StatusBox}from'@components'
119
import{ICON_CMD}from'@config'
12-
//importLinkfrom '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*aslogicfrom'./logic'
30+
import{
31+
useInit,
32+
sexChange,
33+
profileChange,
34+
cancleEdit,
35+
updateConfirm,
36+
}from'./logic'
3337

3438
/* eslint-disable no-unused-vars */
3539
constlog=buildLog('C:AccountEditor')
@@ -47,10 +51,10 @@ const SexItem = ({ label, value }) => (
4751
<FormItemWrapper>
4852
<SexLable>{label}</SexLable>
4953
<SexInput>
50-
<DudeonClick={logic.sexChange.bind(this,'dude')}>
54+
<DudeonClick={sexChange.bind(this,'dude')}>
5155
<DudeIconsrc={`${ICON_CMD}/dude.svg`}value={value}/>
5256
</Dude>
53-
<GirlonClick={logic.sexChange.bind(this,'girl')}>
57+
<GirlonClick={sexChange.bind(this,'girl')}>
5458
<GirlIconsrc={`${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-
classAccountEditorContainerextendsReact.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-
<divonClick={logic.goBack}>
103-
<BackIconsrc={`${ICON_CMD}/goback.svg`}/>
104-
</div>
105-
{/* eslint-enable */}
106-
<Avatarsrc={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-
<SexItemlabel="性别:"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-
<Buttontype="primary"ghostonClick={logic.cancleEdit}>
166-
取消
83+
constAccountEditorContainer=({ 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+
<divonClick={logic.goBack}>
101+
<BackIconsrc={`${ICON_CMD}/goback.svg`}/>
102+
</div>
103+
{/* eslint-enable */}
104+
<Avatarsrc={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+
<SexItemlabel="性别:"value={accountInfo.sex}/>
146+
<FormItem
147+
label="简介:"
148+
textarea
149+
value={accountInfo.bio}
150+
onChange={profileChange('bio')}
151+
/>
152+
153+
<br/>
154+
<StatusBoxsuccess={success}error={error}warn={warn}msg={statusMsg}/>
155+
156+
<Divider/>
157+
<ActionBtns>
158+
<Buttontype="primary"ghostonClick={cancleEdit}>
159+
取消
160+
</Button>
161+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
162+
{updating ?(
163+
<Buttontype="primary"disabled>
164+
<Icontype="loading"/> 保存中
167165
</Button>
168-
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
169-
{updating ?(
170-
<Buttontype="primary"disabled>
171-
<Icontype="loading"/> 保存中
172-
</Button>
173-
) :(
174-
<Buttontype="primary"onClick={logic.updateConfirm}>
175-
保存
176-
</Button>
177-
)}
178-
</ActionBtns>
179-
</Wrapper>
180-
)
181-
}
166+
) :(
167+
<Buttontype="primary"onClick={updateConfirm}>
168+
保存
169+
</Button>
170+
)}
171+
</ActionBtns>
172+
</Wrapper>
173+
)
182174
}
183175

184-
exportdefaultinject(storePlug('accountEditor'))(
185-
observer(AccountEditorContainer)
186-
)
176+
exportdefaultconnectStore(AccountEditorContainer)

‎containers/AccountEditor/logic.js‎

Lines changed: 21 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
importRfrom'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
letstore=null
24+
letsub$=null
2325

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

135-
exportfunctioninit(selectedStore){
136-
store=selectedStore
137-
store.copyAccountInfo()
138-
sr71$.data().subscribe($solver(DataSolver,ErrSolver))
137+
// ###############################
138+
// init & uninit
139+
// ###############################
140+
exportconstuseInit=_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)
[8]ページ先頭
©2009-2025 Movatter.jp