diff --git a/app/mobile/src/session/conversation/Conversation.jsx b/app/mobile/src/session/conversation/Conversation.jsx index d3fc17f0..da907fc1 100644 --- a/app/mobile/src/session/conversation/Conversation.jsx +++ b/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 ( - - actions.setFocus(item.topicId)} hosting={state.host == null} - remove={actions.removeTopic} update={actions.updateTopic} block={actions.blockTopic} />} - keyExtractor={item => item.topicId} - /> - - - - { !state.latched && ( - - - - )} + + actions.setFocus(item.topicId)} hosting={state.host == null} + remove={actions.removeTopic} update={actions.editTopic} block={actions.blockTopic} />} + keyExtractor={item => item.topicId} + /> + + + + { !state.latched && ( + + + + )} + - - + + + + Edit Message Text: + + + + + + Cancel + + + Save + + + + + + + ); } diff --git a/app/mobile/src/session/conversation/Conversation.styled.js b/app/mobile/src/session/conversation/Conversation.styled.js index 3d9d27c4..6e0bae59 100644 --- a/app/mobile/src/session/conversation/Conversation.styled.js +++ b/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', + }, }) diff --git a/app/mobile/src/session/conversation/topicItem/TopicItem.jsx b/app/mobile/src/session/conversation/topicItem/TopicItem.jsx index 7d9376ba..4b7bd980 100644 --- a/app/mobile/src/session/conversation/topicItem/TopicItem.jsx +++ b/app/mobile/src/session/conversation/topicItem/TopicItem.jsx @@ -166,7 +166,7 @@ export function TopicItem({ item, focused, focus, hosting, remove, update, block { focused && ( { state.editable && ( - + update(item.topicId, state.editData)}> )} diff --git a/app/mobile/src/session/conversation/useConversation.hook.js b/app/mobile/src/session/conversation/useConversation.hook.js index 30112ae3..89278a85 100644 --- a/app/mobile/src/session/conversation/useConversation.hook.js +++ b/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);