From 467a1a5217022d1c745ea15237547da179a72dcf Mon Sep 17 00:00:00 2001 From: William Reiske 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 --- 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 d407b3420..f611cbc15 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 ( - {I18n.t('No_Read_Receipts')} + {I18n.t('No_Read_Receipts')} ); }; @@ -107,9 +110,15 @@ class ReadReceiptView extends React.Component { {item?.user?.name} - {time} + {time} - {`@${item.user.username}`} + {`@${item.user.username}`} ); @@ -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 ( - {loading ? ( - - ) : ( - item._id} - /> - )} + } + keyExtractor={item => item._id} + /> ); } diff --git a/app/views/ReadReceiptView/styles.js b/app/views/ReadReceiptView/styles.js index dbf31e6a0..e6af153ed 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