Merge pull request #4486 from urbit/mp/landscape/authors

links, publish, notifications: work with flattened contacts

pkg/interface/src/views/apps/links/LinkResource.tsx

@@ -46,7 +46,6 @@ export function LinkResource(props: LinkResourceProps) {
   const resource = associations.graph[rid]
     ? associations.graph[rid]
     : { metadata: {} };
-  const contactDetails = contacts[resource?.group] || {};
   const group = groups[resource?.group] || {};
 
   const graph = graphs[resourcePath] || null;
@@ -99,9 +98,6 @@ export function LinkResource(props: LinkResourceProps) {
             if (!node) {
               return <Box>Not found</Box>;
             }
-
-            const contact = contactDetails[node.post.author];
-
             return (
               <Col alignItems="center" overflowY="auto" width="100%">
               <Col width="100%" p={3} maxWidth="768px">
@@ -126,7 +122,7 @@ export function LinkResource(props: LinkResourceProps) {
                   resource={resourcePath}
                   association={association}
                   unreads={unreads}
-                  contacts={contactDetails}
+                  contacts={contacts}
                   api={api}
                   editCommentId={editCommentId}
                   history={props.history}

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/apps/publish/PublishResource.tsx

@@ -17,7 +17,6 @@ export function PublishResource(props: PublishResourceProps) {
   const { association, api, baseUrl, notebooks } = props;
   const rid = association.resource;
   const [, , ship, book] = rid.split('/');
-  const notebookContacts = props.contacts[association.group];
 
   return (
     <Box height="100%" width="100%" overflowY="auto">
@@ -29,7 +28,6 @@ export function PublishResource(props: PublishResourceProps) {
         groups={props.groups}
         associations={props.associations}
         association={association}
-        notebookContacts={notebookContacts}
         rootUrl={baseUrl}
         baseUrl={`${baseUrl}/resource/publish/ship/${ship}/${book}`}
         history={props.history}

pkg/interface/src/views/apps/publish/components/Notebook.tsx

@@ -13,7 +13,6 @@ interface NotebookProps {
   ship: string;
   book: string;
   graph: Graph;
-  notebookContacts: Contacts;
   association: Association;
   associations: Associations;
   contacts: Rolodex;
@@ -27,7 +26,7 @@ export function Notebook(props: NotebookProps & RouteComponentProps): ReactEleme
   const {
     ship,
     book,
-    notebookContacts,
+    contacts,
     groups,
     association,
     graph
@@ -40,8 +39,7 @@ export function Notebook(props: NotebookProps & RouteComponentProps): ReactEleme
 
   const relativePath = (p: string) => props.baseUrl + p;
 
-  const contact = notebookContacts?.[ship];
-  const isOwn = `~${window.ship}` === ship;
+  const contact = contacts?.[`~${ship}`];
   console.log(association.resource);
 
   const showNickname = useShowNickname(contact);
@@ -62,7 +60,7 @@ export function Notebook(props: NotebookProps & RouteComponentProps): ReactEleme
         graph={graph}
         host={ship}
         book={book}
-        contacts={notebookContacts ? notebookContacts : {}}
+        contacts={contacts}
         unreads={props.unreads}
         baseUrl={props.baseUrl}
         api={props.api}

pkg/interface/src/views/apps/publish/components/NotebookPosts.tsx

@@ -27,7 +27,7 @@ export function NotebookPosts(props: NotebookPostsProps) {
               host={props.host}
               book={props.book}
               unreads={props.unreads}
-              contact={props.contacts[node.post.author]}
+              contact={props.contacts[`~${node.post.author}`]}
               contacts={props.contacts}
               node={node}
               baseUrl={props.baseUrl}

pkg/interface/src/views/apps/publish/components/NotebookRoutes.tsx

@@ -23,7 +23,6 @@ interface NotebookRoutesProps {
   ship: string;
   book: string;
   graphs: Graphs;
-  notebookContacts: Contacts;
   unreads: Unreads;
   contacts: Rolodex;
   groups: Groups;
@@ -37,7 +36,7 @@ interface NotebookRoutesProps {
 export function NotebookRoutes(
   props: NotebookRoutesProps & RouteComponentProps
 ) {
-  const { ship, book, api, notebookContacts, baseUrl, rootUrl, groups } = props;
+  const { ship, book, api, contacts, baseUrl, rootUrl, groups } = props;
 
   useEffect(() => {
     ship && book && api.graph.getGraph(ship, book);
@@ -60,7 +59,7 @@ export function NotebookRoutes(
           return <Notebook
             {...props}
             graph={graph}
-            contacts={notebookContacts}
+            contacts={contacts}
             association={props.association}
             rootUrl={rootUrl}
             baseUrl={baseUrl}
@@ -107,7 +106,7 @@ export function NotebookRoutes(
               notebook={graph}
               unreads={props.unreads}
               noteId={noteIdNum}
-              contacts={notebookContacts}
+              contacts={contacts}
               association={props.association}
               group={group}
               s3={props.s3}

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

@@ -6,7 +6,7 @@ import { Row, Box, BaseImage } from '@tlon/indigo-react';
 import { Contacts } from '@urbit/api/contacts';
 import { Group } from '@urbit/api';
 
-import { uxToHex, cite, useShowNickname } from '~/logic/lib/util';
+import { uxToHex, cite, useShowNickname, deSig } from '~/logic/lib/util';
 import OverlaySigil from './OverlaySigil';
 import { Sigil } from '~/logic/lib/sigil';
 import GlobalApi from '~/logic/api/global';
@@ -20,7 +20,7 @@ interface AuthorProps {
   children?: ReactNode;
   unread?: boolean;
   group: Group;
-  api: GlobalApi;
+  api?: GlobalApi;
 }
 
 // eslint-disable-next-line max-lines-per-function
@@ -29,7 +29,7 @@ export default function Author(props: AuthorProps): ReactElement {
   const history = useHistory();
   let contact;
   if (contacts) {
-    contact = ship in contacts ? contacts[ship] : null;
+    contact = `~${deSig(ship)}` in contacts ? contacts[`~${deSig(ship)}`] : null;
   }
   const color = contact?.color ? `#${uxToHex(contact?.color)}` : '#000000';
   const showNickname = useShowNickname(contact);