testing edit message in a new location

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

@@ -1,4 +1,4 @@
-import { KeyboardAvoidingView, Platform, TextInput, View, TouchableOpacity, Text, } from 'react-native';
+import { KeyboardAvoidingView, Modal, Platform, TextInput, View, TouchableOpacity, Text, } from 'react-native';
 import { FlatList, ScrollView } from '@stream-io/flat-list-mvcp';
 import { memo, useState, useRef, useEffect } from 'react';
 import { useConversation } from './useConversation.hook';
@@ -13,6 +13,8 @@ import { TopicItem } from './topicItem/TopicItem';
 export function ConversationHeader({ closeConversation, openDetails }) {
   const navigation = useNavigation();
   const { state, actions } = useConversation();
+console.log(state.editing);
+
 
   const setDetails = () => {
     openDetails(navigation);
@@ -48,32 +50,58 @@ export function ConversationBody() {
   const noop = () => {};
 
   return (
-    <KeyboardAvoidingView style={styles.thread} behavior="padding" keyboardVerticalOffset="100"
-        enabled={Platform.OS === 'ios' ? true : false}>
-      <FlatList style={styles.conversation}
-         contentContainerStyle={styles.topics}
-         ref={ref}
-         data={state.topics}
-         onMomentumScrollEnd={ Platform.OS === 'ios' ? noop : actions.unlatch }
-         onScrollBeginDrag={ Platform.OS !== 'ios' ? noop : actions.unlatch }
-         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} 
-           remove={actions.removeTopic} update={actions.updateTopic} block={actions.blockTopic} />}
-        keyExtractor={item => item.topicId}
-      />
-      <View>
-        <AddTopic />
-        <View style={styles.latchbar}>
-          { !state.latched && (
-            <TouchableOpacity style={styles.latch} onPress={latch}>
-              <Ionicons name="unlock" size={16} color={Colors.primary} />
-            </TouchableOpacity>
-          )} 
+      <KeyboardAvoidingView style={styles.thread} behavior="padding" keyboardVerticalOffset="100"
+          enabled={Platform.OS === 'ios' ? true : false}>
+        <FlatList style={styles.conversation}
+           contentContainerStyle={styles.topics}
+           ref={ref}
+           data={state.topics}
+           onMomentumScrollEnd={ Platform.OS === 'ios' ? noop : actions.unlatch }
+           onScrollBeginDrag={ Platform.OS !== 'ios' ? noop : actions.unlatch }
+           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} 
+             remove={actions.removeTopic} update={actions.editTopic} block={actions.blockTopic} />}
+          keyExtractor={item => item.topicId}
+        />
+        <View>
+          <AddTopic />
+          <View style={styles.latchbar}>
+            { !state.latched && (
+              <TouchableOpacity style={styles.latch} onPress={latch}>
+                <Ionicons name="unlock" size={16} color={Colors.primary} />
+              </TouchableOpacity>
+            )} 
+          </View>
         </View>
-      </View>
-    </KeyboardAvoidingView>
+      <Modal
+          animationType="fade"
+          transparent={true}
+          visible={state.editing}
+          supportedOrientations={['portrait', 'landscape']}
+          onRequestClose={actions.hideEdit}
+      >
+        <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={actions.updateTopic}>
+                <Text style={styles.saveText}>Save</Text>
+              </TouchableOpacity>
+            </View>
+          </View>
+        </KeyboardAvoidingView>
+      </Modal>
+
+      </KeyboardAvoidingView>
   );
 }
 

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

@@ -103,5 +103,82 @@ export const styles = StyleSheet.create({
     padding: 4,
     borderColor: Colors.primary,
   },
+  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,
+  },
+  modal: {
+    width: '100%',
+    height: '100%',
+    backgroundColor: 'rgba(0, 0, 0, 0.9)',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
 })
 

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

@@ -166,7 +166,7 @@ export function TopicItem({ item, focused, focus, hosting, remove, update, block
       { focused && (
         <View style={styles.focused}>
           { state.editable && (
-            <TouchableOpacity style={styles.icon} onPress={actions.showEdit}>
+            <TouchableOpacity style={styles.icon} onPress={() => update(item.topicId, state.editData)}>
               <AntIcons name="edit" size={24} color={Colors.white} />
             </TouchableOpacity>
           )}

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

@@ -11,6 +11,10 @@ export function useConversation() {
     momentum: false,
     focus: null,
     host: null,
+    editing: false,
+    editTopicId: null,
+    editData: null,
+    editMessage: null,
   });
 
   const conversation = useContext(ConversationContext);
@@ -56,8 +60,19 @@ export function useConversation() {
     removeTopic: async (topicId) => {
       await conversation.actions.removeTopic(topicId);
     },
-    updateTopic: async (topicId, data) => {
-      await conversation.actions.setTopicSubject(topicId, data);
+    editTopic: async (topicId, data) => {
+console.log("EDITING!");
+      updateState({ editing: true, editTopicId: topicId, editData: data });
+      //await conversation.actions.setTopicSubject(topicId, data);
+    },
+    hideEdit: () => {
+      updateState({ editing: false });
+    },
+    updateTopic: () => {
+      updateState({ editing: false });
+    },
+    setEditMessage: (editMessage) => {
+      updateState({ editMessage });
     },
     blockTopic: async (topicId) => {
       await conversation.actions.blockTopic(topicId);