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

rendring contact screen

Browse Source
This commit is contained in:
balzack 2022-09-24 22:56:41 -07:00
parent dc114c545b
commit 7f0f9240e1
11 changed files with 189 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
app/mobile/src/context/useCardContext.hook.js
View File

@ -333,7 +333,16 @@ export function useCardContext() {
getCardLogo: (cardId, revision) => {
const { server, appToken } = session.current;
return getCardImageUrl(server, appToken, cardId, revision);
},
getByGuid: (guid) => {
let card;
cards.current.forEach((value, key, map) => {
if (value?.profile?.guid === guid) {
card = value;
}
});
return card;
},
}
return { state, actions }

8
app/mobile/src/session/Session.jsx
View File

@ -136,15 +136,15 @@ export function Session() {
</SafeAreaView>
)
}
const ContactDrawerContent = ({ navigation }) => {
const ContactDrawerContent = ({ contact, navigation }) => {
const clearContact = () => {
navigation.closeDrawer();
}
return (
<SafeAreaView>
<Contact closeContact={clearContact} />
</SafeAreaView>
<View style={styles.drawer}>
<Contact contact={contact} closeContact={clearContact} />
</View>
)
}

3
app/mobile/src/session/Session.styled.js
View File

@ -26,6 +26,9 @@ export const styles = StyleSheet.create({
flexGrow: 1,
},
drawer: {
width: '100%',
height: '100%',
paddingLeft: 8,
backgroundColor: Colors.formBackground,
},
options: {

2
app/mobile/src/session/cards/cardItem/CardItem.jsx
View File

@ -8,7 +8,7 @@ export function CardItem({ item, openContact }) {
const { state, actions } = useCardItem(item);
const select = () => {
openContact({ card: item });
openContact({ card: item.cardId });
};
return (

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

@ -1,12 +1,40 @@
import { useState, useContext } from 'react';
import { View, TouchableOpacity, Text } from 'react-native';
import { ScrollView, View, TouchableOpacity, Text } from 'react-native';
import { useContact } from './useContact.hook';
import { styles } from './Contact.styled';
import { SafeAreaView } from 'react-native-safe-area-context';
import { Logo } from 'utils/Logo';
import Ionicons from '@expo/vector-icons/AntDesign';
import Colors from 'constants/Colors';
export function Contact({ navigation, closeContact }) {
export function Contact({ contact, closeContact }) {
const onPressCard = () => {
closeContact();
}
return <TouchableOpacity onPress={onPressCard}><Text>CLOSE</Text></TouchableOpacity>
const { state, actions } = useContact(contact);
return (
<ScrollView>
<SafeAreaView style={styles.container} edges={['top', 'bottom', 'right']}>
<View style={styles.header}>
<Text style={styles.headerText}>{ `${state.handle}@${state.node}` }</Text>
</View>
<View style={{ width: 128 }}>
<Logo src={state.logo} width={128} height={128} radius={8} />
</View>
<View style={styles.detail}>
<View style={styles.attribute}>
<Text style={styles.nametext}>{ state.name }</Text>
</View>
<View style={styles.attribute}>
<Ionicons name="enviromento" size={14} color={Colors.text} />
<Text style={styles.locationtext}>{ state.location }</Text>
</View>
<View style={styles.attribute}>
<Ionicons name="book" size={14} color={Colors.text} />
<Text style={styles.descriptiontext}>{ state.description }</Text>
</View>
</View>
</SafeAreaView>
</ScrollView>
)
}

71
app/mobile/src/session/contact/Contact.styled.js Normal file
View File

@ -0,0 +1,71 @@
import { StyleSheet } from 'react-native';
import { Colors } from 'constants/Colors';
export const styles = StyleSheet.create({
container: {
width: '100%',
height: '100%',
display: 'flex',
flexDirection: 'column',
paddingBottom: 32,
alignItems: 'center',
justifyContent: 'center',
},
header: {
paddingBottom: 32,
paddingTop: 16,
display: 'flex',
flexDirection: 'row',
alignItems: 'flex-end',
justifyContent: 'center',
},
headerText: {
fontSize: 16,
paddingRight: 4,
},
camera: {
position: 'absolute',
bottom: 0,
left: 0,
padding: 8,
backgroundColor: Colors.lightgrey,
borderBottomLeftRadius: 8,
borderTopRightRadius: 8,
},
gallery: {
position: 'absolute',
bottom: 0,
right: 0,
padding: 8,
backgroundColor: Colors.lightgrey,
borderBottomRightRadius: 8,
borderTopLeftRadius: 8,
},
detail: {
paddingTop: 32,
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
color: Colors.text,
},
attribute: {
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
paddingBottom: 8,
},
nametext: {
fontSize: 18,
paddingRight: 8,
fontWeight: 'bold',
},
locationtext: {
fontSize: 16,
paddingLeft: 8,
},
descriptiontext: {
fontSize: 16,
paddingLeft: 8
},
})

61
app/mobile/src/session/contact/useContact.hook.js Normal file
View File

@ -0,0 +1,61 @@
import { useState, useEffect, useRef, useContext } from 'react';
import { useNavigate } from 'react-router-dom';
import { CardContext } from 'context/CardContext';
export function useContact(contact) {
const [state, setState] = useState({
name: null,
handle: null,
node: null,
location: null,
description: null,
logo: null,
status: null,
});
const card = useContext(CardContext);
const updateState = (value) => {
setState((s) => ({ ...s, ...value }));
}
useEffect(() => {
let stateSet = false;
if (contact?.card) {
const selected = card.state.cards.get(contact.card);
if (selected) {
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 });
stateSet = true;
}
}
if (!stateSet && contact?.account) {
const { handle, name, node, logo, guid } = contact.account;
const selected = card.actions.getByGuid(guid);
if (selected) {
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 });
stateSet = true;
}
else {
const { name, handle, node, location, description, logo } = contact.account;
updateState({ name, handle, node, location, description, logo, status: null });
stateSet = true;
}
}
if (!stateSet) {
setState({});
}
}, [contact, card]);
const actions = {
};
return { state, actions };
}

2
app/mobile/src/session/profile/Profile.jsx
View File

@ -79,7 +79,7 @@ export function Profile() {
return (
<ScrollView>
<SafeAreaView style={styles.container} edges={['right']}>
<SafeAreaView style={styles.container} edges={['top', 'bottom', 'right']}>
<TouchableOpacity style={styles.header} onPress={actions.showLoginEdit}>
<Text style={styles.headerText}>{ `${state.handle}@${state.node}` }</Text>
</TouchableOpacity>

2
app/mobile/src/session/registry/registryItem/RegistryItem.jsx
View File

@ -18,7 +18,7 @@ export function RegistryItem({ item, openContact }) {
<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>
<Text style={styles.handle} numberOfLines={1} ellipsizeMode={'tail'}>{ `${item.handle}@${item.node}` }</Text>
</View>
</TouchableOpacity>
)}

9
app/mobile/src/session/registry/useRegistry.hook.js
View File

@ -38,12 +38,9 @@ export function useRegistry() {
}, [profile]);
const setAccountItem = (item) => {
return {
guid: item.guid,
name: item.name,
handle: `${item.handle}@${item.node}`,
logo: item.imageSet ? getListingImageUrl(item.node, item.guid) : 'avatar',
}
const { guid, name, handle, node, location, description } = item;
const logo = item.imageSet ? getListingImageUrl(node, guid) : 'avatar';
return { guid, name, handle, node, location, description, guid, logo };
};
const getAccounts = async (server, ignore) => {

4
app/mobile/src/session/welcome/Welcome.jsx
View File

@ -7,10 +7,6 @@ import session from 'images/session.png';
export function Welcome() {
useEffect(() => {
console.log("WELCOME");
}, []);
return (
<SafeAreaView style={styles.container}>
<Text style={styles.header}>Welcome to Databag</Text>