presenting sealed conversation subject in header for webapp

net/web/src/context/useConversationContext.hook.js

@@ -21,6 +21,10 @@ export function useConversationContext() {
     enableImage: null,
     enabelAudio: null,
     enableVideo: null,
+    sealed: false,
+    image: null,
+    logoUrl: null,
+    logoImg: null,
   });
 
   const EVENT_OPEN = 1;
@@ -56,15 +60,21 @@ export function useConversationContext() {
       return null;
     }
 
-    try {
-      let subject = JSON.parse(conversation.data.channelDetail.data).subject;
-      if (subject) {
-        return subject;
+    if (conversation.data.channelDetail.dataType === 'sealed') {
+      return conversation.data.unsealedChannel?.subject;
+    }
+    else {
+      try {
+        let subject = JSON.parse(conversation.data.channelDetail.data).subject;
+        if (subject) {
+          return subject;
+        }
+      }
+      catch (err) {
+        console.log(err);
       }
     }
-    catch (err) {
-      return null;
-    }
+    return null;
   }
 
   const getContacts = (conversation) => {
@@ -199,16 +209,37 @@ export function useConversationContext() {
 
       if (curView === view.current) {
         let chan = getChannel();
-        let subject = getSubject(chan);
         let contacts = getContacts(chan);
+        let subject = getSubject(chan);
         let members = getMembers(chan);
         const enableImage = chan?.data?.channelDetail?.enableImage;
         const enableAudio = chan?.data?.channelDetail?.enableAudio;
         const enableVideo = chan?.data?.channelDetail?.enableVideo;
+        const sealed = chan?.data?.channelDetail?.dataType === 'sealed';
+
+        let logoUrl = null;
+        let logoImg = null;
+        if (!members?.size) {
+          subject = subject ? subject : "Notes";
+          logoImg = "solution";
+        }
+        else if (members.size > 1) {
+          subject = subject ? subject : "Group";
+          logoImg = "appstore";
+        }
+        else {
+          const contact = card.actions.getCardByGuid(members.values().next().value);
+          subject = subject ? subject : card.actions.getName(contact.id);
+          logoUrl = card.actions.getImageUrl(contact.id);
+        }
+
         updateState({
           init: true,
           error: false,
+          sealed,
           subject,
+          logoImg,
+          logoUrl,
           contacts,
           members,
           enableImage,

net/web/src/session/conversation/Conversation.jsx

@@ -41,7 +41,7 @@ export function Conversation({ closeConversation, openDetails, cardId, channelId
       <div class="header">
         <div class="title">
           <div class="logo">
-            <Logo img={state.image} url={state.logo} width={32} height={32} radius={4} />
+            <Logo img={state.logoImg} url={state.logoUrl} width={32} height={32} radius={4} />
           </div>
           <div class="label">{ state.subject }</div>
           { state.error && state.display === 'small' && (

net/web/src/session/conversation/addTopic/AddTopic.jsx

@@ -104,22 +104,24 @@ export function AddTopic({ cardId, channelId }) {
             value={state.messageText} autocapitalize="none" />
       </div>
       <div class="buttons">
-        { state.enableImage && (
+        { !state.sealed && state.enableImage && (
           <div class="button space" onClick={() => attachImage.current.click()}>
             <PictureOutlined />
           </div> 
         )}
-        { state.enableVideo && (
+        { !state.sealed && state.enableVideo && (
           <div class="button space" onClick={() => attachVideo.current.click()}>
             <VideoCameraOutlined />
           </div> 
         )}
-        { state.enableAudio && (
+        { !state.sealed && state.enableAudio && (
           <div class="button space" onClick={() => attachAudio.current.click()}>
             <SoundOutlined />
           </div> 
         )}
-        <div class="bar space" />
+        { !state.sealed && (
+          <div class="bar space" />
+        )}
         <div class="button space">
           <Dropdown overlay={picker} overlayStyle={{ minWidth: 0 }} trigger={['click']} placement="top">
             <FontColorsOutlined />

net/web/src/session/conversation/addTopic/useAddTopic.hook.js

@@ -9,6 +9,7 @@ export function useAddTopic(cardId, channelId) {
     enableImage: null,
     enableAudio: null,
     enableVideo: null,
+    sealed: false,
     assets: [],
     messageText: null,
     textColor: '#444444',
@@ -49,8 +50,8 @@ export function useAddTopic(cardId, channelId) {
   }
 
   useEffect(() => {
-    const { enableImage, enableAudio, enableVideo } = conversation.state;
-    updateState({ enableImage, enableAudio, enableVideo });
+    const { enableImage, enableAudio, enableVideo, sealed } = conversation.state;
+    updateState({ enableImage, enableAudio, enableVideo, sealed });
   }, [conversation]);
 
   const actions = {

net/web/src/session/conversation/useConversation.hook.js

@@ -10,7 +10,6 @@ export function useConversation(cardId, channelId) {
 
   const [state, setState] = useState({
     display: null,
-    image: null,
     logo: null,
     subject: null,
     topics: [],
@@ -69,41 +68,6 @@ export function useConversation(cardId, channelId) {
     updateState({ upload: active, uploadError, uploadPercent });
   }, [cardId, channelId, upload]);
 
-  useEffect(() => {
-
-    let chan, image, subject, logo; 
-    if (cardId) {
-      const cardChan = card.state.cards.get(cardId);
-      if (cardChan) {
-        chan = cardChan.channels.get(channelId);
-      }
-    }
-    else {
-      chan = channel.state.channels.get(channelId);
-    }
-
-    if (chan) {
-      if (!chan.contacts?.length) {
-        image = 'solution';
-        subject = 'Notes';
-      }
-      else if (chan.contacts.length > 1) {
-        image = 'appstore'
-        subject = 'Group';
-      }
-      else {
-        logo = card.actions.getImageUrl(chan.contacts[0]?.id);
-        subject = card.actions.getName(chan.contacts[0]?.id);
-      }
-      const parsed = JSON.parse(chan.data.channelDetail.data);
-      if (parsed.subject) {
-        subject = parsed.subject;
-      }
-    }
-
-    updateState({ image, subject, logo });
-  }, [cardId, channelId, card, channel]);
-
   useEffect(() => {
     updateState({ topics: [] });
     conversation.actions.setConversationId(cardId, channelId);
@@ -122,8 +86,8 @@ export function useConversation(cardId, channelId) {
       }
       return 1;
     });
-    const { error, loadingInit, loadingMore } = conversation.state;
-    updateState({ topics, error, loadingInit, loadingMore });
+    const { error, loadingInit, loadingMore, subject, logoUrl, logoImg } = conversation.state;
+    updateState({ topics, error, loadingInit, loadingMore, subject, logoUrl, logoImg });
     store.actions.setValue(`${channelId}::${cardId}`, Number(conversation.state.revision));
     // eslint-disable-next-line 
   }, [conversation]);