From cb983a69f046c4de68d5c7c6dd0c6fb72a2366eb Mon Sep 17 00:00:00 2001 From: Roland Osborne Date: Mon, 23 May 2022 15:10:33 -0700 Subject: [PATCH] adding membership control --- .../src/User/Conversation/Conversation.jsx | 16 ++++++- .../src/User/Conversation/Members/Members.jsx | 14 ++++++ .../Conversation/Members/Members.styled.jsx | 12 +++++ .../Conversation/Members/useMembers.hook.js | 46 +++++++++++++++++++ .../User/Conversation/useConversation.hook.js | 1 + .../context/useConversationContext.hook.js | 20 ++++++++ 6 files changed, 107 insertions(+), 2 deletions(-) create mode 100644 net/web/src/User/Conversation/Members/Members.jsx create mode 100644 net/web/src/User/Conversation/Members/Members.styled.jsx create mode 100644 net/web/src/User/Conversation/Members/useMembers.hook.js diff --git a/net/web/src/User/Conversation/Conversation.jsx b/net/web/src/User/Conversation/Conversation.jsx index 6f6776a5..f1042747 100644 --- a/net/web/src/User/Conversation/Conversation.jsx +++ b/net/web/src/User/Conversation/Conversation.jsx @@ -5,14 +5,16 @@ import { Button, Input, Checkbox, Modal, Spin } from 'antd' import { ConversationWrapper, ConversationButton, EditButton, CloseButton, ListItem, BusySpin } from './Conversation.styled'; import { AutoSizer, CellMeasurer, CellMeasurerCache, List } from 'react-virtualized'; import { AddTopic } from './AddTopic/AddTopic'; -import { VirtualList } from '../../VirtualList/VirtualList'; +import { VirtualList } from 'VirtualList/VirtualList'; import { TopicItem } from './TopicItem/TopicItem'; +import { Members } from './Members/Members'; import { EditOutlined, HomeOutlined, DatabaseOutlined } from '@ant-design/icons'; export function Conversation() { const { state, actions } = useConversation(); const [ showEdit, setShowEdit ] = useState(false); + const [ showMembers, setShowMembers ] = useState(false); const [ editSubject, setEditSubject ] = useState(null); const [ subject, setSubject ] = useState(null); @@ -39,6 +41,10 @@ export function Conversation() { setShowEdit(true); } + const onMembers = () => { + setShowMembers(true); + } + const Icon = () => { if (state.cardId) { return @@ -65,7 +71,7 @@ export function Conversation() {
- onEdit()}>Members + onMembers()}>Members actions.remove()}>Delete
+ setShowMembers(false)} + footer={[ + + ]} > + + onSaveSubject()} onCancel={() => setShowEdit(false)}> setEditSubject(e.target.value)} value={editSubject} /> diff --git a/net/web/src/User/Conversation/Members/Members.jsx b/net/web/src/User/Conversation/Members/Members.jsx new file mode 100644 index 00000000..23aec74b --- /dev/null +++ b/net/web/src/User/Conversation/Members/Members.jsx @@ -0,0 +1,14 @@ +import React, { useState, useEffect, useRef } from 'react' +import { useMembers } from './useMembers.hook'; + +export function Members({ host, members }) { + + const { state, actions } = useMembers({ host, members }); + + console.log(state); + + return ( +
MEMBERS
+ ) +} + diff --git a/net/web/src/User/Conversation/Members/Members.styled.jsx b/net/web/src/User/Conversation/Members/Members.styled.jsx new file mode 100644 index 00000000..1da5af30 --- /dev/null +++ b/net/web/src/User/Conversation/Members/Members.styled.jsx @@ -0,0 +1,12 @@ +import styled from 'styled-components'; + +export const MembersWrapper = styled.div` + display: flex; + width: 100%; + height: 100%; + background-color: #f6f5ed; + flex-direction: column; + align-items: center; + overflow: hidden; +`; + diff --git a/net/web/src/User/Conversation/Members/useMembers.hook.js b/net/web/src/User/Conversation/Members/useMembers.hook.js new file mode 100644 index 00000000..2648140f --- /dev/null +++ b/net/web/src/User/Conversation/Members/useMembers.hook.js @@ -0,0 +1,46 @@ +import { useContext, useState, useEffect, useRef } from 'react'; +import { useNavigate, useLocation, useParams } from "react-router-dom"; +import { CardContext } from 'context/CardContext'; + +export function useMembers({ host, members }) { + + const [state, setState] = useState({ + readonly: false, + contacts: [], + }); + + const card = useContext(CardContext); + + useEffect(() => { + let readonly; + if (host) { + readonly = true; + } + else { + readonly = false; + } + + let contacts = []; + if (readonly) { + members.forEach((value) => { + contacts.push({ member: true, card: card.actions.getCardByGuid(value) }); + }); + } + else { + card.state.cards.forEach((value, key, map) => { + contacts.push({ member: members.has(value.data.cardProfile.guid), card: value }); + }); + } + + updateState({ readonly, contacts }); + }, [host, members]); + + const updateState = (value) => { + setState((s) => ({ ...s, ...value })); + } + + const actions = { + }; + + return { state, actions }; +} diff --git a/net/web/src/User/Conversation/useConversation.hook.js b/net/web/src/User/Conversation/useConversation.hook.js index 4c3cab58..bb11351b 100644 --- a/net/web/src/User/Conversation/useConversation.hook.js +++ b/net/web/src/User/Conversation/useConversation.hook.js @@ -48,6 +48,7 @@ export function useConversation() { cardId: conversation.state.cardId, channelId: conversation.state.channelId, topics: Array.from(conversation.state.topics.values()), + members: conversation.state.members, }); }, [conversation]); diff --git a/net/web/src/context/useConversationContext.hook.js b/net/web/src/context/useConversationContext.hook.js index 31c99654..cfc6dc90 100644 --- a/net/web/src/context/useConversationContext.hook.js +++ b/net/web/src/context/useConversationContext.hook.js @@ -1,4 +1,5 @@ import { useEffect, useState, useRef, useContext } from 'react'; +import { ProfileContext } from 'context/ProfileContext'; import { CardContext } from 'context/CardContext'; import { ChannelContext } from 'context/ChannelContext'; @@ -10,11 +11,13 @@ export function useConversationContext() { channelId: null, subject: null, contacts: null, + members: new Set(), topics: new Map(), }); const card = useContext(CardContext); const channel = useContext(ChannelContext); + const profile = useContext(ProfileContext); const topics = useRef(new Map()); const revision = useRef(null); const count = useRef(0); @@ -52,6 +55,19 @@ export function useConversationContext() { return members.join(', '); } + const getMembers = (conversation) => { + let members = new Set(); + if (conversation.guid) { + members.add(conversation.guid); + } + for (let member of conversation.data.channelDetail.members) { + if (profile.state.profile.guid != member) { + members.add(member); + } + } + return members; + } + const setTopics = async () => { const { cardId, channelId } = conversationId.current; const curRevision = revision.current; @@ -68,6 +84,7 @@ export function useConversationContext() { let conversation = card.actions.getChannel(cardId, channelId); let subject = getSubject(conversation); let contacts = getContacts(conversation); + let members = getMembers(conversation); let delta = await card.actions.getChannelTopics(cardId, channelId, curRevision); for (let topic of delta) { if (topic.data == null) { @@ -98,6 +115,7 @@ export function useConversationContext() { init: true, subject, contacts, + members, topics: topics.current, }); revision.current = deltaRevision; @@ -113,6 +131,7 @@ export function useConversationContext() { let conversation = channel.actions.getChannel(channelId); let subject = getSubject(conversation); let contacts = getContacts(conversation); + let members = getMembers(conversation); let delta = await channel.actions.getChannelTopics(channelId, curRevision); for (let topic of delta) { if (topic.data == null) { @@ -143,6 +162,7 @@ export function useConversationContext() { init: true, subject, contacts, + members, topics: topics.current, }); revision.current = deltaRevision;