Skip to content
This repository has been archived by the owner on Aug 22, 2022. It is now read-only.

Commit

Permalink
Refactor message loading.
Browse files Browse the repository at this point in the history 
Cache users in UI.
  • Loading branch information
@haadcode
haadcode committed Dec 14, 2016
1 parent db8adb1 commit 76c1622
Show file tree
Hide file tree
Showing 6 changed files with 195 additions and 154 deletions.
192 changes: 96 additions & 96 deletions client/dist/assets/app.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion client/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
"lodash.take": "^4.1.1",
"logplease": "^1.2.9",
"object-assign": "^4.1.0",
"orbit_": "^0.1.0-beta.4",
"orbit_": "^0.1.0-beta.8",
"pleasejs": "^0.4.2",
"react": "^0.14.8",
"react-addons-css-transition-group": "^0.14.1",
Expand Down
17 changes: 14 additions & 3 deletions client/src/components/Channel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ class Channel extends React.Component {
|| this.state.unreadMessages != nextState.unreadMessages
|| this.state.channelName != nextState.channelName
|| this.state.dragEnter != nextState.dragEnter
|| this.state.loading != nextState.loading
}

componentWillReceiveProps(nextProps) {
Expand Down Expand Up @@ -77,6 +78,14 @@ class Channel extends React.Component {
this.unsubscribeFromErrors = UIActions.raiseError.listen(this._onError.bind(this))
this.stopListeningChannelState = ChannelActions.reachedChannelStart.listen(this._onReachedChannelStart.bind(this))
this.node = this.refs.MessagesView
this.unsubscribeFromLoadingStart = UIActions.startLoading.listen((channel) => {
if (channel === this.state.channelName)
this.setState({ loading: true })
})
this.unsubscribeFromLoadingStop = UIActions.stopLoading.listen((channel) => {
if (channel === this.state.channelName)
this.setState({ loading: false })
})
}

_onError(errorMessage) {
Expand All @@ -92,6 +101,8 @@ class Channel extends React.Component {
this.unsubscribeFromMessageStore()
this.unsubscribeFromErrors()
this.stopListeningChannelState()
this.unsubscribeFromLoadingStart()
this.unsubscribeFromLoadingStop()
this.setState({ messages: [] })
}

Expand All @@ -102,7 +113,7 @@ class Channel extends React.Component {
this.node = this.refs.MessagesView
if(this.node.scrollHeight - this.node.scrollTop + this.bottomMargin > this.node.clientHeight
&& this.node.scrollHeight > this.node.clientHeight + 1
&& this.state.messages.length > 0 && last(messages).payload.meta.ts > last(this.state.messages).payload.meta.ts
&& this.state.messages.length > 0 && last(messages).meta.ts > last(this.state.messages).meta.ts
&& this.node.scrollHeight > 0) {
this.setState({
unreadMessages: this.state.unreadMessages + 1
Expand Down Expand Up @@ -283,7 +294,7 @@ class Channel extends React.Component {
const elements = messages.map((message) => {
if (appSettings.useLargeMessage) {
return <Message2
message={message.payload}
message={message}
key={message.hash}
onReplyTo={this.onReplyTo.bind(this)}
onShowProfile={this.onShowProfile.bind(this)}
Expand All @@ -301,7 +312,7 @@ class Channel extends React.Component {
/>
} else {
return <Message
message={message.payload}
message={message}
key={message.hash}
onReplyTo={this.onReplyTo.bind(this)}
onShowProfile={this.onShowProfile.bind(this)}
Expand Down
77 changes: 39 additions & 38 deletions client/src/components/Message.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,8 @@ class Message extends React.Component {
constructor(props) {
super(props)
this.state = {
post: null,
user: null,
post: props.message,
user: props.message.meta.from,
hasHighlights: false,
isCommand: false,
formattedTime: getFormattedTime(props.message.meta.ts),
Expand All @@ -27,44 +27,44 @@ class Message extends React.Component {
}
}

shouldComponentUpdate(nextProps, nextState) {
return this.state.post !== nextState.post
|| this.state.user !== nextState.user
}
// shouldComponentUpdate(nextProps, nextState) {
// return this.state.post !== nextState.post
// || this.state.user !== nextState.user
// }

componentDidMount() {
ChannelActions.loadPost(this.props.message.value, (err, post) => {
if (post) {
UserActions.getUser(post.meta.from, (err, user) => {
this.setState({ post: post, user: user })

if (post.content) {
if (post.content.startsWith('/me')) {
this.state.isCommand = true
}
post.content.split(' ').forEach((word) => {
const highlight = MentionHighlighter.highlight(word, this.props.highlightWords)
if(typeof highlight[0] !== 'string' && this.props.highlightWords !== post.meta.from) {
this.state.hasHighlights = true
NotificationActions.mention(this.state.channelName, post.content) // TODO: where does channelName come from?
}
})
}
})
}
})
// ChannelActions.loadPost(this.props.message.value, (err, post) => {
// if (post) {
// UserActions.getUser(post.meta.from, (err, user) => {
// this.setState({ post: post, user: user }, () => {
// if (post.content) {
// if (post.content.startsWith('/me')) {
// this.state.isCommand = true
// }
// post.content.split(' ').forEach((word) => {
// const highlight = MentionHighlighter.highlight(word, this.props.highlightWords)
// if(typeof highlight[0] !== 'string' && this.props.highlightWords !== post.meta.from) {
// this.state.hasHighlights = true
// NotificationActions.mention(this.state.channelName, post.content) // TODO: where does channelName come from?
// }
// })
// }
// })
// })
// }
// })
}

onReplyTo(event) {
const { post, user } = this.state
const hash = this.props.message.value
this.setState({ replyto: hash })
this.props.onReplyTo({
hash: hash,
content: post.meta.type === 'text' ? post.content : post.name,
user: user,
})
}
// onReplyTo(event) {
// const { post, user } = this.state
// const hash = this.props.message.value
// this.setState({ replyto: hash })
// this.props.onReplyTo({
// hash: hash,
// content: post.meta.type === 'text' ? post.content : post.name,
// user: user,
// })
// }

renderContent() {
const { highlightWords, useEmojis } = this.props
Expand All @@ -77,7 +77,7 @@ class Message extends React.Component {
content = (
<TextMessage
text={post.content}
replyto={post.replyToContent}
replyto={null}
useEmojis={useEmojis}
highlightWords={post.meta.from !== highlightWords ? highlightWords : ''}
key={post.hash} />
Expand All @@ -91,7 +91,8 @@ class Message extends React.Component {
break
}
}
return <div className={contentClass} onClick={this.onReplyTo.bind(this)}>{content}</div>
// return <div className={contentClass} onClick={this.onReplyTo.bind(this)}>{content}</div>
return <div className={contentClass}>{content}</div>
}

render() {
Expand Down
49 changes: 37 additions & 12 deletions client/src/stores/MessageStore.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,35 +37,59 @@ const MessageStore = Reflux.createStore({
}, interval)
}
},
_add(channel, messages) {
messages = messages || []
let uniqueNew = differenceWith(messages, this.channels[channel].messages, (a, b) => a.hash === b.hash)
this.channels[channel].messages = this.channels[channel].messages.concat(uniqueNew)
this.channels[channel].messages = sortBy(this.channels[channel].messages, (e) => e.meta.ts)
this.trigger(channel, this.channels[channel].messages)
},
onInitialize: function(orbit) {
this.orbit = orbit

this.orbit.events.on('message', (channel, message) => {
// logger.info("-->", channel, message)
this._addMessages(channel, [message], false)
this._add(channel, [message])
})

this.loadingCount = 0

this.orbit.events.on('joined', (channel) => {
logger.info(`Joined #${channel}`)
const feed = this.orbit.channels[channel].feed

feed.events.on('history', (name, messages) => {
if(messages[0] && messages[0].next.length > 0)
this.channels[channel].canLoadMore = true
this._addMessages(channel, take(messages.reverse(), messagesBatchSize - 1), true)
UIActions.startLoading(name, "load")
this.orbit.get(name, null, null, messages.length)
.then((posts) => {
this._add(channel, posts)
UIActions.stopLoading(name, "loadHistory")
})
})

feed.events.on('load.start', (name, amount) => {
this.loadingCount = amount
UIActions.startLoading(name, "load")
})
feed.events.on('load.progress', (name, amount) => {
// console.log("Loading: ", this.loadingCount--)
})
feed.events.on('load.end', (name, amount) => {
this.loadingCount = 0
UIActions.stopLoading(name, "load")
})

feed.events.on('load', (name, hash) => {
// TODO: started loading feed's history
UIActions.startLoading(name, "loadHistory", "Loading history...")
if(this.connectTimeout[name]) clearTimeout(this.connectTimeout[name])
if (hash) {
// UIActions.startLoading(name, "loadHistory", "Loading history...")
if(this.connectTimeout[name]) clearTimeout(this.connectTimeout[name])
}
})

feed.events.on('ready', (name) => {
// TODO: feed's history loaded
clearTimeout(this.connectTimeout[name])
delete this.connectTimeout[name]
UIActions.stopLoading(name, "loadHistory")
// UIActions.stopLoading(name, "loadHistory")
this.channels[name].canLoadMore = true
})
})
Expand Down Expand Up @@ -118,11 +142,12 @@ const MessageStore = Reflux.createStore({
},
loadMessages: function(channel: string, olderThanHash: string, newerThanHash: string, amount: number) {
// logger.debug("--> GET MESSAGES #" + channel + ", " + olderThanHash + " " + newerThanHash + " " + amount)
this.loading = true
// this.loading = true
this.orbit.get(channel, olderThanHash, newerThanHash, amount)
.then((messages) => {
this._addMessages(channel, messages, olderThanHash !== null)
this.loading = false
// this._add(messages)
// this._addMessages(channel, messages, olderThanHash !== null)
// this.loading = false
})
},
_addMessages: function(channel: string, newMessages: Array, older: boolean) {
Expand Down
12 changes: 8 additions & 4 deletions client/src/stores/UsersStore.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,21 +11,25 @@ const logger = Logger.create('UsersStore', { color: Logger.Colors.Cyan })
var UsersStore = Reflux.createStore({
listenables: [AppActions, NetworkActions, UserActions],
init: function() {
this.users = []
this.users = {}
},
onInitialize: function(orbit) {
this.orbit = orbit
},
onDisconnect: function() {
this.users = []
this.users = {}
this.trigger(this.users)
},
onAddUser: function(user) {
if(!this.users.includes(user))
this.users.push(user)
if(!this.users[user.id])
this.users[user.id] = user
},
onGetUser: function(id, callback) {
if (this.users[id])
return callback(null, this.users[id])

this.orbit.getUser(id).then((user) => {
this.users[id] = user
callback(null, user)
})
}
Expand Down

0 comments on commit 76c1622

Please sign in to comment.