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

adding contact buttons

Browse Source
This commit is contained in:
balzack 2022-09-26 10:11:45 -07:00
parent 559c5f7d27
commit 7e72e68f5a
4 changed files with 72 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
app/mobile/src/session/contact/Contact.jsx
View File

@ -11,6 +11,22 @@ export function Contact({ contact, closeContact }) {
const { state, actions } = useContact(contact);
const getStatusText = (status) => {
if (status === 'confirmed') {
return 'Saved';
}
if (status === 'pending') {
return 'Request Reveived';
}
if (status === 'connecting') {
return 'Request Sent';
}
if (status === 'connected') {
return 'Connected';
}
return 'Unsaved';
}
return (
<ScrollView>
<SafeAreaView style={styles.container} edges={['top', 'bottom', 'right']}>
@ -24,6 +40,7 @@ export function Contact({ contact, closeContact }) {
<View style={styles.header}>
<Text style={styles.headerText}>{ `${state.handle}@${state.node}` }</Text>
</View>
<Text style={styles.status}>{ getStatusText(state.status) }</Text>
<View style={{ width: 128 }}>
<Logo src={state.logo} width={128} height={128} radius={8} />
</View>
@ -40,6 +57,41 @@ export function Contact({ contact, closeContact }) {
<Text style={styles.descriptiontext}>{ state.description }</Text>
</View>
</View>
<View style={styles.controls}>
{ state.status === 'connected' && (
<>
<TouchableOpacity style={styles.button}>
<Text style={styles.buttonText}>Disconnect</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.button}>
<Text style={styles.buttonText}>Delete Contact</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.button}>
<Text style={styles.buttonText}>Block Contact</Text>
</TouchableOpacity>
</>
)}
{ state.status === 'connecting' && (
<TouchableOpacity style={styles.button}>
<Text style={styles.buttonText}>Block</Text>
</TouchableOpacity>
)}
{ state.status === 'confirmed' && (
<TouchableOpacity style={styles.button}>
<Text style={styles.buttonText}>Block</Text>
</TouchableOpacity>
)}
{ state.status === 'pending' && (
<TouchableOpacity style={styles.button}>
<Text style={styles.buttonText}>Block</Text>
</TouchableOpacity>
)}
{ state.status === 'requested' && (
<TouchableOpacity style={styles.button}>
<Text style={styles.buttonText}>Block</Text>
</TouchableOpacity>
)}
</View>
</SafeAreaView>
</ScrollView>
)

19
app/mobile/src/session/contact/Contact.styled.js
View File

@ -18,13 +18,15 @@ export const styles = StyleSheet.create({
paddingRight: 32,
},
header: {
paddingBottom: 32,
paddingTop: 16,
display: 'flex',
flexDirection: 'row',
alignItems: 'flex-end',
justifyContent: 'center',
},
status: {
color: Colors.grey,
paddingBottom: 24,
},
headerText: {
fontSize: 16,
paddingRight: 4,
@ -73,5 +75,18 @@ export const styles = StyleSheet.create({
fontSize: 16,
paddingLeft: 8
},
button: {
width: 192,
padding: 6,
backgroundColor: Colors.primary,
borderRadius: 4,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
marginTop: 16,
},
buttonText: {
color: Colors.white,
},
})

4
app/mobile/src/session/contact/useContact.hook.js
View File

@ -41,7 +41,7 @@ export function useContact(contact) {
const { profile, detail, cardId } = selected;
const { name, handle, node, location, description, imageSet, revision } = profile;
const logo = imageSet ? card.actions.getCardLogo(cardId, revision) : 'avatar';
updateState({ name, handle, node, location, description, logo, status: detail.state });
updateState({ name, handle, node, location, description, logo, status: detail.status });
stateSet = true;
}
}
@ -52,7 +52,7 @@ export function useContact(contact) {
const { cardId, profile, detail } = selected;
const { name, handle, node, location, description, imageSet, revision } = profile;
const logo = imageSet ? card.actions.getCardLogo(cardId, revision) : 'avatar';
updateState({ name, handle, node, location, description, logo, status: detail.state });
updateState({ name, handle, node, location, description, logo, status: detail.status });
stateSet = true;
}
else {

2
app/mobile/src/session/profile/Profile.styled.js
View File

@ -13,7 +13,7 @@ export const styles = StyleSheet.create({
},
header: {
paddingBottom: 32,
paddingTop: 16,
paddingTop: 24,
display: 'flex',
flexDirection: 'row',
alignItems: 'flex-end',