[NEW] Unread count on header back button (#1083)

app/views/RoomView/Header/Header.js

@@ -15,7 +15,10 @@ import { COLOR_TEXT_DESCRIPTION, HEADER_TITLE, COLOR_WHITE } from '../../../cons
 const TITLE_SIZE = 16;
 const styles = StyleSheet.create({
 	container: {
-		height: '100%'
+		flex: 1,
+		height: '100%',
+		marginRight: isAndroid ? 15 : 5,
+		marginLeft: isAndroid ? 10 : 0
 	},
 	titleContainer: {
 		flex: 6,

app/views/RoomView/index.js

@@ -5,7 +5,7 @@ import {
 } from 'react-native';
 import { connect } from 'react-redux';
 import { RectButton } from 'react-native-gesture-handler';
-import { SafeAreaView } from 'react-navigation';
+import { SafeAreaView, HeaderBackButton } from 'react-navigation';
 import equal from 'deep-equal';
 import moment from 'moment';
 import EJSON from 'ejson';
@@ -36,7 +36,7 @@ import I18n from '../../i18n';
 import RoomHeaderView, { RightButtons } from './Header';
 import StatusBar from '../../containers/StatusBar';
 import Separator from './Separator';
-import { COLOR_WHITE } from '../../constants/colors';
+import { COLOR_WHITE, HEADER_BACK } from '../../constants/colors';
 import debounce from '../../utils/debounce';
 import buildMessage from '../../lib/methods/helpers/buildMessage';
 import FileModal from '../../containers/FileModal';
@@ -52,8 +52,8 @@ class RoomView extends React.Component {
 		const t = navigation.getParam('t');
 		const tmid = navigation.getParam('tmid');
 		const toggleFollowThread = navigation.getParam('toggleFollowThread', () => {});
+		const unreadsCount = navigation.getParam('unreadsCount', null);
 		return {
-			headerTitleContainerStyle: styles.headerTitleContainerStyle,
 			headerTitle: (
 				<RoomHeaderView
 					rid={rid}
@@ -72,6 +72,14 @@ class RoomView extends React.Component {
 					navigation={navigation}
 					toggleFollowThread={toggleFollowThread}
 				/>
+			),
+			headerLeft: (
+				<HeaderBackButton
+					title={unreadsCount > 999 ? '+999' : unreadsCount || ' '}
+					backTitleVisible
+					onPress={() => navigation.goBack()}
+					tintColor={HEADER_BACK}
+				/>
 			)
 		};
 	}
@@ -112,6 +120,7 @@ class RoomView extends React.Component {
 		this.t = props.navigation.getParam('t');
 		this.tmid = props.navigation.getParam('tmid');
 		this.rooms = database.objects('subscriptions').filtered('rid = $0', this.rid);
+		this.chats = database.objects('subscriptions').filtered('rid != $0', this.rid);
 		const canAutoTranslate = RocketChat.canAutoTranslate();
 		this.state = {
 			joined: this.rooms.length > 0,
@@ -149,6 +158,7 @@ class RoomView extends React.Component {
 				EventEmitter.addEventListener('connected', this.handleConnected);
 			}
 			safeAddListener(this.rooms, this.updateRoom);
+			safeAddListener(this.chats, this.updateUnreadCount);
 			this.mounted = true;
 		});
 		console.timeEnd(`${ this.constructor.name } mount`);
@@ -222,6 +232,7 @@ class RoomView extends React.Component {
 			}
 		}
 		this.rooms.removeAllListeners();
+		this.chats.removeAllListeners();
 		if (this.sub && this.sub.stop) {
 			this.sub.stop();
 		}
@@ -329,6 +340,17 @@ class RoomView extends React.Component {
 		});
 	}, 1000, true)
 
+	// eslint-disable-next-line react/sort-comp
+	updateUnreadCount = debounce(() => {
+		const { navigation } = this.props;
+		const unreadsCount = this.chats.filtered('archived != true && open == true && unread > 0').reduce((a, b) => a + (b.unread || 0), 0);
+		if (unreadsCount !== navigation.getParam('unreadsCount')) {
+			navigation.setParams({
+				unreadsCount
+			});
+		}
+	}, 300, false)
+
 	onThreadPress = debounce((item) => {
 		const { navigation } = this.props;
 		if (item.tmid) {

app/views/RoomView/styles.js

@@ -3,7 +3,6 @@ import { StyleSheet } from 'react-native';
 import {
 	COLOR_SEPARATOR, COLOR_PRIMARY, COLOR_WHITE, COLOR_TEXT_DESCRIPTION
 } from '../../constants/colors';
-import { isIOS } from '../../utils/deviceInfo';
 import sharedStyles from '../Styles';
 
 export default StyleSheet.create({
@@ -65,9 +64,5 @@ export default StyleSheet.create({
 		fontSize: 16,
 		...sharedStyles.textMedium,
 		...sharedStyles.textColorNormal
-	},
-	headerTitleContainerStyle: {
-		justifyContent: 'flex-start',
-		left: isIOS ? 40 : 50
 	}
 });