From 33cdb327b6d54fc0b16795af71a59588e55feb58 Mon Sep 17 00:00:00 2001
From: Matilde Park <matilde@tlon.io>
Date: Tue, 23 Mar 2021 14:25:41 -0400
Subject: [PATCH] landscape: render nicknames in invites

Fixes urbit/landscape#557
---
 .../src/views/components/Invite/index.tsx     | 20 +++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/pkg/interface/src/views/components/Invite/index.tsx b/pkg/interface/src/views/components/Invite/index.tsx
index 9763e794cf..1cae0d38f4 100644
--- a/pkg/interface/src/views/components/Invite/index.tsx
+++ b/pkg/interface/src/views/components/Invite/index.tsx
@@ -11,7 +11,7 @@ import {
 import { Invite } from '@urbit/api/invite';
 import { Text, Icon, Row } from '@tlon/indigo-react';
 
-import { cite } from '~/logic/lib/util';
+import { cite, useShowNickname } from '~/logic/lib/util';
 import GlobalApi from '~/logic/api/global';
 import { resourceFromPath } from '~/logic/lib/group';
 import { GroupInvite } from './Group';
@@ -19,6 +19,7 @@ import { InviteSkeleton } from './InviteSkeleton';
 import { JoinSkeleton } from './JoinSkeleton';
 import { useWaitForProps } from '~/logic/lib/useWaitForProps';
 import useGroupState from '~/logic/state/group';
+import useContactState from '~/logic/state/contact';
 import useMetadataState from '~/logic/state/metadata';
 
 interface InviteItemProps {
@@ -37,7 +38,10 @@ export function InviteItem(props: InviteItemProps) {
   const status = pendingJoin[resource];
   const groups = useGroupState(state => state.groups);
   const associations = useMetadataState(state => state.associations);
-  const waiter = useWaitForProps({ associations, groups, pendingJoin}, 50000);
+  const contacts = useContactState(state => state.contacts);
+  const contact = contacts?.[`~${invite?.ship}`] ?? {};
+  const showNickname = useShowNickname(contact);
+  const waiter = useWaitForProps({ associations, groups, pendingJoin }, 50000);
 
   const history = useHistory();
   const inviteAccept = useCallback(async () => {
@@ -114,8 +118,10 @@ export function InviteItem(props: InviteItemProps) {
       >
         <Row py="1" alignItems="center">
           <Icon display="block" color="blue" icon="Bullet" mr="2" />
-          <Text mr="1" mono>
-            {cite(`~${invite!.ship}`)}
+          <Text mr="1"
+            mono={!showNickname}
+            fontWeight={showNickname ? '500' : '400'}>
+            {showNickname ? contact?.nickname : cite(`~${invite!.ship}`)}
           </Text>
           <Text mr="1">invited you to a DM</Text>
         </Row>
@@ -140,8 +146,10 @@ export function InviteItem(props: InviteItemProps) {
       >
         <Row py="1" alignItems="center">
           <Icon display="block" color="blue" icon="Bullet" mr="2" />
-          <Text mr="1" mono>
-            {cite(`~${invite!.ship}`)}
+          <Text mr="1"
+            mono={!showNickname}
+            fontWeight={showNickname ? '500' : '400'}>
+            {showNickname ? contact?.nickname : cite(`~${invite!.ship}`)}
           </Text>
           <Text mr="1">
             invited you to ~{invite.resource.ship}/{invite.resource.name}