links, publish: componentise Comments

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

@@ -12,8 +12,7 @@ import { RouteComponentProps } from "react-router-dom";
 import { LinkItem } from "./components/link-item";
 import { LinkSubmit } from "./components/link-submit";
 import { LinkPreview } from "./components/link-preview";
-import { CommentSubmit } from "./components/comment-submit";
-import { Comments } from "./components/comments";
+import { Comments } from "~/views/components/comments";
 
 import "./css/custom.css";
 
@@ -123,21 +122,13 @@ export function LinkResource(props: LinkResourceProps) {
                   commentNumber={node.children.size}
                   remoteContentPolicy={remoteContentPolicy}
                 />
-                <Row flexShrink='0'>
-                  <CommentSubmit
-                    name={name}
-                    ship={ship}
-                    api={api}
-                    parentIndex={node.post.index}
-                  />
-                </Row>
                 <Comments
-                  comments={node.children}
+                  ship={ship}
+                  name={name}
+                  comments={node}
                   resource={resourcePath}
                   contacts={contactDetails}
                   api={api}
-                  ship={ship}
-                  name={name}
                   hideAvatars={hideAvatars}
                   hideNicknames={hideNicknames}
                   remoteContentPolicy={remoteContentPolicy}

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

@@ -1,84 +0,0 @@
-import React, { Component } from 'react';
-import { Spinner } from '~/views/components/Spinner';
-import { createPost } from '~/logic/api/graph';
-import { deSig } from "~/logic/lib/util";
-
-
-export class CommentSubmit extends Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      comment: '',
-      commentFocus: false,
-      disabled: false
-    };
-  }
-
-  onClickPost() {
-    const parentIndex = this.props.parentIndex || '';
-    let post = createPost([
-      { text: this.state.comment },
-    ], parentIndex);
-
-    this.setState({ disabled: true }, () => {
-      this.props.api.graph.addPost(
-        `~${deSig(this.props.ship)}`,
-        this.props.name,
-        post
-      ).then((r) => {
-        this.setState({
-          disabled: false,
-          comment: ''
-        });
-      });
-    });
-  }
-
-  setComment(event) {
-    this.setState({ comment: event.target.value });
-  }
-
-  render() {
-    const { state, props } = this;
-    const focus = (state.commentFocus)
-      ? 'b--black b--white-d'
-      : 'b--gray4 b--gray2-d';
-
-    const activeClasses = state.comment
-      ? 'black white-d pointer'
-      : 'gray2 b--gray2';
-
-    return (
-      <div className={'w-100 relative ba br1 mt6 mb6 ' + focus}>
-        <textarea
-          className="w-100 bg-gray0-d white-d f8 pa2 pr8"
-          style={{ resize: 'none', height: 75 }}
-          placeholder="Leave a comment on this link"
-          onChange={this.setComment.bind(this)}
-          onKeyDown={(e) => {
-            if (
-              (e.getModifierState('Control') || e.metaKey) &&
-              e.key === 'Enter'
-            ) {
-              this.onClickPost();
-            }
-          }}
-          onFocus={() => this.setState({ commentFocus: true })}
-          onBlur={() => this.setState({ commentFocus: false })}
-          value={state.comment}
-        />
-        <button
-          className={
-            'f8 bg-gray0-d ml2 absolute ' + activeClasses
-          }
-          disabled={state.disabled}
-          onClick={this.onClickPost.bind(this)}
-          style={{ bottom: 12, right: 8 }}>
-          Post
-        </button>
-      </div>
-    );
-  }
-}
-

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

@@ -1,38 +0,0 @@
-import React from 'react';
-import { CommentItem } from '~/views/components/CommentItem';
-
-
-export const Comments = (props) => {
-  const {
-    hideNicknames,
-    hideAvatars,
-    remoteContentPolicy,
-    ship,
-    name
-  } = props;
-
-  const contacts = props.contacts ? props.contacts : {};
-
-  return (
-    <div>
-      { Array.from(props.comments).reverse().map(([idx, comment]) => {
-          return (
-            <CommentItem
-              comment={comment}
-              key={idx}
-              contacts={contacts}
-              api={props.api}
-              post={comment.post}
-              ship={ship}
-              name={name}
-              hideNicknames={hideNicknames}
-              hideAvatars={hideAvatars}
-              remoteContentPolicy={remoteContentPolicy}
-            />
-          );
-        })
-      }
-    </div>
-  );
-}
-

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

@@ -5,7 +5,7 @@ import bigInt from 'big-integer';
 
 import { Link, RouteComponentProps } from "react-router-dom";
 import { Spinner } from "~/views/components/Spinner";
-import { Comments } from "./Comments";
+import { Comments } from "~/views/components/Comments";
 import { NoteNavigation } from "./NoteNavigation";
 import GlobalApi from "~/logic/api/global";
 import { getLatestRevision, getComments } from '~/logic/lib/publish';
@@ -106,8 +106,7 @@ export function Note(props: NoteProps & RouteComponentProps) {
       />
       <Comments
         ship={ship}
-        book={props.book}
-        note={props.note}
+        name={props.book}
         comments={comments}
         contacts={props.contacts}
         api={props.api}

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

@@ -1,7 +1,7 @@
 import React from "react";
 import * as Yup from "yup";
 import { Formik, FormikHelpers, Form, useFormikContext } from "formik";
-import { AsyncButton } from "../../../components/AsyncButton";
+import { AsyncButton } from "./AsyncButton";
 import { ManagedTextAreaField as TextArea } from "@tlon/indigo-react";
 
 interface FormSchema {

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Col } from '@tlon/indigo-react';
 import { CommentItem } from '~/views/components/CommentItem';
-import CommentInput from './CommentInput';
+import CommentInput from '~/views/components/CommentInput';
 import { Contacts } from '~/types/contact-update';
 import GlobalApi from '~/logic/api/global';
 import { FormikHelpers } from 'formik';
@@ -11,8 +11,7 @@ import { LocalUpdateRemoteContentPolicy } from '~/types';
 
 interface CommentsProps {
   comments: GraphNode;
-  book: string;
-  note: GraphNode;
+  name: string;
   ship: string;
   contacts: Contacts;
   api: GlobalApi;
@@ -22,7 +21,7 @@ interface CommentsProps {
 }
 
 export function Comments(props: CommentsProps) {
-  const { comments, ship, book, api } = props;
+  const { comments, ship, name, api } = props;
 
   const onSubmit = async (
     { comment },
@@ -30,7 +29,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, name, post);
       actions.resetForm();
       actions.setStatus({ success: null });
     } catch (e) {
@@ -48,7 +47,7 @@ export function Comments(props: CommentsProps) {
           key={idx}
           contacts={props.contacts}
           api={api}
-          name={book}
+          name={name}
           ship={ship}
           hideNicknames={props.hideNicknames}
           hideAvatars={props.hideAvatars}