links, publish: componentise 'commentItem'

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

@@ -136,6 +136,8 @@ export function LinkResource(props: LinkResourceProps) {
                   resource={resourcePath}
                   contacts={contactDetails}
                   api={api}
+                  ship={ship}
+                  name={name}
                   hideAvatars={hideAvatars}
                   hideNicknames={hideNicknames}
                   remoteContentPolicy={remoteContentPolicy}

pkg/interface/src/views/apps/links/components/comment-item.js

@@ -1,60 +0,0 @@
-import React, { Component } from 'react';
-import { Sigil } from '~/logic/lib/sigil';
-import { cite } from '~/logic/lib/util';
-import moment from 'moment';
-import { Box, Text, Row } from '@tlon/indigo-react';
-import RichText from '~/views/components/RichText';
-
-export const CommentItem = (props) => {
-  const content = props.post.contents[0].text;
-  const timeSent = 
-    moment.unix(props.post['time-sent'] / 1000).format('hh:mm a');
-
-  const showAvatar = props.avatar && !props.hideAvatars;
-  const showNickname = props.nickname && !props.hideNicknames;
-  const img = showAvatar
-    ? <img src={props.avatar} height={36} width={36} className="dib" />
-    : <Sigil
-        ship={`~${props.post.author}`}
-        size={36}
-        color={`#${props.color}`}
-        classes={(!!props.member ? 'mix-blend-diff' : '')}
-      />;
-
-  const disabled = props.pending || props.post.author !== window.ship;
-
-  const onDelete = async () => {
-    const [ship,name] = props.resource.split('/');
-    await props.api.graph.removeNodes(`~${ship}`, name, [props.post.index]);
-  };
-
-  return (
-    <Box width="100%" py={3} opacity={props.pending ? '0.6' : '1'}>
-      <Row backgroundColor='white'>
-        {img}
-        <Row fontSize={0} alignItems="center" ml={2}>
-          <Text mono={!props.hasNickname} title={props.post.author}>
-            {showNickname ? props.nickname : cite(props.post.author)}
-          </Text>
-          <Text gray ml={2}>{timeSent}</Text>
-          {!disabled && (
-            <>
-              <Box cursor="pointer" pl="2" color="red" onClick={onDelete}>
-                Delete
-              </Box>
-            </>
-          )}
-
-        </Row>
-      </Row>
-      <Row>
-        <Text display="block" py={3} fontSize={1}>
-          <RichText remoteContentPolicy={props.remoteContentPolicy}>
-            {content}
-          </RichText>
-        </Text>
-      </Row>
-    </Box>
-  );
-}
-

pkg/interface/src/views/apps/links/components/comments.js

@@ -1,36 +1,30 @@
 import React from 'react';
-import { CommentItem } from './comment-item';
-import { getContactDetails } from '~/logic/lib/util';
+import { CommentItem } from '~/views/components/CommentItem';
 
 
 export const Comments = (props) => {
   const {
     hideNicknames,
     hideAvatars,
-    remoteContentPolicy
+    remoteContentPolicy,
+    ship,
+    name
   } = props;
 
   const contacts = props.contacts ? props.contacts : {};
 
   return (
     <div>
-      { Array.from(props.comments).map(([date, comment]) => {
-          const { nickname, color, member, avatar } =
-            getContactDetails(contacts[comment.post.author]);
-
-          const nameClass = nickname && !hideNicknames ? 'inter' : 'mono';
-
+      { Array.from(props.comments).reverse().map(([idx, comment]) => {
           return (
             <CommentItem
+              comment={comment}
+              key={idx}
+              contacts={contacts}
               api={props.api}
-              resource={props.resource}
-              key={comment.post.index}
               post={comment.post}
-              nickname={nickname}
-              hasNickname={Boolean(nickname)}
-              color={color}
-              avatar={avatar}
-              member={member}
+              ship={ship}
+              name={name}
               hideNicknames={hideNicknames}
               hideAvatars={hideAvatars}
               remoteContentPolicy={remoteContentPolicy}

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

@@ -1,16 +1,13 @@
-import React, { useState, useEffect, useCallback } from "react";
-import { Col } from "@tlon/indigo-react";
-import { CommentItem } from "./CommentItem";
-import CommentInput from "./CommentInput";
-import { dateToDa } from "~/logic/lib/util";
-import { Comment, Note, NoteId } from "~/types/publish-update";
-import { Contacts } from "~/types/contact-update";
-import _ from "lodash";
-import GlobalApi from "~/logic/api/global";
-import { FormikHelpers } from "formik";
-import {GraphNode, Graph} from "~/types/graph-update";
-import {createPost} from "~/logic/api/graph";
-import { LocalUpdateRemoteContentPolicy } from "~/types";
+import React from 'react';
+import { Col } from '@tlon/indigo-react';
+import { CommentItem } from '~/views/components/CommentItem';
+import CommentInput from './CommentInput';
+import { Contacts } from '~/types/contact-update';
+import GlobalApi from '~/logic/api/global';
+import { FormikHelpers } from 'formik';
+import { GraphNode } from '~/types/graph-update';
+import { createPost } from '~/logic/api/graph';
+import { LocalUpdateRemoteContentPolicy } from '~/types';
 
 interface CommentsProps {
   comments: GraphNode;
@@ -25,7 +22,7 @@ interface CommentsProps {
 }
 
 export function Comments(props: CommentsProps) {
-  const { comments, ship, book, note, api } = props;
+  const { comments, ship, book, api } = props;
 
   const onSubmit = async (
     { comment },
@@ -33,7 +30,7 @@ export function Comments(props: CommentsProps) {
   ) => {
     try {
       const post = createPost([{ text: comment }], comments?.post?.index);
-      await api.graph.addPost(ship, book, post)
+      await api.graph.addPost(ship, book, post);
       actions.resetForm();
       actions.setStatus({ success: null });
     } catch (e) {
@@ -51,7 +48,7 @@ export function Comments(props: CommentsProps) {
           key={idx}
           contacts={props.contacts}
           api={api}
-          book={book}
+          name={book}
           ship={ship}
           hideNicknames={props.hideNicknames}
           hideAvatars={props.hideAvatars}

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

@@ -34,13 +34,13 @@ export function Note(props: NoteProps & RouteComponentProps) {
   const deletePost = async () => {
     setDeleting(true);
     const indices = [note.post.index]
-    await api.graph.removeNodes(ship, book, indices); 
+    await api.graph.removeNodes(ship, book, indices);
     props.history.push(rootUrl);
   };
 
   const comments = getComments(note);
   const [revNum, title, body, post] = getLatestRevision(note);
- 
+
   const noteId = bigInt(note.post.index.split('/')[1]);
 
   let adminLinks: JSX.Element | null = null;

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

@@ -1,15 +1,14 @@
-import React, { useState } from "react";
-import CommentInput from "./CommentInput";
-import { Comment, NoteId } from "~/types/publish-update";
-import { Contacts } from "~/types/contact-update";
-import GlobalApi from "~/logic/api/global";
-import { Box, Row } from "@tlon/indigo-react";
-import styled from "styled-components";
-import { Author } from "./Author";
-import {GraphNode, TextContent} from "~/types/graph-update";
+import React, { useState } from 'react';
+import { Comment, NoteId } from '~/types/publish-update';
+import { Contacts } from '~/types/contact-update';
+import GlobalApi from '~/logic/api/global';
+import { Box, Row } from '@tlon/indigo-react';
+import styled from 'styled-components';
+import { Author } from '~/views/apps/publish/components/Author';
+import { GraphNode, TextContent } from '~/types/graph-update';
 import tokenizeMessage from '~/logic/lib/tokenizeMessage';
 import RichText from '~/views/components/RichText';
-import {LocalUpdateRemoteContentPolicy} from "~/types";
+import { LocalUpdateRemoteContentPolicy } from '~/types';
 
 const ClickBox = styled(Box)`
   cursor: pointer;
@@ -20,7 +19,7 @@ interface CommentItemProps {
   pending?: boolean;
   comment: GraphNode;
   contacts: Contacts;
-  book: string;
+  name: string;
   ship: string;
   api: GlobalApi;
   hideNicknames: boolean;
@@ -29,7 +28,7 @@ interface CommentItemProps {
 }
 
 export function CommentItem(props: CommentItemProps) {
-  const { ship, contacts, book, api, remoteContentPolicy } = props;
+  const { ship, contacts, name, api, remoteContentPolicy } = props;
   const commentData = props.comment?.post;
   const comment = commentData.contents[0] as TextContent;
 
@@ -38,17 +37,17 @@ export function CommentItem(props: CommentItemProps) {
   const disabled = props.pending || window.ship !== commentData.author;
 
   const onDelete = async () => {
-    await api.graph.removeNodes(ship, book, [commentData?.index]);
+    await api.graph.removeNodes(ship, name, [commentData?.index]);
   };
 
   return (
-    <Box mb={4} opacity={commentData?.pending ? "60%" : "100%"}>
+    <Box mb={4} opacity={commentData?.pending ? '60%' : '100%'}>
       <Row bg="white" my={3}>
         <Author
           showImage
           contacts={contacts}
           ship={commentData?.author}
-          date={commentData?.["time-sent"]}
+          date={commentData?.['time-sent']}
           hideAvatars={props.hideAvatars}
           hideNicknames={props.hideNicknames}
         >