[FIX] Threads not being updated and other related issues (#2636)

* Fix parent title on thread header breaking lines

* Fix https://github.com/RocketChat/Rocket.Chat.ReactNative/issues/2519

* Fix thread badge not being updated

app/containers/message/Thread.js

@@ -19,11 +19,10 @@ const Thread = React.memo(({
 	}
 
 	const {
-		getBadgeColor, toggleFollowThread, user, replies
+		threadBadgeColor, toggleFollowThread, user, replies
 	} = useContext(MessageContext);
 	const time = formatDateThreads(tlm);
 	const buttonText = formatMessageCount(tcount, THREAD);
-	const badgeColor = getBadgeColor?.(id);
 	const isFollowing = replies?.find(u => u === user.id);
 	return (
 		<View style={styles.buttonContainer}>
@@ -35,7 +34,7 @@ const Thread = React.memo(({
 				<Text style={[styles.buttonText, { color: themes[theme].buttonText }]}>{buttonText}</Text>
 			</View>
 			<Text style={[styles.time, { color: themes[theme].auxiliaryText }]}>{time}</Text>
-			{badgeColor ? <View style={[styles.threadBadge, { backgroundColor: badgeColor }]} /> : null}
+			{threadBadgeColor ? <View style={[styles.threadBadge, { backgroundColor: threadBadgeColor }]} /> : null}
 			<Touchable onPress={() => toggleFollowThread(isFollowing, id)}>
 				<CustomIcon
 					name={isFollowing ? 'notification' : 'notification-disabled'}

app/containers/message/index.js

@@ -48,7 +48,7 @@ class MessageContainer extends React.Component {
 		callJitsi: PropTypes.func,
 		blockAction: PropTypes.func,
 		theme: PropTypes.string,
-		getBadgeColor: PropTypes.func,
+		threadBadgeColor: PropTypes.string,
 		toggleFollowThread: PropTypes.func
 	}
 
@@ -84,10 +84,13 @@ class MessageContainer extends React.Component {
 	}
 
 	shouldComponentUpdate(nextProps) {
-		const { theme } = this.props;
+		const { theme, threadBadgeColor } = this.props;
 		if (nextProps.theme !== theme) {
 			return true;
 		}
+		if (nextProps.threadBadgeColor !== threadBadgeColor) {
+			return true;
+		}
 		return false;
 	}
 
@@ -244,7 +247,7 @@ class MessageContainer extends React.Component {
 
 	render() {
 		const {
-			item, user, style, archived, baseUrl, useRealName, broadcast, fetchThreadName, showAttachment, timeFormat, isReadReceiptEnabled, autoTranslateRoom, autoTranslateLanguage, navToRoomInfo, getCustomEmoji, isThreadRoom, callJitsi, blockAction, rid, theme, getBadgeColor, toggleFollowThread
+			item, user, style, archived, baseUrl, useRealName, broadcast, fetchThreadName, showAttachment, timeFormat, isReadReceiptEnabled, autoTranslateRoom, autoTranslateLanguage, navToRoomInfo, getCustomEmoji, isThreadRoom, callJitsi, blockAction, rid, theme, threadBadgeColor, toggleFollowThread
 		} = this.props;
 		const {
 			id, msg, ts, attachments, urls, reactions, t, avatar, emoji, u, alias, editedBy, role, drid, dcount, dlm, tmid, tcount, tlm, tmsg, mentions, channels, unread, blocks, autoTranslate: autoTranslateMessage, replies
@@ -271,7 +274,7 @@ class MessageContainer extends React.Component {
 					onEncryptedPress: this.onEncryptedPress,
 					onDiscussionPress: this.onDiscussionPress,
 					onReactionLongPress: this.onReactionLongPress,
-					getBadgeColor,
+					threadBadgeColor,
 					toggleFollowThread,
 					replies
 				}}

app/views/RoomView/Header/Header.js

@@ -140,7 +140,7 @@ const Header = React.memo(({
 					roomUserId={roomUserId}
 					theme={theme}
 				/>
-				<Text style={[styles.subtitle, { color: themes[theme].auxiliaryText }]}>{parentTitle}</Text>
+				<Text style={[styles.subtitle, { color: themes[theme].auxiliaryText }]} numberOfLines={1}>{parentTitle}</Text>
 			</View>
 		);
 	}

app/views/RoomView/List.js

@@ -30,6 +30,7 @@ class List extends React.Component {
 		loading: PropTypes.bool,
 		listRef: PropTypes.func,
 		hideSystemMessages: PropTypes.array,
+		tunread: PropTypes.array,
 		navigation: PropTypes.object,
 		showMessageInMainThread: PropTypes.bool
 	};
@@ -76,7 +77,7 @@ class List extends React.Component {
 
 	shouldComponentUpdate(nextProps, nextState) {
 		const { loading, end, refreshing } = this.state;
-		const { hideSystemMessages, theme } = this.props;
+		const { hideSystemMessages, theme, tunread } = this.props;
 		if (theme !== nextProps.theme) {
 			return true;
 		}
@@ -92,6 +93,9 @@ class List extends React.Component {
 		if (!isEqual(hideSystemMessages, nextProps.hideSystemMessages)) {
 			return true;
 		}
+		if (!isEqual(tunread, nextProps.tunread)) {
+			return true;
+		}
 		return false;
 	}
 

app/views/RoomView/index.js

@@ -73,7 +73,7 @@ const stateAttrsUpdate = [
 	'readOnly',
 	'member'
 ];
-const roomAttrsUpdate = ['f', 'ro', 'blocked', 'blocker', 'archived', 'muted', 'jitsiTimeout', 'announcement', 'sysMes', 'topic', 'name', 'fname', 'roles', 'bannerClosed', 'visitor'];
+const roomAttrsUpdate = ['f', 'ro', 'blocked', 'blocker', 'archived', 'muted', 'tunread', 'jitsiTimeout', 'announcement', 'sysMes', 'topic', 'name', 'fname', 'roles', 'bannerClosed', 'visitor'];
 
 class RoomView extends React.Component {
 	static propTypes = {
@@ -909,7 +909,7 @@ class RoomView extends React.Component {
 				getCustomEmoji={this.getCustomEmoji}
 				callJitsi={this.callJitsi}
 				blockAction={this.blockAction}
-				getBadgeColor={this.getBadgeColor}
+				threadBadgeColor={this.getBadgeColor(item?.id)}
 				toggleFollowThread={this.toggleFollowThread}
 			/>
 		);
@@ -1053,7 +1053,7 @@ class RoomView extends React.Component {
 					t={t}
 					tmid={this.tmid}
 					theme={theme}
-					room={room}
+					tunread={room?.tunread}
 					renderRow={this.renderItem}
 					loading={loading}
 					navigation={navigation}

app/views/RoomsListView/index.js

@@ -157,7 +157,7 @@ class RoomsListView extends React.Component {
 			searching: false,
 			search: [],
 			loading: true,
-			chatsOrder: [],
+			chatsUpdate: [],
 			chats: [],
 			item: {}
 		};
@@ -224,7 +224,7 @@ class RoomsListView extends React.Component {
 	}
 
 	shouldComponentUpdate(nextProps, nextState) {
-		const { chatsOrder, searching, item } = this.state;
+		const { chatsUpdate, searching, item } = this.state;
 		// eslint-disable-next-line react/destructuring-assignment
 		const propsUpdated = shouldUpdateProps.some(key => nextProps[key] !== this.props[key]);
 		if (propsUpdated) {
@@ -232,7 +232,7 @@ class RoomsListView extends React.Component {
 		}
 
 		// Compare changes only once
-		const chatsNotEqual = !isEqual(nextState.chatsOrder, chatsOrder);
+		const chatsNotEqual = !isEqual(nextState.chatsUpdate, chatsUpdate);
 
 		// If they aren't equal, set to update if focused
 		if (chatsNotEqual) {
@@ -437,7 +437,7 @@ class RoomsListView extends React.Component {
 			observable = await db.collections
 				.get('subscriptions')
 				.query(...defaultWhereClause)
-				.observe();
+				.observeWithColumns(['alert']);
 
 		// When we're NOT grouping
 		} else {
@@ -456,11 +456,20 @@ class RoomsListView extends React.Component {
 			let tempChats = [];
 			let chats = data;
 
+			let chatsUpdate = [];
+			if (showUnread) {
 				/**
-			 * We trigger re-render only when chats order changes
+				 * If unread on top, we trigger re-render based on order changes and sub.alert
 				 * RoomItem handles its own re-render
 				 */
-			const chatsOrder = data.map(item => item.rid);
+				chatsUpdate = data.map(item => ({ rid: item.rid, alert: item.alert }));
+			} else {
+				/**
+				 * Otherwise, we trigger re-render only when chats order changes
+				 * RoomItem handles its own re-render
+				 */
+				chatsUpdate = data.map(item => item.rid);
+			}
 
 			const isOmnichannelAgent = user?.roles?.includes('livechat-agent');
 			if (isOmnichannelAgent) {
@@ -501,7 +510,7 @@ class RoomsListView extends React.Component {
 
 			this.internalSetState({
 				chats: tempChats,
-				chatsOrder,
+				chatsUpdate,
 				loading: false
 			});
 		});

storybook/stories/index.js

@@ -64,7 +64,7 @@ const messageDecorator = story => (
 			onReactionPress: () => {},
 			onDiscussionPress: () => {},
 			onReactionLongPress: () => {},
-			getBadgeColor: () => themes.light.tunreadBackground
+			threadBadgeColor: themes.light.tunreadBackground
 		}}
 	>
 		{story()}