diff --git a/app/mobile/src/session/Session.jsx b/app/mobile/src/session/Session.jsx index 17d597ee..484cd5de 100644 --- a/app/mobile/src/session/Session.jsx +++ b/app/mobile/src/session/Session.jsx @@ -45,8 +45,8 @@ export function Session() { const ConversationStackScreen = () => { const setConversation = (navigation, cardId, channelId, revision) => { - setSelectedConversation({ cardId, channelId, revision }); navigation.navigate('conversation'); + setSelectedConversation({ cardId, channelId, revision }); } const clearConversation = (navigation) => { navigation.dispatch( diff --git a/app/mobile/src/session/conversation/Conversation.jsx b/app/mobile/src/session/conversation/Conversation.jsx index 1bbbc384..b7455dc4 100644 --- a/app/mobile/src/session/conversation/Conversation.jsx +++ b/app/mobile/src/session/conversation/Conversation.jsx @@ -59,7 +59,7 @@ export function ConversationBody() { maintainVisibleContentPosition={ state.latched ? null : { minIndexForVisibile: 2, } } inverted={true} renderItem={({item}) => actions.setFocus(item.topicId)} />} + focus={() => actions.setFocus(item.topicId)} hosting={state.host == null} />} 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 d682a80f..92390e70 100644 --- a/app/mobile/src/session/conversation/topicItem/TopicItem.jsx +++ b/app/mobile/src/session/conversation/topicItem/TopicItem.jsx @@ -16,9 +16,9 @@ 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 }) { +export function TopicItem({ item, focused, focus, hosting }) { - const { state, actions } = useTopicItem(item); + const { state, actions } = useTopicItem(item, hosting); const renderAsset = (asset) => { return ( @@ -66,7 +66,19 @@ export function TopicItem({ item, focused, focus }) { { state.timestamp } { focused && ( - + { state.deletable && ( + + + + )} + { state.editable && ( + + + + )} + + + )} diff --git a/app/mobile/src/session/conversation/topicItem/TopicItem.styled.js b/app/mobile/src/session/conversation/topicItem/TopicItem.styled.js index 1b795785..d2990a8d 100644 --- a/app/mobile/src/session/conversation/topicItem/TopicItem.styled.js +++ b/app/mobile/src/session/conversation/topicItem/TopicItem.styled.js @@ -46,7 +46,19 @@ export const styles = StyleSheet.create({ focused: { position: 'absolute', top: -16, - right: 16, - } + right: 0, + display: 'flex', + flexDirection: 'row', + backgroundColor: 'rgba(0, 0, 0, 0.5)', + paddingTop: 4, + paddingBottom: 4, + borderRadius: 4, + paddingLeft: 8, + paddingRight: 8, + }, + icon: { + paddingLeft: 4, + paddingRight: 4, + }, }) diff --git a/app/mobile/src/session/conversation/topicItem/useTopicItem.hook.js b/app/mobile/src/session/conversation/topicItem/useTopicItem.hook.js index 3fc0ebcd..f86a91eb 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) { +export function useTopicItem(item, hosting) { const [state, setState] = useState({ name: null, @@ -20,6 +20,8 @@ export function useTopicItem(item) { activeId: null, fontSize: 14, fontColor: Colors.text, + editable: false, + deletable: false, }); const profile = useContext(ProfileContext); @@ -121,7 +123,10 @@ export function useTopicItem(item) { timestamp = moment(date).format('M/DD/YYYY'); } - updateState({ logo, name, known, message, fontSize, fontColor, timestamp, transform, status, assets }); + const editable = detail.guid === identity.guid; + const deletable = editable || hosting; + + updateState({ logo, name, known, message, fontSize, fontColor, timestamp, transform, status, assets, deletable, editable }); }, [card, item]); const actions = { diff --git a/app/mobile/src/session/conversation/useConversation.hook.js b/app/mobile/src/session/conversation/useConversation.hook.js index 5c056326..25b0491d 100644 --- a/app/mobile/src/session/conversation/useConversation.hook.js +++ b/app/mobile/src/session/conversation/useConversation.hook.js @@ -10,6 +10,7 @@ export function useConversation() { latched: true, momentum: false, focus: null, + host: null, }); const conversation = useContext(ConversationContext); @@ -19,7 +20,7 @@ export function useConversation() { } useEffect(() => { - const { subject, logo, topics } = conversation.state; + const { subject, logo, topics, host } = conversation.state; const items = Array.from(topics.values()); const sorted = items.sort((a, b) => { const aTimestamp = a?.detail?.created; @@ -32,7 +33,7 @@ export function useConversation() { } return -1; }); - updateState({ topics, subject, logo, topics: sorted }); + updateState({ topics, subject, logo, host, topics: sorted }); }, [conversation]); const actions = { diff --git a/app/mobile/src/session/details/memberItem/MemberItem.jsx b/app/mobile/src/session/details/memberItem/MemberItem.jsx index 5b354e38..0821c896 100644 --- a/app/mobile/src/session/details/memberItem/MemberItem.jsx +++ b/app/mobile/src/session/details/memberItem/MemberItem.jsx @@ -11,7 +11,9 @@ export function MemberItem({ hostId, editable, members, item }) { const setMember = async (member) => { try { - actions.setMember(member); + if (editable) { + actions.setMember(member); + } } catch (err) { console.log(err); diff --git a/app/mobile/src/session/profile/Profile.jsx b/app/mobile/src/session/profile/Profile.jsx index e2b06489..0f0927ff 100644 --- a/app/mobile/src/session/profile/Profile.jsx +++ b/app/mobile/src/session/profile/Profile.jsx @@ -112,7 +112,7 @@ export function Profile() { - { state.disconnected && ( + { state.disconnected > 3 && ( Disconnected