diff --git a/__tests__/__snapshots__/Storyshots.test.js.snap b/__tests__/__snapshots__/Storyshots.test.js.snap index c2bfd7edf..219faa3a2 100644 --- a/__tests__/__snapshots__/Storyshots.test.js.snap +++ b/__tests__/__snapshots__/Storyshots.test.js.snap @@ -247,9 +247,6 @@ exports[`Storyshots Message list 1`] = ` "paddingVertical": 4, "width": "100%", }, - Object { - "marginTop": 6, - }, undefined, undefined, ] @@ -456,9 +453,6 @@ exports[`Storyshots Message list 1`] = ` "paddingVertical": 4, "width": "100%", }, - Object { - "marginTop": 6, - }, undefined, undefined, ] @@ -665,9 +659,6 @@ exports[`Storyshots Message list 1`] = ` "paddingVertical": 4, "width": "100%", }, - Object { - "marginTop": 6, - }, undefined, undefined, ] @@ -856,9 +847,6 @@ exports[`Storyshots Message list 1`] = ` "paddingVertical": 4, "width": "100%", }, - Object { - "marginTop": 6, - }, undefined, undefined, ] @@ -1047,7 +1035,6 @@ exports[`Storyshots Message list 1`] = ` "paddingVertical": 4, "width": "100%", }, - false, undefined, undefined, ] @@ -1136,7 +1123,6 @@ exports[`Storyshots Message list 1`] = ` "paddingVertical": 4, "width": "100%", }, - false, undefined, undefined, ] @@ -1225,9 +1211,6 @@ exports[`Storyshots Message list 1`] = ` "paddingVertical": 4, "width": "100%", }, - Object { - "marginTop": 6, - }, undefined, undefined, ] @@ -1434,7 +1417,6 @@ exports[`Storyshots Message list 1`] = ` "paddingVertical": 4, "width": "100%", }, - false, undefined, undefined, ] @@ -1541,9 +1523,6 @@ exports[`Storyshots Message list 1`] = ` "paddingVertical": 4, "width": "100%", }, - Object { - "marginTop": 6, - }, undefined, undefined, ] @@ -1746,9 +1725,6 @@ exports[`Storyshots Message list 1`] = ` "paddingVertical": 4, "width": "100%", }, - Object { - "marginTop": 6, - }, undefined, undefined, ] @@ -1969,9 +1945,6 @@ exports[`Storyshots Message list 1`] = ` "paddingVertical": 4, "width": "100%", }, - Object { - "marginTop": 6, - }, undefined, undefined, ] @@ -2191,9 +2164,6 @@ exports[`Storyshots Message list 1`] = ` "paddingVertical": 4, "width": "100%", }, - Object { - "marginTop": 6, - }, undefined, undefined, ] @@ -2400,9 +2370,6 @@ exports[`Storyshots Message list 1`] = ` "paddingVertical": 4, "width": "100%", }, - Object { - "marginTop": 6, - }, undefined, undefined, ] @@ -2609,9 +2576,6 @@ exports[`Storyshots Message list 1`] = ` "paddingVertical": 4, "width": "100%", }, - Object { - "marginTop": 6, - }, undefined, undefined, ] @@ -2902,9 +2866,6 @@ exports[`Storyshots Message list 1`] = ` "paddingVertical": 4, "width": "100%", }, - Object { - "marginTop": 6, - }, undefined, undefined, ] @@ -3111,9 +3072,6 @@ exports[`Storyshots Message list 1`] = ` "paddingVertical": 4, "width": "100%", }, - Object { - "marginTop": 6, - }, undefined, undefined, ] @@ -3362,9 +3320,6 @@ exports[`Storyshots Message list 1`] = ` "paddingVertical": 4, "width": "100%", }, - Object { - "marginTop": 6, - }, undefined, undefined, ] @@ -3571,9 +3526,6 @@ exports[`Storyshots Message list 1`] = ` "paddingVertical": 4, "width": "100%", }, - Object { - "marginTop": 6, - }, undefined, undefined, ] @@ -4078,9 +4030,6 @@ exports[`Storyshots Message list 1`] = ` "paddingVertical": 4, "width": "100%", }, - Object { - "marginTop": 6, - }, undefined, undefined, ] @@ -4942,9 +4891,6 @@ exports[`Storyshots Message list 1`] = ` "paddingVertical": 4, "width": "100%", }, - Object { - "marginTop": 6, - }, undefined, undefined, ] @@ -5133,9 +5079,6 @@ exports[`Storyshots Message list 1`] = ` "paddingVertical": 4, "width": "100%", }, - Object { - "marginTop": 6, - }, undefined, undefined, ] @@ -5324,9 +5267,6 @@ exports[`Storyshots Message list 1`] = ` "paddingVertical": 4, "width": "100%", }, - Object { - "marginTop": 6, - }, undefined, undefined, ] @@ -5515,9 +5455,6 @@ exports[`Storyshots Message list 1`] = ` "paddingVertical": 4, "width": "100%", }, - Object { - "marginTop": 6, - }, undefined, undefined, ] @@ -5724,9 +5661,6 @@ exports[`Storyshots Message list 1`] = ` "paddingVertical": 4, "width": "100%", }, - Object { - "marginTop": 6, - }, undefined, undefined, ] @@ -5980,9 +5914,6 @@ exports[`Storyshots Message list 1`] = ` "paddingVertical": 4, "width": "100%", }, - Object { - "marginTop": 6, - }, undefined, undefined, ] @@ -6218,7 +6149,6 @@ exports[`Storyshots Message list 1`] = ` "paddingVertical": 4, "width": "100%", }, - false, undefined, undefined, ] @@ -6307,9 +6237,6 @@ exports[`Storyshots Message list 1`] = ` "paddingVertical": 4, "width": "100%", }, - Object { - "marginTop": 6, - }, undefined, undefined, ] @@ -6537,9 +6464,6 @@ exports[`Storyshots Message list 1`] = ` "paddingVertical": 4, "width": "100%", }, - Object { - "marginTop": 6, - }, undefined, undefined, ] @@ -6746,9 +6670,6 @@ exports[`Storyshots Message list 1`] = ` "paddingVertical": 4, "width": "100%", }, - Object { - "marginTop": 6, - }, undefined, undefined, ] @@ -7318,9 +7239,6 @@ exports[`Storyshots Message list 1`] = ` "paddingVertical": 4, "width": "100%", }, - Object { - "marginTop": 6, - }, undefined, undefined, ] @@ -7908,9 +7826,6 @@ exports[`Storyshots Message list 1`] = ` "paddingVertical": 4, "width": "100%", }, - Object { - "marginTop": 6, - }, undefined, undefined, ] @@ -8241,9 +8156,6 @@ exports[`Storyshots Message list 1`] = ` "paddingVertical": 4, "width": "100%", }, - Object { - "marginTop": 6, - }, undefined, undefined, ] @@ -8625,7 +8537,6 @@ exports[`Storyshots Message list 1`] = ` "paddingVertical": 4, "width": "100%", }, - false, undefined, undefined, ] @@ -8714,7 +8625,6 @@ exports[`Storyshots Message list 1`] = ` "paddingVertical": 4, "width": "100%", }, - false, undefined, undefined, ] @@ -8996,7 +8906,6 @@ exports[`Storyshots Message list 1`] = ` "paddingVertical": 4, "width": "100%", }, - false, undefined, undefined, ] @@ -9246,7 +9155,6 @@ exports[`Storyshots Message list 1`] = ` "paddingVertical": 4, "width": "100%", }, - false, undefined, undefined, ] @@ -9514,9 +9422,6 @@ exports[`Storyshots Message list 1`] = ` "paddingVertical": 4, "width": "100%", }, - Object { - "marginTop": 6, - }, undefined, undefined, ] @@ -9811,9 +9716,6 @@ exports[`Storyshots Message list 1`] = ` "paddingVertical": 4, "width": "100%", }, - Object { - "marginTop": 6, - }, undefined, undefined, ] @@ -10126,9 +10028,6 @@ exports[`Storyshots Message list 1`] = ` "paddingVertical": 4, "width": "100%", }, - Object { - "marginTop": 6, - }, undefined, undefined, ] @@ -10410,9 +10309,6 @@ exports[`Storyshots Message list 1`] = ` "paddingVertical": 4, "width": "100%", }, - Object { - "marginTop": 6, - }, undefined, undefined, ] @@ -10694,9 +10590,6 @@ exports[`Storyshots Message list 1`] = ` "paddingVertical": 4, "width": "100%", }, - Object { - "marginTop": 6, - }, undefined, undefined, ] @@ -10705,21 +10598,102 @@ exports[`Storyshots Message list 1`] = ` + +  + + + How are you? + + + + + + - - - - diego.mello - - - - 10:00 AM - - - - -  - - - How are you? - - @@ -10935,9 +10809,6 @@ exports[`Storyshots Message list 1`] = ` "paddingVertical": 4, "width": "100%", }, - Object { - "marginTop": 6, - }, undefined, undefined, ] @@ -10946,21 +10817,102 @@ exports[`Storyshots Message list 1`] = ` + +  + + + Thread with emoji 🙂 😂 + + + + + + - - - - diego.mello - - - - 10:00 AM - - - - -  - - - Thread with emoji 🙂 😂 - - @@ -11176,9 +11028,6 @@ exports[`Storyshots Message list 1`] = ` "paddingVertical": 4, "width": "100%", }, - Object { - "marginTop": 6, - }, undefined, undefined, ] @@ -11187,21 +11036,102 @@ exports[`Storyshots Message list 1`] = ` + +  + + + Markdown: link block code + + + + + + - - - - diego.mello - - - - 10:00 AM - - - - -  - - - Markdown: link block code - - @@ -11417,9 +11247,6 @@ exports[`Storyshots Message list 1`] = ` "paddingVertical": 4, "width": "100%", }, - Object { - "marginTop": 6, - }, undefined, undefined, ] @@ -11428,21 +11255,102 @@ exports[`Storyshots Message list 1`] = ` + +  + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + + + + + + - - - - diego.mello - - - - 10:00 AM - - - - -  - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. - - @@ -11658,9 +11466,6 @@ exports[`Storyshots Message list 1`] = ` "paddingVertical": 4, "width": "100%", }, - Object { - "marginTop": 6, - }, undefined, undefined, ] @@ -11669,21 +11474,102 @@ exports[`Storyshots Message list 1`] = ` + +  + + + How are you? + + + + + + - - - - diego.mello - - - - 10:00 AM - - - - -  - - - How are you? - - @@ -11899,9 +11685,6 @@ exports[`Storyshots Message list 1`] = ` "paddingVertical": 4, "width": "100%", }, - Object { - "marginTop": 6, - }, undefined, undefined, ] @@ -11910,21 +11693,102 @@ exports[`Storyshots Message list 1`] = ` + +  + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + + + + + + - - - - diego.mello - - - - 10:00 AM - - - - -  - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. - - @@ -12140,8 +11904,222 @@ exports[`Storyshots Message list 1`] = ` "paddingVertical": 4, "width": "100%", }, + undefined, + undefined, + ] + } + > + + +  + + + Thread with attachment + + + + + + + + + + + + + + Sent an attachment + + + + + + + Sequential thread messages following thread button + + + -  + + + How are you? + + + + + + +  + + + 1 reply + + + + Nov 10 + + + + + + + + + + + + + + + + - Thread with attachment + + + I’m fine! + + + + + + + + + + + + + + + + + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + + + + + + + + + + + + + + + + + + + Sent an attachment + + + + + + + Sequential thread messages following thread reply + + + + + +  + + + How are you? + + + + + + + + + + + + + + + + + I’m fine! + + + + + + + + + + + + + + + + + + + + + + Cool! + + + + + + + + + + + + + + + + + + + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + + + + + + + + + + + + + + + + + - - - - diego.mello - - - - 10:00 AM - - - - - - diego.mello - - - - 10:00 AM - - - - - - diego.mello - - - - 10:00 AM - - - - - - diego.mello - - - - 10:00 AM - - Message pinned - - - - - rocket.cat - - - 10:00 AM - - - - - - - First message - - - - - - @@ -17133,9 +17894,6 @@ exports[`Storyshots Message list 1`] = ` "paddingVertical": 4, "width": "100%", }, - Object { - "marginTop": 6, - }, undefined, undefined, ] @@ -17143,22 +17901,27 @@ exports[`Storyshots Message list 1`] = ` > - - - - diego.mello - - - - 10:00 AM - - - - - - diego.mello - - - - 10:00 AM - - - - - - diego.mello - - - - 10:00 AM - - - - - - diego.mello - - - - 10:00 AM - - - - - - diego.mello - - - - 10:00 AM - - - - - - diego.mello - - - - 10:00 AM - - - - - - diego.mello - - - - 10:00 AM - - - - - - diego.mello - - - - 10:00 AM - - - - - - diego.mello - - - - 10:00 AM - - - - - - diego.mello - - - - 10:00 AM - - - - - - diego.mello - - - - 10:00 AM - - { + renderAvatar = (small = false) => { const { header, avatar, author, baseUrl, user } = this.props; if (header) { return ( - + {msg} + ); } renderInner = () => { - const { type, tmid } = this.props; + const { type } = this.props; if (type === 'discussion-created') { return ( @@ -509,15 +514,6 @@ export default class Message extends PureComponent { ); } - if (tmid) { - return ( - - {this.renderUsername()} - {this.renderRepliedThread()} - {this.renderContent()} - - ); - } return ( {this.renderUsername()} @@ -531,9 +527,52 @@ export default class Message extends PureComponent { ); } + renderMessage = () => { + const { header, isThreadReply, isThreadSequential } = this.props; + + if (isThreadReply || isThreadSequential || this.isInfoMessage()) { + const thread = isThreadReply ? this.renderRepliedThread() : null; + return ( + + {thread} + + {this.renderAvatar(true)} + + {this.renderContent()} + + + + ); + } + return ( + + {this.renderAvatar()} + + {this.renderInner()} + + + ); + } + render() { const { - editing, style, header, reactionsModal, closeReactions, msg, ts, reactions, author, user, timeFormat, customEmojis, baseUrl + editing, style, reactionsModal, closeReactions, msg, ts, reactions, author, user, timeFormat, customEmojis, baseUrl } = this.props; const accessibilityLabel = I18n.t('Message_accessibility', { user: author.username, time: moment(ts).format(timeFormat), message: msg }); @@ -545,23 +584,10 @@ export default class Message extends PureComponent { onPress={this.onPress} > - - {this.renderAvatar()} - - {this.renderInner()} - - + {this.renderMessage()} {reactionsModal ? ( { + const { + item, previousItem + } = this.props; + if (previousItem && item.tmid && (previousItem.tmid !== item.tmid) && (previousItem._id !== item.tmid)) { + return true; + } + return false; + } + + isThreadSequential = () => { + const { + item, previousItem + } = this.props; + if (previousItem && item.tmid && ((previousItem.tmid === item.tmid) || (previousItem._id === item.tmid))) { + return true; + } + return false; + } + parseMessage = () => { const { item } = this.props; return JSON.parse(JSON.stringify(item)); @@ -201,6 +221,8 @@ export default class MessageContainer extends React.Component { alias={alias} editing={isEditing} header={this.isHeader()} + isThreadReply={this.isThreadReply()} + isThreadSequential={this.isThreadSequential()} avatar={avatar} user={user} edited={editedBy && !!editedBy.username} diff --git a/app/containers/message/styles.js b/app/containers/message/styles.js index 00bed3d95..8bb283c19 100644 --- a/app/containers/message/styles.js +++ b/app/containers/message/styles.js @@ -102,6 +102,9 @@ export default StyleSheet.create({ avatar: { marginTop: 4 }, + avatarSmall: { + marginLeft: 16 + }, addReaction: { color: COLOR_PRIMARY }, @@ -217,16 +220,18 @@ export default StyleSheet.create({ }, repliedThread: { flexDirection: 'row', - flex: 1 + flex: 1, + alignItems: 'center', + marginTop: 6, + marginBottom: 12 }, repliedThreadIcon: { color: COLOR_PRIMARY, - marginRight: 2 + marginRight: 10, + marginLeft: 16 }, repliedThreadName: { - fontSize: 14, - lineHeight: 16, - fontStyle: 'normal', + fontSize: 16, flex: 1, color: COLOR_PRIMARY, ...sharedStyles.textRegular diff --git a/app/lib/methods/loadThreadMessages.js b/app/lib/methods/loadThreadMessages.js index 1c02ef131..7412ef0a0 100644 --- a/app/lib/methods/loadThreadMessages.js +++ b/app/lib/methods/loadThreadMessages.js @@ -9,7 +9,7 @@ async function load({ tmid, offset }) { try { // RC 1.0 const result = await this.sdk.get('chat.getThreadMessages', { - tmid, count: 50, offset, sort: { ts: -1 } + tmid, count: 50, offset, sort: { ts: -1 }, query: { _hidden: { $ne: true } } }); if (!result || !result.success) { return []; diff --git a/app/views/RoomView/Header/RightButtons.js b/app/views/RoomView/Header/RightButtons.js index 1732d6533..db19f9683 100644 --- a/app/views/RoomView/Header/RightButtons.js +++ b/app/views/RoomView/Header/RightButtons.js @@ -48,6 +48,12 @@ class RightButtonsContainer extends React.PureComponent { }; } + componentWillUnmount() { + if (this.thread && this.thread.removeAllListeners) { + this.thread.removeAllListeners(); + } + } + updateThread = () => { const { userId } = this.props; this.setState({ diff --git a/app/views/RoomView/List.js b/app/views/RoomView/List.js index fb48ae245..fec6dc74c 100644 --- a/app/views/RoomView/List.js +++ b/app/views/RoomView/List.js @@ -59,23 +59,24 @@ export class List extends React.PureComponent { if (this.updateState && this.updateState.stop) { this.updateState.stop(); } - if (this.updateThreads && this.updateThreads.stop) { - this.updateThreads.stop(); - } if (this.interactionManagerState && this.interactionManagerState.cancel) { this.interactionManagerState.cancel(); } - if (this.interactionManagerThreads && this.interactionManagerThreads.cancel) { - this.interactionManagerThreads.cancel(); - } console.countReset(`${ this.constructor.name }.render calls`); } // eslint-disable-next-line react/sort-comp updateState = debounce(() => { this.interactionManagerState = InteractionManager.runAfterInteractions(() => { + const { tmid } = this.props; + let messages = this.data; + if (tmid && this.threads[0]) { + const thread = { ...this.threads[0] }; + thread.tlm = null; + messages = [...messages, thread]; + } this.setState({ - messages: this.data.slice(), + messages: messages.slice(), threads: this.threads.slice(), loading: false }); @@ -95,7 +96,8 @@ export class List extends React.PureComponent { try { let result; if (tmid) { - result = await RocketChat.loadThreadMessages({ tmid, offset: messages.length }); + // `offset` is `messages.length - 1` because we append thread start to `messages` obj + result = await RocketChat.loadThreadMessages({ tmid, offset: messages.length - 1 }); } else { result = await RocketChat.loadMessagesForRoom({ rid, t, latest: messages[messages.length - 1].ts }); } @@ -130,31 +132,22 @@ export class List extends React.PureComponent { render() { console.count(`${ this.constructor.name }.render calls`); - const { messages, threads } = this.state; - const { tmid } = this.props; - let data = []; - if (tmid) { - const thread = { ...threads[0] }; - thread.tlm = null; - data = [...messages, thread]; - } else { - data = messages; - } + const { messages } = this.state; return ( - + this.list = ref} keyExtractor={item => item._id} - data={data} + data={messages} extraData={this.state} renderItem={this.renderItem} contentContainerStyle={styles.contentContainer} style={styles.list} inverted removeClippedSubviews - initialNumToRender={1} + initialNumToRender={5} onEndReached={this.onEndReached} onEndReachedThreshold={0.5} maxToRenderPerBatch={5} diff --git a/app/views/RoomView/index.js b/app/views/RoomView/index.js index 94e3ffce7..082563187 100644 --- a/app/views/RoomView/index.js +++ b/app/views/RoomView/index.js @@ -510,7 +510,7 @@ export default class RoomView extends LoggedView { return ( {room._id && showActions - ? + ? : null } {showErrorActions ? : null} diff --git a/app/views/RoomsListView/index.js b/app/views/RoomsListView/index.js index 453bdef38..a1a42124e 100644 --- a/app/views/RoomsListView/index.js +++ b/app/views/RoomsListView/index.js @@ -271,14 +271,14 @@ export default class RoomsListView extends LoggedView { updateState = debounce(() => { this.updateStateInteraction = InteractionManager.runAfterInteractions(() => { this.internalSetState({ - chats: this.chats, - unread: this.unread, - favorites: this.favorites, - discussions: this.discussions, - channels: this.channels, - privateGroup: this.privateGroup, - direct: this.direct, - livechat: this.livechat, + chats: this.chats ? this.chats.slice() : [], + unread: this.unread ? this.unread.slice() : [], + favorites: this.favorites ? this.favorites.slice() : [], + discussions: this.discussions ? this.discussions.slice() : [], + channels: this.channels ? this.channels.slice() : [], + privateGroup: this.privateGroup ? this.privateGroup.slice() : [], + direct: this.direct ? this.direct.slice() : [], + livechat: this.livechat ? this.livechat.slice() : [], loading: false }); this.forceUpdate(); diff --git a/app/views/Styles.js b/app/views/Styles.js index 4b6df4d6d..eaff9eef7 100644 --- a/app/views/Styles.js +++ b/app/views/Styles.js @@ -66,6 +66,9 @@ export default StyleSheet.create({ alignItemsFlexStart: { alignItems: 'flex-start' }, + alignItemsCenter: { + alignItems: 'center' + }, textAlignRight: { textAlign: 'right' }, diff --git a/e2e/08-room.spec.js b/e2e/08-room.spec.js index e026a5725..d383f6fc6 100644 --- a/e2e/08-room.spec.js +++ b/e2e/08-room.spec.js @@ -286,8 +286,6 @@ describe('Room screen', () => { await element(by.id('messagebox-send-message')).tap(); await waitFor(element(by.id(`message-thread-button-${ thread }`))).toExist().withTimeout(5000); await expect(element(by.id(`message-thread-button-${ thread }`))).toExist(); - await waitFor(element(by.id(`message-thread-replied-on-${ thread }`))).toExist().withTimeout(5000); - await expect(element(by.id(`message-thread-replied-on-${ thread }`))).toExist(); }); it('should navigate to thread from button', async() => { @@ -313,6 +311,16 @@ describe('Room screen', () => { }); it('should navigate to thread from thread name', async() => { + await mockMessage('dummymessagebetweenthethread'); + await element(by.text(thread)).longPress(); + await waitFor(element(by.text('Message actions'))).toBeVisible().withTimeout(5000); + await expect(element(by.text('Message actions'))).toBeVisible(); + await element(by.text('Reply')).tap(); + await element(by.id('messagebox-input')).typeText('repliedagain'); + await element(by.id('messagebox-send-message')).tap(); + await waitFor(element(by.id(`message-thread-replied-on-${ thread }`))).toExist().withTimeout(5000); + await expect(element(by.id(`message-thread-replied-on-${ thread }`))).toExist(); + await element(by.id(`message-thread-replied-on-${ thread }`)).tap(); await waitFor(element(by.id('room-view'))).toBeVisible().withTimeout(5000); await waitFor(element(by.id(`room-view-title-${ thread }`))).toBeVisible().withTimeout(5000); diff --git a/storybook/stories/Message.js b/storybook/stories/Message.js index 2f36229a0..c614ca89e 100644 --- a/storybook/stories/Message.js +++ b/storybook/stories/Message.js @@ -298,31 +298,37 @@ export default ( msg="I'm fine!" tmid='1' tmsg='How are you?' + isThreadReply /> + + + + + + + + + + + + {/*