From 7f0f9240e1c0207713a51f8a7fc97b2339ca138d Mon Sep 17 00:00:00 2001 From: balzack Date: Sat, 24 Sep 2022 22:56:41 -0700 Subject: [PATCH] rendring contact screen --- app/mobile/src/context/useCardContext.hook.js | 11 ++- app/mobile/src/session/Session.jsx | 8 +-- app/mobile/src/session/Session.styled.js | 3 + .../src/session/cards/cardItem/CardItem.jsx | 2 +- app/mobile/src/session/contact/Contact.jsx | 40 +++++++++-- .../src/session/contact/Contact.styled.js | 71 +++++++++++++++++++ .../src/session/contact/useContact.hook.js | 61 ++++++++++++++++ app/mobile/src/session/profile/Profile.jsx | 2 +- .../registry/registryItem/RegistryItem.jsx | 2 +- .../src/session/registry/useRegistry.hook.js | 9 +-- app/mobile/src/session/welcome/Welcome.jsx | 4 -- 11 files changed, 189 insertions(+), 24 deletions(-) create mode 100644 app/mobile/src/session/contact/Contact.styled.js create mode 100644 app/mobile/src/session/contact/useContact.hook.js diff --git a/app/mobile/src/context/useCardContext.hook.js b/app/mobile/src/context/useCardContext.hook.js index 50353387..371b88a2 100644 --- a/app/mobile/src/context/useCardContext.hook.js +++ b/app/mobile/src/context/useCardContext.hook.js @@ -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 } diff --git a/app/mobile/src/session/Session.jsx b/app/mobile/src/session/Session.jsx index 84d7c39f..75d415c3 100644 --- a/app/mobile/src/session/Session.jsx +++ b/app/mobile/src/session/Session.jsx @@ -136,15 +136,15 @@ export function Session() { ) } - const ContactDrawerContent = ({ navigation }) => { + const ContactDrawerContent = ({ contact, navigation }) => { const clearContact = () => { navigation.closeDrawer(); } return ( - - - + + + ) } diff --git a/app/mobile/src/session/Session.styled.js b/app/mobile/src/session/Session.styled.js index 81455f76..ff2ad781 100644 --- a/app/mobile/src/session/Session.styled.js +++ b/app/mobile/src/session/Session.styled.js @@ -26,6 +26,9 @@ export const styles = StyleSheet.create({ flexGrow: 1, }, drawer: { + width: '100%', + height: '100%', + paddingLeft: 8, backgroundColor: Colors.formBackground, }, options: { diff --git a/app/mobile/src/session/cards/cardItem/CardItem.jsx b/app/mobile/src/session/cards/cardItem/CardItem.jsx index a2f34607..62518e89 100644 --- a/app/mobile/src/session/cards/cardItem/CardItem.jsx +++ b/app/mobile/src/session/cards/cardItem/CardItem.jsx @@ -8,7 +8,7 @@ export function CardItem({ item, openContact }) { const { state, actions } = useCardItem(item); const select = () => { - openContact({ card: item }); + openContact({ card: item.cardId }); }; return ( diff --git a/app/mobile/src/session/contact/Contact.jsx b/app/mobile/src/session/contact/Contact.jsx index 0ebe441f..cf15c99e 100644 --- a/app/mobile/src/session/contact/Contact.jsx +++ b/app/mobile/src/session/contact/Contact.jsx @@ -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(); - } + const { state, actions } = useContact(contact); - return CLOSE + return ( + + + + { `${state.handle}@${state.node}` } + + + + + + + { state.name } + + + + { state.location } + + + + { state.description } + + + + + ) } diff --git a/app/mobile/src/session/contact/Contact.styled.js b/app/mobile/src/session/contact/Contact.styled.js new file mode 100644 index 00000000..7fd03f14 --- /dev/null +++ b/app/mobile/src/session/contact/Contact.styled.js @@ -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 + }, +}) + diff --git a/app/mobile/src/session/contact/useContact.hook.js b/app/mobile/src/session/contact/useContact.hook.js new file mode 100644 index 00000000..6e1584c3 --- /dev/null +++ b/app/mobile/src/session/contact/useContact.hook.js @@ -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 }; +} + diff --git a/app/mobile/src/session/profile/Profile.jsx b/app/mobile/src/session/profile/Profile.jsx index d9a969d0..2aae0cd4 100644 --- a/app/mobile/src/session/profile/Profile.jsx +++ b/app/mobile/src/session/profile/Profile.jsx @@ -79,7 +79,7 @@ export function Profile() { return ( - + { `${state.handle}@${state.node}` } diff --git a/app/mobile/src/session/registry/registryItem/RegistryItem.jsx b/app/mobile/src/session/registry/registryItem/RegistryItem.jsx index e8285c34..5a0d88d0 100644 --- a/app/mobile/src/session/registry/registryItem/RegistryItem.jsx +++ b/app/mobile/src/session/registry/registryItem/RegistryItem.jsx @@ -18,7 +18,7 @@ export function RegistryItem({ item, openContact }) { { item.name } - { item.handle } + { `${item.handle}@${item.node}` } )} diff --git a/app/mobile/src/session/registry/useRegistry.hook.js b/app/mobile/src/session/registry/useRegistry.hook.js index f4bf430e..09fc0664 100644 --- a/app/mobile/src/session/registry/useRegistry.hook.js +++ b/app/mobile/src/session/registry/useRegistry.hook.js @@ -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) => { diff --git a/app/mobile/src/session/welcome/Welcome.jsx b/app/mobile/src/session/welcome/Welcome.jsx index ab0c4fc4..df597242 100644 --- a/app/mobile/src/session/welcome/Welcome.jsx +++ b/app/mobile/src/session/welcome/Welcome.jsx @@ -7,10 +7,6 @@ import session from 'images/session.png'; export function Welcome() { - useEffect(() => { - console.log("WELCOME"); - }, []); - return ( Welcome to Databag