From 754b94fcd98fe7699a8ba18156616df2e8dad930 Mon Sep 17 00:00:00 2001
From: Roland Osborne <rolandosborne@gmail.com>
Date: Sun, 15 May 2022 11:04:27 -0700
Subject: [PATCH] edit converstation subject

---
 net/server/internal/api_setChannelSubject.go  |  5 ++-
 .../src/User/Conversation/Conversation.jsx    | 42 ++++++++++++++++---
 .../User/Conversation/Conversation.styled.jsx | 13 +++++-
 .../User/Conversation/useConversation.hook.js |  5 +++
 net/web/src/api/setChannelSubject.js          |  9 ++++
 net/web/src/context/useChannelContext.hook.js |  5 ++-
 .../context/useConversationContext.hook.js    | 13 +++++-
 7 files changed, 83 insertions(+), 9 deletions(-)
 create mode 100644 net/web/src/api/setChannelSubject.js

diff --git a/net/server/internal/api_setChannelSubject.go b/net/server/internal/api_setChannelSubject.go
index 136a157e..b908599a 100644
--- a/net/server/internal/api_setChannelSubject.go
+++ b/net/server/internal/api_setChannelSubject.go
@@ -10,7 +10,7 @@ import (
 
 func SetChannelSubject(w http.ResponseWriter, r *http.Request) {
 
-  account, code, err := BearerAppToken(r, false);
+  account, code, err := ParamAgentToken(r, false);
   if err != nil {
     ErrResponse(w, code, err)
     return
@@ -60,6 +60,9 @@ func SetChannelSubject(w http.ResponseWriter, r *http.Request) {
     if res := tx.Model(&slot.Channel).Update("data_type", subject.DataType).Error; res != nil {
       return res
     }
+    if res := tx.Model(&slot.Channel).Update("detail_revision", account.ChannelRevision + 1).Error; res != nil {
+      return res
+    }
     if res := tx.Model(&slot).Update("revision", account.ChannelRevision + 1).Error; res != nil {
       return res
     }
diff --git a/net/web/src/User/Conversation/Conversation.jsx b/net/web/src/User/Conversation/Conversation.jsx
index 5038276a..6f6776a5 100644
--- a/net/web/src/User/Conversation/Conversation.jsx
+++ b/net/web/src/User/Conversation/Conversation.jsx
@@ -1,24 +1,42 @@
 import React, { useState, useEffect, useRef } from 'react'
 import { CloseOutlined, UserOutlined } from '@ant-design/icons';
 import { useConversation } from './useConversation.hook';
-import { Button, Checkbox, Modal, Spin } from 'antd'
-import { ConversationWrapper, ConversationButton, CloseButton, ListItem, BusySpin } from './Conversation.styled';
+import { Button, Input, Checkbox, Modal, Spin } from 'antd'
+import { ConversationWrapper, ConversationButton, EditButton, CloseButton, ListItem, BusySpin } from './Conversation.styled';
 import { AutoSizer, CellMeasurer, CellMeasurerCache, List } from 'react-virtualized';
 import { AddTopic } from './AddTopic/AddTopic';
 import { VirtualList } from '../../VirtualList/VirtualList';
 import { TopicItem } from './TopicItem/TopicItem';
-import { HomeOutlined, DatabaseOutlined } from '@ant-design/icons';
+import { EditOutlined, HomeOutlined, DatabaseOutlined } from '@ant-design/icons';
 
 export function Conversation() {
 
   const { state, actions } = useConversation();
+  const [ showEdit, setShowEdit ] = useState(false);
+  const [ editSubject, setEditSubject ] = useState(null);
+  const [ subject, setSubject ] = useState(null);
+
+  useEffect(() => {
+    if (state.subject) {
+      setSubject(state.subject);
+    }
+    else {
+      setSubject(state.contacts);
+    }
+  }, [state]);
 
   const topicRenderer = (topic) => {
     return (<TopicItem topic={topic} />)
   }
 
+  const onSaveSubject = () => {
+    actions.setSubject(editSubject);
+    setShowEdit(false);
+  }
+
   const onEdit = () => {
-    console.log("EDIT CONVERSATION");
+    setEditSubject(state.subject);
+    setShowEdit(true);
   }
 
   const Icon = () => {
@@ -28,12 +46,22 @@ export function Conversation() {
     return <HomeOutlined />
   }
 
+  const Edit = () => {
+    if (state.cardId) {
+      return <></>
+    }
+    return (
+      <EditButton type="text" size={'large'} onClick={() => onEdit()} icon={<EditOutlined />} />
+    )
+  }
+
   return (
     <ConversationWrapper>
       <div class="header">
         <div class="title">
           <Icon />
-          <div class="subject">{ state.subject }</div>  
+          <div class="subject">{ subject }</div> 
+          <Edit /> 
         </div>
         <div class="control">       
           <div class="buttons">
@@ -50,6 +78,10 @@ export function Conversation() {
         <BusySpin size="large" delay="1000" spinning={!state.init} />
       </div>
       <AddTopic />
+      <Modal title="Edit Subject" visible={showEdit} centered
+        okText="Save" onOk={() => onSaveSubject()} onCancel={() => setShowEdit(false)}>
+        <Input placeholder="Subject" onChange={(e) => setEditSubject(e.target.value)} value={editSubject} />
+      </Modal>
     </ConversationWrapper>
   )
 }
diff --git a/net/web/src/User/Conversation/Conversation.styled.jsx b/net/web/src/User/Conversation/Conversation.styled.jsx
index e82b3a25..62c3616f 100644
--- a/net/web/src/User/Conversation/Conversation.styled.jsx
+++ b/net/web/src/User/Conversation/Conversation.styled.jsx
@@ -10,6 +10,11 @@ export const ConversationWrapper = styled.div`
   align-items: center;
   overflow: hidden;
 
+  .edit {
+    font-size: 18px;
+    color: white;
+  }
+
   .header {
     flex-grow: 1;
     display: flex;
@@ -32,6 +37,7 @@ export const ConversationWrapper = styled.div`
     color: white;
     font-size: 1.5em;
     min-width: 0;
+    padding-right: 8px;
   }
 
   .control {
@@ -51,7 +57,7 @@ export const ConversationWrapper = styled.div`
   .buttons {
     display: flex;
     flex-direction: row;
-    margin-right: 32px;
+    margin-right: 16px;
     align-items: center;
   } 
 
@@ -76,6 +82,11 @@ export const ConversationButton = styled(Button)`
   margin-right: 8px;
 `
 
+export const EditButton = styled(Button)`
+  font-size: 24px;
+  color: white;
+`;
+
 export const CloseButton = styled(Button)`
   font-size: 24px;
   color: white;
diff --git a/net/web/src/User/Conversation/useConversation.hook.js b/net/web/src/User/Conversation/useConversation.hook.js
index 37b402d9..4c3cab58 100644
--- a/net/web/src/User/Conversation/useConversation.hook.js
+++ b/net/web/src/User/Conversation/useConversation.hook.js
@@ -11,6 +11,7 @@ export function useConversation() {
     cardId: null,
     channelId: null,
     subject: null,
+    contacts: null,
     topics: [],
   });
 
@@ -26,6 +27,9 @@ export function useConversation() {
     close: () => {
       navigate('/user')
     },
+    setSubject: async (subject) => {
+      await conversation.actions.setChannelSubject(subject);
+    },
     remove: async () => {
       await conversation.actions.removeConversation();
       navigate('/user');
@@ -40,6 +44,7 @@ export function useConversation() {
     updateState({
       init: conversation.state.init,
       subject: conversation.state.subject,
+      contacts: conversation.state.contacts,
       cardId: conversation.state.cardId,
       channelId: conversation.state.channelId,
       topics: Array.from(conversation.state.topics.values()),
diff --git a/net/web/src/api/setChannelSubject.js b/net/web/src/api/setChannelSubject.js
new file mode 100644
index 00000000..49c95e04
--- /dev/null
+++ b/net/web/src/api/setChannelSubject.js
@@ -0,0 +1,9 @@
+import { checkResponse, fetchWithTimeout } from './fetchUtil';
+
+export async function setChannelSubject(token, channelId, subject ) {
+  let data = { subject };
+  let params = { dataType: 'superbasic', data: JSON.stringify(data) };
+  let channel = await fetchWithTimeout(`/content/channels/${channelId}/subject?agent=${token}`, { method: 'PUT', body: JSON.stringify(params)} );
+  checkResponse(channel);
+  return await channel.json();
+}
diff --git a/net/web/src/context/useChannelContext.hook.js b/net/web/src/context/useChannelContext.hook.js
index 31c77287..81eb29d3 100644
--- a/net/web/src/context/useChannelContext.hook.js
+++ b/net/web/src/context/useChannelContext.hook.js
@@ -8,7 +8,7 @@ import { addChannelTopic } from 'api/addChannelTopic';
 import { getChannelTopics } from 'api/getChannelTopics';
 import { getChannelTopic } from 'api/getChannelTopic';
 import { getChannelTopicAssetUrl } from 'api/getChannelTopicAssetUrl';
-
+import { setChannelSubject } from 'api/setChannelSubject';
 export function useChannelContext() {
   const [state, setState] = useState({
     init: false,
@@ -89,6 +89,9 @@ export function useChannelContext() {
     addChannel: async (cards, subject, description) => {
       return await addChannel(access.current, cards, subject, description);
     },
+    setChannelSubject: async (channelId, subject) => {
+      return await setChannelSubject(access.current, channelId, subject);
+    },
     removeChannel: async (channelId) => {
       return await removeChannel(access.current, channelId);
     },
diff --git a/net/web/src/context/useConversationContext.hook.js b/net/web/src/context/useConversationContext.hook.js
index 7c6b8de1..31c99654 100644
--- a/net/web/src/context/useConversationContext.hook.js
+++ b/net/web/src/context/useConversationContext.hook.js
@@ -9,6 +9,7 @@ export function useConversationContext() {
     cardId: null,
     channelId: null,
     subject: null,
+    contacts: null,
     topics: new Map(),
   });
 
@@ -33,8 +34,11 @@ export function useConversationContext() {
       }
     }
     catch (err) {
-      console.log(err);
+      return null;
     }
+  }
+
+  const getContacts = (conversation) => {
     let members = [];
     if (conversation.guid) {
       members.push(card.actions.getCardByGuid(conversation.guid)?.data?.cardProfile?.handle);
@@ -63,6 +67,7 @@ export function useConversationContext() {
       if (curRevision != deltaRevision) {
         let conversation = card.actions.getChannel(cardId, channelId);
         let subject = getSubject(conversation);
+        let contacts = getContacts(conversation);
         let delta = await card.actions.getChannelTopics(cardId, channelId, curRevision);
         for (let topic of delta) {
           if (topic.data == null) {
@@ -92,6 +97,7 @@ export function useConversationContext() {
           updateState({
             init: true,
             subject,
+            contacts,
             topics: topics.current,
           });
           revision.current = deltaRevision;
@@ -106,6 +112,7 @@ export function useConversationContext() {
       if (curRevision != deltaRevision) {
         let conversation = channel.actions.getChannel(channelId);
         let subject = getSubject(conversation);
+        let contacts = getContacts(conversation);
         let delta = await channel.actions.getChannelTopics(channelId, curRevision);
         for (let topic of delta) {
           if (topic.data == null) {
@@ -135,6 +142,7 @@ export function useConversationContext() {
           updateState({
             init: true,
             subject,
+            contacts,
             topics: topics.current,
           });
           revision.current = deltaRevision;
@@ -192,6 +200,9 @@ export function useConversationContext() {
       updateState({ init: false, subject: null, cardId, channelId, topics: topics.current });
       updateConversation();
     },
+    setChannelSubject: async (subject) => {
+      return await channel.actions.setChannelSubject(conversationId.current.channelId, subject);
+    },
     getAssetUrl: (topicId, assetId) => {
       const { cardId, channelId } = conversationId.current;
       if (conversationId.current.cardId) {