From 60418b75a409d5ecab05eb97c31223eab13ff2a4 Mon Sep 17 00:00:00 2001 From: Diego Mello Date: Mon, 20 May 2019 17:43:50 -0300 Subject: [PATCH] Message render performance (#880) - Refactored Message component to use React.memo and re-render only what's necessary - Added a test mode to toggle markdown parse by long press drawer (it'll be removed in the next release) --- .../__snapshots__/Storyshots.test.js.snap | 33067 ++++++++-------- app/actions/index.js | 7 - app/containers/FileModal.js | 121 + app/containers/HeaderButton.js | 4 +- app/containers/MessageBox/ReplyPreview.js | 7 +- app/containers/MessageBox/UploadModal.js | 1 + app/containers/ReactionsModal.js | 151 + app/containers/message/Attachments.js | 44 + app/containers/message/Audio.js | 73 +- app/containers/message/Broadcast.js | 43 + app/containers/message/Content.js | 48 + app/containers/message/Discussion.js | 58 + app/containers/message/Emoji.js | 45 +- app/containers/message/Image.js | 146 +- app/containers/message/Markdown.js | 69 +- app/containers/message/Message.js | 684 +- app/containers/message/MessageAvatar.js | 37 + app/containers/message/MessageError.js | 26 + app/containers/message/PhotoModal.js | 94 - app/containers/message/Reactions.js | 105 + app/containers/message/ReactionsModal.js | 140 - app/containers/message/RepliedThread.js | 58 + app/containers/message/Reply.js | 173 +- app/containers/message/Thread.js | 46 + app/containers/message/{Url.js => Urls.js} | 34 +- app/containers/message/User.js | 42 +- app/containers/message/Video.js | 109 +- app/containers/message/constants.js | 2 + app/containers/message/index.js | 182 +- app/containers/message/styles.js | 17 +- app/containers/message/utils.js | 116 + app/i18n/locales/en.js | 3 +- app/i18n/locales/pt-BR.js | 1 + app/lib/methods/getCustomEmojis.js | 7 +- .../helpers/mergeSubscriptionsRooms.js | 3 +- app/lib/methods/helpers/normalizeMessage.js | 2 +- app/lib/methods/subscriptions/room.js | 2 +- app/lib/realm.js | 47 +- app/lib/rocketchat.js | 13 - app/lib/utils.js | 3 + app/reducers/customEmojis.js | 17 - app/reducers/index.js | 2 - app/sagas/rooms.js | 8 +- app/sagas/selectServer.js | 2 - app/views/MessagesView/index.js | 42 +- app/views/OAuthView.js | 6 +- app/views/RoomMembersView/index.js | 2 +- app/views/RoomView/Header/RightButtons.js | 4 +- app/views/RoomView/List.js | 6 +- app/views/RoomView/index.js | 125 +- app/views/RoomsListView/index.js | 21 +- app/views/SearchMessagesView/index.js | 14 +- app/views/ThreadMessagesView/index.js | 34 +- ios/RocketChatRN/AppDelegate.m | 4 - package.json | 1 + storybook/stories/Message.js | 111 +- yarn.lock | 5 + 57 files changed, 18182 insertions(+), 18052 deletions(-) create mode 100644 app/containers/FileModal.js create mode 100644 app/containers/ReactionsModal.js create mode 100644 app/containers/message/Attachments.js create mode 100644 app/containers/message/Broadcast.js create mode 100644 app/containers/message/Content.js create mode 100644 app/containers/message/Discussion.js create mode 100644 app/containers/message/MessageAvatar.js create mode 100644 app/containers/message/MessageError.js delete mode 100644 app/containers/message/PhotoModal.js create mode 100644 app/containers/message/Reactions.js delete mode 100644 app/containers/message/ReactionsModal.js create mode 100644 app/containers/message/RepliedThread.js create mode 100644 app/containers/message/Thread.js rename app/containers/message/{Url.js => Urls.js} (76%) create mode 100644 app/containers/message/constants.js create mode 100644 app/containers/message/utils.js create mode 100644 app/lib/utils.js delete mode 100644 app/reducers/customEmojis.js diff --git a/__tests__/__snapshots__/Storyshots.test.js.snap b/__tests__/__snapshots__/Storyshots.test.js.snap index 219faa3a..fdde76ee 100644 --- a/__tests__/__snapshots__/Storyshots.test.js.snap +++ b/__tests__/__snapshots__/Storyshots.test.js.snap @@ -224,113 +224,103 @@ exports[`Storyshots Message list 1`] = ` Simple - + - + > + + - - - - diego.mello + + diego.mello + + + + 10:00 AM - - 10:00 AM - - - - - - Message + + + Message + - + @@ -430,113 +430,103 @@ exports[`Storyshots Message list 1`] = ` Long message - + - + > + + - - - - diego.mello + + diego.mello + + + + 10:00 AM - - 10:00 AM - - - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + - + @@ -636,113 +636,103 @@ exports[`Storyshots Message list 1`] = ` Grouped messages - + - + > + + - - - - diego.mello + + diego.mello + + + + 10:00 AM - - 10:00 AM - - - - - - … + + + … + - + - + - + > + + - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + + + + 10:00 AM - - 10:00 AM - - - - - - Different user + + + Different user + - + - + - - - - - This is the third message - - - - - - - - - - - - - - - - - This is the second message - - - - - - - - - - - - + + + + + This is the third message + + + + + + + + + + + + + + + + + + + This is the second message + + + + + + + + + + + + + + - + > + + - - - - diego.mello + + diego.mello + + + + 10:00 AM - - 10:00 AM - - - - - - This is the first message + + + This is the first message + - + @@ -1394,88 +1394,88 @@ exports[`Storyshots Message list 1`] = ` Without header - + - + - - Message + + + Message + - + @@ -1500,113 +1500,103 @@ exports[`Storyshots Message list 1`] = ` With alias - + - + > + + - - - + + Diego Mello + + @ + diego.mello + + + + + 10:00 AM + + + + - Diego Mello - @ - diego.mello + + Message + - - 10:00 AM - - - - - - - Message - - - - + - + > + + - - - + + Diego Mello + + @ + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + + + + + 10:00 AM + + + + - Diego Mello - @ - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + + Message + - - 10:00 AM - - - - - - - Message - - - @@ -1922,113 +1922,103 @@ exports[`Storyshots Message list 1`] = ` Edited - + - + > + + - - - - diego.mello - - - - 10:00 AM - - - - - - - Message + > + diego.mello - + - (edited) + 10:00 AM - + + + + + + Message + + + + @@ -2141,113 +2128,103 @@ exports[`Storyshots Message list 1`] = ` Static avatar - + - + > + + - - - - diego.mello + + diego.mello + + + + 10:00 AM - - 10:00 AM - - - - - - Message + + + Message + - + @@ -2347,113 +2334,103 @@ exports[`Storyshots Message list 1`] = ` Full name - + - + > + + - - - - Diego Mello + + Diego Mello + + + + 10:00 AM - - 10:00 AM - - - - - - Message + + + Message + - + @@ -2553,113 +2540,103 @@ exports[`Storyshots Message list 1`] = ` Mentions - + - + > + + - - - - diego.mello + + diego.mello + + + + 10:00 AM - - 10:00 AM - - - - -   - rocket.cat -   - - - - - -   - diego.mello -   - - - - - +   + rocket.cat +   + + + + + -   - all -   - - - - - +   + diego.mello +   + + + + + -   - here -   - - - - - +   + all +   + + + + + -  # - general -   + > +   + here +   + + + + + +  # + general +   + - + @@ -2843,113 +2830,103 @@ exports[`Storyshots Message list 1`] = ` Emojis - + - + > + + - - - - diego.mello + + diego.mello + + + + 10:00 AM - - 10:00 AM - - - - - - 👊🤙👏 + + + 👊🤙👏 + - + @@ -3049,113 +3036,103 @@ exports[`Storyshots Message list 1`] = ` Custom Emojis - + - + > + + - - - - diego.mello + + diego.mello + + + + 10:00 AM - - 10:00 AM - - - - - - - + > + + + + + + + + + - - - - - - + @@ -3297,113 +3284,103 @@ exports[`Storyshots Message list 1`] = ` Time format - + - + > + + - - - - diego.mello + + diego.mello + + + + 10 November 2017 - - 10 November 2017 - - - - - - Testing + + + Testing + - + @@ -3503,113 +3490,103 @@ exports[`Storyshots Message list 1`] = ` Reactions - + - + > + + - - - - diego.mello - - - - 10:00 AM - - - - - - - Reactions - - - - - - - - - 😂 - - - 3 - - - - - - - - 13 - - - - - - - 🤔 - - - 1 - - - - + diego.mello + + + + 10:00 AM + + + + + + + Reactions + + + + + + + -  - + + 😂 + + + 3 + + + + + + + + 13 + + + + + + + 🤔 + + + 1 + + + + + + +  + + @@ -4007,113 +3988,103 @@ exports[`Storyshots Message list 1`] = ` Multiple reactions - + - + > + + - - - - diego.mello - - - - 10:00 AM - - - - - - - Multiple Reactions - - - - - - - - - - 1 - - - - - - - - 1 - - - - - - - - 1 - - - - - - - ❤️ - - - 1 - - - - - - - 🐶 - - - 1 - - - - - - - 😀 - - - 1 - - - - - - - 😬 - - - 1 - - - - - - - 😁 - - - 1 - - - - + diego.mello + + + + 10:00 AM + + + + + + + Multiple Reactions + + + + + + + -  - + + + 1 + + + + + + + + 1 + + + + + + + + 1 + + + + + + + ❤️ + + + 1 + + + + + + + 🐶 + + + 1 + + + + + + + 😀 + + + 1 + + + + + + + 😬 + + + 1 + + + + + + + 😁 + + + 1 + + + + + + +  + + @@ -4868,113 +4849,103 @@ exports[`Storyshots Message list 1`] = ` Intercalated users - + - + > + + - - - - rocket.cat + + rocket.cat + + + + 10:00 AM - - 10:00 AM - - - - - - Fourth message + + + Fourth message + - + - + - + > + + - - - - diego.mello + + diego.mello + + + + 10:00 AM - - 10:00 AM - - - - - - Third message + + + Third message + - + - + - + > + + - - - - rocket.cat + + rocket.cat + + + + 10:00 AM - - 10:00 AM - - - - - - Second message + + + Second message + - + - + - + > + + - - - - diego.mello + + diego.mello + + + + 10:00 AM - - 10:00 AM - - - - - - First message + + + First message + - + @@ -5638,113 +5619,103 @@ exports[`Storyshots Message list 1`] = ` Date and Unread separators - + - + > + + - - - - rocket.cat + + rocket.cat + + + + 10:00 AM - - 10:00 AM - - - - - - Fourth message + + + Fourth message + - + @@ -5891,113 +5872,103 @@ exports[`Storyshots Message list 1`] = ` - + - + > + + - - - - diego.mello + + diego.mello + + + + 10:00 AM - - 10:00 AM - - - - - - Third message + + + Third message + - + @@ -6126,201 +6107,191 @@ exports[`Storyshots Message list 1`] = ` /> - + - - - - - Second message - - - - - - - - - - - - + + + + + Second message + + + + + + + + + + + + + + - + > + + - - - - rocket.cat + + rocket.cat + + + + 10:00 AM - - 10:00 AM - - - - - - Second message + + + Second message + - + @@ -6441,113 +6422,103 @@ exports[`Storyshots Message list 1`] = ` - + - + > + + - - - - diego.mello + + diego.mello + + + + 10:00 AM - - 10:00 AM - - - - - - First message + + + First message + - + @@ -6647,173 +6628,55 @@ exports[`Storyshots Message list 1`] = ` With image - + - - - - - - - - diego.mello - - - - 10:00 AM - - - @@ -6839,7 +6696,8 @@ exports[`Storyshots Message list 1`] = ` resizeMode="cover" source={ Object { - "uri": "https://open.rocket.chat/file-upload/2ZrxuwcGeTrsoh376/Clipboard%2520-%2520September%25205,%25202018%25204:10%2520PM?rc_uid=y8bd77ptZswPj3EW8&rc_token=79q6lH40W4ZRGLOshDiDiVlQaCc4f_lU9HNdHLAzuHz", + "priority": "high", + "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&width=50&height=50&rc_token=79q6lH40W4ZRGLOshDiDiVlQaCc4f_lU9HNdHLAzuHz&rc_uid=y8bd77ptZswPj3EW8", } } style={ @@ -6853,63 +6711,75 @@ exports[`Storyshots Message list 1`] = ` } /> + + - - - This is a description - + diego.mello + + + 10:00 AM - - - - + - - This is a title - - - This is a description - + /> - - - - - - - - - - - - - - - - - - - - - - - - - - - - + } + > + + This is a description + + + - + - + - - - - - - - - diego.mello - - - - 10:00 AM - - - @@ -7408,7 +6938,8 @@ exports[`Storyshots Message list 1`] = ` resizeMode="cover" source={ Object { - "uri": "https://open.rocket.chat/file-upload/sxLXBzjwuqxMnebyP/Clipboard%2520-%252029%2520de%2520Agosto%2520de%25202018%2520%25C3%25A0s%252018:10?rc_uid=y8bd77ptZswPj3EW8&rc_token=79q6lH40W4ZRGLOshDiDiVlQaCc4f_lU9HNdHLAzuHz", + "priority": "high", + "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&width=50&height=50&rc_token=79q6lH40W4ZRGLOshDiDiVlQaCc4f_lU9HNdHLAzuHz&rc_uid=y8bd77ptZswPj3EW8", } } style={ @@ -7422,63 +6953,75 @@ exports[`Storyshots Message list 1`] = ` } /> + + - - - This is a description - + diego.mello + + + 10:00 AM - - - - + - - This is a title - - - This is a description - + /> - - - + + This is a description + + - - - - - - - - - - - - - - - - - - - - - - - - - + } + /> + + - + @@ -7803,113 +7143,103 @@ exports[`Storyshots Message list 1`] = ` With video - + - + > + + - - - - diego.mello + + diego.mello + + + + 10:00 AM - - 10:00 AM - - - - This is a description + This is a description + - + + + + + + + + + + + + + + + + + diego.mello + + + + 10:00 AM + + - - View + +  + - + @@ -8133,113 +7606,103 @@ exports[`Storyshots Message list 1`] = ` With audio - + - + > + + - - + + + diego.mello + + - diego.mello + 10:00 AM - - 10:00 AM - - - - View - -  - - - + View - - - + +  + + + - - - 00:00 - - - - + value={0} + > + + + + + - - This is a description + 00:00 + + + + + + + This is a description + + - + - + - + + + + First message + + + + + + + + + + + + + + + + View + + +  + + + + + + + + - - First message + 00:00 + + + + + + + This is a description + - + - + - View - -  - - - + View - - - + +  + + + - - - 00:00 - - - - + value={0} + > + + + + + - - This is a description + 00:00 + + + + + + + + + + + + + + View + + +  - - - - - - - - - - - - - View - + - -  - - - - + + - - - - - - 00:00 - - - - - - - - - - - - View - + "width": 0, + } + } + /> + + + -  + 00:00 - - - - - - - - 00:00 - @@ -9399,113 +8885,103 @@ exports[`Storyshots Message list 1`] = ` Message with reply - + - + > + + - - - - diego.mello - - - - 10:00 AM - - - - - - - I’m fine! - - - - - - - I'm a very long long title and I'll break - - - 10:00 AM + diego.mello - + 10:00 AM + + + + + + I’m fine! + + + + + + + @@ -9674,17 +9115,62 @@ exports[`Storyshots Message list 1`] = ` Object { "backgroundColor": "transparent", "color": "#2F343D", + "flex": 1, "fontFamily": "System", "fontSize": 16, - "fontWeight": "400", + "fontWeight": "500", } } > - - How are you? + I'm a very long long title and I'll break + + + 10:00 AM + + + + + + + How are you? + - + @@ -9693,113 +9179,103 @@ exports[`Storyshots Message list 1`] = ` - + - + > + + - - - - diego.mello - - - - 10:00 AM - - - - - - - I’m fine! - - - - - - - rocket.cat - - - 10:00 AM + diego.mello - + 10:00 AM + + + + + + I’m fine! + + + + + + + @@ -9968,17 +9409,75 @@ exports[`Storyshots Message list 1`] = ` Object { "backgroundColor": "transparent", "color": "#2F343D", + "flex": 1, "fontFamily": "System", "fontSize": 16, - "fontWeight": "400", + "fontWeight": "500", } } > - - How are you? + rocket.cat + + + 10:00 AM + + + + + + + How are you? + + - + @@ -10005,113 +9504,103 @@ exports[`Storyshots Message list 1`] = ` Message with thread - + - + > + + - - - - diego.mello + + diego.mello + + + + 10:00 AM - - 10:00 AM - - - - - - How are you? + + + How are you? + - - - + - -  - + +  + + + 1 reply + + - 1 reply + Nov 10 - - Nov 10 - - + - + > + + - - - - diego.mello + + diego.mello + + + + 10:00 AM - - 10:00 AM - - - - - - How are you? + + + How are you? + - - - + - -  - + +  + + + +999 replies + + - +999 replies + Nov 10 - - Nov 10 - - - - -  - - - How are you? - - - - - + - - - - - - - - - - - I’m fine! - - - - - - - - - - - - -  - - - Thread with emoji 🙂 😂 - - - - - - - - - - - - - - - - I’m fine! - - - - - - - - - - - - -  - - - Markdown: link block code - - - - - - - - - - - - - - - - - I’m fine! - - - - - - - - - - - - -  - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. - - - - - - - - - - - - - - - - - I’m fine! - - - - - - - - - - - - -  - - - How are you? - - - - - - - - - - - - - - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. - - - - - - - - - - - - -  - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. - - - - - - - - - - - - - - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. - - - - - - - - - - - - -  - - - Thread with attachment - - - - - - - - - - - - +  + + - Sent an attachment + How are you? + + + + + + + + + + + + + + + + I’m fine! + + + + + + + + + + + + + + +  + + + Thread with emoji 🙂 😂 + + + + + + + + + + + + + + + + + I’m fine! + + + + + + + + + + + + + + +  + + + Markdown: link block code + + + + + + + + + + + + + + + + + I’m fine! + + + + + + + + + + + + + + +  + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + + + + + + + + + + + + + + + + + I’m fine! + + + + + + + + + + + + + + +  + + + How are you? + + + + + + + + + + + + + + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + + + + + + + + + + + + + + +  + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + + + + + + + + + + + + + + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + + + + + + + + + + + + + + +  + + + Thread with attachment + + + + + + + + + + + + + + Sent an attachment + + @@ -12098,113 +11566,103 @@ exports[`Storyshots Message list 1`] = ` Sequential thread messages following thread button - + - + > + + - - + + + diego.mello + + + + 10:00 AM + + + + + + + How are you? + + + + + + + +  + + + 1 reply + + + + Nov 10 + + + + + + + + + + + + + + + + + + - diego.mello - - - - 10:00 AM - - - - - - - How are you? + > + + I’m fine! + - + - + + + + + + + + - -  - - + + + + + - 1 reply + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + + + + + + + + + + + + + + + + + - Nov 10 + Sent an 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 - - - - - - - - -  - - - 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. - - - - - - - - - - - - - - - - - +  + + - Sent an attachment + 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. + + + + + + + + + + + + + + + + + + + + + Sent an attachment + + @@ -13452,113 +12907,103 @@ exports[`Storyshots Message list 1`] = ` Discussion - + - + > + + - - - - diego.mello + + diego.mello + + + + 10:00 AM - 10:00 AM + Started a discussion: - - - Started a discussion: - - - This is a discussion - - - + This is a discussion + + - -  - + +  + + + No messages yet + + - No messages yet - + /> - - + - + > + + - - - - diego.mello + + diego.mello + + + + 10:00 AM - 10:00 AM + Started a discussion: - - - Started a discussion: - - - This is a discussion - - - + This is a discussion + + - -  - + +  + + + 1 message + + - 1 message + Nov 10 - - Nov 10 - - + - + > + + - - - - diego.mello + + diego.mello + + + + 10:00 AM - 10:00 AM + Started a discussion: - - - Started a discussion: - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. - - - + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + + - -  - + +  + + + 10 messages + + - 10 messages + Nov 10 - - Nov 10 - - + - + > + + - - - - diego.mello + + diego.mello + + + + 10:00 AM - 10:00 AM + Started a discussion: - - - Started a discussion: - - - This is a discussion - - - + This is a discussion + + - -  - + +  + + + +999 messages + + - +999 messages + Nov 10 - - Nov 10 - @@ -14568,177 +14023,55 @@ exports[`Storyshots Message list 1`] = ` URL - + - - - - - - - - diego.mello - - - - 10:00 AM - - - - - - Rocket.Chat - Free, Open Source, Enterprise Team Chat - - - Rocket.Chat is the leading open source team chat software solution. Free, unlimited and completely customizable with on-premises and SaaS cloud hosting. - - - - Google - + + diego.mello + + - Search the world's information, including webpages, images, videos and more. Google has many special features to help you find exactly what you're looking for. + 10:00 AM + + + + + + + Rocket.Chat - Free, Open Source, Enterprise Team Chat + + + Rocket.Chat is the leading open source team chat software solution. Free, unlimited and completely customizable with on-premises and SaaS cloud hosting. + + + + + + + Google + + + Search the world's information, including webpages, images, videos and more. Google has many special features to help you find exactly what you're looking for. + + + + + + + + + + + + + + + + + + + + + + diego.mello + + + + 10:00 AM + + + + + + + Message + + + + + + + + + Google + + + Search the world's information, including webpages, images, videos and more. Google has many special features to help you find exactly what you're looking for. + + + + + + + + + + + + + + + + + Google + + + Search the world's information, including webpages, images, videos and more. Google has many special features to help you find exactly what you're looking for. + + + @@ -14900,113 +14737,103 @@ exports[`Storyshots Message list 1`] = ` Custom fields - + - + > + + - - - - diego.mello - - - - 10:00 AM - - - - - - - Message - - - - - - - rocket.cat - - - 10:00 AM + diego.mello - + 10:00 AM + + + + - - - Custom fields - + + Message - + + + - Field 1 + rocket.cat - Value 1 + 10:00 AM + + + + + + + Custom fields + + - - Field 2 - - + Field 1 + + + Value 1 + + + - Value 2 - - - - + Field 2 + + + Value 2 + + + - Field 3 - - + Field 3 + + + Value 3 + + + - Value 3 - - - - + Field 4 + + + Value 4 + + + - Field 4 - - - Value 4 - - - - + Field 5 + + - Field 5 - - - Value 5 - + > + Value 5 + + @@ -15422,113 +15259,103 @@ exports[`Storyshots Message list 1`] = ` Two short custom fields - + - + > + + - - + + + diego.mello + + - diego.mello + 10:00 AM - - 10:00 AM - - - - - - Message - - - - - - - @@ -15653,82 +15429,59 @@ exports[`Storyshots Message list 1`] = ` Object { "backgroundColor": "transparent", "color": "#2F343D", - "flex": 1, "fontFamily": "System", "fontSize": 16, - "fontWeight": "500", + "fontWeight": "400", } } > - rocket.cat - - - 10:00 AM - - - - - - - Custom fields - + + Message - + + + - Field 1 + rocket.cat - Value 1 + 10:00 AM + + + + + + + Custom fields + + - - Field 2 - - + Field 1 + + + Value 1 + + + - Value 2 - + + Field 2 + + + Value 2 + + - - - - rocket.cat - - - 10:00 AM - - - - - - - Custom fields 2 - - - - - - Field 1 + rocket.cat - Value 1 + 10:00 AM + + + + + + + Custom fields 2 + + - - Field 2 - - + Field 1 + + + Value 1 + + + - Value 2 - + + Field 2 + + + Value 2 + + @@ -16020,113 +15857,103 @@ exports[`Storyshots Message list 1`] = ` Broadcast - + - + > + + - - - - diego.mello + + diego.mello + + + + 10:00 AM - - 10:00 AM - - - - - - Broadcasted message + + + Broadcasted message + - - - + - -  - - - Reply - + +  + + + Reply + + @@ -16303,113 +16140,103 @@ exports[`Storyshots Message list 1`] = ` Archived - + - + > + + - - - - diego.mello + + diego.mello + + + + 10:00 AM - - 10:00 AM - - - - - - This message is inside an archived room + + + This message is inside an archived room + - + @@ -16554,17 +16391,9 @@ exports[`Storyshots Message list 1`] = ` - - - - - - This message has error too - - - - - - - - - - - -  - - - - @@ -16868,6 +16563,124 @@ exports[`Storyshots Message list 1`] = ` + + + +  + + + + + + + + + + This message has error too + + + + + + + + - - - - - - - - - - - - diego.mello - - - - 10:00 AM - - - - - - - Temp message - - - - - - - - - - Editing - - - - - - - - - - - - - - diego.mello - - - - 10:00 AM - - - - - - - Message being edited - - - - - - - - - - Removed - - - + - - - - - - - - Message removed - - - - - - - Joined - - - - - - - - - - - - Has joined the channel - - - - - - - Room name changed - - - - - - - - - - - - Room name changed to: New name by diego.mello - - - - - - - Message pinned - - - - - - - - - - - - Message pinned - - - - - - - Has left the channel - - - - - - - - - - - - Has left the channel - - - - - - - User removed - - - - - - - - - - - - User rocket.cat removed by diego.mello - - - - - - - User added - - - - - - - - - - - - User rocket.cat added by diego.mello - - - - - - - User muted - - - - - - - - - - - - User rocket.cat muted by diego.mello - - - - - - - User unmuted - - - - - - - - - - - - User rocket.cat unmuted by diego.mello - - - - - - - Role added - - - - - - - - - - - - rocket.cat was set admin by diego.mello - - - - - - - Role removed - - - - - - - - - - - - rocket.cat is no longer admin by diego.mello - - - - - - - Changed description - - - - - - - - - - - - Room description changed to: new description by diego.mello - - - - - - - Changed announcement - - - - - - - - - - - - Room announcement changed to: new announcement by diego.mello - - - - - - - Changed topic - - - - - - - - - - - - Room topic changed to: new topic by diego.mello - - - - - - - Changed type - - - - - - - - - - - - Room type changed to: public by diego.mello - - - - - - - Custom style - - - - - - - - - - - - diego.mello - - - - 10:00 AM - - - - - - - Message - - - - - - - - - - Markdown emphasis - - - - - - - - - - - - - diego.mello - - - - 10:00 AM - - - - - - - Italic with - - - - asterisks - - - - or - - - - underscores - - - - . Bold with - - - - asterisks - - - - or - - - - underscores - - - - . - - - - Strikethrough - - - - - - - - - - - Markdown headers - - - - - - - - - - - - - - diego.mello - - - - 10:00 AM - - - - - - - H1 - - - - - - - H2 - - - - - - - H3 - - - - - - - H4 - - - - - - - H5 - - - - - - - H6 - - - - - - - - - - Markdown links - - - - - - - - - - - - - - diego.mello - - - - 10:00 AM - - - - - - - Support - - - - Google - - - - - - - - I\`m an inline-style link - - - - https://google.com - - - - - - - - - - Markdown image - - - - - - - - - - - - - - diego.mello - - - - 10:00 AM - - - - - - + - - - - - - Markdown code - - - - - - - - - - - - diego.mello - - - - 10:00 AM - - - - - - - Inline - - code + diego.mello - - has - - - back-ticks around - - - it. - - - - - Code block - - - - - - - - - Markdown quote - - - - - - - - - - - - + - diego.mello + 10:00 AM - - 10:00 AM - - - - Quote + Temp message @@ -21183,116 +16905,106 @@ exports[`Storyshots Message list 1`] = ` ] } > - Markdown table + Editing - + - + > + + - - - - diego.mello + + diego.mello + + + + 10:00 AM + + + + + Message being edited + + + + + + + + + + + Removed + + + + + + + + + + + - 10:00 AM + Message removed + + + + + + Joined + + + + + + + + + + + Has joined the channel + + + + + + + + Room name changed + + + + + + + + + + + + + Room name changed to: New name by diego.mello + + + + + + + + Message pinned + + + + + + + + + + + + + Message pinned + + + + + + + + Has left the channel + + + + + + + + + + + + + Has left the channel + + + + + + + + User removed + + + + + + + + + + + + + User rocket.cat removed by diego.mello + + + + + + + + User added + + + + + + + + + + + + + User rocket.cat added by diego.mello + + + + + + + + User muted + + + + + + + + + + + + + User rocket.cat muted by diego.mello + + + + + + + + User unmuted + + + + + + + + + + + + + User rocket.cat unmuted by diego.mello + + + + + + + + Role added + + + + + + + + + + + + + rocket.cat was set admin by diego.mello + + + + + + + + Role removed + + + + + + + + + + + + + rocket.cat is no longer admin by diego.mello + + + + + + + + Changed description + + + + + + + + + + + + + Room description changed to: new description by diego.mello + + + + + + + + Changed announcement + + + + + + + + + + + + + Room announcement changed to: new announcement by diego.mello + + + + + + + + Changed topic + + + + + + + + + + + + + Room topic changed to: new topic by diego.mello + + + + + + + + Changed type + + + + + + + + + + + + + Room type changed to: public by diego.mello + + + + + + + + Custom style + + + + + + + + + + + + + + + diego.mello + + + + 10:00 AM + + + + + + + Message + + + + + + + + + + + Markdown emphasis + + + + + + + + + + + + + + + diego.mello + + + + 10:00 AM + + + + + + + Italic with + + + + asterisks + + + + or + + + + underscores + + + + . Bold with + + + + asterisks + + + + or + + + + underscores + + + + . + + + + Strikethrough + + + + + + + + + + + + Markdown headers + + + + + + + + + + + + + + + diego.mello + + + + 10:00 AM + + + + + + + H1 + + + + + + + H2 + + + + + + + H3 + + + + + + + H4 + + + + + + + H5 + + + + + + + H6 + + + + + + + + + + + Markdown links + + + + + + + + + + + + + + + diego.mello + + + + 10:00 AM + + + + + + + Support + + + + Google + + + + + + + + I\`m an inline-style link + + + + https://google.com + + + + + + + + + + + Markdown image + + + + + + + + + + + + + + + diego.mello + + + + 10:00 AM + + + + + + + + + + + + + + Markdown code + + + + + + + + + + + + + + + diego.mello + + + + 10:00 AM + + + + + + + Inline + + + code + + + has + + + back-ticks around + + + it. + + + + + Code block + + + + + + + + + + Markdown quote + + + + + + + + + + + + + + + diego.mello + + + + 10:00 AM + + + + + + + + Quote + + + + + + + + + + + + Markdown table + + + + + + + + + + + + + + + diego.mello + + + + 10:00 AM + + + @@ -21372,183 +21171,195 @@ exports[`Storyshots Message list 1`] = ` style={ Array [ Object { - "flex": 1, - "padding": 5, + "borderBottomWidth": 1, + "borderColor": "#000000", + "flexDirection": "row", }, ] } > - - - First Header - - - - - + + First Header + + + + - - Second Header + + + Second Header + - + - - - + - - - Content from cell 1 + + + Content from cell 1 + - + + + + + Content from cell 2 + + + - - - Content from cell 2 - - - - - - - + + Content in the first column + + + + - - Content in the first column - - - - - - - Content in the second column + > + + Content in the second column + - + diff --git a/app/actions/index.js b/app/actions/index.js index 634d049c..ca322276 100644 --- a/app/actions/index.js +++ b/app/actions/index.js @@ -40,13 +40,6 @@ export function setAllSettings(settings) { }; } -export function setCustomEmojis(emojis) { - return { - type: types.SET_CUSTOM_EMOJIS, - payload: emojis - }; -} - export function login() { return { type: 'LOGIN' diff --git a/app/containers/FileModal.js b/app/containers/FileModal.js new file mode 100644 index 00000000..d51e8030 --- /dev/null +++ b/app/containers/FileModal.js @@ -0,0 +1,121 @@ +import React from 'react'; +import { + View, Text, TouchableWithoutFeedback, ActivityIndicator, StyleSheet, SafeAreaView +} from 'react-native'; +import FastImage from 'react-native-fast-image'; +import PropTypes from 'prop-types'; +import Modal from 'react-native-modal'; +import ImageViewer from 'react-native-image-zoom-viewer'; +import VideoPlayer from 'react-native-video-controls'; + +import sharedStyles from '../views/Styles'; +import { COLOR_WHITE } from '../constants/colors'; +import { formatAttachmentUrl } from '../lib/utils'; + +const styles = StyleSheet.create({ + safeArea: { + flex: 1 + }, + modal: { + margin: 0 + }, + titleContainer: { + width: '100%', + alignItems: 'center', + marginVertical: 10 + }, + title: { + color: COLOR_WHITE, + textAlign: 'center', + fontSize: 16, + ...sharedStyles.textSemibold + }, + description: { + color: COLOR_WHITE, + textAlign: 'center', + fontSize: 14, + ...sharedStyles.textMedium + }, + indicator: { + flex: 1 + } +}); + +const Indicator = React.memo(() => ( + +)); + +const ModalContent = React.memo(({ + attachment, onClose, user, baseUrl +}) => { + if (attachment && attachment.image_url) { + const url = formatAttachmentUrl(attachment.image_url, user.id, user.token, baseUrl); + return ( + + + + {attachment.title} + {attachment.description ? {attachment.description} : null} + + + null} + renderImage={props => } + loadingRender={() => } + /> + + ); + } + if (attachment && attachment.video_url) { + const uri = formatAttachmentUrl(attachment.video_url, user.id, user.token, baseUrl); + return ( + + + + ); + } + return null; +}); + +const FileModal = React.memo(({ + isVisible, onClose, attachment, user, baseUrl +}) => ( + + + +), (prevProps, nextProps) => prevProps.isVisible === nextProps.isVisible); + +FileModal.propTypes = { + isVisible: PropTypes.bool, + attachment: PropTypes.object, + user: PropTypes.object, + baseUrl: PropTypes.string, + onClose: PropTypes.func +}; +FileModal.displayName = 'FileModal'; + +ModalContent.propTypes = { + attachment: PropTypes.object, + user: PropTypes.object, + baseUrl: PropTypes.string, + onClose: PropTypes.func +}; +ModalContent.displayName = 'FileModalContent'; + +export default FileModal; diff --git a/app/containers/HeaderButton.js b/app/containers/HeaderButton.js index 3ad9675f..b31fb814 100644 --- a/app/containers/HeaderButton.js +++ b/app/containers/HeaderButton.js @@ -20,9 +20,9 @@ export const CustomHeaderButtons = React.memo(props => ( /> )); -export const DrawerButton = React.memo(({ navigation, testID }) => ( +export const DrawerButton = React.memo(({ navigation, testID, ...otherProps }) => ( - + )); diff --git a/app/containers/MessageBox/ReplyPreview.js b/app/containers/MessageBox/ReplyPreview.js index dd24b0d1..6477a4a5 100644 --- a/app/containers/MessageBox/ReplyPreview.js +++ b/app/containers/MessageBox/ReplyPreview.js @@ -5,6 +5,7 @@ import moment from 'moment'; import { connect } from 'react-redux'; import Markdown from '../message/Markdown'; +import { getCustomEmoji } from '../message/utils'; import { CustomIcon } from '../../lib/Icons'; import sharedStyles from '../../views/Styles'; import { @@ -49,7 +50,6 @@ const styles = StyleSheet.create({ @connect(state => ({ Message_TimeFormat: state.settings.Message_TimeFormat, - customEmojis: state.customEmojis, baseUrl: state.settings.Site_Url || state.server ? state.server.server : '' })) export default class ReplyPreview extends Component { @@ -57,7 +57,6 @@ export default class ReplyPreview extends Component { message: PropTypes.object.isRequired, Message_TimeFormat: PropTypes.string.isRequired, close: PropTypes.func.isRequired, - customEmojis: PropTypes.object.isRequired, baseUrl: PropTypes.string.isRequired, username: PropTypes.string.isRequired } @@ -73,7 +72,7 @@ export default class ReplyPreview extends Component { render() { const { - message, Message_TimeFormat, customEmojis, baseUrl, username + message, Message_TimeFormat, baseUrl, username } = this.props; const time = moment(message.ts).format(Message_TimeFormat); return ( @@ -83,7 +82,7 @@ export default class ReplyPreview extends Component { {message.u.username} {time} - + diff --git a/app/containers/MessageBox/UploadModal.js b/app/containers/MessageBox/UploadModal.js index 82b0ac7d..6bb29470 100644 --- a/app/containers/MessageBox/UploadModal.js +++ b/app/containers/MessageBox/UploadModal.js @@ -179,6 +179,7 @@ export default class UploadModal extends Component { animationOut='fadeOut' useNativeDriver hideModalContentWhileAnimating + avoidKeyboard > diff --git a/app/containers/ReactionsModal.js b/app/containers/ReactionsModal.js new file mode 100644 index 00000000..ff3d14a1 --- /dev/null +++ b/app/containers/ReactionsModal.js @@ -0,0 +1,151 @@ +import React from 'react'; +import { + View, Text, FlatList, StyleSheet, SafeAreaView +} from 'react-native'; +import PropTypes from 'prop-types'; +import Modal from 'react-native-modal'; +import Touchable from 'react-native-platform-touchable'; + +import Emoji from './message/Emoji'; +import I18n from '../i18n'; +import { CustomIcon } from '../lib/Icons'; +import sharedStyles from '../views/Styles'; +import { COLOR_WHITE } from '../constants/colors'; + +const styles = StyleSheet.create({ + titleContainer: { + alignItems: 'center', + paddingVertical: 10 + }, + title: { + color: COLOR_WHITE, + textAlign: 'center', + fontSize: 16, + ...sharedStyles.textSemibold + }, + reactCount: { + color: COLOR_WHITE, + fontSize: 13, + ...sharedStyles.textRegular + }, + peopleReacted: { + color: COLOR_WHITE, + fontSize: 14, + ...sharedStyles.textMedium + }, + peopleItemContainer: { + flex: 1, + flexDirection: 'column', + justifyContent: 'center' + }, + emojiContainer: { + width: 50, + height: 50, + alignItems: 'center', + justifyContent: 'center' + }, + itemContainer: { + height: 50, + flexDirection: 'row' + }, + listContainer: { + flex: 1 + }, + closeButton: { + position: 'absolute', + left: 0, + top: 10, + color: COLOR_WHITE + } +}); +const standardEmojiStyle = { fontSize: 20 }; +const customEmojiStyle = { width: 20, height: 20 }; + +const Item = React.memo(({ item, user, baseUrl }) => { + const count = item.usernames.length; + let usernames = item.usernames.slice(0, 3) + .map(username => (username === user.username ? I18n.t('you') : username)).join(', '); + if (count > 3) { + usernames = `${ usernames } ${ I18n.t('and_more') } ${ count - 3 }`; + } else { + usernames = usernames.replace(/,(?=[^,]*$)/, ` ${ I18n.t('and') }`); + } + return ( + + + + + + + {count === 1 ? I18n.t('1_person_reacted') : I18n.t('N_people_reacted', { n: count })} + + { usernames } + + + ); +}); + +const ModalContent = React.memo(({ message, onClose, ...props }) => { + if (message && message.reactions) { + return ( + + + + + {I18n.t('Reactions')} + + + } + keyExtractor={item => item.emoji} + /> + + ); + } + return null; +}); + +const ReactionsModal = React.memo(({ isVisible, onClose, ...props }) => ( + + + +), (prevProps, nextProps) => prevProps.isVisible === nextProps.isVisible); + +ReactionsModal.propTypes = { + isVisible: PropTypes.bool, + onClose: PropTypes.func +}; +ReactionsModal.displayName = 'ReactionsModal'; + +ModalContent.propTypes = { + message: PropTypes.object, + onClose: PropTypes.func +}; +ModalContent.displayName = 'ReactionsModalContent'; + +Item.propTypes = { + item: PropTypes.object, + user: PropTypes.object, + baseUrl: PropTypes.string +}; +Item.displayName = 'ReactionsModalItem'; + +export default ReactionsModal; diff --git a/app/containers/message/Attachments.js b/app/containers/message/Attachments.js new file mode 100644 index 00000000..38b2006f --- /dev/null +++ b/app/containers/message/Attachments.js @@ -0,0 +1,44 @@ +import React from 'react'; +import isEqual from 'lodash/isEqual'; +import PropTypes from 'prop-types'; + +import Image from './Image'; +import Audio from './Audio'; +import Video from './Video'; +import Reply from './Reply'; + +const Attachments = React.memo(({ + attachments, timeFormat, user, baseUrl, useMarkdown, onOpenFileModal, getCustomEmoji +}) => { + if (!attachments || attachments.length === 0) { + return null; + } + + return attachments.map((file, index) => { + if (file.image_url) { + return ; + } + if (file.audio_url) { + return