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 React from 'react';
import PropTypes from 'prop-types'; 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 { dequal } from 'dequal';
import moment from 'moment'; import moment from 'moment';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import * as List from '../../containers/List'; import * as List from '../../containers/List';
import Avatar from '../../containers/Avatar'; import Avatar from '../../containers/Avatar';
import ActivityIndicator from '../../containers/ActivityIndicator';
import * as HeaderButton from '../../containers/HeaderButton'; import * as HeaderButton from '../../containers/HeaderButton';
import I18n from '../../i18n'; import I18n from '../../i18n';
import RocketChat from '../../lib/rocketchat'; import RocketChat from '../../lib/rocketchat';
@ -85,12 +84,16 @@ class ReadReceiptView extends React.Component {
}; };
renderEmpty = () => { renderEmpty = () => {
const { loading } = this.state;
const { theme } = this.props; const { theme } = this.props;
if (loading) {
return null;
}
return ( return (
<View <View
style={[styles.listEmptyContainer, { backgroundColor: themes[theme].chatComponentBackground }]} style={[styles.listEmptyContainer, { backgroundColor: themes[theme].chatComponentBackground }]}
testID='read-receipt-view'> 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> </View>
); );
}; };
@ -107,9 +110,15 @@ class ReadReceiptView extends React.Component {
<View style={styles.infoContainer}> <View style={styles.infoContainer}>
<View style={styles.item}> <View style={styles.item}>
<Text style={[styles.name, { color: themes[theme].titleText }]}>{item?.user?.name}</Text> <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> </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>
</View> </View>
); );
@ -119,30 +128,25 @@ class ReadReceiptView extends React.Component {
const { receipts, loading } = this.state; const { receipts, loading } = this.state;
const { theme } = this.props; const { theme } = this.props;
if (!loading && receipts.length === 0) {
return this.renderEmpty();
}
return ( return (
<SafeAreaView testID='read-receipt-view'> <SafeAreaView testID='read-receipt-view'>
<StatusBar /> <StatusBar />
{loading ? ( <FlatList
<ActivityIndicator theme={theme} /> data={receipts}
) : ( renderItem={this.renderItem}
<FlatList ItemSeparatorComponent={List.Separator}
data={receipts} ListEmptyComponent={this.renderEmpty}
renderItem={this.renderItem} contentContainerStyle={List.styles.contentContainerStyleFlatList}
ItemSeparatorComponent={List.Separator} style={[
style={[ styles.list,
styles.list, {
{ backgroundColor: themes[theme].chatComponentBackground,
backgroundColor: themes[theme].chatComponentBackground, borderColor: themes[theme].separatorColor
borderColor: themes[theme].separatorColor }
} ]}
]} refreshControl={<RefreshControl refreshing={loading} onRefresh={this.load} tintColor={themes[theme].auxiliaryText} />}
keyExtractor={item => item._id} keyExtractor={item => item._id}
/> />
)}
</SafeAreaView> </SafeAreaView>
); );
} }

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

@ -8,9 +8,14 @@ export default StyleSheet.create({
alignItems: 'center', alignItems: 'center',
justifyContent: 'center' justifyContent: 'center'
}, },
emptyText: {
fontSize: 16,
...sharedStyles.textRegular
},
item: { item: {
flex: 1, flex: 1,
flexDirection: 'row', flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between' justifyContent: 'space-between'
}, },
separator: { separator: {
@ -20,6 +25,14 @@ export default StyleSheet.create({
...sharedStyles.textRegular, ...sharedStyles.textRegular,
fontSize: 17 fontSize: 17
}, },
username: {
...sharedStyles.textMedium,
fontSize: 14
},
time: {
...sharedStyles.textRegular,
fontSize: 12
},
infoContainer: { infoContainer: {
flex: 1, flex: 1,
marginLeft: 10 marginLeft: 10