diff --git a/app/mobile/src/session/details/Details.jsx b/app/mobile/src/session/details/Details.jsx
index 2b44ff1a..ef4755a9 100644
--- a/app/mobile/src/session/details/Details.jsx
+++ b/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 (
@@ -32,7 +26,7 @@ export function DetailsBody({ channel, clearConversation }) {
)}
{ state.created }
- { state.mode }
+ { state.hostId ? 'guest' : 'host' }
@@ -56,11 +50,14 @@ export function DetailsBody({ channel, clearConversation }) {
Members:
+ { state.count - state.contacts.length > 0 && (
+ (+ {state.count - state.contacts.length} unknown)
+ )}
}
+ renderItem={({ item }) => }
keyExtractor={item => item.cardId}
/>
diff --git a/app/mobile/src/session/details/Details.styled.js b/app/mobile/src/session/details/Details.styled.js
index a10b74d7..cd29fa2c 100644
--- a/app/mobile/src/session/details/Details.styled.js
+++ b/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%',
diff --git a/app/mobile/src/session/details/memberItem/MemberItem.jsx b/app/mobile/src/session/details/memberItem/MemberItem.jsx
index fdcb193a..87e49cb8 100644
--- a/app/mobile/src/session/details/memberItem/MemberItem.jsx
+++ b/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 (
-
+
- { item.name }
- { item.handle }
+ { state.name }
+ { state.handle }
+ { hostId === state.cardId && (
+
+ )}
);
}
diff --git a/app/mobile/src/session/details/memberItem/MemberItem.styled.js b/app/mobile/src/session/details/memberItem/MemberItem.styled.js
index 337cef53..38306c69 100644
--- a/app/mobile/src/session/details/memberItem/MemberItem.styled.js
+++ b/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,
diff --git a/app/mobile/src/session/details/memberItem/useMemberItem.hook.js b/app/mobile/src/session/details/memberItem/useMemberItem.hook.js
new file mode 100644
index 00000000..6579e3b6
--- /dev/null
+++ b/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 };
+}
+
diff --git a/app/mobile/src/session/details/useDetails.hook.js b/app/mobile/src/session/details/useDetails.hook.js
index 795ff028..c244fbb5 100644
--- a/app/mobile/src/session/details/useDetails.hook.js
+++ b/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 = {