adding membership control

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 <DatabaseOutlined />
@@ -65,7 +71,7 @@ export function Conversation() {
         </div>
         <div class="control">       
           <div class="buttons">
-            <ConversationButton ghost onClick={() => onEdit()}>Members</ConversationButton>
+            <ConversationButton ghost onClick={() => onMembers()}>Members</ConversationButton>
             <ConversationButton ghost onClick={() => actions.remove()}>Delete</ConversationButton>
           </div>
           <CloseButton type="text" class="close" size={'large'}
@@ -78,6 +84,12 @@ export function Conversation() {
         <BusySpin size="large" delay="1000" spinning={!state.init} />
       </div>
       <AddTopic />
+      <Modal title="Conversation Members" visible={showMembers} centered onCancel={() => setShowMembers(false)}
+        footer={[
+          <Button key="back" onClick={() => setShowMembers(false)}>Done</Button>
+        ]} >
+        <Members host={state.cardId} members={state.members} />
+      </Modal>
       <Modal title="Edit Subject" visible={showEdit} centered
         okText="Save" onOk={() => onSaveSubject()} onCancel={() => setShowEdit(false)}>
         <Input placeholder="Subject" onChange={(e) => setEditSubject(e.target.value)} value={editSubject} />

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 (
+    <div>MEMBERS</div>
+  )
+}
+

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;
+`;
+

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 };
+}

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]);
 

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;