From 467a1a5217022d1c745ea15237547da179a72dcf Mon Sep 17 00:00:00 2001
From: William Reiske <wreiske@mieweb.com>
Date: Wed, 20 Oct 2021 10:02:55 -0700
Subject: [PATCH] [IMPROVE] Pull down to refresh read receipts (#3427)

* [FEATURE] Pull down to refresh read receipts

This commit introduces a new feature to allow users to pull down to refresh read receipts.

* 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.

* Removed extra new lines added while debugging.

* Minor polishing

Co-authored-by: Diego Mello <diegolmello@gmail.com>
---
 app/views/ReadReceiptView/index.js  | 56 +++++++++++++++--------------
 app/views/ReadReceiptView/styles.js | 13 +++++++
 2 files changed, 43 insertions(+), 26 deletions(-)

diff --git a/app/views/ReadReceiptView/index.js b/app/views/ReadReceiptView/index.js
index d407b342..f611cbc1 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 { 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';
 
 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';
@@ -85,12 +84,16 @@ class ReadReceiptView extends React.Component {
 	};
 
 	renderEmpty = () => {
+		const { loading } = this.state;
 		const { theme } = this.props;
+		if (loading) {
+			return null;
+		}
 		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>
+				<Text style={[styles.emptyText, { color: themes[theme].auxiliaryTintColor }]}>{I18n.t('No_Read_Receipts')}</Text>
 			</View>
 		);
 	};
@@ -107,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>
 		);
@@ -119,30 +128,25 @@ class ReadReceiptView extends React.Component {
 		const { receipts, loading } = this.state;
 		const { theme } = this.props;
 
-		if (!loading && receipts.length === 0) {
-			return this.renderEmpty();
-		}
-
 		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
-							}
-						]}
-						keyExtractor={item => item._id}
-					/>
-				)}
+				<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
+						}
+					]}
+					refreshControl={<RefreshControl refreshing={loading} onRefresh={this.load} tintColor={themes[theme].auxiliaryText} />}
+					keyExtractor={item => item._id}
+				/>
 			</SafeAreaView>
 		);
 	}
diff --git a/app/views/ReadReceiptView/styles.js b/app/views/ReadReceiptView/styles.js
index dbf31e6a..e6af153e 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