supporting message delete

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

@@ -357,6 +357,19 @@ export function useConversationContext() {
         await remove(cardId, channelId);
       }
     },
+    removeTopic: async (topicId) => {
+      if (conversationId.current) {
+        const { cardId, channelId } = conversationId.current;
+        if (cardId) {
+          await card.actions.removeChannelTopic(cardId, channelId, topicId);
+        }
+        else {
+          await channel.actions.removeTopic(channelId, topicId);
+        }
+        force.current = true;
+        sync();
+      }
+    },
     setCard: async (id) => {
       if (conversationId.current) {
         const { cardId, channelId } = conversationId.current;

app/mobile/src/session/conversation/Conversation.jsx

@@ -59,7 +59,8 @@ export function ConversationBody() {
          maintainVisibleContentPosition={ state.latched ? null : { minIndexForVisibile: 2, } }
          inverted={true}
          renderItem={({item}) => <TopicItem item={item} focused={item.topicId === state.focus} 
-           focus={() => actions.setFocus(item.topicId)} hosting={state.host == null} />}
+           focus={() => actions.setFocus(item.topicId)} hosting={state.host == null} 
+           remove={actions.removeTopic} />}
         keyExtractor={item => item.topicId}
       />
       <View>

app/mobile/src/session/conversation/Conversation.styled.js

@@ -50,7 +50,6 @@ export const styles = StyleSheet.create({
   },
   topics: {
     paddingBottom: 32,
-    paddingTop: 8,
   },
   conversation: {
     flexShrink: 1,

app/mobile/src/session/conversation/addTopic/AddTopic.styled.js

@@ -7,6 +7,7 @@ export const styles = StyleSheet.create({
     borderColor: Colors.divider,
     display: 'flex',
     flexDirection: 'column',
+    marginTop: 8,
   },
   addButtons: {
     display: 'flex',

app/mobile/src/session/conversation/topicItem/TopicItem.jsx

@@ -1,4 +1,4 @@
-import { FlatList, View, Text, Modal, Image } from 'react-native';
+import { FlatList, View, Text, Modal, Image, Alert } from 'react-native';
 import { TouchableOpacity } from 'react-native-gesture-handler';
 import { useTopicItem } from './useTopicItem.hook';
 import { styles } from './TopicItem.styled';
@@ -16,10 +16,63 @@ import Carousel from 'react-native-snap-carousel';
 import GestureRecognizer from 'react-native-swipe-gestures';
 import avatar from 'images/avatar.png';
 
-export function TopicItem({ item, focused, focus, hosting }) {
+export function TopicItem({ item, focused, focus, hosting, remove }) {
 
   const { state, actions } = useTopicItem(item, hosting);
 
+  const erase = () => {
+    Alert.alert(
+      "Removing Message",
+      "Confirm?",
+      [
+        { text: "Cancel",
+          onPress: () => {},
+        },
+        { text: "Remove",
+          onPress: async () => {
+            try {
+              await remove(item.topicId);
+            }
+            catch (err) {
+              console.log(err);
+              Alert.alert(
+                'Failed to Remove Message',
+                'Please try again.'
+              )
+            }
+          },
+        }
+      ]
+    );
+  }
+
+  const block = () => {
+    Alert.alert(
+      "Blocking Message",
+      "Confirm?",
+      [
+        { text: "Cancel",
+          onPress: () => {},
+        },
+        { text: "Block",
+          onPress: async () => {
+            try {
+              await actions.block();
+            }
+            catch (err) {
+              console.log(err);
+              Alert.alert(
+                'Failed to Block Message',
+                'Please try again.'
+              )
+            }
+          },
+        }
+      ]
+    );
+  }
+
+
   const renderAsset = (asset) => {
     return (
       <View style={styles.frame}>
@@ -113,22 +166,36 @@ export function TopicItem({ item, focused, focus, hosting }) {
             />
           </View>
         </Modal> 
+        <Modal
+          animationType="fade"
+          transparent={true}
+          visible={state.editing}
+          supportedOrientations={['portrait', 'landscape']}
+          onRequestClose={actions.hideEdit}
+        >
+          <View style={styles.modal}>
+            <TouchableOpacity style={{ backgroundColor: 'white' }} onPress={actions.hideEdit}>
+              <Text>DONE</Text>
+            </TouchableOpacity>
+          </View>
+        </Modal> 
       </TouchableOpacity>
       { focused && (
         <View style={styles.focused}>
-          { state.deletable && (
-            <TouchableOpacity style={styles.icon}>
-              <MatIcons name="delete-outline" size={20} color={Colors.white} />
-            </TouchableOpacity>
-          )}
           { state.editable && (
-            <TouchableOpacity style={styles.icon}>
-              <MatIcons name="pencil-outline" size={20} color={Colors.white} />
+            <TouchableOpacity style={styles.icon} onPress={actions.showEdit}>
+              <AntIcons name="edit" size={24} color={Colors.white} />
             </TouchableOpacity>
           )}
-          <TouchableOpacity style={styles.icon}>
+          <TouchableOpacity style={styles.icon} onPress={block}>
             <MatIcons name="block-helper" size={18} color={Colors.white} />
           </TouchableOpacity>
+          { state.deletable && (
+            <TouchableOpacity style={styles.icon} onPress={erase}>
+              <MatIcons name="delete-outline" size={24} color={Colors.white} />
+            </TouchableOpacity>
+          )}
+
         </View>
       )}
     </View>

app/mobile/src/session/conversation/topicItem/TopicItem.styled.js

@@ -33,6 +33,9 @@ export const styles = StyleSheet.create({
     width: '100%',
     height: '100%',
     backgroundColor: 'rgba(0, 0, 0, 0.9)',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
   },
   frame: {
     display: 'flex',
@@ -56,6 +59,7 @@ export const styles = StyleSheet.create({
     borderRadius: 4,
     paddingLeft: 8,
     paddingRight: 8,
+    alignItems: 'center',
   },
   icon: {
     paddingLeft: 8,

app/mobile/src/session/conversation/topicItem/useTopicItem.hook.js

@@ -5,7 +5,7 @@ import moment from 'moment';
 import { useWindowDimensions } from 'react-native';
 import Colors from 'constants/Colors';
 
-export function useTopicItem(item, hosting) {
+export function useTopicItem(item, hosting, remove) {
 
   const [state, setState] = useState({
     name: null,
@@ -22,6 +22,7 @@ export function useTopicItem(item, hosting) {
     fontColor: Colors.text,
     editable: false,
     deletable: false,
+    editing: false,
   });
 
   const profile = useContext(ProfileContext);
@@ -139,6 +140,14 @@ export function useTopicItem(item, hosting) {
     setActive: (activeId) => {
       updateState({ activeId });
     },
+    block: async () => {
+    },
+    showEdit: () => {
+      updateState({ editing: true });
+    },
+    hideEdit: () => {
+      updateState({ editing: false });
+    },
   };
 
   return { state, actions };

app/mobile/src/session/conversation/useConversation.hook.js

@@ -52,6 +52,9 @@ export function useConversation() {
     setFocus: (focus) => {
       updateState({ focus });
     },
+    removeTopic: async (topicId) => {
+      await conversation.actions.removeTopic(topicId);
+    },
   };
 
   return { state, actions };