added details members

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

@@ -1,9 +1,10 @@
-import { View, Text, TouchableOpacity } from 'react-native';
+import { FlatList, View, Text, TouchableOpacity } from 'react-native';
 import { styles } from './Details.styled';
 import { useDetails } from './useDetails.hook';
 import { Logo } from 'utils/Logo';
 import Ionicons from '@expo/vector-icons/AntDesign';
 import Colors from 'constants/Colors';
+import { MemberItem } from './memberItem/MemberItem';
 
 export function DetailsHeader() {
   return <Text style={styles.title}>Topic Settings</Text>
@@ -13,21 +14,56 @@ export function DetailsBody({ channel, clearConversation }) {
 
   const { state, actions } = useDetails();
 
-console.log(state);
+  if(state.contacts) {
+    state.contacts.forEach(c => {
+      console.log(c.cardId, c.profile);
+    });
+  }
 
   return (
-    <View style={styles.details}>
+    <View style={styles.body}>
-      <Logo src={state.logo} width={72} height={72} radius={8} />
+      <View style={styles.details}>
-      <View style={styles.info}>
+        <Logo src={state.logo} width={72} height={72} radius={8} />
-        <View style={styles.subject}>
+        <View style={styles.info}>
-          <Text style={styles.subject}>{ state.subject }</Text>
+          <TouchableOpacity style={styles.subject}>
-          { state.mode === 'host' && (
+            <Text style={styles.subject}>{ state.subject }</Text>
-            <Ionicons name="edit" size={16} color={Colors.text} />
+            { !state.hostId && (
-          )}
+              <Ionicons name="edit" size={16} color={Colors.text} />
-        </View>
+            )}
-        <Text style={styles.created}>{ state.created }</Text>
+          </TouchableOpacity>
-        <Text style={styles.mode}>{ state.mode }</Text>
+          <Text style={styles.created}>{ state.created }</Text>
-      </View>  
+          <Text style={styles.mode}>{ state.mode }</Text>
+        </View>  
+      </View>
+
+      <View style={styles.controls}>
+        { !state.hostId && (
+          <TouchableOpacity style={styles.button}>
+            <Text style={styles.buttonText}>Delete Topic</Text>
+          </TouchableOpacity>
+        )}
+        { !state.hostId && (
+          <TouchableOpacity style={styles.button}>
+            <Text style={styles.buttonText}>Edit Membership</Text>
+          </TouchableOpacity>
+        )}
+        { state.hostId && (
+          <TouchableOpacity style={styles.button}>
+            <Text style={styles.buttonText}>Leave Topic</Text>
+          </TouchableOpacity>
+        )}
+      </View>
+
+      <View style={styles.members}>
+        <Text style={styles.membersLabel}>Members:</Text>
+      </View>
+
+      <FlatList style={styles.cards}
+        data={state.contacts}
+        renderItem={({ item }) => <MemberItem item={item} />}
+        keyExtractor={item => item.cardId}
+      />
+
     </View>
   )
 }

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

@@ -19,6 +19,7 @@ export const styles = StyleSheet.create({
     flexDirection: 'row',
     paddingRight: 8,
     color: Colors.text,
+    alignItems: 'center',
   },
   created: {
     fontSize: 16,
@@ -30,6 +31,39 @@ export const styles = StyleSheet.create({
   },
   title: {
     fontSize: 20,
-  }
+  },
+  body: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+  },
+  controls: {
+    paddingTop: 16,
+  },
+  button: {
+    width: 128,
+    backgroundColor: Colors.primary,
+    borderRadius: 4,
+    margin: 8,
+  },
+  buttonText: {
+    width: '100%',
+    textAlign: 'center',
+    color: Colors.white,
+    padding: 4,
+  },
+  members: {
+    paddingTop: 16,
+    width: '100%',
+    borderBottomWidth: 1,
+    borderColor: Colors.divider,
+  },
+  membersLabel: {
+    paddingLeft: 16,
+    width: '100%',
+  },
+  cards: {
+    width: '100%',
+  },
 })
 

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

@@ -0,0 +1,21 @@
+import { Text, TouchableOpacity, View } from 'react-native';
+import { Logo } from 'utils/Logo';
+import { styles } from './MemberItem.styled';
+
+export function MemberItem({ item, openContact }) {
+  
+  const select = () => {
+    openContact({ card: item.cardId });
+  };
+
+  return (
+    <View style={styles.container}>
+      <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>
+      </View>
+    </View>
+  );
+}
+

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

@@ -0,0 +1,64 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from 'constants/Colors';
+
+export const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+    display: 'flex',
+    flexDirection: 'row',
+    height: 48,
+    alignItems: 'center',
+    borderBottomWidth: 1,
+    borderColor: Colors.itemDivider,
+  },
+  detail: {
+    paddingLeft: 12,
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    flexGrow: 1,
+    flexShrink: 1,
+  },
+  space: {
+    height: 64,
+  },
+  name: {
+    color: Colors.text,
+    fontSize: 14,
+  },
+  handle: {
+    color: Colors.text,
+    fontSize: 12,
+  },
+  connected: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+    backgroundColor: Colors.connected,
+  },
+  requested: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+    backgroundColor: Colors.requested,
+  },
+  connecting: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+    backgroundColor: Colors.connecting,
+  },
+  pending: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+    backgroundColor: Colors.pending,
+  },
+  confirmed: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+    backgroundColor: Colors.confirmed,
+  },
+})
+

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

@@ -8,7 +8,8 @@ export function useDetails() {
     subject: null,
     created: null,
     logo: null,
-    mode: null,
+    hostId: null,
+    contacts: null,
   });
 
   const conversation = useContext(ConversationContext);
@@ -19,8 +20,8 @@ export function useDetails() {
   }
 
   useEffect(() => {
-    const { subject, created, logo, host } = conversation.state;
+    const { subject, created, logo, host, contacts } = conversation.state;
-    updateState({ subject, created, logo, mode: host ? 'guest' : 'host' });
+    updateState({ subject, created, logo, hostId: host, contacts: contacts.filter(card => card != null) });
   }, [conversation]);
 
   const actions = {