diff --git a/app/views/RoomView/Header/Header.js b/app/views/RoomView/Header/Header.js index 1f4422e59..574d9a281 100644 --- a/app/views/RoomView/Header/Header.js +++ b/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, diff --git a/app/views/RoomView/index.js b/app/views/RoomView/index.js index 02d4fa1fb..916e8d599 100644 --- a/app/views/RoomView/index.js +++ b/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: ( + ), + headerLeft: ( + 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) { diff --git a/app/views/RoomView/styles.js b/app/views/RoomView/styles.js index b4cb4ed0e..11fcfd670 100644 --- a/app/views/RoomView/styles.js +++ b/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 } });