From 1c05a8487c7021394b4ff13117f9f48975b1256d Mon Sep 17 00:00:00 2001 From: balzack Date: Sun, 9 Oct 2022 23:26:32 -0700 Subject: [PATCH] suppot updates to topic subject --- .../src/context/useChannelContext.hook.js | 7 +- .../context/useConversationContext.hook.js | 18 ++++- app/mobile/src/session/details/Details.jsx | 44 ++++++++++++- .../src/session/details/Details.styled.js | 66 +++++++++++++++++++ .../src/session/details/useDetails.hook.js | 18 ++++- app/mobile/src/session/profile/Profile.jsx | 3 - 6 files changed, 145 insertions(+), 11 deletions(-) diff --git a/app/mobile/src/context/useChannelContext.hook.js b/app/mobile/src/context/useChannelContext.hook.js index e1fc7723..cc304b22 100644 --- a/app/mobile/src/context/useChannelContext.hook.js +++ b/app/mobile/src/context/useChannelContext.hook.js @@ -46,7 +46,7 @@ export function useChannelContext() { update.topicRevision = channel?.data?.topicRevision; channels.current.set(channelId, update); } - const setChannelDetails = (channelId, detail, revision) => { + const setChannelDetail = (channelId, detail, revision) => { let channel = channels.current.get(channelId); if (channel) { channel.detail = detail; @@ -94,6 +94,7 @@ export function useChannelContext() { const { server, appToken, guid } = session.current; const delta = await getChannels(server, appToken, setRevision.current); +console.log("DELTA", delta); for (let channel of delta) { if (channel.data) { if (channel.data.channelDetail && channel.data.channelSummary) { @@ -234,6 +235,10 @@ export function useChannelContext() { const { server, appToken } = session.current; return await setChannelTopicSubject(server, appToken, channelId, topicId, data); }, + setSubject: async (channelId, data) => { + const { server, appToken } = session.current; + return await setChannelSubject(server, appToken, channelId, data); + }, remove: async (channelId) => { const { server, appToken } = session.current; return await removeChannel(server, appToken, channelId); diff --git a/app/mobile/src/context/useConversationContext.hook.js b/app/mobile/src/context/useConversationContext.hook.js index 68430efb..fa6c60a9 100644 --- a/app/mobile/src/context/useConversationContext.hook.js +++ b/app/mobile/src/context/useConversationContext.hook.js @@ -7,6 +7,7 @@ import moment from 'moment'; export function useConversationContext() { const [state, setState] = useState({ + topic: null, subject: null, logo: null, revision: null, @@ -209,6 +210,7 @@ export function useConversationContext() { const setChannel = (item) => { let contacts = []; let logo = null; + let topic = null; let subject = null; let timestamp; @@ -226,7 +228,7 @@ export function useConversationContext() { } if (!item) { - updateState({ contacts, logo, subject }); + updateState({ contacts, logo, subject, topic }); return; } @@ -260,7 +262,8 @@ export function useConversationContext() { if (item?.detail?.data) { try { - subject = JSON.parse(item?.detail?.data).subject; + topic = JSON.parse(item?.detail?.data).subject; + subject = topic; } catch (err) { console.log(err); @@ -284,7 +287,7 @@ export function useConversationContext() { } } - updateState({ subject, logo, contacts, host: item.cardId, created: timestamp }); + updateState({ topic, subject, logo, contacts, host: item.cardId, created: timestamp }); } useEffect(() => { @@ -339,6 +342,15 @@ export function useConversationContext() { sync(); } }, + setSubject: async (subject) => { + if (conversationId.current) { + const { cardId, channelId } = conversationId.current; + if (cardId) { + throw new Error("can only set hosted channel subjects"); + } + await channel.actions.setSubject(channelId, subject); + } + }, } return { state, actions } diff --git a/app/mobile/src/session/details/Details.jsx b/app/mobile/src/session/details/Details.jsx index ef4755a9..3ed22575 100644 --- a/app/mobile/src/session/details/Details.jsx +++ b/app/mobile/src/session/details/Details.jsx @@ -1,4 +1,4 @@ -import { FlatList, View, Text, TouchableOpacity } from 'react-native'; +import { KeyboardAvoidingView, FlatList, Alert, Modal, View, Text, TouchableOpacity, TextInput } from 'react-native'; import { styles } from './Details.styled'; import { useDetails } from './useDetails.hook'; import { Logo } from 'utils/Logo'; @@ -14,12 +14,26 @@ export function DetailsBody({ channel, clearConversation }) { const { state, actions } = useDetails(); + const saveSubject = async () => { + try { + await actions.saveSubject(); + actions.hideEditSubject(); + } + catch (err) { + console.log(err); + Alert.alert( + 'Failed to Save Subject', + 'Please try again.' + ) + } + } + return ( - + { state.subject } { !state.hostId && ( @@ -61,6 +75,32 @@ export function DetailsBody({ channel, clearConversation }) { keyExtractor={item => item.cardId} /> + + + + Edit Subject: + + + + + + Cancel + + + Save + + + + + + ) } diff --git a/app/mobile/src/session/details/Details.styled.js b/app/mobile/src/session/details/Details.styled.js index cd29fa2c..e1c8ebff 100644 --- a/app/mobile/src/session/details/Details.styled.js +++ b/app/mobile/src/session/details/Details.styled.js @@ -71,5 +71,71 @@ export const styles = StyleSheet.create({ cards: { width: '100%', }, + save: { + padding: 8, + borderRadius: 4, + backgroundColor: Colors.primary, + width: 72, + display: 'flex', + alignItems: 'center', + }, + link: { + marginTop: 16, + }, + linkText: { + color: Colors.primary, + }, + 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', + }, + 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, + }, + }) diff --git a/app/mobile/src/session/details/useDetails.hook.js b/app/mobile/src/session/details/useDetails.hook.js index c244fbb5..b1625cf7 100644 --- a/app/mobile/src/session/details/useDetails.hook.js +++ b/app/mobile/src/session/details/useDetails.hook.js @@ -10,6 +10,8 @@ export function useDetails() { logo: null, hostId: null, contacts: [], + editSubject: false, + subjectUpdate: null, }); const conversation = useContext(ConversationContext); @@ -20,12 +22,24 @@ export function useDetails() { } useEffect(() => { - const { subject, created, logo, host, contacts } = conversation.state; - updateState({ subject, created, logo, hostId: host, + const { topic, subject, created, logo, host, contacts } = conversation.state; + updateState({ subject, created, logo, hostId: host, subjectUpdate: topic, count: contacts.length, contacts: contacts.filter(card => card != null) }); }, [conversation]); const actions = { + showEditSubject: () => { + updateState({ editSubject: true }); + }, + hideEditSubject: () => { + updateState({ editSubject: false }); + }, + setSubjectUpdate: (subjectUpdate) => { + updateState({ subjectUpdate }); + }, + saveSubject: async () => { + await conversation.actions.setSubject(state.subjectUpdate); + }, }; return { state, actions }; diff --git a/app/mobile/src/session/profile/Profile.jsx b/app/mobile/src/session/profile/Profile.jsx index fd1e18dd..4210890a 100644 --- a/app/mobile/src/session/profile/Profile.jsx +++ b/app/mobile/src/session/profile/Profile.jsx @@ -108,9 +108,6 @@ export function Profile() { - - -