diff --git a/app/mobile/src/context/useConversationContext.hook.js b/app/mobile/src/context/useConversationContext.hook.js index 9cd76e02..2c3daf80 100644 --- a/app/mobile/src/context/useConversationContext.hook.js +++ b/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; diff --git a/app/mobile/src/session/conversation/Conversation.jsx b/app/mobile/src/session/conversation/Conversation.jsx index c4d95e9b..cc8c55cb 100644 --- a/app/mobile/src/session/conversation/Conversation.jsx +++ b/app/mobile/src/session/conversation/Conversation.jsx @@ -60,7 +60,7 @@ export function ConversationBody() { inverted={true} renderItem={({item}) => actions.setFocus(item.topicId)} hosting={state.host == null} - remove={actions.removeTopic} />} + remove={actions.removeTopic} update={actions.updateTopic} />} keyExtractor={item => item.topicId} /> diff --git a/app/mobile/src/session/conversation/topicItem/TopicItem.jsx b/app/mobile/src/session/conversation/topicItem/TopicItem.jsx index b8425b4a..08fcc71f 100644 --- a/app/mobile/src/session/conversation/topicItem/TopicItem.jsx +++ b/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} > - - - DONE - - + + + Edit Message Text: + + + + + + Cancel + + + Save + + + + { focused && ( @@ -195,7 +221,6 @@ export function TopicItem({ item, focused, focus, hosting, remove }) { )} - )} diff --git a/app/mobile/src/session/conversation/topicItem/TopicItem.styled.js b/app/mobile/src/session/conversation/topicItem/TopicItem.styled.js index 061997c6..30ff67e4 100644 --- a/app/mobile/src/session/conversation/topicItem/TopicItem.styled.js +++ b/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, + }, }) diff --git a/app/mobile/src/session/conversation/topicItem/useTopicItem.hook.js b/app/mobile/src/session/conversation/topicItem/useTopicItem.hook.js index e707fde2..1e4ae054 100644 --- a/app/mobile/src/session/conversation/topicItem/useTopicItem.hook.js +++ b/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 }; diff --git a/app/mobile/src/session/conversation/useConversation.hook.js b/app/mobile/src/session/conversation/useConversation.hook.js index 2bae1783..2b4dc1da 100644 --- a/app/mobile/src/session/conversation/useConversation.hook.js +++ b/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 };