From 4d13689503e8bfef3898b5aad3d5cd3fed3ee974 Mon Sep 17 00:00:00 2001 From: Djorkaeff Alexandre Date: Thu, 14 Jan 2021 14:06:19 -0300 Subject: [PATCH] [IMPROVEMENT] Threads layout tweaks (#2686) * improvement: Thread Details * fix: re-render Thread Messages Item * fix: update snapshots * improve: thread details component * fix: cast replies length * improvement: format date of threads * improvement: thread details styles * fix: wrap text * tests: update snapshot * improvement: use same date format for all dates * Icon size 24 * Remove date * Remove prop drill * Badge position * Badge container tweak * Fix inline style * Move ThreadDetails to containers * Update stories * Fix lint * Remove wrong prop Co-authored-by: Diego Mello --- .../__snapshots__/Storyshots.test.js.snap | 7031 +++++++++-------- app/containers/ThreadDetails.js | 103 + app/containers/message/Thread.js | 35 +- app/containers/message/styles.js | 4 + app/views/ThreadMessagesView/Item.js | 84 +- app/views/ThreadMessagesView/index.js | 12 + storybook/stories/Message.js | 5 - 7 files changed, 3793 insertions(+), 3481 deletions(-) create mode 100644 app/containers/ThreadDetails.js diff --git a/__tests__/__snapshots__/Storyshots.test.js.snap b/__tests__/__snapshots__/Storyshots.test.js.snap index d2bba5818..6d1aa6a60 100644 --- a/__tests__/__snapshots__/Storyshots.test.js.snap +++ b/__tests__/__snapshots__/Storyshots.test.js.snap @@ -33112,33 +33112,6 @@ exports[`Storyshots Message list message 1`] = ` } testID="message-thread-button-How are you?" > - -  - - 1 reply + Reply - - November 10, 2017 - - - - -  - - - - - - - - - - - - - - - - - - - - - - - - diego.mello - - - - 10:00 AM - - - - - - How are you? - - - - - + + +  + + + 1 + + + + +  + + + 0 + + + + + + -  - - - +999 replies - - - - November 10, 2017 - - - - -  - + "opacity": 1, + } + } + > + +  + + + @@ -35583,33 +35283,6 @@ exports[`Storyshots Message list message 1`] = ` } testID="message-thread-button-How are you?" > - -  - - 1 reply + Reply - - November 10, 2017 - - - -  - + + +  + + + 1 + + + + +  + + + 0 + + + + + + + +  + + + @@ -61238,144 +61024,85 @@ exports[`Storyshots Thread Messages.Item badge 1`] = ` } /> - - - - - - - rocket.cat - - - November 10, 2020 - - - - Message content - + + + + @@ -61384,80 +61111,29 @@ exports[`Storyshots Thread Messages.Item badge 1`] = ` Object { "alignItems": "center", "flexDirection": "row", - "justifyContent": "center", - "marginRight": 8, + "marginBottom": 2, } } > -  - - - 1 - - - - -  + rocket.cat - 1 - - - - -  - - + + + Message content + + + + + + + +  + + + 1 + + + + +  + + + 1 + + + + + + +  + + + + - - - - - - - - - - rocket.cat - - - November 10, 2020 - - - - Message content - + + + + @@ -61715,80 +61476,29 @@ exports[`Storyshots Thread Messages.Item badge 1`] = ` Object { "alignItems": "center", "flexDirection": "row", - "justifyContent": "center", - "marginRight": 8, + "marginBottom": 2, } } > -  - - - 1 - - - - -  + rocket.cat - 1 - - - - -  - - + + + Message content + + + + + + + +  + + + 1 + + + + +  + + + 1 + + + + + + +  + + + + - - - - - - - - - - rocket.cat - - - November 10, 2020 - - - - Message content - + + + + @@ -62046,80 +61841,29 @@ exports[`Storyshots Thread Messages.Item badge 1`] = ` Object { "alignItems": "center", "flexDirection": "row", - "justifyContent": "center", - "marginRight": 8, + "marginBottom": 2, } } > -  - - - 1 - - - - -  + rocket.cat - 1 - - - - -  - - + + + Message content + + + + + + + +  + + + 1 + + + + +  + + + 1 + + + + + + +  + + + + - - - - - - - - - - rocket.cat - - - November 10, 2020 - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. - + + + + @@ -62364,80 +62193,29 @@ exports[`Storyshots Thread Messages.Item badge 1`] = ` Object { "alignItems": "center", "flexDirection": "row", - "justifyContent": "center", - "marginRight": 8, + "marginBottom": 2, } } > -  - - - 1 - - - - -  + rocket.cat - 1 - - - - -  - - + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + + + + + + + +  + + + 1 + + + + +  + + + 1 + + + + + + +  + + + + - - - - - - - - - - rocket.cat - - - November 10, 2020 - - - - Message content - + + + + @@ -62715,80 +62578,29 @@ exports[`Storyshots Thread Messages.Item content 1`] = ` Object { "alignItems": "center", "flexDirection": "row", - "justifyContent": "center", - "marginRight": 8, + "marginBottom": 2, } } > -  - - - 1 - - - - -  + rocket.cat - 1 - - - - -  - - + + + Message content + + + + + + +  + + + 1 + + + + +  + + + 1 + + + + + + +  + + + + @@ -62877,144 +62840,85 @@ exports[`Storyshots Thread Messages.Item content 1`] = ` } /> - - - - - - - rocket.cat - - - November 10, 2020 - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. - + + + + @@ -63023,80 +62927,29 @@ exports[`Storyshots Thread Messages.Item content 1`] = ` Object { "alignItems": "center", "flexDirection": "row", - "justifyContent": "center", - "marginRight": 8, + "marginBottom": 2, } } > -  - - - 1 - - - - -  + rocket.cat - 1 - - - - -  - - + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + + + + + + +  + + + 1 + + + + +  + + + 1 + + + + + + +  + + + + @@ -63185,144 +63189,85 @@ exports[`Storyshots Thread Messages.Item content 1`] = ` } /> - - - - - - - rocket.cat - - - November 10, 2020 - - - - Message content - + + + + @@ -63331,80 +63276,29 @@ exports[`Storyshots Thread Messages.Item content 1`] = ` Object { "alignItems": "center", "flexDirection": "row", - "justifyContent": "center", - "marginRight": 8, + "marginBottom": 2, } } > -  - - - 1000 - - - - -  + rocket.cat - 1000 - - - - -  - - + + + Message content + + + + + + +  + + + +999 + + + + +  + + + +999 + + + + + + +  + + + + @@ -63493,144 +63538,85 @@ exports[`Storyshots Thread Messages.Item content 1`] = ` } /> - - - - - - - rocket.cat - - - November 10, 2020 - - - - Attachment title - + + + + @@ -63639,80 +63625,29 @@ exports[`Storyshots Thread Messages.Item content 1`] = ` Object { "alignItems": "center", "flexDirection": "row", - "justifyContent": "center", - "marginRight": 8, + "marginBottom": 2, } } > -  - - - 1 - - - - -  + rocket.cat - 1 - - - - -  - - + + + Attachment title + + + + + + +  + + + 1 + + + + +  + + + 1 + + + + + + +  + + + + @@ -63801,144 +63887,85 @@ exports[`Storyshots Thread Messages.Item content 1`] = ` } /> - - - - - - - Rocket Cat - - - November 10, 2020 - - - - Message content - + + + + @@ -63947,80 +63974,29 @@ exports[`Storyshots Thread Messages.Item content 1`] = ` Object { "alignItems": "center", "flexDirection": "row", - "justifyContent": "center", - "marginRight": 8, + "marginBottom": 2, } } > -  - - - 1 - - - - -  + Rocket Cat - 1 - - - - -  - - + + + Message content + + + + + + +  + + + 1 + + + + +  + + + 1 + + + + + + +  + + + + @@ -64129,144 +64256,85 @@ exports[`Storyshots Thread Messages.Item themes 1`] = ` } /> - - - - - - - rocket.cat - - - November 10, 2020 - - - - Message content - + + + + @@ -64275,80 +64343,29 @@ exports[`Storyshots Thread Messages.Item themes 1`] = ` Object { "alignItems": "center", "flexDirection": "row", - "justifyContent": "center", - "marginRight": 8, + "marginBottom": 2, } } > -  - - - 1 - - - - -  + rocket.cat - 1 - - - - -  - - + + + Message content + + + + + + + +  + + + 1 + + + + +  + + + 1 + + + + + + +  + + + + - - - - - - - - - - rocket.cat - - - November 10, 2020 - - - - Message content - + + + + @@ -64593,80 +64695,29 @@ exports[`Storyshots Thread Messages.Item themes 1`] = ` Object { "alignItems": "center", "flexDirection": "row", - "justifyContent": "center", - "marginRight": 8, + "marginBottom": 2, } } > -  - - - 1 - - - - -  + rocket.cat - 1 - - - - -  - - + + + Message content + + + + + + + +  + + + 1 + + + + +  + + + 1 + + + + + + +  + + + + - - - - - - - - - - rocket.cat - - - November 10, 2020 - - - - Message content - + + + + @@ -64911,80 +65047,29 @@ exports[`Storyshots Thread Messages.Item themes 1`] = ` Object { "alignItems": "center", "flexDirection": "row", - "justifyContent": "center", - "marginRight": 8, + "marginBottom": 2, } } > -  - - - 1 - - - - -  + rocket.cat - 1 - - - - -  - - + + + Message content + + + + + + + +  + + + 1 + + + + +  + + + 1 + + + + + + +  + + + + - - - { + let { tcount } = item; + if (tcount >= 1000) { + tcount = '+999'; + } else if (tcount >= 100) { + tcount = '+99'; + } + + let replies = item?.replies?.length ?? 0; + if (replies >= 1000) { + replies = '+999'; + } else if (replies >= 100) { + replies = '+99'; + } + + const isFollowing = item.replies?.find(u => u === user?.id); + + return ( + + + + + {tcount} + + + + + {replies} + + + + + {badgeColor ? : null } + toggleFollowThread?.(isFollowing, item.id)}> + + + + + ); +}; +ThreadDetails.propTypes = { + item: PropTypes.object, + user: PropTypes.object, + badgeColor: PropTypes.string, + toggleFollowThread: PropTypes.func, + style: PropTypes.object, + theme: PropTypes.string +}; + +export default withTheme(ThreadDetails); diff --git a/app/containers/message/Thread.js b/app/containers/message/Thread.js index 320bb3cc3..47d9c8692 100644 --- a/app/containers/message/Thread.js +++ b/app/containers/message/Thread.js @@ -1,15 +1,12 @@ import React, { useContext } from 'react'; import { View, Text } from 'react-native'; import PropTypes from 'prop-types'; -import Touchable from 'react-native-platform-touchable'; -import { formatMessageCount } from './utils'; import styles from './styles'; -import { CustomIcon } from '../../lib/Icons'; -import { THREAD } from './constants'; import { themes } from '../../constants/colors'; -import { formatDateThreads } from '../../utils/room'; import MessageContext from './Context'; +import ThreadDetails from '../ThreadDetails'; +import I18n from '../../i18n'; const Thread = React.memo(({ msg, tcount, tlm, isThreadRoom, theme, id @@ -21,28 +18,26 @@ const Thread = React.memo(({ const { threadBadgeColor, toggleFollowThread, user, replies } = useContext(MessageContext); - const time = formatDateThreads(tlm); - const buttonText = formatMessageCount(tcount, THREAD); - const isFollowing = replies?.find(u => u === user.id); return ( - - {buttonText} + {I18n.t('Reply')} - {time} - {threadBadgeColor ? : null} - toggleFollowThread(isFollowing, id)}> - - + ); }, (prevProps, nextProps) => { diff --git a/app/containers/message/styles.js b/app/containers/message/styles.js index 74e2b0001..dd0dff627 100644 --- a/app/containers/message/styles.js +++ b/app/containers/message/styles.js @@ -176,5 +176,9 @@ export default StyleSheet.create({ }, encrypted: { justifyContent: 'center' + }, + threadDetails: { + flex: 1, + marginLeft: 12 } }); diff --git a/app/views/ThreadMessagesView/Item.js b/app/views/ThreadMessagesView/Item.js index 168ff93c2..89ae95cc6 100644 --- a/app/views/ThreadMessagesView/Item.js +++ b/app/views/ThreadMessagesView/Item.js @@ -1,15 +1,15 @@ import React from 'react'; import PropTypes from 'prop-types'; import { View, Text, StyleSheet } from 'react-native'; +import Touchable from 'react-native-platform-touchable'; import { withTheme } from '../../theme'; import Avatar from '../../containers/Avatar'; -import Touch from '../../utils/touch'; import sharedStyles from '../Styles'; import { themes } from '../../constants/colors'; import Markdown from '../../containers/markdown'; -import { CustomIcon } from '../../lib/Icons'; import { formatDateThreads, makeThreadName } from '../../utils/room'; +import ThreadDetails from '../../containers/ThreadDetails'; const styles = StyleSheet.create({ container: { @@ -38,34 +38,26 @@ const styles = StyleSheet.create({ avatar: { marginRight: 8 }, - detailsContainer: { - marginTop: 8, - flexDirection: 'row' - }, - detailContainer: { - marginRight: 8, - flexDirection: 'row', - alignItems: 'center', - justifyContent: 'center' - }, - detailText: { - fontSize: 10, - marginLeft: 2, - ...sharedStyles.textSemibold - }, - badgeContainer: { - marginLeft: 8, - justifyContent: 'center' + threadDetails: { + marginTop: 8 }, badge: { - width: 12, - height: 12, - borderRadius: 6 + width: 8, + height: 8, + borderRadius: 4, + marginHorizontal: 8, + alignSelf: 'center' + }, + messageContainer: { + flexDirection: 'row' + }, + markdown: { + flex: 1 } }); const Item = ({ - item, baseUrl, theme, useRealName, user, badgeColor, onPress + item, baseUrl, theme, useRealName, user, badgeColor, onPress, toggleFollowThread }) => { const username = (useRealName && item?.u?.name) || item?.u?.username; let time; @@ -73,13 +65,8 @@ const Item = ({ time = formatDateThreads(item.ts); } - let tlm; - if (item?.tlm) { - tlm = formatDateThreads(item.tlm); - } - return ( - onPress(item)} testID={`thread-messages-view-${ item.msg }`} style={{ backgroundColor: themes[theme].backgroundColor }}> + onPress(item)} testID={`thread-messages-view-${ item.msg }`} style={{ backgroundColor: themes[theme].backgroundColor }}> {username} {time} - - - - - {item?.tcount} - - - - - {item?.replies?.length} - - - - - {tlm} - + + + {badgeColor ? : null } + - {badgeColor - ? ( - - - - ) - : null} - + ); }; @@ -133,7 +106,8 @@ Item.propTypes = { useRealName: PropTypes.bool, user: PropTypes.object, badgeColor: PropTypes.string, - onPress: PropTypes.func + onPress: PropTypes.func, + toggleFollowThread: PropTypes.func }; export default withTheme(Item); diff --git a/app/views/ThreadMessagesView/index.js b/app/views/ThreadMessagesView/index.js index ba824605c..d75328a99 100644 --- a/app/views/ThreadMessagesView/index.js +++ b/app/views/ThreadMessagesView/index.js @@ -33,6 +33,8 @@ import { isIOS } from '../../utils/deviceInfo'; import { getBadgeColor, makeThreadName } from '../../utils/room'; import { getHeaderTitlePosition } from '../../containers/Header'; import SearchHeader from './SearchHeader'; +import EventEmitter from '../../utils/events'; +import { LISTENER } from '../../containers/Toast'; const API_FETCH_COUNT = 50; @@ -410,6 +412,15 @@ class ThreadMessagesView extends React.Component { this.setState({ currentFilter: filter, displayingThreads }); } + toggleFollowThread = async(isFollowingThread, tmid) => { + try { + await RocketChat.toggleFollowMessage(tmid, !isFollowingThread); + EventEmitter.emit(LISTENER, { message: isFollowingThread ? I18n.t('Unfollowed_thread') : I18n.t('Following_thread') }); + } catch (e) { + log(e); + } + } + renderItem = ({ item }) => { const { user, navigation, baseUrl, useRealName @@ -426,6 +437,7 @@ class ThreadMessagesView extends React.Component { badgeColor }} onPress={this.onThreadPress} + toggleFollowThread={this.toggleFollowThread} /> ); } diff --git a/storybook/stories/Message.js b/storybook/stories/Message.js index a5e114408..e2f67a469 100644 --- a/storybook/stories/Message.js +++ b/storybook/stories/Message.js @@ -469,11 +469,6 @@ export default ({ theme }) => { tcount={1} tlm={date} /> -