support topic message update

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

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

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

@@ -60,7 +60,7 @@ export function ConversationBody() {
          inverted={true}
          renderItem={({item}) => <TopicItem item={item} focused={item.topicId === state.focus} 
            focus={() => actions.setFocus(item.topicId)} hosting={state.host == null} 
-           remove={actions.removeTopic} />}
+           remove={actions.removeTopic} update={actions.updateTopic} />}
         keyExtractor={item => item.topicId}
       />
       <View>

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

@@ -1,4 +1,4 @@
-import { FlatList, View, Text, Modal, Image, Alert } from 'react-native';
+import { KeyboardAvoidingView, FlatList, View, Text, TextInput, Modal, Image, Alert } from 'react-native';
 import { TouchableOpacity } from 'react-native-gesture-handler';
 import { useTopicItem } from './useTopicItem.hook';
 import { styles } from './TopicItem.styled';
@@ -16,7 +16,7 @@ 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, remove }) {
+export function TopicItem({ item, focused, focus, hosting, remove, update }) {
 
   const { state, actions } = useTopicItem(item, hosting);
 
@@ -46,6 +46,20 @@ export function TopicItem({ item, focused, focus, hosting, remove }) {
     );
   }
 
+  const editMessage = async () => {
+    try {
+      await update(item.topicId, { ...state.editData, text: state.editMessage });
+      actions.hideEdit();
+    }
+    catch (err) {
+      console.log(err);
+      Alert.alert(
+        'Failed to Update Message',
+        'Please try again.',
+      )
+    }
+  }
+
   const block = () => {
     Alert.alert(
       "Blocking Message",
@@ -173,11 +187,23 @@ export function TopicItem({ item, focused, focus, hosting, remove }) {
           supportedOrientations={['portrait', 'landscape']}
           onRequestClose={actions.hideEdit}
         >
-          <View style={styles.modal}>
-            <TouchableOpacity style={{ backgroundColor: 'white' }} onPress={actions.hideEdit}>
-              <Text>DONE</Text>
-            </TouchableOpacity>
-          </View>
+          <KeyboardAvoidingView behavior="height" style={styles.modal}>
+            <View style={styles.editContainer}>
+              <Text style={styles.editHeader}>Edit Message Text:</Text>
+              <View style={styles.inputField}>
+                <TextInput style={styles.input} value={state.editMessage} onChangeText={actions.setEditMessage}
+                    autoCapitalize="sentences" placeholder="Message Text" multiline={true} />
+              </View>
+              <View style={styles.editControls}>
+                <TouchableOpacity style={styles.cancel} onPress={actions.hideEdit}>
+                  <Text>Cancel</Text>
+                </TouchableOpacity>
+                <TouchableOpacity style={styles.save} onPress={editMessage}>
+                  <Text style={styles.saveText}>Save</Text>
+                </TouchableOpacity>
+              </View>
+            </View>
+          </KeyboardAvoidingView>
         </Modal> 
       </TouchableOpacity>
       { focused && (
@@ -195,7 +221,6 @@ export function TopicItem({ item, focused, focus, hosting, remove }) {
               <MatIcons name="delete-outline" size={24} color={Colors.white} />
             </TouchableOpacity>
           )}
-
         </View>
       )}
     </View>

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

@@ -70,5 +70,74 @@ export const styles = StyleSheet.create({
     paddingLeft: 52,
     color: Colors.fontColor,
   },
+  save: {
+    padding: 8,
+    borderRadius: 4,
+    backgroundColor: Colors.primary,
+    width: 72,
+    display: 'flex',
+    alignItems: 'center',
+  },
+  saveText: {
+    color: Colors.white,
+  },
+  cancel: {
+    borderWidth: 1,
+    borderColor: Colors.lightgrey,
+    borderRadius: 4,
+    padding: 8,
+    marginRight: 8,
+    width: 72,
+    display: 'flex',
+    alignItems: 'center',
+  },
+  inputField: {
+    width: '100%',
+    borderWidth: 1,
+    borderColor: Colors.lightgrey,
+    borderRadius: 4,
+    padding: 8,
+    marginBottom: 8,
+    maxHeight: 92,
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  input: {
+    fontSize: 14,
+    flexGrow: 1,
+  },
+  editControls: {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+  },
+  editWrapper: {
+    display: 'flex',
+    width: '100%',
+    height: '100%',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'rgba(52, 52, 52, 0.8)'
+  },
+  editContainer: {
+    backgroundColor: Colors.formBackground,
+    padding: 16,
+    width: '80%',
+    maxWidth: 400,
+  },
+  editHeader: {
+    fontSize: 18,
+    paddingBottom: 16,
+  },
+  editMembers: {
+    width: '100%',
+    borderWidth: 1,
+    borderColor: Colors.lightgrey,
+    borderRadius: 4,
+    marginBottom: 8,
+    height: 250,
+  },
 })
 

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

@@ -23,6 +23,8 @@ export function useTopicItem(item, hosting, remove) {
     editable: false,
     deletable: false,
     editing: false,
+    editMessage: null,
+    editData: null,
   });
 
   const profile = useContext(ProfileContext);
@@ -84,22 +86,22 @@ export function useTopicItem(item, hosting, remove) {
       }
     }
 
-    let message, assets, fontSize, fontColor;
+    let prased, message, assets, fontSize, fontColor;
     try {
-      const data = JSON.parse(item.detail.data);
-      message = data.text;
-      assets = data.assets;
-      if (data.textSize === 'small') {
+      parsed = JSON.parse(data);
+      message = parsed.text;
+      assets = parsed.assets;
+      if (parsed.textSize === 'small') {
         fontSize = 10;
       }
-      else if (data.textSize === 'large') {
+      else if (parsed.textSize === 'large') {
         fontSize = 20;
       }
       else {
         fontSize = 14;
       }
-      if (data.textColor) {
-        fontColor = data.textColor;
+      if (parsed.textColor) {
+        fontColor = parsed.textColor;
       }
       else {
         fontColor = Colors.text;
@@ -124,10 +126,10 @@ export function useTopicItem(item, hosting, remove) {
       timestamp = moment(date).format('M/DD/YYYY');
     }
 
-    const editable = detail.guid === identity.guid;
+    const editable = detail.guid === identity.guid && parsed;
     const deletable = editable || hosting;
 
-    updateState({ logo, name, known, message, fontSize, fontColor, timestamp, transform, status, assets, deletable, editable });
+    updateState({ logo, name, known, message, fontSize, fontColor, timestamp, transform, status, assets, deletable, editable, editData: parsed, editMessage: message });
   }, [card, item]);
 
   const actions = {
@@ -148,6 +150,9 @@ export function useTopicItem(item, hosting, remove) {
     hideEdit: () => {
       updateState({ editing: false });
     },
+    setEditMessage: (editMessage) => {
+      updateState({ editMessage });
+    },
   };
 
   return { state, actions };

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

@@ -55,6 +55,9 @@ export function useConversation() {
     removeTopic: async (topicId) => {
       await conversation.actions.removeTopic(topicId);
     },
+    updateTopic: async (topicId, data) => {
+      await conversation.actions.setTopicSubject(topicId, data);
+    },
   };
 
   return { state, actions };