diff --git a/net/web/src/User/SideBar/Contacts/Channels/ChannelItem/ChannelLabel/ChannelLabel.jsx b/net/web/src/User/SideBar/Contacts/Channels/ChannelItem/ChannelLabel/ChannelLabel.jsx index 5c8a1bfa..994d30e4 100644 --- a/net/web/src/User/SideBar/Contacts/Channels/ChannelItem/ChannelLabel/ChannelLabel.jsx +++ b/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 (
 { host.data.cardProfile.handle }
) + return } - return + return } return ( -
{subject}
-
+
+
{subject}
+ +
+
{message}
) } diff --git a/net/web/src/User/SideBar/Contacts/Channels/ChannelItem/ChannelLabel/ChannelLabel.styled.js b/net/web/src/User/SideBar/Contacts/Channels/ChannelItem/ChannelLabel/ChannelLabel.styled.js index bea82789..833025b1 100644 --- a/net/web/src/User/SideBar/Contacts/Channels/ChannelItem/ChannelLabel/ChannelLabel.styled.js +++ b/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; - } `; diff --git a/net/web/src/User/SideBar/Contacts/Channels/ChannelItem/ChannelLabel/useChannelLabel.hook.js b/net/web/src/User/SideBar/Contacts/Channels/ChannelItem/ChannelLabel/useChannelLabel.hook.js index 475b6270..9aa8c666 100644 --- a/net/web/src/User/SideBar/Contacts/Channels/ChannelItem/ChannelLabel/useChannelLabel.hook.js +++ b/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 }; } diff --git a/net/web/src/User/SideBar/Contacts/Channels/useChannels.hook.js b/net/web/src/User/SideBar/Contacts/Channels/useChannels.hook.js index 14e3b3db..592244b0 100644 --- a/net/web/src/User/SideBar/Contacts/Channels/useChannels.hook.js +++ b/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]) diff --git a/net/web/src/context/useChannelContext.hook.js b/net/web/src/context/useChannelContext.hook.js index 1e58b4c9..110ae2c0 100644 --- a/net/web/src/context/useChannelContext.hook.js +++ b/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);