diff --git a/net/web/src/User/Conversation/TopicItem/TopicItem.jsx b/net/web/src/User/Conversation/TopicItem/TopicItem.jsx index 48c874ea..95c1ede7 100644 --- a/net/web/src/User/Conversation/TopicItem/TopicItem.jsx +++ b/net/web/src/User/Conversation/TopicItem/TopicItem.jsx @@ -5,13 +5,14 @@ import { VideoAsset } from './VideoAsset/VideoAsset'; import { AudioAsset } from './AudioAsset/AudioAsset'; import { ImageAsset } from './ImageAsset/ImageAsset'; import { Avatar } from 'avatar/Avatar'; -import { Button } from 'antd'; +import { Space, Button, Input } from 'antd'; import { DeleteOutlined, EditOutlined } from '@ant-design/icons'; import { Carousel } from 'Carousel/Carousel'; export function TopicItem({ host, topic }) { const { state, actions } = useTopicItem(topic); + const [ edit, setEdit ] = useState(null); let name = state.name ? state.name : state.handle; let nameClass = state.name ? 'set' : 'unset'; @@ -38,19 +39,14 @@ export function TopicItem({ host, topic }) { return <> } - const onEdit = () => { - console.log("EDIT TOPIC"); - } - - const onDelete = () => { - console.log("DELETE TOPIC"); - } - const Options = () => { + if (state.editing) { + return <>; + } if (state.owner) { return (
-
onEdit()}> +
actions.setEditing(true)}>
actions.removeTopic()}> @@ -71,6 +67,24 @@ export function TopicItem({ host, topic }) { return <>; } + const Message = () => { + if (state.editing) { + return ( +
+ actions.setEdit(e.target.value)} rows={3} bordered={false}/> +
+ + + + +
+
+ ); + } + return
{ state.message?.text }
+ } + return (
@@ -82,7 +96,9 @@ export function TopicItem({ host, topic }) {
{ getTime(offset) }
-
{ state.message?.text }
+
+ +
diff --git a/net/web/src/User/Conversation/TopicItem/TopicItem.styled.js b/net/web/src/User/Conversation/TopicItem/TopicItem.styled.js index e4e22704..1943dfbc 100644 --- a/net/web/src/User/Conversation/TopicItem/TopicItem.styled.js +++ b/net/web/src/User/Conversation/TopicItem/TopicItem.styled.js @@ -76,6 +76,23 @@ export const TopicItemWrapper = styled.div` .message { padding-top: 6px; padding-right: 16px; + white-space: pre-line; + + .editing { + display: flex; + flex-direction: column; + border-radius: 4px; + border: 1px solid #aaaaaa; + width: 100%; + + .controls { + display: flex; + flex-direction: row; + justify-content: flex-end; + padding-bottom: 8px; + padding-right: 8px; + } + } } } `; diff --git a/net/web/src/User/Conversation/TopicItem/useTopicItem.hook.js b/net/web/src/User/Conversation/TopicItem/useTopicItem.hook.js index 770b468d..ce2bce3b 100644 --- a/net/web/src/User/Conversation/TopicItem/useTopicItem.hook.js +++ b/net/web/src/User/Conversation/TopicItem/useTopicItem.hook.js @@ -16,11 +16,14 @@ export function useTopicItem(topic) { ready: false, owner: false, assets: [], + editing: false, + busy: false, }); const profile = useContext(ProfileContext); const card = useContext(CardContext); const conversation = useContext(ConversationContext); + const editMessage = useRef(null); const updateState = (value) => { setState((s) => ({ ...s, ...value })); @@ -42,6 +45,7 @@ export function useTopicItem(topic) { let ready = false; let assets = []; if (status === 'confirmed') { +console.log(data); try { message = JSON.parse(data); if (message.assets) { @@ -75,8 +79,29 @@ export function useTopicItem(topic) { return conversation.actions.getAssetUrl(topic?.id, assetId); }, removeTopic: async () => { - return conversation.actions.removeTopic(topic.id); - } + return await conversation.actions.removeTopic(topic.id); + }, + setEditing: (editing) => { + editMessage.current = state.message?.text; + updateState({ editing }); + }, + setEdit: (edit) => { + editMessage.current = edit; + }, + setMessage: async () => { + if (!state.busy) { + updateState({ busy: true }); + try { + await conversation.actions.setTopicSubject(topic.id, + { ...state.message, text: editMessage.current }); + updateState({ editing: false }); + } + catch (err) { + window.alert(err); + } + updateState({ busy: false }); + } + }, }; return { state, actions }; diff --git a/net/web/src/api/setChannelTopicSubject.js b/net/web/src/api/setChannelTopicSubject.js new file mode 100644 index 00000000..6e227efa --- /dev/null +++ b/net/web/src/api/setChannelTopicSubject.js @@ -0,0 +1,11 @@ +import { checkResponse, fetchWithTimeout } from './fetchUtil'; + +export async function setChannelTopicSubject(token, channelId, topicId, data) { + let subject = { data: JSON.stringify(data, (key, value) => { + if (value !== null) return value + }), datatype: 'superbasictopic' }; + + let channel = await fetchWithTimeout(`/content/channels/${channelId}/topics/${topicId}/subject?agent=${token}`, + { method: 'PUT', body: JSON.stringify(subject) }); + checkResponse(channel); +} diff --git a/net/web/src/api/setContactChannelTopicSubject.js b/net/web/src/api/setContactChannelTopicSubject.js new file mode 100644 index 00000000..2b2fb337 --- /dev/null +++ b/net/web/src/api/setContactChannelTopicSubject.js @@ -0,0 +1,11 @@ +import { checkResponse, fetchWithTimeout } from './fetchUtil'; + +export async function setContactChannelTopicSubject(server, token, channelId, topicId, data) { + let subject = { data: JSON.stringify(data, (key, value) => { + if (value !== null) return value + }), datatype: 'superbasictopic' }; + + let channel = await fetchWithTimeout(`https://${server}//content/channels/${channelId}/topics/${topicId}/subject?contact=${token}`, + { method: 'PUT', body: JSON.stringify(subject) }); + checkResponse(channel); +} diff --git a/net/web/src/context/useCardContext.hook.js b/net/web/src/context/useCardContext.hook.js index dac727cb..c196f07c 100644 --- a/net/web/src/context/useCardContext.hook.js +++ b/net/web/src/context/useCardContext.hook.js @@ -10,6 +10,7 @@ import { getCardProfile } from 'api/getCardProfile'; import { getCardDetail } from 'api/getCardDetail'; import { removeContactChannel } from 'api/removeContactChannel'; import { removeContactChannelTopic } from 'api/removeContactChannelTopic'; +import { setContactChannelTopicSubject } from 'api/setContactChannelTopicSubject'; import { addContactChannelTopic } from 'api/addContactChannelTopic'; import { setCardConnecting, setCardConnected, setCardConfirmed } from 'api/setCardStatus'; import { getCardOpenMessage } from 'api/getCardOpenMessage'; @@ -227,6 +228,12 @@ export function useCardContext() { let node = cardProfile.node; await removeContactChannelTopic(node, token, channelId, topicId); }, + setChannelTopicSubject: async (cardId, channelId, topicId, data) => { + let { cardProfile, cardDetail } = cards.current.get(cardId).data; + let token = cardProfile.guid + '.' + cardDetail.token; + let node = cardProfile.node; + await setContactChannelTopicSubject(node, token, channelId, topicId, data); + }, addChannelTopic: async (cardId, channelId, message, assets) => { let { cardProfile, cardDetail } = cards.current.get(cardId).data; let token = cardProfile.guid + '.' + cardDetail.token; diff --git a/net/web/src/context/useChannelContext.hook.js b/net/web/src/context/useChannelContext.hook.js index 11b7e751..d20cbdd5 100644 --- a/net/web/src/context/useChannelContext.hook.js +++ b/net/web/src/context/useChannelContext.hook.js @@ -5,6 +5,7 @@ import { getChannelSummary } from 'api/getChannelSummary'; import { addChannel } from 'api/addChannel'; import { removeChannel } from 'api/removeChannel'; import { removeChannelTopic } from 'api/removeChannelTopic'; +import { setChannelTopicSubject } from 'api/setChannelTopicSubject'; import { addChannelTopic } from 'api/addChannelTopic'; import { getChannelTopics } from 'api/getChannelTopics'; import { getChannelTopic } from 'api/getChannelTopic'; @@ -113,6 +114,9 @@ export function useChannelContext() { removeChannelTopic: async (channelId, topicId) => { return await removeChannelTopic(access.current, channelId, topicId); }, + setChannelTopicSubject: async (channelId, topicId, data) => { + return await setChannelTopicSubject(access.current, channelId, topicId, data); + }, addChannelTopic: async (channelId, message, assets) => { await addChannelTopic(access.current, channelId, message, assets); }, diff --git a/net/web/src/context/useConversationContext.hook.js b/net/web/src/context/useConversationContext.hook.js index a6cd855c..4b8cb53a 100644 --- a/net/web/src/context/useConversationContext.hook.js +++ b/net/web/src/context/useConversationContext.hook.js @@ -256,6 +256,16 @@ export function useConversationContext() { return await channel.actions.removeChannelTopic(channelId, topicId); } }, + setTopicSubject: async (topicId, data) => { +console.log("DATA:", data); + const { cardId, channelId } = conversationId.current; + if (cardId) { + return await card.actions.setChannelTopicSubject(cardId, channelId, topicId, data); + } + else { + return await channel.actions.setChannelTopicSubject(channelId, topicId, data); + } + } } return { state, actions }