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

This commit is contained in:
IlarionHalushka 2019-08-22 22:15:30 +03:00 committed by Diego Mello
parent 857d23ee88
commit 8309c45c64
3 changed files with 29 additions and 9 deletions

View File

@ -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,

View File

@ -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) {

View File

@ -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
}
});