suport subject edit

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 (
         <div class="buttons">
-          <div class="button" onClick={() => onEdit()}>
+          <div class="button" onClick={() => actions.setEditing(true)}>
             <EditOutlined />
           </div>
           <div class="button" onClick={() => actions.removeTopic()}>
@@ -71,6 +67,24 @@ export function TopicItem({ host, topic }) {
     return <></>;
   }
 
+  const Message = () => {
+    if (state.editing) {
+      return (
+        <div class="editing">
+          <Input.TextArea style={{ resize: 'none' }} defaultValue={state.message?.text} placeholder="message"
+            onChange={(e) => actions.setEdit(e.target.value)} rows={3} bordered={false}/>
+          <div class="controls">
+          <Space>
+            <Button onClick={() => actions.setEditing(false)}>Cancel</Button>
+            <Button type="primary" onClick={() => actions.setMessage()} loading={state.body}>Save</Button>
+          </Space>
+          </div>
+        </div>
+      );
+    }
+    return <div>{ state.message?.text }</div>
+  }
+
   return (
     <TopicItemWrapper>
       <div class="avatar">
@@ -82,7 +96,9 @@ export function TopicItem({ host, topic }) {
           <div>{ getTime(offset) }</div>
         </div>
         <Carousel ready={state.ready} items={state.assets} itemRenderer={renderAsset} />
-        <div class="message">{ state.message?.text }</div>
+        <div class="message">
+          <Message />
+        </div>
         <div class="options">
           <Options />
         </div>

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;
+        }
+      }
     }
   }
 `;

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 };

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);
+}

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);
+}

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;

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);
     },

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 }