hark-fe: fix for flattened contacts

Fixes urbit/landscape#458

pkg/interface/src/views/apps/notifications/graph.tsx

@@ -11,11 +11,9 @@ import {
   Groups
 } from '~/types';
 import { Header } from './header';
-import { cite, deSig, pluralize } from '~/logic/lib/util';
-import { Sigil } from '~/logic/lib/sigil';
-import RichText from '~/views/components/RichText';
+import { cite, deSig, pluralize, useShowNickname } from '~/logic/lib/util';
+import Author from '~/views/components/Author';
 import GlobalApi from '~/logic/api/global';
-import ReactMarkdown from 'react-markdown';
 import { getSnippet } from '~/logic/lib/publish';
 import styled from 'styled-components';
 import { MentionText } from '~/views/components/MentionText';
@@ -188,25 +186,10 @@ const GraphNode = ({
   read,
   onRead,
   showContact = false,
-}): ReactElement => {
+}) => {
   author = deSig(author);
   const history = useHistory();
 
-  const img = showContact ? (
-    <Sigil
-      ship={`~${author}`}
-      size={16}
-      icon
-      color={`#000000`}
-      classes='mix-blend-diff'
-      padding={2}
-    />
-  ) : (
-    <Box style={{ width: '16px' }}></Box>
-  );
-
-  const groupContacts = contacts[groupPath] ?? {};
-
   const nodeUrl = getNodeUrl(mod, group?.hidden, groupPath, graph, index);
 
   const onClick = useCallback(() => {
@@ -216,34 +199,29 @@ const GraphNode = ({
     history.push(nodeUrl);
   }, [read, onRead]);
 
+  const showNickname = useShowNickname(contacts?.[`~${author}`]);
+  const nickname = (contacts?.[`~${author}`]?.nickname && showNickname) ? contacts[`~${author}`].nickname : cite(author);
   return (
     <Row onClick={onClick} gapX='2' pt={showContact ? 2 : 0}>
-      <Col>{img}</Col>
       <Col flexGrow={1} alignItems='flex-start'>
         {showContact && (
-          <Row
-            mb='2'
-            height='16px'
-            alignItems='center'
-            p='1'
-            backgroundColor='white'
-          >
-            <Text mono title={author}>
-              {cite(author)}
-            </Text>
-            <Text ml='2' gray>
-              {moment(time).format('HH:mm')}
-            </Text>
-          </Row>
+          <Author
+            showImage
+            contacts={contacts}
+            ship={author}
+            date={time}
+            group={group}
+          />
         )}
         <Row width='100%' p='1' flexDirection='column'>
           <GraphNodeContent
-            contacts={groupContacts}
+            contacts={contacts}
             post={post}
             mod={mod}
             description={description}
             index={index}
             group={group}
+            remoteContentPolicy={{}}
           />
         </Row>
       </Col>

pkg/interface/src/views/apps/notifications/header.tsx

@@ -15,7 +15,7 @@ const Text = (props: PropFunc<typeof Text>) => (
 );
 
 function Author(props: { patp: string; contacts: Contacts; last?: boolean }): ReactElement {
-  const contact: Contact | undefined = props.contacts?.[props.patp];
+  const contact: Contact | undefined = props.contacts?.[`~${props.patp}`];
 
   const showNickname = useShowNickname(contact);
   const name = contact?.nickname || `~${props.patp}`;
@@ -40,8 +40,7 @@ export function Header(props: {
   read: boolean;
   associations: Associations;
 } & PropFunc<typeof Row> ): ReactElement {
-  const { description, channel, group, moduleIcon, read } = props;
-  const contacts = props.contacts[group] || {};
+  const { description, channel, contacts, moduleIcon, read } = props;
 
   const authors = _.uniq(props.authors);
 

pkg/interface/src/views/components/Author.tsx

@@ -20,7 +20,7 @@ interface AuthorProps {
   children?: ReactNode;
   unread?: boolean;
   group: Group;
-  api: GlobalApi;
+  api?: GlobalApi;
 }
 
 // eslint-disable-next-line max-lines-per-function