From 3724433fb8c1f57f0d65ac19490c5d8d3d111125 Mon Sep 17 00:00:00 2001
From: Roland Osborne <rolandosborne@gmail.com>
Date: Tue, 24 May 2022 10:24:24 -0700
Subject: [PATCH] rendering conversation members

---
 .../src/User/Conversation/Conversation.jsx    |  3 +-
 .../Members/MemberItem/MemberItem.jsx         | 34 ++++++++++++++++
 .../Members/MemberItem/MemberItem.styled.js   | 39 +++++++++++++++++++
 .../Members/MemberItem/useMemberItem.hook.js  | 36 +++++++++++++++++
 .../src/User/Conversation/Members/Members.jsx | 16 ++++++--
 .../Conversation/Members/Members.styled.jsx   |  7 +---
 6 files changed, 125 insertions(+), 10 deletions(-)
 create mode 100644 net/web/src/User/Conversation/Members/MemberItem/MemberItem.jsx
 create mode 100644 net/web/src/User/Conversation/Members/MemberItem/MemberItem.styled.js
 create mode 100644 net/web/src/User/Conversation/Members/MemberItem/useMemberItem.hook.js

diff --git a/net/web/src/User/Conversation/Conversation.jsx b/net/web/src/User/Conversation/Conversation.jsx
index f1042747..998eab0c 100644
--- a/net/web/src/User/Conversation/Conversation.jsx
+++ b/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>
diff --git a/net/web/src/User/Conversation/Members/MemberItem/MemberItem.jsx b/net/web/src/User/Conversation/Members/MemberItem/MemberItem.jsx
new file mode 100644
index 00000000..f3ace7f7
--- /dev/null
+++ b/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>
+  )
+}
+
diff --git a/net/web/src/User/Conversation/Members/MemberItem/MemberItem.styled.js b/net/web/src/User/Conversation/Members/MemberItem/MemberItem.styled.js
new file mode 100644
index 00000000..d138579d
--- /dev/null
+++ b/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 {
+    }
+  }
+`;
+
diff --git a/net/web/src/User/Conversation/Members/MemberItem/useMemberItem.hook.js b/net/web/src/User/Conversation/Members/MemberItem/useMemberItem.hook.js
new file mode 100644
index 00000000..3ec69523
--- /dev/null
+++ b/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 };
+}
diff --git a/net/web/src/User/Conversation/Members/Members.jsx b/net/web/src/User/Conversation/Members/Members.jsx
index 23aec74b..243eaeb0 100644
--- a/net/web/src/User/Conversation/Members/Members.jsx
+++ b/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>
   )
 }
 
diff --git a/net/web/src/User/Conversation/Members/Members.styled.jsx b/net/web/src/User/Conversation/Members/Members.styled.jsx
index 1da5af30..85b2b76f 100644
--- a/net/web/src/User/Conversation/Members/Members.styled.jsx
+++ b/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;
-  align-items: center;
-  overflow: hidden;
+  overflow: auto;
 `;