sergiodt
/
vn-verdnaturachat
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[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>
This commit is contained in:
William Reiske 2021-10-20 10:02:55 -07:00 committed by GitHub
parent 15ccb73f37
commit 467a1a5217
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 43 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
app/views/ReadReceiptView/index.js
View File

@ -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>
);
}

13
app/views/ReadReceiptView/styles.js
View File

@ -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