diff --git a/net/web/src/session/channels/channelItem/ChannelItem.jsx b/net/web/src/session/channels/channelItem/ChannelItem.jsx index 0d83ed55..8d7dc8cd 100644 --- a/net/web/src/session/channels/channelItem/ChannelItem.jsx +++ b/net/web/src/session/channels/channelItem/ChannelItem.jsx @@ -10,7 +10,7 @@ export function ChannelItem({ item, openChannel, active }) {
- +
diff --git a/net/web/src/session/channels/channelItem/ChannelItem.styled.js b/net/web/src/session/channels/channelItem/ChannelItem.styled.js index 178a4a48..d140b01e 100644 --- a/net/web/src/session/channels/channelItem/ChannelItem.styled.js +++ b/net/web/src/session/channels/channelItem/ChannelItem.styled.js @@ -23,6 +23,10 @@ export const ChannelItemWrapper = styled.div` align-item: center; } + .idle { + width: 100%; + } + .item { display: flex; flex-direction: row; @@ -35,7 +39,6 @@ export const ChannelItemWrapper = styled.div` display: flex; align-items: center; justify-content: center; - border: 1px solid ${Colors.grey}; border-radius: 8px; font-size: 18px; flex-shrink: 0; @@ -48,7 +51,7 @@ export const ChannelItemWrapper = styled.div` border: 1px solid ${Colors.grey}; width: 32px; height: 32px; - border-radius: 8px; + border-radius: 4px; font-size: 18px; flex-shrink: 0; } @@ -84,5 +87,5 @@ export const Markup = styled.div` background-color: ${Colors.background}; width: 8px; height: 8px; - margin-right: 16px; + margin-right: 8px; `; diff --git a/net/web/src/session/channels/useChannels.hook.js b/net/web/src/session/channels/useChannels.hook.js index d8b8d7dc..1b4c895c 100644 --- a/net/web/src/session/channels/useChannels.hook.js +++ b/net/web/src/session/channels/useChannels.hook.js @@ -6,7 +6,7 @@ import { AccountContext } from 'context/AccountContext'; import { ViewportContext } from 'context/ViewportContext'; import { ProfileContext } from 'context/ProfileContext'; import { getCardByGuid } from 'context/cardUtil'; -import { isUnsealed, getChannelSeals, getContentKey, decryptChannelSubject } from 'context/sealUtil'; +import { isUnsealed, getChannelSeals, getContentKey, decryptChannelSubject, decryptTopicSubject } from 'context/sealUtil'; export function useChannels() { @@ -111,6 +111,7 @@ export function useChannels() { else { item.unlocked = false; item.contentKey = null; + item.subject = null; } } catch(err) { @@ -127,6 +128,7 @@ export function useChannels() { } catch(err) { console.log(err); + item.subject = null; } } if (item.subject == null) { @@ -138,7 +140,33 @@ export function useChannels() { } const syncChannelSummary = (item, channelValue) => { - item.updated = channelValue.data?.channelSummary?.lastTopic?.created; + + const topic = channelValue.data?.channelSummary?.lastTopic; + item.updated = topic?.created; + if (topic?.dataType === 'superbasictopic') { + try { + const data = JSON.parse(topic.data); + item.message = data.text; + } + catch (err) { + console.log(err); + } + } + else if (topic?.dataType === 'sealedtopic') { + try { + if (item.contentKey) { + const unsealed = decryptTopicSubject(topic.data, item.contentKey); + item.message = unsealed?.message?.text; + } + else { + item.message = null; + } + } + catch(err) { + console.log(err); + item.message = null; + } + } // set updated revision item.topicRevision = channelValue.data.topicRevision; @@ -176,7 +204,6 @@ export function useChannels() { } item.sealKey = sealKey; const revision = store.state[key]; -console.log("> ", channelValue.id, topicRevision, revision); if (login && item.updated && item.updated > login && topicRevision !== revision) { item.updatedFlag = true; } @@ -203,7 +230,6 @@ console.log("> ", channelValue.id, topicRevision, revision); } item.sealKey = sealKey; const revision = store.state[key]; -console.log("> ", channelValue.id, topicRevision, revision); if (login && item.updated && item.updated > login && topicRevision !== revision) { item.updatedFlag = true; } @@ -228,8 +254,18 @@ console.log("> ", channelValue.id, topicRevision, revision); }); const filtered = merged.filter((item) => { - const subject = item.subject?.toUpperCase(); - return !filter || subject?.includes(filter); + if (filter) { + const subject = item.subject?.toUpperCase(); + if (subject) { + return subject.includes(filter); + } + else { + return false; + } + } + else { + return true; + } }); updateState({ channels: filtered }); @@ -287,7 +323,7 @@ console.log("> ", channelValue.id, topicRevision, revision); } }, onFilter: (value) => { - updateState({ filter: value.toUpperCase() }); + setFilter(value?.toUpperCase()); }, setShowAdd: () => { updateState({ showAdd: true, seal: false, members: new Set(), subject: null });