martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-02-14 12:39:17 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

added details members

Browse Source
This commit is contained in:
Roland Osborne 2022-10-09 17:58:52 -07:00
parent ef26adca46
commit 9a070dd8a4
5 changed files with 174 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
app/mobile/src/session/details/Details.jsx
View File

@ -1,9 +1,10 @@
import { View, Text, TouchableOpacity } from 'react-native';
import { FlatList, View, Text, TouchableOpacity } from 'react-native';
import { styles } from './Details.styled';
import { useDetails } from './useDetails.hook';
import { Logo } from 'utils/Logo';
import Ionicons from '@expo/vector-icons/AntDesign';
import Colors from 'constants/Colors';
import { MemberItem } from './memberItem/MemberItem';
export function DetailsHeader() {
return <Text style={styles.title}>Topic Settings</Text>
@ -13,21 +14,56 @@ export function DetailsBody({ channel, clearConversation }) {
const { state, actions } = useDetails();
console.log(state);
if(state.contacts) {
state.contacts.forEach(c => {
console.log(c.cardId, c.profile);
});
}
return (
<View style={styles.details}>
<Logo src={state.logo} width={72} height={72} radius={8} />
<View style={styles.info}>
<View style={styles.subject}>
<Text style={styles.subject}>{ state.subject }</Text>
{ state.mode === 'host' && (
<Ionicons name="edit" size={16} color={Colors.text} />
)}
</View>
<Text style={styles.created}>{ state.created }</Text>
<Text style={styles.mode}>{ state.mode }</Text>
</View>
<View style={styles.body}>
<View style={styles.details}>
<Logo src={state.logo} width={72} height={72} radius={8} />
<View style={styles.info}>
<TouchableOpacity style={styles.subject}>
<Text style={styles.subject}>{ state.subject }</Text>
{ !state.hostId && (
<Ionicons name="edit" size={16} color={Colors.text} />
)}
</TouchableOpacity>
<Text style={styles.created}>{ state.created }</Text>
<Text style={styles.mode}>{ state.mode }</Text>
</View>
</View>
<View style={styles.controls}>
{ !state.hostId && (
<TouchableOpacity style={styles.button}>
<Text style={styles.buttonText}>Delete Topic</Text>
</TouchableOpacity>
)}
{ !state.hostId && (
<TouchableOpacity style={styles.button}>
<Text style={styles.buttonText}>Edit Membership</Text>
</TouchableOpacity>
)}
{ state.hostId && (
<TouchableOpacity style={styles.button}>
<Text style={styles.buttonText}>Leave Topic</Text>
</TouchableOpacity>
)}
</View>
<View style={styles.members}>
<Text style={styles.membersLabel}>Members:</Text>
</View>
<FlatList style={styles.cards}
data={state.contacts}
renderItem={({ item }) => <MemberItem item={item} />}
keyExtractor={item => item.cardId}
/>
</View>
)
}

36
app/mobile/src/session/details/Details.styled.js
View File

@ -19,6 +19,7 @@ export const styles = StyleSheet.create({
flexDirection: 'row',
paddingRight: 8,
color: Colors.text,
alignItems: 'center',
},
created: {
fontSize: 16,
@ -30,6 +31,39 @@ export const styles = StyleSheet.create({
},
title: {
fontSize: 20,
}
},
body: {
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
},
controls: {
paddingTop: 16,
},
button: {
width: 128,
backgroundColor: Colors.primary,
borderRadius: 4,
margin: 8,
},
buttonText: {
width: '100%',
textAlign: 'center',
color: Colors.white,
padding: 4,
},
members: {
paddingTop: 16,
width: '100%',
borderBottomWidth: 1,
borderColor: Colors.divider,
},
membersLabel: {
paddingLeft: 16,
width: '100%',
},
cards: {
width: '100%',
},
})

21
app/mobile/src/session/details/memberItem/MemberItem.jsx Normal file
View File

@ -0,0 +1,21 @@
import { Text, TouchableOpacity, View } from 'react-native';
import { Logo } from 'utils/Logo';
import { styles } from './MemberItem.styled';
export function MemberItem({ item, openContact }) {
const select = () => {
openContact({ card: item.cardId });
};
return (
<View style={styles.container}>
<Logo src={item.logo} width={32} height={32} radius={6} />
<View style={styles.detail}>
<Text style={styles.name} numberOfLines={1} ellipsizeMode={'tail'}>{ item.name }</Text>
<Text style={styles.handle} numberOfLines={1} ellipsizeMode={'tail'}>{ item.handle }</Text>
</View>
</View>
);
}

64
app/mobile/src/session/details/memberItem/MemberItem.styled.js Normal file
View File

@ -0,0 +1,64 @@
import { StyleSheet } from 'react-native';
import { Colors } from 'constants/Colors';
export const styles = StyleSheet.create({
container: {
width: '100%',
display: 'flex',
flexDirection: 'row',
height: 48,
alignItems: 'center',
borderBottomWidth: 1,
borderColor: Colors.itemDivider,
},
detail: {
paddingLeft: 12,
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
flexGrow: 1,
flexShrink: 1,
},
space: {
height: 64,
},
name: {
color: Colors.text,
fontSize: 14,
},
handle: {
color: Colors.text,
fontSize: 12,
},
connected: {
width: 8,
height: 8,
borderRadius: 4,
backgroundColor: Colors.connected,
},
requested: {
width: 8,
height: 8,
borderRadius: 4,
backgroundColor: Colors.requested,
},
connecting: {
width: 8,
height: 8,
borderRadius: 4,
backgroundColor: Colors.connecting,
},
pending: {
width: 8,
height: 8,
borderRadius: 4,
backgroundColor: Colors.pending,
},
confirmed: {
width: 8,
height: 8,
borderRadius: 4,
backgroundColor: Colors.confirmed,
},
})

7
app/mobile/src/session/details/useDetails.hook.js
View File

@ -8,7 +8,8 @@ export function useDetails() {
subject: null,
created: null,
logo: null,
mode: null,
hostId: null,
contacts: null,
});
const conversation = useContext(ConversationContext);
@ -19,8 +20,8 @@ export function useDetails() {
}
useEffect(() => {
const { subject, created, logo, host } = conversation.state;
updateState({ subject, created, logo, mode: host ? 'guest' : 'host' });
const { subject, created, logo, host, contacts } = conversation.state;
updateState({ subject, created, logo, hostId: host, contacts: contacts.filter(card => card != null) });
}, [conversation]);
const actions = {