From f7f3c124c8b0f7dd402cf6be34e544042f0ecaec Mon Sep 17 00:00:00 2001
From: William Reiske <wreiske@mieweb.com>
Date: Tue, 5 Oct 2021 14:19:34 -0700
Subject: [PATCH 1/4] [FEATURE] Pull down to refresh read receipts

This commit introduces a new feature to allow users to pull down to refresh read receipts.
---
 app/views/ReadReceiptView/index.js | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/app/views/ReadReceiptView/index.js b/app/views/ReadReceiptView/index.js
index d407b342018..f9b06b5ab05 100644
--- a/app/views/ReadReceiptView/index.js
+++ b/app/views/ReadReceiptView/index.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { FlatList, Text, View } from 'react-native';
+import { FlatList, Text, View, RefreshControl } from 'react-native';
 import { dequal } from 'dequal';
 import moment from 'moment';
 import { connect } from 'react-redux';
@@ -31,7 +31,8 @@ class ReadReceiptView extends React.Component {
 	static propTypes = {
 		route: PropTypes.object,
 		Message_TimeAndDateFormat: PropTypes.string,
-		theme: PropTypes.string
+		theme: PropTypes.string,
+		refreshing: PropTypes.bool
 	};
 
 	constructor(props) {
@@ -49,7 +50,7 @@ class ReadReceiptView extends React.Component {
 
 	shouldComponentUpdate(nextProps, nextState) {
 		const { loading, receipts } = this.state;
-		const { theme } = this.props;
+		const { theme, refreshing } = this.props;
 		if (nextProps.theme !== theme) {
 			return true;
 		}
@@ -140,12 +141,22 @@ class ReadReceiptView extends React.Component {
 								borderColor: themes[theme].separatorColor
 							}
 						]}
+						refreshControl={
+							<RefreshControl refreshing={refreshing} onRefresh={this.onRefresh} tintColor={themes[theme].auxiliaryText} />
+						}
 						keyExtractor={item => item._id}
 					/>
 				)}
 			</SafeAreaView>
 		);
 	}
