From 8309c45c646a2abe613db10e8372e668a02760b6 Mon Sep 17 00:00:00 2001
From: IlarionHalushka <hilarion.galushka@gmail.com>
Date: Thu, 22 Aug 2019 22:15:30 +0300
Subject: [PATCH] [NEW] Unread count on header back button (#1083)
---
app/views/RoomView/Header/Header.js | 5 ++++-
app/views/RoomView/index.js | 28 +++++++++++++++++++++++++---
app/views/RoomView/styles.js | 5 -----
3 files changed, 29 insertions(+), 9 deletions(-)
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: (
<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) {
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
}
});
--
GitLab