rendring contact screen

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 }

app/mobile/src/session/Session.jsx

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

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: {

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 (

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 = () => {
+  const { state, actions } = useContact(contact);
-    closeContact();
-  }
 
-  return <TouchableOpacity onPress={onPressCard}><Text>CLOSE</Text></TouchableOpacity>
+  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>
+  )
 }
 

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
+  },
+})
+

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 };
+}
+

app/mobile/src/session/profile/Profile.jsx

@@ -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>

app/mobile/src/session/registry/registryItem/RegistryItem.jsx

@@ -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>
       )}

app/mobile/src/session/registry/useRegistry.hook.js

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

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 (
     <SafeAreaView style={styles.container}>
       <Text style={styles.header}>Welcome to Databag</Text>