diff --git a/net/web/src/context/useCardContext.hook.js b/net/web/src/context/useCardContext.hook.js index 82bbfd23..990fc67f 100644 --- a/net/web/src/context/useCardContext.hook.js +++ b/net/web/src/context/useCardContext.hook.js @@ -264,6 +264,13 @@ export function useCardContext() { } return getCardImageUrl(access.current, cardId, card.data.profileRevision) }, + getName: (cardId) => { + let card = cards.current.get(cardId); + if (!card) { + return null; + } + return card.data.cardProfile.name; + }, removeChannel: async (cardId, channelId) => { let { cardProfile, cardDetail } = cards.current.get(cardId).data; let token = cardProfile.guid + '.' + cardDetail.token; diff --git a/net/web/src/session/Session.jsx b/net/web/src/session/Session.jsx index 6d838d9a..c4cdaead 100644 --- a/net/web/src/session/Session.jsx +++ b/net/web/src/session/Session.jsx @@ -80,7 +80,9 @@ export function Session() {
{ state.conversation && (
- +
)} { state.contact && ( @@ -132,7 +134,9 @@ export function Session() { { state.conversation && (
- +
)} @@ -172,7 +176,8 @@ export function Session() {
{ state.conversation && (
- +
)} { state.details && ( diff --git a/net/web/src/session/conversation/Conversation.jsx b/net/web/src/session/conversation/Conversation.jsx index b9146293..d086959e 100644 --- a/net/web/src/session/conversation/Conversation.jsx +++ b/net/web/src/session/conversation/Conversation.jsx @@ -1,6 +1,33 @@ import { ConversationWrapper } from './Conversation.styled'; +import { SettingOutlined, RightOutlined, CloseOutlined } from '@ant-design/icons'; +import { useConversation } from './useConversation.hook'; +import { Logo } from 'logo/Logo'; -export function Conversation({ openDetails }) { - return CONVERSATION +export function Conversation({ closeConversation, openDetails, cardId, channelId }) { + + const { state, actions } = useConversation(cardId, channelId); + +console.log(state); + + return ( + +
+
+ +
{ state.subject }
+ { state.display !== 'xlarge' && ( +
+ +
+ )} +
+ { state.display !== 'xlarge' && ( +
+ +
+ )} +
+ + ); } diff --git a/net/web/src/session/conversation/Conversation.styled.js b/net/web/src/session/conversation/Conversation.styled.js index 70952f51..d3582759 100644 --- a/net/web/src/session/conversation/Conversation.styled.js +++ b/net/web/src/session/conversation/Conversation.styled.js @@ -6,5 +6,38 @@ export const ConversationWrapper = styled.div` width: 100%; display: flex; flex-direction: column; - background-color: ${Colors.statsForm}; + background-color: ${Colors.profileForm}; + + .header { + margin-left: 16px; + margin-right: 16px; + height: 48px; + border-bottom: 1px solid ${Colors.profileDivider}; + display: flex; + flex-direction: row; + align-items: center; + flex-shrink: 0; + + .title { + font-size: 18px; + font-weight: bold; + flex-grow: 1; + padding-left: 16px; + display: flex; + flex-direction: row; + align-items: center; + + .label { + padding-left: 8px; + } + } + + .button { + font-size: 18px; + color: ${Colors.grey}; + cursor: pointer; + padding-right: 16px; + padding-left: 16px; + } + } ` diff --git a/net/web/src/session/conversation/useConversation.hook.js b/net/web/src/session/conversation/useConversation.hook.js new file mode 100644 index 00000000..07131be2 --- /dev/null +++ b/net/web/src/session/conversation/useConversation.hook.js @@ -0,0 +1,68 @@ +import { useContext, useState, useEffect } from 'react'; +import { ViewportContext } from 'context/ViewportContext'; +import { CardContext } from 'context/CardContext'; +import { ChannelContext } from 'context/ChannelContext'; + +export function useConversation(cardId, channelId) { + + const [state, setState] = useState({ + display: null, + image: null, + logo: null, + subject: null, + }); + + const viewport = useContext(ViewportContext); + const card = useContext(CardContext); + const channel = useContext(ChannelContext); + + const updateState = (value) => { + setState((s) => ({ ...s, ...value })); + } + + useEffect(() => { + updateState({ display: viewport.state.display }); + }, [viewport]); + + useEffect(() => { + + let chan, image, subject, logo; + if (cardId) { + const cardChan = card.state.cards.get(cardId); + if (cardChan) { + chan = cardChan.channels.get(channelId); + } + } + else { + chan = channel.state.channels.get(channelId); + } + + if (chan) { + if (!chan.contacts?.length) { + image = 'solution'; + subject = 'Private'; + } + else if (chan.contacts.length > 1) { + image = 'appstore' + subject = 'Group'; + } + else { + logo = card.actions.getImageUrl(chan.contacts[0]?.id); + subject = card.actions.getName(chan.contacts[0]?.id); + } + const parsed = JSON.parse(chan.data.channelDetail.data); + if (parsed.subject) { + subject = parsed.subject; + } + } + + updateState({ image, subject, logo }); + }, [cardId, channelId, card, channel]); + + + const actions = { + }; + + return { state, actions }; +} + diff --git a/net/web/src/session/details/Details.jsx b/net/web/src/session/details/Details.jsx index c3433838..16b3cb66 100644 --- a/net/web/src/session/details/Details.jsx +++ b/net/web/src/session/details/Details.jsx @@ -1,6 +1,6 @@ import { Space, Button, Modal } from 'antd'; import { DetailsWrapper, ModalFooter } from './Details.styled'; -import { DoubleRightOutlined } from '@ant-design/icons'; +import { DoubleRightOutlined, RightOutlined, CloseOutlined } from '@ant-design/icons'; import { useDetails } from './useDetails.hook'; import { Logo } from 'logo/Logo'; import { EditOutlined, ExclamationCircleOutlined } from '@ant-design/icons'; @@ -94,9 +94,21 @@ export function Details({ cardId, channelId, closeDetails, closeConversation, op
Channel
-
- -
+ { state.display === 'xlarge' && ( +
+ +
+ )} + { state.display === 'small' && ( +
+ +
+ )} + { state.display !== 'small' && state.display !== 'xlarge' && ( +
+ +
+ )}
diff --git a/net/web/src/session/details/Details.styled.js b/net/web/src/session/details/Details.styled.js index a0cfc9bc..346fa7a4 100644 --- a/net/web/src/session/details/Details.styled.js +++ b/net/web/src/session/details/Details.styled.js @@ -77,6 +77,7 @@ export const DetailsWrapper = styled.div` width: 100%; .logo { + height: fit-content; flex-shrink: 0; width: 40%; display: flex; diff --git a/net/web/src/session/details/useDetails.hook.js b/net/web/src/session/details/useDetails.hook.js index 5717b6e3..35cd083c 100644 --- a/net/web/src/session/details/useDetails.hook.js +++ b/net/web/src/session/details/useDetails.hook.js @@ -1,6 +1,7 @@ import { useContext, useState, useEffect, useRef } from 'react'; import { CardContext } from 'context/CardContext'; import { ChannelContext } from 'context/ChannelContext'; +import { ViewportContext } from 'context/ViewportContext'; export function useDetails(cardId, channelId) { @@ -18,15 +19,21 @@ export function useDetails(cardId, channelId) { busy: false, subjectUpdate: null, unknown: 0, + display: null, }); const card = useContext(CardContext); const channel = useContext(ChannelContext); - + const viewport = useContext(ViewportContext); + const updateState = (value) => { setState((s) => ({ ...s, ...value })); } + useEffect(() => { + updateState({ display: viewport.state.display }); + }, [viewport]); + useEffect(() => { let img, subject, subjectUpdate, host, started, contacts let chan;