rendering member list

app/mobile/src/session/details/Details.jsx

@@ -14,12 +14,6 @@ export function DetailsBody({ channel, clearConversation }) {
 
   const { state, actions } = useDetails();
 
-  if(state.contacts) {
-    state.contacts.forEach(c => {
-      console.log(c.cardId, c.profile);
-    });
-  }
-
   return (
     <View style={styles.body}>
       <View style={styles.details}>
@@ -32,7 +26,7 @@ export function DetailsBody({ channel, clearConversation }) {
             )}
           </TouchableOpacity>
           <Text style={styles.created}>{ state.created }</Text>
-          <Text style={styles.mode}>{ state.mode }</Text>
+          <Text style={styles.mode}>{ state.hostId ? 'guest' : 'host' }</Text>
         </View>  
       </View>
 
@@ -56,11 +50,14 @@ export function DetailsBody({ channel, clearConversation }) {
 
       <View style={styles.members}>
         <Text style={styles.membersLabel}>Members:</Text>
+        { state.count - state.contacts.length > 0 && (
+          <Text style={styles.unknown}> (+ {state.count - state.contacts.length} unknown)</Text>
+        )}
       </View>
 
       <FlatList style={styles.cards}
         data={state.contacts}
-        renderItem={({ item }) => <MemberItem item={item} />}
+        renderItem={({ item }) => <MemberItem hostId={state.hostId} item={item} />}
         keyExtractor={item => item.cardId}
       />
 

app/mobile/src/session/details/Details.styled.js

@@ -53,14 +53,20 @@ export const styles = StyleSheet.create({
     padding: 4,
   },
   members: {
-    paddingTop: 16,
+    paddingBottom: 4,
+    paddingTop: 24,
     width: '100%',
     borderBottomWidth: 1,
     borderColor: Colors.divider,
+    display: 'flex',
+    flexDirection: 'row',
   },
   membersLabel: {
     paddingLeft: 16,
-    width: '100%',
+  },
+  unknown: {
+    color: Colors.grey,
+    paddingLeft: 8,
   },
   cards: {
     width: '100%',

app/mobile/src/session/details/memberItem/MemberItem.jsx

@@ -1,20 +1,24 @@
 import { Text, TouchableOpacity, View } from 'react-native';
 import { Logo } from 'utils/Logo';
 import { styles } from './MemberItem.styled';
+import { useMemberItem } from './useMemberItem.hook';
+import Ionicons from '@expo/vector-icons/MaterialCommunityIcons';
+import Colors from 'constants/Colors';
 
-export function MemberItem({ item, openContact }) {
-  
-  const select = () => {
-    openContact({ card: item.cardId });
-  };
+export function MemberItem({ hostId, item }) {
+
+  const { state, actions } = useMemberItem(item);
 
   return (
     <View style={styles.container}>
-      <Logo src={item.logo} width={32} height={32} radius={6} />
+      <Logo src={state.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.name} numberOfLines={1} ellipsizeMode={'tail'}>{ state.name }</Text>
+        <Text style={styles.handle} numberOfLines={1} ellipsizeMode={'tail'}>{ state.handle }</Text>
       </View>
+      { hostId === state.cardId && (
+        <Ionicons name="server" size={16} color={Colors.grey} />
+      )}
     </View>
   );
 }

app/mobile/src/session/details/memberItem/MemberItem.styled.js

@@ -10,6 +10,8 @@ export const styles = StyleSheet.create({
     alignItems: 'center',
     borderBottomWidth: 1,
     borderColor: Colors.itemDivider,
+    paddingLeft: 16,
+    paddingRight: 16,
   },
   detail: {
     paddingLeft: 12,

app/mobile/src/session/details/memberItem/useMemberItem.hook.js

@@ -0,0 +1,32 @@
+import { useState, useEffect, useRef, useContext } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { CardContext } from 'context/CardContext';
+
+export function useMemberItem(item) {
+
+  const [state, setState] = useState({
+    name: null,
+    handle: null,
+    logo: null,
+    cardId: null,
+  });
+
+  const card = useContext(CardContext);
+
+  const updateState = (value) => {
+    setState((s) => ({ ...s, ...value }));
+  }
+
+  useEffect(() => {
+    const { cardId, revision, profile } = item;
+    const { name, handle, node } = profile;
+    updateState({ cardId, name, handle: `${handle}@${node}`,
+      logo: profile.imageSet ? card.actions.getCardLogo(cardId, revision) : 'avatar' });
+  }, [card]);
+
+  const actions = {
+  };
+
+  return { state, actions };
+}
+

app/mobile/src/session/details/useDetails.hook.js

@@ -9,7 +9,7 @@ export function useDetails() {
     created: null,
     logo: null,
     hostId: null,
-    contacts: null,
+    contacts: [],
   });
 
   const conversation = useContext(ConversationContext);
@@ -21,7 +21,8 @@ export function useDetails() {
 
   useEffect(() => {
     const { subject, created, logo, host, contacts } = conversation.state;
-    updateState({ subject, created, logo, hostId: host, contacts: contacts.filter(card => card != null) });
+    updateState({ subject, created, logo, hostId: host,
+      count: contacts.length, contacts: contacts.filter(card => card != null) });
   }, [conversation]);
 
   const actions = {