+	onRefresh = () => {
+		const { loading } = this.state;
+		if (loading) {
+			return;
+		}
+		this.load();
+	};
 }
 
 const mapStateToProps = state => ({

From c43f501d92d7253ffbf2e59f51b9ac7625a3f2c9 Mon Sep 17 00:00:00 2001
From: William Reiske <wreiske@mieweb.com>
Date: Tue, 5 Oct 2021 15:08:11 -0700
Subject: [PATCH 2/4] Support pull down to refresh when we renderEmpty

This adds support for the pull-down refresh to work when there are no read receipts yet.
---
 app/views/ReadReceiptView/index.js | 29 ++++++++++++++++++++---------
 1 file changed, 20 insertions(+), 9 deletions(-)

diff --git a/app/views/ReadReceiptView/index.js b/app/views/ReadReceiptView/index.js
index f9b06b5ab05..a4b837667de 100644
--- a/app/views/ReadReceiptView/index.js
+++ b/app/views/ReadReceiptView/index.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { FlatList, Text, View, RefreshControl } from 'react-native';
+import { ScrollView, FlatList, Text, View, RefreshControl } from 'react-native';
 import { dequal } from 'dequal';
 import moment from 'moment';
 import { connect } from 'react-redux';
@@ -17,6 +17,7 @@ import { themes } from '../../constants/colors';
 import SafeAreaView from '../../containers/SafeAreaView';
 import styles from './styles';
 
+
 class ReadReceiptView extends React.Component {
 	static navigationOptions = ({ navigation, isMasterDetail }) => {
 		const options = {
@@ -25,6 +26,7 @@ class ReadReceiptView extends React.Component {
 		if (isMasterDetail) {
 			options.headerLeft = () => <HeaderButton.CloseModal navigation={navigation} testID='read-receipt-view-close' />;
 		}
+
 		return options;
 	};
 
@@ -50,7 +52,7 @@ class ReadReceiptView extends React.Component {
 
 	shouldComponentUpdate(nextProps, nextState) {
 		const { loading, receipts } = this.state;
-		const { theme, refreshing } = this.props;
+		const { theme } = this.props;
 		if (nextProps.theme !== theme) {
 			return true;
 		}
@@ -86,13 +88,21 @@ class ReadReceiptView extends React.Component {
 	};
 
 	renderEmpty = () => {
-		const { theme } = this.props;
+		const { theme, refreshing, loading } = this.props;
 		return (
-			<View
-				style={[styles.listEmptyContainer, { backgroundColor: themes[theme].chatComponentBackground }]}
-				testID='read-receipt-view'>
-				<Text style={{ color: themes[theme].titleText }}>{I18n.t('No_Read_Receipts')}</Text>
-			</View>
+			<SafeAreaView testID='read-receipt-view'>
+				{loading ? (
+					<ActivityIndicator theme={theme} />
+				) : (
+				<ScrollView
+					contentContainerStyle={[styles.listEmptyContainer, { backgroundColor: themes[theme].chatComponentBackground }]}
+					refreshControl={
+						<RefreshControl refreshing={refreshing} onRefresh={this.onRefresh} tintColor={themes[theme].auxiliaryText} />
+					}>
+					<Text style={{ color: themes[theme].titleText }}>{I18n.t('No_Read_Receipts')}</Text>
+				</ScrollView>
+				)}
+			</SafeAreaView>
 		);
 	};
 
@@ -118,7 +128,7 @@ class ReadReceiptView extends React.Component {
 
 	render() {
 		const { receipts, loading } = this.state;
-		const { theme } = this.props;
+		const { theme, refreshing } = this.props;
 
 		if (!loading && receipts.length === 0) {
 			return this.renderEmpty();
@@ -150,6 +160,7 @@ class ReadReceiptView extends React.Component {
 			</SafeAreaView>
 		);
 	}
+
 	onRefresh = () => {
 		const { loading } = this.state;
 		if (loading) {

From a18e951cc5590442267009b62fdd85122d1e05c7 Mon Sep 17 00:00:00 2001
From: William Reiske <wreiske@mieweb.com>
Date: Tue, 5 Oct 2021 15:13:07 -0700
Subject: [PATCH 3/4] Removed extra new lines added while debugging.

---
 app/views/ReadReceiptView/index.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/app/views/ReadReceiptView/index.js b/app/views/ReadReceiptView/index.js
index a4b837667de..6b767dd1742 100644
--- a/app/views/ReadReceiptView/index.js
+++ b/app/views/ReadReceiptView/index.js
@@ -17,7 +17,6 @@ import { themes } from '../../constants/colors';
 import SafeAreaView from '../../containers/SafeAreaView';
 import styles from './styles';
 
-
 class ReadReceiptView extends React.Component {
 	static navigationOptions = ({ navigation, isMasterDetail }) => {
 		const options = {
@@ -26,7 +25,6 @@ class ReadReceiptView extends React.Component {
 		if (isMasterDetail) {
 			options.headerLeft = () => <HeaderButton.CloseModal navigation={navigation} testID='read-receipt-view-close' />;
 		}
-
 		return options;
 	};
 

From fa8e45c134df62d6898d61350d80189f99c79a24 Mon Sep 17 00:00:00 2001
From: Diego Mello <diegolmello@gmail.com>
Date: Fri, 8 Oct 2021 13:16:11 -0300
Subject: [PATCH 4/4] Minor polishing

---
 app/views/ReadReceiptView/index.js  | 88 ++++++++++++-----------------
 app/views/ReadReceiptView/styles.js | 13 +++++
 2 files changed, 49 insertions(+), 52 deletions(-)

diff --git a/app/views/ReadReceiptView/index.js b/app/views/ReadReceiptView/index.js
index 6b767dd1742..f611cbc15af 100644
--- a/app/views/ReadReceiptView/index.js
+++ b/app/views/ReadReceiptView/index.js
@@ -1,13 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { ScrollView, FlatList, Text, View, RefreshControl } from 'react-native';
+import { FlatList, Text, View, RefreshControl } from 'react-native';
 import { dequal } from 'dequal';
 import moment from 'moment';
 import { connect } from 'react-redux';
 
 import * as List from '../../containers/List';
 import Avatar from '../../containers/Avatar';
-import ActivityIndicator from '../../containers/ActivityIndicator';
 import * as HeaderButton from '../../containers/HeaderButton';
 import I18n from '../../i18n';
 import RocketChat from '../../lib/rocketchat';
@@ -31,8 +30,7 @@ class ReadReceiptView extends React.Component {
 	static propTypes = {
 		route: PropTypes.object,
 		Message_TimeAndDateFormat: PropTypes.string,
-		theme: PropTypes.string,
-		refreshing: PropTypes.bool
+		theme: PropTypes.string
 	};
 
 	constructor(props) {
@@ -86,21 +84,17 @@ class ReadReceiptView extends React.Component {
 	};
 
 	renderEmpty = () => {
-		const { theme, refreshing, loading } = this.props;
+		const { loading } = this.state;
+		const { theme } = this.props;
+		if (loading) {
+			return null;
+		}
 		return (
-			<SafeAreaView testID='read-receipt-view'>
-				{loading ? (
-					<ActivityIndicator theme={theme} />
-				) : (
-				<ScrollView
-					contentContainerStyle={[styles.listEmptyContainer, { backgroundColor: themes[theme].chatComponentBackground }]}
-					refreshControl={
-						<RefreshControl refreshing={refreshing} onRefresh={this.onRefresh} tintColor={themes[theme].auxiliaryText} />
-					}>
-					<Text style={{ color: themes[theme].titleText }}>{I18n.t('No_Read_Receipts')}</Text>
-				</ScrollView>
-				)}
-			</SafeAreaView>
+			<View
+				style={[styles.listEmptyContainer, { backgroundColor: themes[theme].chatComponentBackground }]}
+				testID='read-receipt-view'>
+				<Text style={[styles.emptyText, { color: themes[theme].auxiliaryTintColor }]}>{I18n.t('No_Read_Receipts')}</Text>
+			</View>
 		);
 	};
 
@@ -116,9 +110,15 @@ class ReadReceiptView extends React.Component {
 				<View style={styles.infoContainer}>
 					<View style={styles.item}>
 						<Text style={[styles.name, { color: themes[theme].titleText }]}>{item?.user?.name}</Text>
-						<Text style={{ color: themes[theme].auxiliaryText }}>{time}</Text>
+						<Text style={[styles.time, { color: themes[theme].auxiliaryText }]}>{time}</Text>
 					</View>
-					<Text style={{ color: themes[theme].auxiliaryText }}>{`@${item.user.username}`}</Text>
+					<Text
+						style={[
+							styles.username,
+							{
+								color: themes[theme].auxiliaryText
+							}
+						]}>{`@${item.user.username}`}</Text>
 				</View>
 			</View>
 		);
@@ -126,46 +126,30 @@ class ReadReceiptView extends React.Component {
 
 	render() {
 		const { receipts, loading } = this.state;
-		const { theme, refreshing } = this.props;
-
-		if (!loading && receipts.length === 0) {
-			return this.renderEmpty();
-		}
+		const { theme } = this.props;
 
 		return (
 			<SafeAreaView testID='read-receipt-view'>
 				<StatusBar />
-				{loading ? (
-					<ActivityIndicator theme={theme} />
-				) : (
-					<FlatList
-						data={receipts}
-						renderItem={this.renderItem}
-						ItemSeparatorComponent={List.Separator}
-						style={[
-							styles.list,
-							{
-								backgroundColor: themes[theme].chatComponentBackground,
-								borderColor: themes[theme].separatorColor
-							}
-						]}
-						refreshControl={
-							<RefreshControl refreshing={refreshing} onRefresh={this.onRefresh} tintColor={themes[theme].auxiliaryText} />
+				<FlatList
+					data={receipts}
+					renderItem={this.renderItem}
+					ItemSeparatorComponent={List.Separator}
+					ListEmptyComponent={this.renderEmpty}
+					contentContainerStyle={List.styles.contentContainerStyleFlatList}
+					style={[
+						styles.list,
+						{
+							backgroundColor: themes[theme].chatComponentBackground,
+							borderColor: themes[theme].separatorColor
 						}
-						keyExtractor={item => item._id}
-					/>
-				)}
+					]}
+					refreshControl={<RefreshControl refreshing={loading} onRefresh={this.load} tintColor={themes[theme].auxiliaryText} />}
+					keyExtractor={item => item._id}
+				/>
 			</SafeAreaView>
 		);
 	}
-
-	onRefresh = () => {
-		const { loading } = this.state;
-		if (loading) {
-			return;
-		}
-		this.load();
-	};
 }
 
 const mapStateToProps = state => ({
diff --git a/app/views/ReadReceiptView/styles.js b/app/views/ReadReceiptView/styles.js
index dbf31e6a064..e6af153ed1b 100644
--- a/app/views/ReadReceiptView/styles.js
+++ b/app/views/ReadReceiptView/styles.js
@@ -8,9 +8,14 @@ export default StyleSheet.create({
 		alignItems: 'center',
 		justifyContent: 'center'
 	},
+	emptyText: {
+		fontSize: 16,
+		...sharedStyles.textRegular
+	},
 	item: {
 		flex: 1,
 		flexDirection: 'row',
+		alignItems: 'center',
 		justifyContent: 'space-between'
 	},
 	separator: {
@@ -20,6 +25,14 @@ export default StyleSheet.create({
 		...sharedStyles.textRegular,
 		fontSize: 17
 	},
+	username: {
+		...sharedStyles.textMedium,
+		fontSize: 14
+	},
+	time: {
+		...sharedStyles.textRegular,
+		fontSize: 12
+	},
 	infoContainer: {
 		flex: 1,
 		marginLeft: 10