refactor conversation item in sidebar

net/web/src/User/SideBar/Contacts/Channels/ChannelItem/ChannelLabel/ChannelLabel.jsx

@@ -6,29 +6,42 @@ import { HomeOutlined, DatabaseOutlined } from '@ant-design/icons';
 export function ChannelLabel({ item }) {
 
   const [host, setHost] = useState(null);
-  const [members, setMembers] = useState([]);
   const [subject, setSubject] = useState('');
+  const [message, setMessage] = useState('');
 
   const { state, actions } = useChannelLabel();
 
   useEffect(() => {
-    
+
+    try {
+      if (item.data.channelSummary.lastTopic.dataType === 'superbasictopic') {
+        let msg = JSON.parse(item.data.channelSummary.lastTopic.data);
+        setMessage(msg.text);
+      }
+      else {
+        setMessage('');
+      }
+    }
+    catch (err) {
+      console.log(err);
+      setMessage('');
+    }
+ 
     let contacts = []; 
     if (item?.guid) {
-      setHost(actions.getCardByGuid(item.guid));
+      setHost(false);
+      contacts.push(actions.getCardByGuid(item.guid)?.data?.cardProfile?.handle);
       for (let member of item.data.channelDetail.members) {
         if (member != state.guid) {
-          contacts.push(actions.getCardByGuid(member));
+          contacts.push(actions.getCardByGuid(member)?.data?.cardProfile?.handle);
         }
       }
-      setMembers(contacts);
     }
     else {
-      setHost(null); 
+      setHost(true); 
       for (let member of item.data.channelDetail.members) {
-        contacts.push(actions.getCardByGuid(member));
+        contacts.push(actions.getCardByGuid(member)?.data?.cardProfile?.handle);
       }
-      setMembers(contacts);
     }
 
     if (item?.data?.channelDetail?.data) {
@@ -38,34 +51,23 @@ export function ChannelLabel({ item }) {
         return
       }
     }
-
-    let names = ''
-    for (let contact of contacts) {
-      if (contact != null) {
-        if (names != '') {
-          names += ', ';
-        }
-        names += contact.data.cardProfile.handle;
-      }
-    }
-    if (names != '') {
-      names = '[' + names + ']';
-    }
-    setSubject(names)
-
+    setSubject(contacts.join(', '));
   }, [item, state]);
 
   const Host = () => {
     if (host) {
-      return (<div><DatabaseOutlined />&nbsp;{ host.data.cardProfile.handle }</div>)
+      return <HomeOutlined />
     }
-    return <HomeOutlined />
+    return <DatabaseOutlined />
   }
 
   return (
     <LabelWrapper>
-      <div class="subject">{subject}</div>
-      <div class="host"><Host /></div>
+      <div class="title">
+        <div class="subject">{subject}</div>
+        <Host />
+      </div>
+      <div class="message">{message}</div>
     </LabelWrapper>
   )
 }

net/web/src/User/SideBar/Contacts/Channels/ChannelItem/ChannelLabel/ChannelLabel.styled.js

@@ -2,21 +2,37 @@ import styled from 'styled-components';
 
 export const LabelWrapper = styled.div`
   display: flex;
+  width: calc(100% - 48px);
   flex-direction: column;
   justify-content: center;
   flex-grow: 1;
-  padding-right: 8px;
   overflow: hidden;
   color: #444444;
 
-  .subject {
+  .title {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    .subject {
+      flex-grow: 1;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      text-align: right;
+      padding-right: 8px;
+      font-weight: bold;
+    }
+  }
+
+  .message {
+    flex-grow: 1;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     text-align: right;
+    padding-right: 8px;
+    color: #888888;
   }
 
-  .host {
-    text-align: right;
-  }
 `;

net/web/src/User/SideBar/Contacts/Channels/ChannelItem/ChannelLabel/useChannelLabel.hook.js

@@ -1,5 +1,6 @@
 import { useContext, useState, useEffect } from 'react';
 import { CardContext } from 'context/CardContext';
+import { ChannelContext } from 'context/ChannelContext';
 import { ProfileContext } from 'context/ProfileContext';
 import { getCardImageUrl } from 'api/getCardImageUrl';
 
@@ -10,6 +11,7 @@ export function useChannelLabel() {
   });
 
   const card = useContext(CardContext);
+  const channel = useContext(ChannelContext);
   const profile = useContext(ProfileContext);
 
   const actions = {
@@ -24,7 +26,7 @@ export function useChannelLabel() {
     if (card.state.init && profile.state.init) {
       updateState({ guid: profile.state.profile.guid });
     }
-  }, [card, profile])
+  }, [channel, card, profile])
 
   return { state, actions };
 }

net/web/src/User/SideBar/Contacts/Channels/useChannels.hook.js

@@ -25,9 +25,6 @@ export function useChannels() {
   const channel = useContext(ChannelContext);
 
   const actions = {
-    select: (channel) => {
-      navigate(`/user/channel/${channel.id}`);
-    },
     getCardImageUrl: card.actions.getImageUrl,
     getCards: () => {
       let cards = Array.from(card.state.cards.values())
@@ -41,8 +38,9 @@ export function useChannels() {
       if (!state.busy) {
         updateState({ busy: true });
         try {
-          await channel.actions.addChannel(state.startCards, state.startSubject, state.startDescription);
+          let added = await channel.actions.addChannel(state.startCards, state.startSubject, state.startDescription);
           done = true;
+          navigate(`/user/conversation/${added.id}`);
         }
         catch (err) {
           window.alert(err);
@@ -77,10 +75,6 @@ export function useChannels() {
       }
       return 1;
     });
-for (let i = 0; i < merged.length; i++) {
-  console.log(merged[i]);
-  console.log(merged[i]?.data?.channelSummary?.lastTopic?.created);
-}
     updateState({ channels: merged });
   }, [channel])
 

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

@@ -86,14 +86,14 @@ export function useChannelContext() {
       setChannels(rev);
     },
     addChannel: async (cards, subject, description) => {
-      await addChannel(access.current, cards, subject, description);
+      return await addChannel(access.current, cards, subject, description);
     },
     addChannelTopic: async (channelId, message, assets) => {
       await addChannelTopic(access.current, channelId, message, assets);
     },
     getChannelRevision: (channelId) => {
       let channel = channels.current.get(channelId);
-      return channel.revision;
+      return channel?.revision;
     },
     getChannelTopics: async (channelId, revision) => {
       return await getChannelTopics(access.current, channelId, revision);