From 6365145df7abe00fcfeb1f2bdf1ad54160603903 Mon Sep 17 00:00:00 2001 From: Roland Osborne Date: Tue, 9 Aug 2022 22:41:40 -0700 Subject: [PATCH] rendering channel icon and subject --- net/web/src/session/Session.styled.js | 1 + net/web/src/session/channels/Channels.jsx | 5 +- .../src/session/channels/Channels.styled.js | 7 +- .../channels/channelItem/ChannelItem.jsx | 33 ++++++---- .../channelItem/ChannelItem.styled.js | 41 ++++++++---- .../channelItem/useChannelItem.hook.js | 36 ----------- .../src/session/channels/useChannels.hook.js | 64 ++++++++++++++++++- 7 files changed, 115 insertions(+), 72 deletions(-) delete mode 100644 net/web/src/session/channels/channelItem/useChannelItem.hook.js diff --git a/net/web/src/session/Session.styled.js b/net/web/src/session/Session.styled.js index 35f4fd73..e8009690 100644 --- a/net/web/src/session/Session.styled.js +++ b/net/web/src/session/Session.styled.js @@ -79,6 +79,7 @@ export const SessionWrapper = styled.div` .bottom { height: 48px; position: relative; + box-shadow: 0px -8px 16px 0px rgba(0,0,0,0.3); } } `; diff --git a/net/web/src/session/channels/Channels.jsx b/net/web/src/session/channels/Channels.jsx index 3f7d4858..ef236bdc 100644 --- a/net/web/src/session/channels/Channels.jsx +++ b/net/web/src/session/channels/Channels.jsx @@ -8,13 +8,12 @@ export function Channels() { const { state, actions } = useChannels(); -console.log(state); - return (
- } /> + } + size="large" spellCheck="false" onChange={(e) => actions.onFilter(e.target.value)} />
diff --git a/net/web/src/session/channels/Channels.styled.js b/net/web/src/session/channels/Channels.styled.js index 02ab8aab..9352aadd 100644 --- a/net/web/src/session/channels/Channels.styled.js +++ b/net/web/src/session/channels/Channels.styled.js @@ -8,9 +8,11 @@ export const ChannelsWrapper = styled.div` flex-direction: column; background-color: ${Colors.formBackground}; min-height: 0; + overflow: scroll; .search { - padding: 8px; + padding: 16px; + border-bottom: 1px solid ${Colors.divider}; .filter { border: 1px solid ${Colors.divider}; @@ -20,6 +22,5 @@ export const ChannelsWrapper = styled.div` } .results { - min-height: 0; - overflow: scroll; + } `; diff --git a/net/web/src/session/channels/channelItem/ChannelItem.jsx b/net/web/src/session/channels/channelItem/ChannelItem.jsx index 211ba2c3..9a5f068c 100644 --- a/net/web/src/session/channels/channelItem/ChannelItem.jsx +++ b/net/web/src/session/channels/channelItem/ChannelItem.jsx @@ -1,29 +1,36 @@ import { ChannelItemWrapper } from './ChannelItem.styled'; -import { useChannelItem } from './useChannelItem.hook'; -import { SolutionOutlined } from '@ant-design/icons'; +import { Logo } from 'logo/Logo'; +import { AppstoreFilled, SolutionOutlined } from '@ant-design/icons'; export function ChannelItem({ item }) { - const { state, actions } = useChannelItem(item); +console.log(item.contacts); return ( - { state.contacts.length === 0 && ( -
+ { item.contacts.length === 0 && ( +
-
-
-
-
+
{ item.subject }
)} - { state.contacts.length === 1 && ( -
PERSONAL
+ { item.contacts.length === 1 && ( +
+ +
{ item.subject }
+
+
)} - { state.contacts.length > 1 && ( -
GROUP
+ { item.contacts.length > 1 && ( +
+ +
{ item.subject }
+
+
)} ) diff --git a/net/web/src/session/channels/channelItem/ChannelItem.styled.js b/net/web/src/session/channels/channelItem/ChannelItem.styled.js index bcc986fc..9bc76e86 100644 --- a/net/web/src/session/channels/channelItem/ChannelItem.styled.js +++ b/net/web/src/session/channels/channelItem/ChannelItem.styled.js @@ -5,25 +5,38 @@ export const ChannelItemWrapper = styled.div` height: 48px; width: 100%; display: flex; - flex-direction: row; - flex-align: center; + align-items: center; border-bottom: 1px solid ${Colors.divider}; + padding-left: 16px; + padding-right: 16px; - .logo { + &:hover { + background-color: ${Colors.formHover}; + cursor: pointer; + } + + .item { display: flex; + flex-direction: row; align-items: center; - justify-content: center; - border: 1px solid ${Colors.grey}; - width: 32px; - height: 32px; - border-radius: 8px; - font-size: 18px; - } - .subject { - flex-grow: 1; - } + .logo { + display: flex; + align-items: center; + justify-content: center; + border: 1px solid ${Colors.grey}; + width: 32px; + height: 32px; + border-radius: 8px; + font-size: 18px; + } - .markup { + .subject { + padding-left: 16px; + flex-grow: 1; + } + + .markup { + } } `; diff --git a/net/web/src/session/channels/channelItem/useChannelItem.hook.js b/net/web/src/session/channels/channelItem/useChannelItem.hook.js deleted file mode 100644 index b13e00ae..00000000 --- a/net/web/src/session/channels/channelItem/useChannelItem.hook.js +++ /dev/null @@ -1,36 +0,0 @@ -import { useContext, useState, useEffect } from 'react'; -import { ProfileContext } from 'context/ProfileContext'; -import { CardContext } from 'context/CardContext'; - -export function useChannelItem(item) { - - const [state, setState] = useState({ - contacts: [], - }); - - const profile = useContext(ProfileContext); - const card = useContext(CardContext); - - const updateState = (value) => { - setState((s) => ({ ...s, ...value })); - } - - const actions = { - }; - - - useEffect(() => { - let contacts = []; - if (item.guid != null && profile.state.profile.guid != item.guid) { - contacts.push(card.actions.getCardByGuid(item.guid)); - } - for (let guid of item.data.channelDetail?.members) { - if (guid != profile.state.profile.guid) { - contacts.push(card.actions.getCardByGuid(guid)); - } - } - updateState({ contacts }); - }, [profile, item]); - - return { state, actions }; -} diff --git a/net/web/src/session/channels/useChannels.hook.js b/net/web/src/session/channels/useChannels.hook.js index 1a220007..44c06afa 100644 --- a/net/web/src/session/channels/useChannels.hook.js +++ b/net/web/src/session/channels/useChannels.hook.js @@ -2,9 +2,12 @@ import { useContext, useState, useEffect } from 'react'; import { StoreContext } from 'context/StoreContext'; import { ChannelContext } from 'context/ChannelContext'; import { CardContext } from 'context/CardContext'; +import { ProfileContext } from 'context/ProfileContext'; export function useChannels() { + const [filter, setFilter] = useState(null); + const [state, setState] = useState({ channels: [], busy: false } @@ -13,12 +16,16 @@ export function useChannels() { const card = useContext(CardContext); const channel = useContext(ChannelContext); const store = useContext(StoreContext); + const profile = useContext(ProfileContext); const updateState = (value) => { setState((s) => ({ ...s, ...value })); } const actions = { + onFilter: (value) => { + setFilter(value.toUpperCase()); + }, }; const setUpdated = (chan) => { @@ -39,6 +46,46 @@ export function useChannels() { } } + const setContacts = (chan) => { + let contacts = []; + if (chan.guid != null && profile.state.profile.guid != chan.guid) { + contacts.push(card.actions.getCardByGuid(chan.guid)); + } + for (let guid of chan.data.channelDetail?.members) { + if (guid != profile.state.profile.guid) { + contacts.push(card.actions.getCardByGuid(guid)); + } + } + chan.contacts = contacts; + if (contacts.length === 1 && contacts[0]) { + chan.logo = card.actions.getImageUrl(contacts[0].id); + } + } + + const setSubject = (chan) => { + let subject = ""; + if (chan.data.channelDetail?.data) { + try { + subject = JSON.parse(chan.data.channelDetail?.data).subject; + } + catch (err) { + console.log(err); + } + } + if (!subject) { + let names = []; + for (let contact of chan.contacts) { + names.push(contact?.data?.cardProfile?.name); + } + subject = names.join(", "); + } + if (!subject && !chan.contacts?.length) { + subject = "notes"; + } + + chan.subject = subject; + } + useEffect(() => { let merged = []; card.state.cards.forEach((value, key, map) => { @@ -53,9 +100,20 @@ export function useChannels() { return 1; }); - merged.forEach(chan => { setUpdated(chan) }); - updateState({ channels: merged }); - }, [channel, card, store]); + merged.forEach(chan => { + setUpdated(chan); + setContacts(chan); + setSubject(chan); + }); + + const filtered = merged.filter((chan) => { + let subject = chan?.subject?.toUpperCase(); + return !filter || subject?.includes(filter); + }); + + updateState({ channels: filtered }); + + }, [channel, card, store, filter]); return { state, actions }; }