diff --git a/src/components/chat.js b/src/components/chat.js index 23ff2e6..a11fbda 100644 --- a/src/components/chat.js +++ b/src/components/chat.js @@ -1,49 +1,50 @@ -'use strict'; -const React = require('react'); -const create = require('create-react-class'); -const sanitize = require('sanitize-html'); +"use strict"; -const Event = require('./events/Event.js'); -const Info = require('./info.js'); -const Input = require('./input.js'); -const User = require('./events/user.js'); -const Loading = require('./loading.js'); +const Promise = require("bluebird"); +const React = require("react"); +const create = require("create-react-class"); +const sanitize = require("sanitize-html"); + +const Event = require("./events/Event.js"); +const Info = require("./info.js"); +const Input = require("./input.js"); +const User = require("./events/user.js"); +const Loading = require("./loading.js"); const generateJdenticon = require("../lib/generate-jdenticon"); +const groupEvents = require("../lib/group-events"); let eventFunctions = { plaintext: function() { - let plain = "unknown event"; - if (this.type == "m.room.message") { - plain = this.content.body; - if (this.content.format == "org.matrix.custom.html") { - plain = sanitize(this.content.formatted_body, {allowedTags: []}); + return sanitize(this.content.formatted_body, {allowedTags: []}); + } else { + return this.content.body; } - } - if (this.type == "m.room.member") { + } else if (this.type == "m.room.member") { if (this.content.membership == "invite") { - plain = `${this.sender} invited ${this.state_key}`; + return `${this.sender} invited ${this.state_key}`; } else if (this.content.membership == "join") { - plain = `${this.state_key} joined the room`; + return `${this.state_key} joined the room`; } else if (this.content.membership == "leave") { - plain = `${this.state_key} left the room`; + return `${this.state_key} left the room`; } else if (this.content.membership == "kick") { - plain = `${this.sender} kicked ${this.state_key}`; + return `${this.sender} kicked ${this.state_key}`; } else if (this.content.membership == "ban") { - plain = `${this.sender} banned ${this.state_key}`; + return `${this.sender} banned ${this.state_key}`; + } else { + return "unknown member event"; } - } - if (this.type == "m.room.avatar") { + } else if (this.type == "m.room.avatar") { if (this.content.url.length > 0) { - plain = `${this.sender} changed the room avatar`; + return `${this.sender} changed the room avatar`; } - } - if (this.type == "m.room.name") { + } else if (this.type == "m.room.name") { return `${this.sender} changed the room name to ${this.content.name}`; + } else { + return "unknown event"; } - return plain; } }; @@ -59,114 +60,102 @@ let chat = create({ getSnapshotBeforeUpdate: function(_oldProps, _oldState) { let ref = this.state.ref; - if (ref == null) {return null;} - if ((ref.scrollHeight - ref.offsetHeight) - ref.scrollTop < 100) { // Less than 100px from bottom + + if (ref != null && (ref.scrollHeight - ref.offsetHeight) - ref.scrollTop < 100) { + // Less than 100px from bottom return true; + } else { + return null; } - return null; }, componentDidUpdate(prevProps, prevState, snapshot) { let ref = this.state.ref; - if (ref == null) {return;} - if (snapshot) { // scroll to bottom + + if (ref != null && snapshot) { + // scroll to bottom ref.scrollTop = (ref.scrollHeight - ref.offsetHeight); } }, setRef: function(ref) { if (ref != null) { - this.setState({ref: ref}); + this.setState({ ref: ref }); } }, onReplyClick: function(e) { - this.setState({replyEvent: e}); + this.setState({ replyEvent: e }); }, paginateBackwards: function() { - if (this.state.loading) { - return; + if (!this.state.loading) { + let client = this.props.client; + let timeline = client.getRoom(this.props.roomId).getLiveTimeline(); + + this.setState({loading: true}); + + return Promise.try(() => { + return client.paginateEventTimeline(timeline, {backwards: true}); + }).then(() => { + this.setState({loading: false}); + }); } - let client = this.props.client; - client.paginateEventTimeline(client.getRoom(this.props.roomId).getLiveTimeline(), {backwards: true}).then(() => { - this.setState({loading: false}); - }); - this.setState({loading: true}); }, render: function() { let client = this.props.client; - let empty = ( -