support removing channel

app/mobile/src/context/useCardContext.hook.js

@@ -494,7 +494,7 @@ export function useCardContext() {
     },
     removeChannel: async (cardId, channelId) => {
       const { detail, profile } = getCard(cardId);
-      return await removeChannel(profile.node, `${profile.guid}.${detail.token}`, channelId);
+      return await removeContactChannel(profile.node, `${profile.guid}.${detail.token}`, channelId);
     },
     removeChannelTopic: async (cardId, channelId, topicId) => {
       const { detail, profile } = getCard(cardId);

app/mobile/src/context/useChannelContext.hook.js

@@ -94,7 +94,6 @@ export function useChannelContext() {
         const { server, appToken, guid } = session.current;
 
         const delta = await getChannels(server, appToken, setRevision.current);
-console.log("DELTA", delta);
         for (let channel of delta) {
           if (channel.data) {
             if (channel.data.channelDetail && channel.data.channelSummary) {

app/mobile/src/context/useConversationContext.hook.js

@@ -351,6 +351,12 @@ export function useConversationContext() {
         await channel.actions.setSubject(channelId, subject);
       }
     },
+    remove: async () => {
+      if (conversationId.current) {
+        const { cardId, channelId } = conversationId.current;
+        await remove(cardId, channelId);
+      }
+    },
   }
 
   return { state, actions }

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

@@ -28,13 +28,27 @@ export function DetailsBody({ channel, clearConversation }) {
     }
   }
 
+  const remove = async () => {
+    try {
+      await actions.remove(); 
+      clearConversation();
+    }
+    catch (err) {
+      console.log(err);
+      Alert.alert(
+        'Failed to Delete Topic',
+        'Please try again.'
+      )
+    }
+  }
+
   return (
     <View style={styles.body}>
       <View style={styles.details}>
         <Logo src={state.logo} width={72} height={72} radius={8} />
         <View style={styles.info}>
           <TouchableOpacity style={styles.subject} onPress={actions.showEditSubject}>
-            <Text style={styles.subject}>{ state.subject }</Text>
+            <Text style={styles.subjectText} numberOfLines={1} ellipsizeMode={'tail'}>{ state.subject }</Text>
             { !state.hostId && (
               <Ionicons name="edit" size={16} color={Colors.text} />
             )}
@@ -46,7 +60,7 @@ export function DetailsBody({ channel, clearConversation }) {
 
       <View style={styles.controls}>
         { !state.hostId && (
-          <TouchableOpacity style={styles.button}>
+          <TouchableOpacity style={styles.button} onPress={remove}>
             <Text style={styles.buttonText}>Delete Topic</Text>
           </TouchableOpacity>
         )}
@@ -56,7 +70,7 @@ export function DetailsBody({ channel, clearConversation }) {
           </TouchableOpacity>
         )}
         { state.hostId && (
-          <TouchableOpacity style={styles.button}>
+          <TouchableOpacity style={styles.button} onPress={remove}>
             <Text style={styles.buttonText}>Leave Topic</Text>
           </TouchableOpacity>
         )}
@@ -108,7 +122,6 @@ export function DetailsBody({ channel, clearConversation }) {
 export function Details({ channel, clearConversation }) {
   return (
     <View>
-      <Text>DETAILS</Text>
       <DetailsBody channel={channel} clearConversation={clearConversation} />
     </View>
   )

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

@@ -2,16 +2,25 @@ import { StyleSheet } from 'react-native';
 import { Colors } from 'constants/Colors';
 
 export const styles = StyleSheet.create({
+  body: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+  },
   details: {
     display: 'flex',
     flexDirection: 'row',
     justifyContent: 'center',
     paddingTop: 16,
+    flexShrink: 1,
+    minWidth: 0,
   },
   info: {
     paddingLeft: 8,
     display: 'flex',
     flexDirection: 'column',
+    minWidth: 0,
+    flexShrink: 1,
   },
   subject: {
     fontSize: 18,
@@ -20,6 +29,13 @@ export const styles = StyleSheet.create({
     paddingRight: 8,
     color: Colors.text,
     alignItems: 'center',
+    minWidth: 0,
+    flexShrink: 1,
+  },
+  subjectText: {
+    fontSize: 18,
+    flexShrink: 1,
+    minWidth: 0,
   },
   created: {
     fontSize: 16,
@@ -32,11 +48,6 @@ export const styles = StyleSheet.create({
   title: {
     fontSize: 20,
   },
-  body: {
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-  },
   controls: {
     paddingTop: 16,
   },

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

@@ -40,6 +40,9 @@ export function useDetails() {
     saveSubject: async () => {
       await conversation.actions.setSubject(state.subjectUpdate);
     },
+    remove: async () => {
+      await conversation.actions.remove();
+    },
   };
 
   return { state, actions };