From 812535da435da78daf7b30febd596556303e5bc9 Mon Sep 17 00:00:00 2001
From: phriedrich <info@phriedrich.de>
Date: Fri, 17 Jul 2020 19:13:44 +0200
Subject: [PATCH] [FIX] Read receipts on tablet (#2297)

* fixes not working read receipts on tablet (#2295)

* fixing last commit it to make it work on both tablet and phone

* fix missing close button on tablet's modal view

* Update app/views/ReadReceiptView/index.js

* remove unnecessary param

Co-authored-by: Djorkaeff Alexandre <djorkaeff.unb@gmail.com>
Co-authored-by: Diego Mello <diegolmello@gmail.com>
---
 app/containers/MessageActions/index.js |  8 +++++++-
 app/stacks/MasterDetailStack/index.js  |  2 +-
 app/views/ReadReceiptView/index.js     | 11 +++++++++--
 3 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/app/containers/MessageActions/index.js b/app/containers/MessageActions/index.js
index 7846e1d70..a6d2a9663 100644
--- a/app/containers/MessageActions/index.js
+++ b/app/containers/MessageActions/index.js
@@ -201,7 +201,13 @@ const MessageActions = React.memo(forwardRef(({
 		hideActionSheet();
 	};
 
-	const handleReadReceipt = message => Navigation.navigate('ReadReceiptsView', { messageId: message.id });
+	const handleReadReceipt = (message) => {
+		if (isMasterDetail) {
+			Navigation.navigate('ModalStackNavigator', { screen: 'ReadReceiptsView', params: { messageId: message.id } });
+		} else {
+			Navigation.navigate('ReadReceiptsView', { messageId: message.id });
+		}
+	};
 
 	const handleToggleTranslation = async(message) => {
 		try {
diff --git a/app/stacks/MasterDetailStack/index.js b/app/stacks/MasterDetailStack/index.js
index 0b27d89df..93edefba4 100644
--- a/app/stacks/MasterDetailStack/index.js
+++ b/app/stacks/MasterDetailStack/index.js
@@ -189,7 +189,7 @@ const ModalStackNavigator = React.memo(({ navigation }) => {
 				<ModalStack.Screen
 					name='ReadReceiptsView'
 					component={ReadReceiptsView}
-					options={ReadReceiptsView.navigationOptions}
+					options={props => ReadReceiptsView.navigationOptions({ ...props, isMasterDetail: true })}
 				/>
 				<ModalStack.Screen
 					name='SettingsView'
diff --git a/app/views/ReadReceiptView/index.js b/app/views/ReadReceiptView/index.js
index c5ea398a9..9ec188d0d 100644
--- a/app/views/ReadReceiptView/index.js
+++ b/app/views/ReadReceiptView/index.js
@@ -8,6 +8,7 @@ import { connect } from 'react-redux';
 import Avatar from '../../containers/Avatar';
 import styles from './styles';
 import ActivityIndicator from '../../containers/ActivityIndicator';
+import { CloseModalButton } from '../../containers/HeaderButton';
 import I18n from '../../i18n';
 import RocketChat from '../../lib/rocketchat';
 import StatusBar from '../../containers/StatusBar';
@@ -17,8 +18,14 @@ import { getUserSelector } from '../../selectors/login';
 import SafeAreaView from '../../containers/SafeAreaView';
 
 class ReadReceiptView extends React.Component {
-	static navigationOptions = {
-		title: I18n.t('Read_Receipt')
+	static navigationOptions = ({ navigation, isMasterDetail }) => {
+		const options = {
+			title: I18n.t('Read_Receipt')
+		};
+		if (isMasterDetail) {
+			options.headerLeft = () => <CloseModalButton navigation={navigation} testID='read-receipt-view-close' />;
+		}
+		return options;
 	}
 
 	static propTypes = {