filter contacts for new sealed topics

This commit is contained in:
Roland Osborne 2022-12-12 13:22:32 -08:00
parent ceee6a9195
commit aace6edeaf
3 changed files with 52 additions and 14 deletions

View File

@ -1,5 +1,5 @@
import { useContext } from 'react';
import { Alert, FlatList, Modal, KeyboardAvoidingView, ScrollView, View, TextInput, TouchableOpacity, Text } from 'react-native';
import { Switch, Alert, FlatList, Modal, KeyboardAvoidingView, ScrollView, View, TextInput, TouchableOpacity, Text } from 'react-native';
import { styles } from './Channels.styled';
import { useChannels } from './useChannels.hook';
import Ionicons from '@expo/vector-icons/AntDesign';
@ -72,20 +72,25 @@ export function ChannelsBody({ state, actions, openConversation }) {
autoCapitalize="words" placeholder="Subject (optional)" placeholderTextColor={Colors.grey} />
</View>
<Text style={styles.label}>Members:</Text>
{ state.connected.length == 0 && (
{ state.contacts.length == 0 && (
<View style={styles.emptyMembers}>
<Text style={styles.empty}>No Connected Contacts</Text>
</View>
)}
{ state.connected.length > 0 && (
{ state.contacts.length > 0 && (
<FlatList style={styles.addMembers}
data={state.connected}
data={state.contacts}
renderItem={({ item }) => <AddMember members={state.addMembers} item={item}
setCard={actions.setAddMember} clearCard={actions.clearAddMember} />}
keyExtractor={item => item.cardId}
/>
)}
<View style={styles.addControls}>
<View style={styles.sealed}>
<Switch style={styles.switch} trackColor={styles.track}
value={state.sealed} onValueChange={actions.setSealed} />
<Text style={styles.sealedText}>Sealed</Text>
</View>
<TouchableOpacity style={styles.cancel} onPress={actions.hideAdding}>
<Text>Cancel</Text>
</TouchableOpacity>
@ -164,20 +169,25 @@ export function Channels({ openConversation }) {
autoCapitalize="words" placeholder="Subject (optional)" placeholderTextColor={Colors.grey} />
</View>
<Text style={styles.label}>Members:</Text>
{ state.connected.length == 0 && (
{ state.contacts.length == 0 && (
<View style={styles.emptyMembers}>
<Text style={styles.empty}>No Connected Contacts</Text>
</View>
)}
{ state.connected.length > 0 && (
{ state.contacts.length > 0 && (
<FlatList style={styles.addMembers}
data={state.connected}
data={state.contacts}
renderItem={({ item }) => <AddMember members={state.addMembers} item={item}
setCard={actions.setAddMember} clearCard={actions.clearAddMember} />}
keyExtractor={item => item.cardId}
/>
)}
<View style={styles.addControls}>
<View style={styles.sealed}>
<Switch style={styles.switch} trackColor={styles.track}
value={state.sealed} onValueChange={actions.setSealed} />
<Text>Sealed</Text>
</View>
<TouchableOpacity style={styles.cancel} onPress={actions.hideAdding}>
<Text>Cancel</Text>
</TouchableOpacity>

View File

@ -116,6 +116,7 @@ export const styles = StyleSheet.create({
width: 72,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
},
save: {
backgroundColor: Colors.primary,
@ -125,6 +126,7 @@ export const styles = StyleSheet.create({
width: 72,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
},
saveText: {
color: Colors.white,
@ -132,7 +134,15 @@ export const styles = StyleSheet.create({
addControls: {
display: 'flex',
flexDirection: 'row',
justifyContent: 'flex-end',
},
sealed: {
display: 'flex',
flexDirection: 'row',
flexGrow: 1,
alignItems: 'center',
},
sealedText: {
color: Colors.text,
},
addWrapper: {
display: 'flex',
@ -194,5 +204,12 @@ export const styles = StyleSheet.create({
fontSize: 12,
color: Colors.grey,
},
track: {
false: Colors.grey,
true: Colors.background,
},
switch: {
transform: [{ scaleX: .7 }, { scaleY: .7 }],
},
})

View File

@ -15,9 +15,10 @@ export function useChannels() {
tabbed: null,
filter: null,
adding: false,
connected: [],
contacts: [],
addSubject: null,
addMembers: [],
sealed: false,
});
const items = useRef([]);
@ -33,10 +34,16 @@ export function useChannels() {
useEffect(() => {
const contacts = Array.from(card.state.cards.values());
const connected = contacts.filter(contact => {
return contact.detail.status === 'connected'
const filtered = contacts.filter(contact => {
if (contact.detail.status !== 'connected') {
return false;
}
if (state.sealed && !contact.profile.seal) {
return false;
}
return true;
});
const sorted = connected.sort((a, b) => {
const sorted = filtered.sort((a, b) => {
const aName = a?.profile?.name;
const bName = b?.profile?.name;
if (aName === bName) {
@ -47,8 +54,9 @@ export function useChannels() {
}
return 1;
});
updateState({ connected: sorted });
}, [card]);
const addMembers = state.addMembers.filter(item => sorted.some(contact => contact.cardId === item));
updateState({ contacts: sorted, addMembers });
}, [card, state.sealed]);
useEffect(() => {
if (dimensions.width > config.tabbedWidth) {
@ -196,6 +204,9 @@ export function useChannels() {
}, [channel, card, state.filter]);
const actions = {
setSealed: (sealed) => {
updateState({ sealed });
},
setTopic: (topic) => {
updateState({ topic });
},