adding empty conversation indicator

This commit is contained in:
Roland Osborne 2022-11-01 13:53:33 -07:00
parent a44448d8c4
commit c6d996ab04
2 changed files with 31 additions and 14 deletions

View File

@ -88,20 +88,27 @@ export function ConversationBody() {
<KeyboardAvoidingView behavior="padding" keyboardVerticalOffset={72} <KeyboardAvoidingView behavior="padding" keyboardVerticalOffset={72}
enabled={Platform.OS === 'ios' ? state.keyboard : false}> enabled={Platform.OS === 'ios' ? state.keyboard : false}>
<View style={styles.thread}> <View style={styles.thread}>
<FlatList style={styles.conversation} { state.topics.length === 0 && (
contentContainerStyle={styles.topics} <View style={styles.empty}>
ref={ref} <Text style={styles.emptyText}>No Messages</Text>
data={state.topics} </View>
onMomentumScrollEnd={ Platform.OS === 'ios' ? noop : actions.unlatch } )}
onScrollBeginDrag={ Platform.OS !== 'ios' ? noop : actions.unlatch } { state.topics.length !== 0 && (
maintainVisibleContentPosition={ state.latched ? null : { minIndexForVisibile: 2, } } <FlatList style={styles.conversation}
inverted={true} contentContainerStyle={styles.topics}
renderItem={({item}) => <TopicItem item={item} focused={item.topicId === state.focus} ref={ref}
focus={() => actions.setFocus(item.topicId)} hosting={state.host == null} data={state.topics}
remove={actions.removeTopic} update={actions.editTopic} block={actions.blockTopic} onMomentumScrollEnd={ Platform.OS === 'ios' ? noop : actions.unlatch }
report={actions.reportTopic} />} onScrollBeginDrag={ Platform.OS !== 'ios' ? noop : actions.unlatch }
keyExtractor={item => item.topicId} maintainVisibleContentPosition={ state.latched ? null : { minIndexForVisibile: 2, } }
/> inverted={true}
renderItem={({item}) => <TopicItem item={item} focused={item.topicId === state.focus}
focus={() => actions.setFocus(item.topicId)} hosting={state.host == null}
remove={actions.removeTopic} update={actions.editTopic} block={actions.blockTopic}
report={actions.reportTopic} />}
keyExtractor={item => item.topicId}
/>
)}
{ !state.init && ( { !state.init && (
<View style={styles.loading}> <View style={styles.loading}>
<ActivityIndicator size="large" color={Colors.primary} /> <ActivityIndicator size="large" color={Colors.primary} />

View File

@ -65,6 +65,16 @@ export const styles = StyleSheet.create({
minHeight: 0, minHeight: 0,
paddingTop: 8, paddingTop: 8,
}, },
empty: {
flexGrow: 1,
flexShrink: 1,
alignItems: 'center',
justifyContent: 'center',
},
emptyText: {
fontSize: 16,
color: Colors.grey,
},
close: { close: {
flexGrow: 1, flexGrow: 1,
justifyContent: 'flex-end', justifyContent: 'flex-end',