Skip to content

Commit b5491d2

Browse files
KenChoiKenChoi
KenChoi
authored and
KenChoi
committed
example use MobX
1 parent 7deef34 commit b5491d2

File tree

3 files changed

+105
-97
lines changed

3 files changed

+105
-97
lines changed

‎example/app/routes/Home/ConversationList/ConversationListStore.js‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
import {observable,action,computed,autorun} from 'mobx';
2+
import JMessage from 'jmessage-react-plugin';
3+
4+
class ConversationListStore {
5+
@observable
6+
convList = []
7+
8+
convertToConvList = (list) => {
9+
list.map((conversation, index) => {
10+
this.convList.push(this.getListItem(conversation))
11+
})
12+
return this.convList
13+
}
14+
15+
getListItem(conversation) {
16+
var newItem = {}
17+
newItem.conversation = conversation
18+
newItem.type = conversation.conversationType
19+
if (conversation.conversationType === "single") {
20+
newItem.appKey = conversation.target.appKey
21+
newItem.key = conversation.target.username
22+
newItem.username = conversation.target.username
23+
newItem.avatarThumbPath = conversation.target.avatarThumbPath
24+
newItem.displayName = conversation.target.nickname
25+
console.log("nickname: " + newItem.displayName)
26+
if (newItem.displayName == "") {
27+
newItem.displayName = conversation.target.username
28+
}
29+
if (newItem.avatarThumbPath === "") {
30+
JMessage.getUserInfo({username: newItem.username, appKey: newItem.appKey}, (userInfo) => {
31+
console.log("Get user info succeed" + JSON.stringify(userInfo))
32+
newItem.nickname = userInfo.nickname
33+
newItem.avatarThumbPath = userInfo.avatarThumbPath
34+
}, (error) => {
35+
console.log("Get user info failed, " + JSON.stringify(error))
36+
})
37+
}
38+
} else if (conversation.conversationType === "group") {
39+
newItem.appKey = conversation.target.ownerAppKey
40+
newItem.key = conversation.target.id
41+
newItem.groupId = conversation.target.id
42+
newItem.displayName = conversation.target.name
43+
newItem.avatarThumbPath = conversation.target.avatarThumbPath
44+
if (newItem.avatarThumbPath === "") {
45+
JMessage.getGroupInfo({id: groupId}, (groupInfo) => {
46+
console.log("Get group info succeed")
47+
newItem.avatarThumbPath = groupInfo.avatarThumbPath
48+
newItem.displayName = groupInfo.displayName
49+
}, (error) => {
50+
console.log("Get group info failed, " + JSON.stringify(error))
51+
})
52+
}
53+
} else {
54+
newItem.appKey = conversation.target.appKey
55+
newItem.key = conversation.target.roomId
56+
newItem.roomId = conversation.target.roomId
57+
newItem.avatarThumbPath = "../../../resource/chat-icon.png"
58+
newItem.displayName = conversation.target.roomName
59+
newItem.memberCount = conversation.target.memberCount
60+
newItem.maxMemberCount = conversation.target.maxMemberCount
61+
}
62+
63+
if (conversation.latestMessage === undefined) {
64+
return newItem
65+
}
66+
67+
if (conversation.latestMessage.type === 'text') {
68+
newItem.latestMessageString = conversation.latestMessage.text
69+
}
70+
71+
if (conversation.latestMessage.type === 'image') {
72+
newItem.latestMessageString = '[图片]'
73+
}
74+
75+
if (conversation.latestMessage.type === 'voice') {
76+
newItem.latestMessageString = '[语音]'
77+
}
78+
79+
if (conversation.latestMessage.type === 'file') {
80+
newItem.latestMessageString = '[文件]'
81+
}
82+
83+
return newItem
84+
}
85+
}
86+
87+
export default new ConversationListStore

‎example/app/routes/Home/ConversationList/index.js‎

Lines changed: 14 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,11 @@
33
import React from 'react';
44
import ReactNative, { ScrollView } from 'react-native';
55
import JMessage from 'jmessage-react-plugin';
6+
import {observer} from 'mobx-react/native';
7+
import {observable} from 'mobx';
68

7-
import FormButton from '../../../views/FormButton'
9+
import FormButton from '../../../views/FormButton';
10+
import ConversationListStore from './ConversationListStore';
811

