From 498413642aca9184865621e0347da246ec0e7d94 Mon Sep 17 00:00:00 2001 From: Roland Osborne Date: Thu, 2 Feb 2023 14:31:04 -0800 Subject: [PATCH] fix some rendering flicker on conversation titile --- app/mobile/test/Profile.test.js | 3 --- net/web/src/session/cards/Cards.jsx | 7 ++----- net/web/src/session/cards/useCards.hook.js | 7 ++++++- .../conversation/channelHeader/ChannelHeader.jsx | 1 + .../channelHeader/useChannelHeader.hook.js | 11 ++++++++--- .../session/conversation/useConversation.hook.js | 4 +--- net/web/src/session/details/Details.jsx | 2 +- net/web/src/session/details/useDetails.hook.js | 13 +++++++++---- 8 files changed, 28 insertions(+), 20 deletions(-) diff --git a/app/mobile/test/Profile.test.js b/app/mobile/test/Profile.test.js index cfb43084..fc34f6ac 100644 --- a/app/mobile/test/Profile.test.js +++ b/app/mobile/test/Profile.test.js @@ -161,7 +161,6 @@ test('testing', async () => { }); const renderCount = screen.getByTestId('profile').props.renderCount; -console.log("RENDER COUNT:", renderCount); await act(async () => { identity = { name: 'renderer' }; @@ -169,8 +168,6 @@ console.log("RENDER COUNT:", renderCount); await profile.actions.setRevision(2048); }); -console.log(renderCount); - await act(async () => { expect(screen.getByTestId('profile').props.renderCount).toBe(renderCount + 1); }); diff --git a/net/web/src/session/cards/Cards.jsx b/net/web/src/session/cards/Cards.jsx index c690672d..58662dab 100644 --- a/net/web/src/session/cards/Cards.jsx +++ b/net/web/src/session/cards/Cards.jsx @@ -1,4 +1,4 @@ -import { Input, List } from 'antd'; +import { Input, List, Button } from 'antd'; import { CardsWrapper } from './Cards.styled'; import { SortAscendingOutlined, UpOutlined, DoubleRightOutlined, UserOutlined, SearchOutlined } from '@ant-design/icons'; import { useCards } from './useCards.hook'; @@ -27,10 +27,7 @@ export function Cards({ closeCards, openContact, openListing }) { { state.display === 'small' && (
-
- -
New
-
+
)} { state.display !== 'small' && ( diff --git a/net/web/src/session/cards/useCards.hook.js b/net/web/src/session/cards/useCards.hook.js index b09e6dbf..02ef1fe5 100644 --- a/net/web/src/session/cards/useCards.hook.js +++ b/net/web/src/session/cards/useCards.hook.js @@ -10,7 +10,7 @@ export function useCards() { const [state, setState] = useState({ tooltip: false, sorted: false, - display: null, + display: 'small', cards: [], }); @@ -22,6 +22,11 @@ export function useCards() { setState((s) => ({ ...s, ...value })); } + useEffect(() => { + const { display } = viewport.state; + updateState({ display }); + }, [viewport.state]); + useEffect(() => { const contacts = Array.from(card.state.cards.values()).map(item => { const profile = item?.data?.cardProfile; diff --git a/net/web/src/session/conversation/channelHeader/ChannelHeader.jsx b/net/web/src/session/conversation/channelHeader/ChannelHeader.jsx index cdea22ec..be77f811 100644 --- a/net/web/src/session/conversation/channelHeader/ChannelHeader.jsx +++ b/net/web/src/session/conversation/channelHeader/ChannelHeader.jsx @@ -3,6 +3,7 @@ import { ChannelHeaderWrapper, StatusError } from './ChannelHeader.styled'; import { ExclamationCircleOutlined, SettingOutlined, CloseOutlined } from '@ant-design/icons'; import { Tooltip } from 'antd'; import { Logo } from 'logo/Logo'; +import { useEffect } from 'react'; export function ChannelHeader({ closeConversation, openDetails, contentKey }) { diff --git a/net/web/src/session/conversation/channelHeader/useChannelHeader.hook.js b/net/web/src/session/conversation/channelHeader/useChannelHeader.hook.js index 03e735e5..8cb32456 100644 --- a/net/web/src/session/conversation/channelHeader/useChannelHeader.hook.js +++ b/net/web/src/session/conversation/channelHeader/useChannelHeader.hook.js @@ -99,9 +99,14 @@ export function useChannelHeader(contentKey) { let title; try { const detail = channelValue?.data?.channelDetail; - if (detail?.dataType === 'sealed' && contentKey) { - const unsealed = decryptChannelSubject(detail.data, contentKey); - title = unsealed.subject; + if (detail?.dataType === 'sealed') { + if (contentKey) { + const unsealed = decryptChannelSubject(detail.data, contentKey); + title = unsealed.subject; + } + else { + title = '...'; + } } else if (detail?.dataType === 'superbasic') { const data = JSON.parse(detail.data); diff --git a/net/web/src/session/conversation/useConversation.hook.js b/net/web/src/session/conversation/useConversation.hook.js index b56b3a2a..02c16da5 100644 --- a/net/web/src/session/conversation/useConversation.hook.js +++ b/net/web/src/session/conversation/useConversation.hook.js @@ -51,7 +51,7 @@ export function useConversation(cardId, channelId) { const seals = getChannelSeals(data); if (isUnsealed(seals, sealKey)) { const contentKey = getContentKey(seals, sealKey); - updateState({ sealed: true, contentKey }); + updateState({ sealed: true, wtf: true, contentKey }); } else { updateState({ sealed: true, contentKey: null }); @@ -105,7 +105,6 @@ export function useConversation(cardId, channelId) { const { card, channel } = conversationId.current; loading.current = true; conversationId.current = null; - updateState({ contentKey: null }); await conversation.actions.setChannel(card, channel); loading.current = false; await setChannel(); @@ -258,7 +257,6 @@ export function useConversation(cardId, channelId) { updateTopic: async (topic, text) => { const { assets, textSize, textColor } = topic; const message = { text, textSize, textColor, assets }; - console.log("UPDATE", message); if (!state.busy) { updateState({ busy: true }); diff --git a/net/web/src/session/details/Details.jsx b/net/web/src/session/details/Details.jsx index 3dbb3577..01671a24 100644 --- a/net/web/src/session/details/Details.jsx +++ b/net/web/src/session/details/Details.jsx @@ -129,7 +129,7 @@ export function Details({ closeDetails, closeConversation, openContact }) { { modalContext }
-
Topic
+
Topic Details
{ state.display === 'xlarge' && (
diff --git a/net/web/src/session/details/useDetails.hook.js b/net/web/src/session/details/useDetails.hook.js index 2e00b1fb..75400ddf 100644 --- a/net/web/src/session/details/useDetails.hook.js +++ b/net/web/src/session/details/useDetails.hook.js @@ -25,7 +25,7 @@ export function useDetails() { showEditSubject: false, editSubject: null, - display: null, + display: 'small', sealed: false, contentKey: null, seals: null, @@ -167,9 +167,14 @@ export function useDetails() { let title; try { const detail = channelValue?.data?.channelDetail; - if (detail?.dataType === 'sealed' && state.contentKey) { - const unsealed = decryptChannelSubject(detail.data, state.contentKey); - title = unsealed.subject; + if (detail?.dataType === 'sealed') { + if (state.contentKey) { + const unsealed = decryptChannelSubject(detail.data, state.contentKey); + title = unsealed.subject; + } + else { + title = '...'; + } } else if (detail?.dataType === 'superbasic') { const data = JSON.parse(detail.data);