diff --git a/app/mobile/src/context/useConversationContext.hook.js b/app/mobile/src/context/useConversationContext.hook.js index 15c2df6f..9cd76e02 100644 --- a/app/mobile/src/context/useConversationContext.hook.js +++ b/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; diff --git a/app/mobile/src/session/conversation/Conversation.jsx b/app/mobile/src/session/conversation/Conversation.jsx index b7455dc4..c4d95e9b 100644 --- a/app/mobile/src/session/conversation/Conversation.jsx +++ b/app/mobile/src/session/conversation/Conversation.jsx @@ -59,7 +59,8 @@ export function ConversationBody() { maintainVisibleContentPosition={ state.latched ? null : { minIndexForVisibile: 2, } } inverted={true} renderItem={({item}) => actions.setFocus(item.topicId)} hosting={state.host == null} />} + focus={() => actions.setFocus(item.topicId)} hosting={state.host == null} + remove={actions.removeTopic} />} keyExtractor={item => item.topicId} /> diff --git a/app/mobile/src/session/conversation/Conversation.styled.js b/app/mobile/src/session/conversation/Conversation.styled.js index f1181870..401176ff 100644 --- a/app/mobile/src/session/conversation/Conversation.styled.js +++ b/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, diff --git a/app/mobile/src/session/conversation/addTopic/AddTopic.styled.js b/app/mobile/src/session/conversation/addTopic/AddTopic.styled.js index f8cb9359..09502015 100644 --- a/app/mobile/src/session/conversation/addTopic/AddTopic.styled.js +++ b/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', diff --git a/app/mobile/src/session/conversation/topicItem/TopicItem.jsx b/app/mobile/src/session/conversation/topicItem/TopicItem.jsx index d50a8cdd..b8425b4a 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 } 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 ( @@ -113,22 +166,36 @@ export function TopicItem({ item, focused, focus, hosting }) { /> + + + + DONE + + + { focused && ( - { state.deletable && ( - - - - )} { state.editable && ( - - + + )} - + + { state.deletable && ( + + + + )} + )} diff --git a/app/mobile/src/session/conversation/topicItem/TopicItem.styled.js b/app/mobile/src/session/conversation/topicItem/TopicItem.styled.js index 1ce0d1e7..05eb69c6 100644 --- a/app/mobile/src/session/conversation/topicItem/TopicItem.styled.js +++ b/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, diff --git a/app/mobile/src/session/conversation/topicItem/useTopicItem.hook.js b/app/mobile/src/session/conversation/topicItem/useTopicItem.hook.js index f86a91eb..e707fde2 100644 --- a/app/mobile/src/session/conversation/topicItem/useTopicItem.hook.js +++ b/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 }; diff --git a/app/mobile/src/session/conversation/useConversation.hook.js b/app/mobile/src/session/conversation/useConversation.hook.js index 25b0491d..2bae1783 100644 --- a/app/mobile/src/session/conversation/useConversation.hook.js +++ b/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 };