912
const {
1013
View,
@@ -64,6 +67,7 @@ const styles = StyleSheet.create({
6467

6568
var count = 0
6669

70+
@observer
6771
export default class ConversationList extends React.Component {
6872
static navigationOptions = ({
6973
navigation
@@ -94,6 +98,7 @@ export default class ConversationList extends React.Component {
9498

9599
constructor(props) {
96100
super(props);
101+
this.ConversationListStore = ConversationListStore
97102
this.state = {
98103
data: [{
99104
key: 'a'
@@ -123,111 +128,25 @@ export default class ConversationList extends React.Component {
123128
this.reloadConversationList()
124129
}
125130

126-
getListItem(conversation) {
127-
var newItem = {}
128-
newItem.conversation = conversation
129-
newItem.type = conversation.conversationType
130-
if (conversation.conversationType === "single") {
131-
newItem.appKey = conversation.target.appKey
132-
newItem.key = conversation.target.username
133-
newItem.username = conversation.target.username
134-
newItem.avatarThumbPath = conversation.target.avatarThumbPath
135-
newItem.displayName = conversation.target.nickname
136-
console.log("nickname: " + newItem.displayName)
137-
if (newItem.displayName == "") {
138-
newItem.displayName = conversation.target.username
139-
}
140-
if (newItem.avatarThumbPath === "") {
141-
JMessage.getUserInfo(newItem, (userInfo) => {
142-
console.log("Get user info succeed")
143-
this.setState((state) => {
144-
const refresh = new Map(state.refresh)
145-
refresh.set(newItem.username, !refresh.get(newItem.username))
146-
return {refresh}
147-
})
148-
}, (error) => {
149-
console.log("Get user info failed, " + JSON.stringify(error))
150-
})
151-
}
152-
} else if (conversation.conversationType === "group") {
153-
newItem.appKey = conversation.target.ownerAppKey
154-
newItem.key = conversation.target.id
155-
newItem.groupId = conversation.target.id
156-
newItem.displayName = conversation.target.name
157-
newItem.avatarThumbPath = conversation.target.avatarThumbPath
158-
if (newItem.avatarThumbPath === "") {
159-
JMessage.getGroupInfo({id: groupId}, (groupInfo) => {
160-
console.log("Get group info succeed")
161-
this.setState((state) => {
162-
const refresh = new Map(state.refresh)
163-
refresh.set(newItem.groupId, !refresh.get(newItem.groupId))
164-
return {refresh}
165-
})
166-
}, (error) => {
167-
console.log("Get group info failed, " + JSON.stringify(error))
168-
})
169-
}
170-
} else {
171-
newItem.appKey = conversation.target.appKey
172-
newItem.key = conversation.target.roomId
173-
newItem.roomId = conversation.target.roomId
174-
newItem.avatarThumbPath = "../../../resource/chat-icon.png"
175-
newItem.displayName = conversation.target.roomName
176-
newItem.memberCount = conversation.target.memberCount
177-
newItem.maxMemberCount = conversation.target.maxMemberCount
178-
}
179-
180-
if (conversation.latestMessage === undefined) {
181-
return newItem
182-
}
183-
184-
if (conversation.latestMessage.type === 'text') {
185-
newItem.latestMessageString = conversation.latestMessage.text
186-
}
187-
188-
if (conversation.latestMessage.type === 'image') {
189-
newItem.latestMessageString = '[图片]'
190-
}
191-
192-
if (conversation.latestMessage.type === 'voice') {
193-
newItem.latestMessageString = '[语音]'
194-
}
195-
196-
if (conversation.latestMessage.type === 'file') {
197-
newItem.latestMessageString = '[文件]'
198-
}
199-
200-
return newItem
201-
}
202-
203131
reloadConversationList() {
204132
JMessage.getConversations((result) => {
205-
var data = result.map((conversation, index) => {
206-
return this.getListItem(conversation)
207-
})
208-
data.sort((a, b) => {
209-
return b.latestMessage.createTime - a.latestMessage.createTime
210-
})
211-
this.setState({
212-
data: data
213-
})
133+
this.ConversationListStore.convertToConvList(result)
214134
}, (error) => {
215135
Alert.alert(JSON.stringify(error))
216136
})
217137
}
218138

219-
enterConversation(item) {
139+
enterConversation(conv) {
220140
this.reloadConversationList()
221-
JMessage.enterConversation(item, (status) => { }, (error) => { })
141+
JMessage.enterConversation(conv, (status) => { }, (error) => { })
222142
this.props.navigation.navigate('Chat', {
223-
conversation: item
143+
conversation: {type: conv.conversationType, username: conv.target.username, groupId: conv.groupId}
224144
})
225145
}
226146

227147
createConversation(params) {
228148
JMessage.createConversation(params, (conv) => {
229-
var item = this.getListItem(conv)
230-
this.enterConversation(item)
149+
this.enterConversation(conv)
231150
}, (error) => {
232151
Alert.alert('create conversation error !', JSON.stringify(error))
233152
})
@@ -236,7 +155,7 @@ export default class ConversationList extends React.Component {
236155
enterChatRoom(item) {
237156
JMessage.enterChatRoom(item, (conversation) => {
238157
this.props.navigation.navigate('Chat', {
239-
conversation: this.getListItem(conversation)
158+
conversation: {type: conversation.conversationType, roomId: conversation.target.roomId}
240159
})
241160
}, (error) => {
242161
console.alert("error, code: " + error.code + ", description: " + error.description)
@@ -245,9 +164,7 @@ export default class ConversationList extends React.Component {
245164

246165
render() {
247166
this.listView = <FlatList
248-
data={
249-
this.state.data
250-
}
167+
data={this.ConversationListStore.convList}
251168
extraData={this.state}
252169
renderItem={
253170
({
@@ -261,7 +178,7 @@ export default class ConversationList extends React.Component {
261178
if (item.type === "chatroom") {
262179
this.enterChatRoom(item)
263180
} else {
264-
this.enterConversation(item)
181+
this.enterConversation(item.conversation)
265182
}
266183
}}>
267184
<View style={[styles.conversationItem]}>

‎example/package.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,12 @@
66
},
77
"dependencies": {
88
"aurora-imui-react-native": "^0.6.9",
9+
"babel-plugin-transform-decorators-legacy": "^1.3.4",
10+
"babel-preset-react-native-stage-0": "^1.0.1",
911
"jcore-react-native": "^1.2.3",
1012
"jmessage-react-plugin": "^2.1.6",
13+
"mobx": "^3.4.1",
14+
"mobx-react": "^4.3.5",
1115
"react": "^16.0.0",
1216
"react-native": "^0.51.0",
1317
"react-native-fs": "^2.8.5",

0 commit comments

Comments
 (0)