notifications: render chat notifications

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

@@ -10,6 +10,7 @@ import {
   Associations,
   Content,
   Rolodex,
+  Groups,
 } from "~/types";
 import { Header } from "./header";
 import { cite, deSig, pluralize } from "~/logic/lib/util";
@@ -20,6 +21,7 @@ import ReactMarkdown from "react-markdown";
 import { getSnippet } from "~/logic/lib/publish";
 import styled from "styled-components";
 import {MentionText} from "~/views/components/MentionText";
+import ChatMessage, {MessageWithoutSigil} from "../chat/components/ChatMessage";
 
 function getGraphModuleIcon(module: string) {
   if (module === "link") {
@@ -50,6 +52,8 @@ function describeNotification(description: string, plural: boolean) {
       return `updated ${pluralize("note", plural)} in`;
     case "mention":
       return "mentioned you on";
+    case "message":
+      return `sent ${pluralize("message", plural)} to`;
     default:
       return description;
   }
@@ -64,7 +68,8 @@ const GraphUrl = ({ url, title }) => (
   </Box>
 );
 
-const GraphNodeContent = ({ contents, contacts, mod, description, index, remoteContentPolicy }) => {
+const GraphNodeContent = ({ group, post, contacts, mod, description, index, remoteContentPolicy }) => {
+  const { contents } = post;
   const idx = index.slice(1).split("/");
   if (mod === "link") {
     if (idx.length === 1) {
@@ -108,6 +113,28 @@ const GraphNodeContent = ({ contents, contacts, mod, description, index, remoteC
       );
     }
   }
+
+  if(mod === 'chat') {
+    return (
+      <Row
+        width="100%"
+      flexShrink={0}
+      flexGrow={1}
+      flexWrap="wrap"
+    >
+      <MessageWithoutSigil
+        containerClass="items-top cf hide-child"
+        measure={() => {}}
+        group={group}
+        contacts={contacts}
+        msg={post}
+        fontSize='0'
+        pt='2'
+        remoteContentPolicy={remoteContentPolicy}
+      />
+    </Row>);
+
+  }
   return null;
 };
 
@@ -120,11 +147,13 @@ function getNodeUrl(mod: string, group: string, graph: string, index: string) {
   } else if (mod === "link") {
     const [linkId] = idx;
     return `${graphUrl}/${linkId}`;
+  } else if (mod === 'chat') {
+    return graphUrl;
   }
   return "";
 }
 const GraphNode = ({
-  contents,
+  post,
   contacts,
   author,
   mod,
@@ -132,11 +161,13 @@ const GraphNode = ({
   time,
   index,
   graph,
+  groupPath,
   group,
   read,
   onRead,
   remoteContentPolicy
 }) => {
+  const { contents } = post;
   author = deSig(author);
   const history = useHistory();
 
@@ -150,9 +181,9 @@ const GraphNode = ({
     />
     );
 
-  const groupContacts = contacts[group];
-
-  const nodeUrl = getNodeUrl(mod, group, graph, index);
+  const groupContacts = contacts[groupPath] ?? {};
+  
+  const nodeUrl = getNodeUrl(mod, group.hidden ? '/home' : groupPath, graph, index);
 
   const onClick = useCallback(() => {
     if(!read) {
@@ -179,14 +210,15 @@ const GraphNode = ({
             {moment(time).format("HH:mm")}
           </Text>
         </Row>
-        <Row p="1">
+        <Row width="100%" p="1">
           <GraphNodeContent
             contacts={groupContacts}
-            contents={contents}
+            post={post}
             mod={mod}
             description={description}
             index={index}
             remoteContentPolicy={remoteContentPolicy}
+            group={group}
           />
         </Row>
       </Col>
@@ -202,11 +234,12 @@ export function GraphNotification(props: {
   time: number;
   timebox: BigInteger;
   associations: Associations;
+  groups: Groups;
   contacts: Rolodex;
   api: GlobalApi;
   remoteContentPolicy: any;
 }) {
-  const { contents, index, read, time, api, timebox, remoteContentPolicy } = props;
+  const { contents, index, read, time, api, timebox, remoteContentPolicy, groups } = props;
 
   const authors = _.map(contents, "author");
   const { graph, group } = index;
@@ -222,8 +255,8 @@ export function GraphNotification(props: {
     return api.hark[func](timebox, { graph: index });
   }, [api, timebox, index, read]);
 
-  return (
-    <Col p="2">
+return (
+    <Col flexGrow={1} width="100%" p="2">
       <Header
         onClick={onClick}
         archived={props.archived}
@@ -237,18 +270,19 @@ export function GraphNotification(props: {
         description={desc}
         associations={props.associations}
       />
-      <Col pl="5">
+      <Col flexGrow={1} width="100%" pl="5">
         {_.map(contents, (content, idx) => (
           <GraphNode
+            post={content}
             author={content.author}
-            contents={content.contents}
             contacts={props.contacts}
             mod={index.module}
-            time={content["time-sent"]}
+            time={content?.["time-sent"]}
             description={index.description}
             index={content.index}
             graph={graph}
-            group={group}
+            group={groups[group]}
+            groupPath={group}
             read={read}
             onRead={onClick}
             remoteContentPolicy={remoteContentPolicy}

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

@@ -137,6 +137,7 @@ export function Notification(props: NotificationProps) {
           index={index}
           contents={c}
           contacts={props.contacts}
+          groups={props.groups}
           read={read}
           archived={archived}
           timebox={props.time}
@@ -157,6 +158,7 @@ export function Notification(props: NotificationProps) {
           index={index}
           contents={c}
           contacts={props.contacts}
+          groups={props.groups}
           read={read}
           timebox={props.time}
           archived={archived}