landscape: render nicknames in invites

Fixes urbit/landscape#557
This commit is contained in:
Matilde Park 2021-03-23 14:25:41 -04:00
parent 8f4d7da976
commit 33cdb327b6

View File

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