rendering conversation members

net/web/src/User/Conversation/Conversation.jsx

@@ -84,9 +84,8 @@ export function Conversation() {
         <BusySpin size="large" delay="1000" spinning={!state.init} />
       </div>
       <AddTopic />
-      <Modal title="Conversation Members" visible={showMembers} centered onCancel={() => setShowMembers(false)}
+      <Modal title="Conversation Members" visible={showMembers} centered onCancel={() => setShowMembers(false)} width={400} bodyStyle={{ padding: 0 }}
         footer={[
-          <Button key="back" onClick={() => setShowMembers(false)}>Done</Button>
         ]} >
         <Members host={state.cardId} members={state.members} />
       </Modal>

net/web/src/User/Conversation/Members/MemberItem/MemberItem.jsx

@@ -0,0 +1,34 @@
+import React, { useState, useEffect, useRef } from 'react'
+import { Avatar } from 'avatar/Avatar';
+import { MemberItemWrapper } from './MemberItem.styled';
+import { useMemberItem } from './useMemberItem.hook';
+import { Button } from 'antd';
+
+export function MemberItem({ readonly, item }) {
+
+  const { state, actions } = useMemberItem({ item });
+
+  const SetMembership = () => {
+    if (readonly) {
+      return <></>
+    }
+    if (item.member) {
+      return <Button type="primary" size="small" danger onClick={() => actions.clearMembership()}>Remove</Button>
+    }
+    return <Button type="primary" size="small" onClick={() => actions.setMembership()}>Add</Button>
+  }
+
+  return (
+    <MemberItemWrapper>
+      <div class="avatar">
+        <Avatar imageUrl={state.imageUrl} />
+      </div>
+      <div class="label">
+        <div class="name">{state.name}</div>
+        <div class="handle">{state.handle}</div>
+      </div>
+      <SetMembership />
+    </MemberItemWrapper>
+  )
+}
+

net/web/src/User/Conversation/Members/MemberItem/MemberItem.styled.js

@@ -0,0 +1,39 @@
+import styled from 'styled-components';
+
+export const MemberItemWrapper = styled.div`
+  display: flex;
+  width: 100%;
+  background-color: #f6f5ed;
+  flex-direction: row;
+  overflow: hidden;
+  padding-left: 16px;
+  padding-right: 16px;
+  padding-top: 2px;
+  padding-bottom: 2px;
+  align-items: center;
+  border-bottom: 1px solid #eeeeee;
+
+  .avatar {
+    width: 32px;
+    height: 32px;
+    display: flex;
+    justify-content: center;
+  }
+
+  .label {
+    padding-left: 8px;
+    padding-right: 8px;
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+
+    .handle {
+      font-size: 0.8em;
+      font-weight: bold;
+    }
+
+    .name {
+    }
+  }
+`;
+

net/web/src/User/Conversation/Members/MemberItem/useMemberItem.hook.js

@@ -0,0 +1,36 @@
+import { useContext, useState, useEffect, useRef } from 'react';
+import { CardContext } from 'context/CardContext';
+
+export function useMemberItem({ item }) {  
+
+  const [state, setState] = useState({
+    imageUrl: null,
+    name: null,
+    handle: null
+  });
+
+  const card = useContext(CardContext);
+
+  useEffect(() => {
+    updateState({ 
+      imageUrl: card.actions.getImageUrl(item.card.id),
+      name: item.card?.data.cardProfile.name, 
+      handle: item.card?.data.cardProfile.handle,
+    });
+  }, [item, card]);
+
+  const updateState = (value) => {
+    setState((s) => ({ ...s, ...value }));
+  }
+
+  const actions = {
+    setMembership: async () => {
+      console.log("set membership");
+    },
+    clearMembership: async () => {
+      console.log("clear membership");
+    },
+  };
+
+  return { state, actions };
+}

net/web/src/User/Conversation/Members/Members.jsx

@@ -1,14 +1,24 @@
 import React, { useState, useEffect, useRef } from 'react'
 import { useMembers } from './useMembers.hook';
+import { List } from 'antd';
+import { MemberItem } from './MemberItem/MemberItem';
+import { MembersWrapper } from './Members.styled';
 
 export function Members({ host, members }) {
 
   const { state, actions } = useMembers({ host, members });
 
-  console.log(state);
-
   return (
-    <div>MEMBERS</div>
+    <MembersWrapper>
+      <List
+        locale={{ emptyText: '' }}
+        itemLayout="horizontal"
+        dataSource={state.contacts}
+        renderItem={item => (
+          <MemberItem readonly={state.readonly} item={item} />
+        )}
+      />
+    </MembersWrapper>
   )
 }
 

net/web/src/User/Conversation/Members/Members.styled.jsx

@@ -1,12 +1,9 @@
 import styled from 'styled-components';
 
 export const MembersWrapper = styled.div`
-  display: flex;
   width: 100%;
-  height: 100%;
+  height: 240px;
   background-color: #f6f5ed;
-  flex-direction: column;
+  overflow: auto;
-  align-items: center;
-  overflow: hidden;
 `;