From f3cff90cd66f1e5f56c7519b76090f510370a8ad Mon Sep 17 00:00:00 2001 From: Djorkaeff Alexandre Date: Tue, 7 May 2019 18:23:17 -0300 Subject: [PATCH 1/5] Fix style to headerbackbutton and title --- app/views/RoomView/index.js | 46 ++++++++++++++++++++++++++---------- app/views/RoomView/styles.js | 9 +++---- 2 files changed, 39 insertions(+), 16 deletions(-) diff --git a/app/views/RoomView/index.js b/app/views/RoomView/index.js index 58915b3c8a..6e462cbd96 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'; @@ -67,18 +67,27 @@ export default class RoomView extends LoggedView { const t = navigation.getParam('t'); const tmid = navigation.getParam('tmid'); const isFetching = navigation.getParam('isFetching', false); + const unreadsCount = navigation.getParam('unreadsCount') > 0 ? navigation.getParam('unreadsCount') : null; return { - headerTitleContainerStyle: styles.headerTitleContainerStyle, - headerTitle: ( - + headerLeft: ( + + + 999 ? '+999' : unreadsCount} + backTitleVisible + onPress={() => navigation.goBack()} + /> + + + ), headerRight: }; @@ -113,6 +122,7 @@ export default class RoomView extends LoggedView { 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('archived != true && open == true'); this.state = { joined: this.rooms.length > 0, room: this.rooms[0] || { rid: this.rid, t: this.t }, @@ -122,6 +132,7 @@ export default class RoomView extends LoggedView { this.beginAnimatingTimeout = setTimeout(() => this.beginAnimating = true, 300); this.messagebox = React.createRef(); safeAddListener(this.rooms, this.updateRoom); + safeAddListener(this.chats, this.updateUnreadCount); this.willBlurListener = props.navigation.addListener('willBlur', () => this.mounted = false); this.mounted = false; console.timeEnd(`${ this.constructor.name } init`); @@ -294,6 +305,17 @@ export default class RoomView extends LoggedView { }); }, 1000, true) + // eslint-disable-next-line react/sort-comp + updateUnreadCount = debounce(() => { + const { navigation } = this.props; + const unreadsCount = this.chats.filtered('(unread > 0)').length; + if (unreadsCount !== navigation.getParam('unreadsCount')) { + navigation.setParams({ + unreadsCount + }); + } + }, 300, true) + handleConnected = () => { this.init(); EventEmitter.removeListener('connected', this.handleConnected); diff --git a/app/views/RoomView/styles.js b/app/views/RoomView/styles.js index b4cb4ed0e8..a00f7494dd 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({ @@ -66,8 +65,10 @@ export default StyleSheet.create({ ...sharedStyles.textMedium, ...sharedStyles.textColorNormal }, - headerTitleContainerStyle: { - justifyContent: 'flex-start', - left: isIOS ? 40 : 50 + headerBackButton: { + marginRight: 10 + }, + headerLeftContainerStyle: { + flexDirection: 'row' } }); From d37f0d4d150fe4cb0ad3f2e769fae758b9af411f Mon Sep 17 00:00:00 2001 From: Djorkaeff Alexandre Date: Tue, 7 May 2019 19:46:28 -0300 Subject: [PATCH 2/5] Fixing the count value --- app/views/RoomView/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/views/RoomView/index.js b/app/views/RoomView/index.js index 6e462cbd96..c3058c5886 100644 --- a/app/views/RoomView/index.js +++ b/app/views/RoomView/index.js @@ -308,7 +308,7 @@ export default class RoomView extends LoggedView { // eslint-disable-next-line react/sort-comp updateUnreadCount = debounce(() => { const { navigation } = this.props; - const unreadsCount = this.chats.filtered('(unread > 0)').length; + const unreadsCount = this.chats.filtered('(unread > 0)').reduce((a, b) => a + (b.unread || 0), 0); if (unreadsCount !== navigation.getParam('unreadsCount')) { navigation.setParams({ unreadsCount From 3b01f90d586997e22ab9779c3a64f39853955694 Mon Sep 17 00:00:00 2001 From: Djorkaeff Alexandre Date: Tue, 7 May 2019 20:15:40 -0300 Subject: [PATCH 3/5] Fix debounce to count unread messages and usermentions --- app/views/RoomView/index.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/app/views/RoomView/index.js b/app/views/RoomView/index.js index c3058c5886..dfb3f28f54 100644 --- a/app/views/RoomView/index.js +++ b/app/views/RoomView/index.js @@ -122,7 +122,7 @@ export default class RoomView extends LoggedView { 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('archived != true && open == true'); + this.chats = database.objects('subscriptions').filtered('rid != $0', this.rid); this.state = { joined: this.rooms.length > 0, room: this.rooms[0] || { rid: this.rid, t: this.t }, @@ -219,6 +219,7 @@ export default class RoomView extends LoggedView { } } this.rooms.removeAllListeners(); + this.chats.removeAllListeners(); if (this.sub && this.sub.stop) { this.sub.stop(); } @@ -308,13 +309,13 @@ export default class RoomView extends LoggedView { // eslint-disable-next-line react/sort-comp updateUnreadCount = debounce(() => { const { navigation } = this.props; - const unreadsCount = this.chats.filtered('(unread > 0)').reduce((a, b) => a + (b.unread || 0), 0); + 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, true) + }, 300, false) handleConnected = () => { this.init(); From 7050d15225b6650ef3df5cb0bd6b755bafbd88b8 Mon Sep 17 00:00:00 2001 From: Djorkaeff Alexandre Date: Wed, 8 May 2019 19:11:22 -0300 Subject: [PATCH 4/5] Fix tintColor on headerbackbutton android --- app/views/RoomView/index.js | 3 ++- app/views/RoomView/styles.js | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/app/views/RoomView/index.js b/app/views/RoomView/index.js index dfb3f28f54..b1e6d0f4e3 100644 --- a/app/views/RoomView/index.js +++ b/app/views/RoomView/index.js @@ -34,7 +34,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'; @@ -76,6 +76,7 @@ export default class RoomView extends LoggedView { title={unreadsCount > 999 ? '+999' : unreadsCount} backTitleVisible onPress={() => navigation.goBack()} + tintColor={HEADER_BACK} /> Date: Wed, 15 May 2019 20:40:44 -0300 Subject: [PATCH 5/5] Try to fix header title on roomview --- app/views/RoomView/Header/Header.js | 2 +- app/views/RoomView/index.js | 43 +++++++++++++++++------------ app/views/RoomView/styles.js | 8 +----- 3 files changed, 27 insertions(+), 26 deletions(-) diff --git a/app/views/RoomView/Header/Header.js b/app/views/RoomView/Header/Header.js index 31a2725c4f..56dbfd6b32 100644 --- a/app/views/RoomView/Header/Header.js +++ b/app/views/RoomView/Header/Header.js @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { - View, Text, StyleSheet, ScrollView + View, Text, StyleSheet, ScrollView, Dimensions } from 'react-native'; import { emojify } from 'react-emojione'; import removeMarkdown from 'remove-markdown'; diff --git a/app/views/RoomView/index.js b/app/views/RoomView/index.js index b1e6d0f4e3..6ce8e83dfd 100644 --- a/app/views/RoomView/index.js +++ b/app/views/RoomView/index.js @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { - Text, View, LayoutAnimation, InteractionManager + Text, View, LayoutAnimation, InteractionManager, Platform } from 'react-native'; import { connect } from 'react-redux'; import { RectButton } from 'react-native-gesture-handler'; @@ -69,24 +69,31 @@ export default class RoomView extends LoggedView { const isFetching = navigation.getParam('isFetching', false); const unreadsCount = navigation.getParam('unreadsCount') > 0 ? navigation.getParam('unreadsCount') : null; return { + headerLeftContainerStyle: { + position: 'relative', + backgroundColor: 'red' + }, + headerTitle: ( + + ), headerLeft: ( - - - 999 ? '+999' : unreadsCount} - backTitleVisible - onPress={() => navigation.goBack()} - tintColor={HEADER_BACK} - /> - - { + console.warn(event.nativeEvent.layout); + }} + > + 999 ? '+999' : unreadsCount} + backTitleVisible + onPress={() => navigation.goBack()} + tintColor={HEADER_BACK} /> ), diff --git a/app/views/RoomView/styles.js b/app/views/RoomView/styles.js index 7f4526035e..e17788ba3b 100644 --- a/app/views/RoomView/styles.js +++ b/app/views/RoomView/styles.js @@ -1,5 +1,5 @@ import { StyleSheet } from 'react-native'; -import { isIOS } from '../../utils/deviceInfo'; +// import { isIOS } from '../../utils/deviceInfo'; import { COLOR_SEPARATOR, COLOR_PRIMARY, COLOR_WHITE, COLOR_TEXT_DESCRIPTION @@ -65,11 +65,5 @@ export default StyleSheet.create({ fontSize: 16, ...sharedStyles.textMedium, ...sharedStyles.textColorNormal - }, - headerBackButton: { - marginRight: isIOS ? 10 : 0 - }, - headerLeftContainerStyle: { - flexDirection: 'row' } });