From 5b62417e49951b94e947067600ad704b932fc422 Mon Sep 17 00:00:00 2001
From: Matilde Park <matilde.park@gmail.com>
Date: Fri, 12 Feb 2021 16:24:46 -0500
Subject: [PATCH] groups: pass new contacts obj, fix pending

Also uncovers why pending array wasn't matching.

Fixes urbit/landscape#422
Fixes urbit/landscape#312
---
 .../views/landscape/components/GroupsPane.tsx    |  4 +++-
 .../views/landscape/components/Participants.tsx  | 16 +++++++++++-----
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/pkg/interface/src/views/landscape/components/GroupsPane.tsx b/pkg/interface/src/views/landscape/components/GroupsPane.tsx
index 7cddafc5c..6520fb4ac 100644
--- a/pkg/interface/src/views/landscape/components/GroupsPane.tsx
+++ b/pkg/interface/src/views/landscape/components/GroupsPane.tsx
@@ -40,7 +40,9 @@ export function GroupsPane(props: GroupsPaneProps) {
   const relativePath = (path: string) => baseUrl + path;
   const groupPath = getGroupFromWorkspace(workspace);
 
-  const groupContacts = (groupPath && contacts[groupPath]) || undefined;
+  const groupContacts = Object.assign({}, ...Array.from(groups?.[groupPath]?.members ?? []).filter(e => contacts[`~${e}`]).map(e => {
+      return {[e]: contacts[`~${e}`]};
+  })) || {};
   const rootIdentity = contacts?.["/~/default"]?.[window.ship];
   const groupAssociation =
     (groupPath && associations.groups[groupPath]) || undefined;
diff --git a/pkg/interface/src/views/landscape/components/Participants.tsx b/pkg/interface/src/views/landscape/components/Participants.tsx
index dabea1845..6ae9275fb 100644
--- a/pkg/interface/src/views/landscape/components/Participants.tsx
+++ b/pkg/interface/src/views/landscape/components/Participants.tsx
@@ -33,10 +33,12 @@ import { StatelessAsyncAction } from '~/views/components/StatelessAsyncAction';
 import styled from 'styled-components';
 import useLocalState from '~/logic/state/local';
 
-const TruncText = styled(Box)`
+const TruncText = styled(Text)`
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  display: inline-block;
+  min-width: 0;
 `;
 
 type Participant = Contact & { patp: string; pending: boolean };
@@ -57,8 +59,10 @@ function getParticipants(cs: Contacts, group: Group) {
     patp,
     pending: false
   }));
-  const members: Participant[] = _.map(Array.from(group.members), m =>
-    emptyContact(m, false)
+  const members: Participant[] = _.map(
+    Array.from(group.members)
+    .filter(e => group?.policy?.invite?.pending ? !group.policy.invite.pending.has(e) : true), m =>
+      emptyContact(m, false)
   );
   const allMembers = _.unionBy(contacts, members, 'patp');
   const pending: Participant[] =
@@ -305,11 +309,13 @@ function Participant(props: {
   return (
     <>
       <Box>{avatar}</Box>
-      <Col justifyContent="center" gapY="1" height="100%">
+      <Col justifyContent="center" gapY="1" height="100%" minWidth='0'>
         {hasNickname && (
-          <TruncText title={contact.nickname} maxWidth="85%" color="black">
+          <Row minWidth='0' flexShrink='1'>
+          <TruncText title={contact.nickname} color="black">
             {contact.nickname}
           </TruncText>
+          </Row>
         )}
         <Text title={contact.patp} color="gray" fontFamily="mono">
           {cite(contact.patp)}