publish: rewrite note components for graph-store

pkg/interface/src/logic/api/global.ts

@@ -10,7 +10,6 @@ import ContactsApi from './contacts';
 import GroupsApi from './groups';
 import LaunchApi from './launch';
 import LinksApi from './links';
-import PublishApi from './publish';
 import GraphApi from './graph';
 import S3Api from './s3';
 
@@ -23,7 +22,6 @@ export default class GlobalApi extends BaseApi<StoreState> {
   groups = new GroupsApi(this.ship, this.channel, this.store);
   launch = new LaunchApi(this.ship, this.channel, this.store);
   links = new LinksApi(this.ship, this.channel, this.store);
-  publish = new PublishApi(this.ship, this.channel, this.store);
   s3 = new S3Api(this.ship, this.channel, this.store);
   graph = new GraphApi(this.ship, this.channel, this.store);
 

pkg/interface/src/views/apps/publish/components/lib/CommentItem.tsx

@@ -9,6 +9,7 @@ import GlobalApi from "~/logic/api/global";
 import { Button, Box, Row, Text } from "@tlon/indigo-react";
 import styled from "styled-components";
 import { Author } from "./Author";
+import {GraphNode, TextContent} from "~/types/graph-update";
 
 const ClickBox = styled(Box)`
   cursor: pointer;
@@ -17,48 +18,36 @@ const ClickBox = styled(Box)`
 
 interface CommentItemProps {
   pending?: boolean;
-  comment: Comment;
+  comment: GraphNode;
   contacts: Contacts;
   book: string;
   ship: string;
   api: GlobalApi;
-  note: NoteId;
   hideNicknames: boolean;
   hideAvatars: boolean;
 }
 
 export function CommentItem(props: CommentItemProps) {
-  const { ship, contacts, book, note, api } = props;
+  const { ship, contacts, book, api } = props;
   const [editing, setEditing] = useState<boolean>(false);
-  const commentPath = Object.keys(props.comment)[0];
-  const commentData = props.comment[commentPath];
-  const content = commentData.content.split("\n").map((line, i) => {
+  const commentData = props.comment?.post;
+  const comment = commentData.contents[0] as TextContent;
+  const content = comment.text.split("\n").map((line, i) => {
     return (
-      <Text className="mb2" key={i}>
+      <Text mb="2" key={i}>
         {line}
       </Text>
     );
   });
 
-  const disabled = props.pending || window.ship !== commentData.author.slice(1);
-
-  const onUpdate = async ({ comment }) => {
-    await api.publish.updateComment(
-      ship.slice(1),
-      book,
-      note,
-      commentPath,
-      comment
-    );
-    setEditing(false);
-  };
+  const disabled = props.pending || window.ship !== commentData.author;
 
   const onDelete = async () => {
-    await api.publish.deleteComment(ship.slice(1), book, note, commentPath);
+    await api.graph.removeNodes(ship, book, [commentData?.index]);
   };
 
   return (
-    <Box mb={4} opacity={props.pending ? "60%" : "100%"}>
+    <Box mb={4} opacity={commentData?.pending ? "60%" : "100%"}>
       <Row bg="white" my={3}>
         <Author
           showImage
@@ -68,32 +57,17 @@ export function CommentItem(props: CommentItemProps) {
           hideAvatars={props.hideAvatars}
           hideNicknames={props.hideNicknames}
         >
-          {!disabled && !editing && (
+          {!disabled && (
             <>
-              <ClickBox color="green" onClick={() => setEditing(true)}>
-                Edit
-              </ClickBox>
               <ClickBox color="red" onClick={onDelete}>
                 Delete
               </ClickBox>
             </>
           )}
-          {editing && (
-            <ClickBox onClick={() => setEditing(false)} color="red">
-              Cancel
-            </ClickBox>
-          )}
         </Author>
       </Row>
       <Box mb={2}>
         {!editing && content}
-        {editing && (
-          <CommentInput
-            onSubmit={onUpdate}
-            initial={commentData.content}
-            label="Update"
-          />
-        )}
       </Box>
     </Box>
   );

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

@@ -8,50 +8,34 @@ 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";
 
 interface CommentsProps {
-  comments: Comment[];
+  comments: Graph;
   book: string;
-  noteId: NoteId;
-  note: Note;
+  note: GraphNode;
   ship: string;
   contacts: Contacts;
   api: GlobalApi;
-  numComments: number;
-  enabled: boolean;
   hideAvatars: boolean;
   hideNicknames: boolean;
 }
 
 export function Comments(props: CommentsProps) {
-  const { comments, ship, book, note, api, noteId, numComments } = props;
-  const [pending, setPending] = useState<string[]>([]);
-
-  useEffect(() => {
-    _.forEach(comments, (comment: Comment) => {
-      const { content } = comment[Object.keys(comment)[0]];
-      setPending((p) => p.filter((p) => p !== content));
-    });
-  }, [numComments]);
+  const { comments, ship, book, note, api } = props;
 
   const onSubmit = async (
     { comment },
     actions: FormikHelpers<{ comment: string }>
   ) => {
-    setPending((p) => [...p, comment]);
-    const action = {
-      "new-comment": {
-        who: ship.slice(1),
-        book: book,
-        note: noteId,
-        body: comment,
-      },
-    };
     try {
-      await api.publish.publishAction(action);
+      const post = createPost([{ text: comment }], note?.post?.index);
+      await api.graph.addPost(ship, book, post)
       actions.resetForm();
       actions.setStatus({ success: null });
     } catch (e) {
+      console.error(e);
       actions.setStatus({ error: e.message });
     }
   };
@@ -59,37 +43,14 @@ export function Comments(props: CommentsProps) {
   return (
     <Col>
       <CommentInput onSubmit={onSubmit} />
-      {Array.from(pending).map((com, i) => {
-        const da = dateToDa(new Date());
-        const ship = `~${window.ship}`;
-        const comment = {
-          [da]: {
-            author: ship,
-            content: com,
-            "date-created": Math.round(new Date().getTime()),
-          },
-        } as Comment;
-        return (
-          <CommentItem
-            comment={comment}
-            key={i}
-            contacts={props.contacts}
-            ship={ship}
-            pending={true}
-            hideNicknames={props.hideNicknames}
-            hideAvatars={props.hideAvatars}
-          />
-        );
-      })}
-      {props.comments.map((com, i) => (
+      {Array.from(comments).reverse().map(([idx, comment]) => (
         <CommentItem
-          comment={com}
-          key={i}
+          comment={comment}
+          key={idx}
           contacts={props.contacts}
           api={api}
           book={book}
           ship={ship}
-          note={note["note-id"]}
           hideNicknames={props.hideNicknames}
           hideAvatars={props.hideAvatars}
         />

pkg/interface/src/views/apps/publish/components/lib/EditPost.tsx

@@ -1,22 +1,23 @@
-import React, { Component } from "react";
+import React from "react";
 import { PostFormSchema, PostForm } from "./NoteForm";
-import { Note } from "../../../../types/publish-update";
 import { FormikHelpers } from "formik";
-import GlobalApi from "../../../../api/global";
+import GlobalApi from "~/logic/api/global";
 import { RouteComponentProps } from "react-router-dom";
+import { GraphNode, TextContent } from "~/types";
 interface EditPostProps {
   ship: string;
-  noteId: string;
-  note: Note;
+  noteId: number;
+  note: GraphNode;
   api: GlobalApi;
   book: string;
 }
 
 export function EditPost(props: EditPostProps & RouteComponentProps) {
   const { note, book, noteId, api, ship, history } = props;
-  const body = note.file.slice(note.file.indexOf(";>") + 2);
+  const [title, file] = note.post.contents as TextContent[];
+  const body = file.text.slice(file.text.indexOf(";>") + 2);
   const initial: PostFormSchema = {
-    title: note.title,
+    title: title.text,
     body,
   };
 
@@ -25,11 +26,11 @@ export function EditPost(props: EditPostProps & RouteComponentProps) {
     actions: FormikHelpers<PostFormSchema>
   ) => {
     const { title, body } = values;
-    const host = ship.slice(1);
     try {
-      await api.publish.editNote(host, book, noteId, title, body);
-      history.push(`/~publish/notebook/${ship}/${book}/note/${noteId}`);
+      // graph-store does not support editing nodes
+      throw new Error("Unsupported");
     } catch (e) {
+      console.error(e);
       actions.setStatus({ error: "Failed to edit notebook" });
     }
   };
@@ -38,7 +39,7 @@ export function EditPost(props: EditPostProps & RouteComponentProps) {
     <PostForm
       initial={initial}
       onSubmit={onSubmit}
-      submitLabel={`Update ${note.title}`}
+      submitLabel={`Update ${title.text}`}
       loadingText="Updating..."
     />
   );

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

@@ -5,21 +5,15 @@ import { Link, RouteComponentProps } from "react-router-dom";
 import { Spinner } from "~/views/components/Spinner";
 import { Comments } from "./Comments";
 import { NoteNavigation } from "./NoteNavigation";
-import {
-  NoteId,
-  Note as INote,
-  Notebook,
-} from "~/types/publish-update";
-import { Contacts } from "~/types/contact-update";
 import GlobalApi from "~/logic/api/global";
 import { Author } from "./Author";
+import { Contacts, GraphNode, Graph} from "~/types";
 
 interface NoteProps {
   ship: string;
   book: string;
-  noteId: NoteId;
-  note: INote;
-  notebook: Notebook;
+  note: GraphNode;
+  notebook: Graph;
   contacts: Contacts;
   api: GlobalApi;
   hideAvatars: boolean;
@@ -28,31 +22,27 @@ interface NoteProps {
 
 export function Note(props: NoteProps & RouteComponentProps) {
   const [deleting, setDeleting] = useState(false);
-  const { notebook, note, contacts, ship, book, noteId, api } = props;
-  useEffect(() => {
-    api.publish.fetchNote(ship, book, noteId);
-  }, [ship, book, noteId]);
+  const { contacts, ship, notebook, book, api, note } = props;
 
-  const baseUrl = `/~publish/notebook/${props.ship}/${props.book}`;
+  const baseUrl = `/~publish/notebook/ship/${props.ship}/${props.book}`;
 
   const deletePost = async () => {
     setDeleting(true);
-    await api.publish.delNote(ship.slice(1), book, noteId);
+    const indices = [note.post.index]
+    await api.graph.removeNodes(ship, book, indices);
     props.history.push(baseUrl);
   };
 
-  const comments = note?.comments || [];
-  const file = note?.file;
+  const comments = note?.children
+  const file = note?.post?.contents[1]?.text || "";
   const newfile = file ? file.slice(file.indexOf(";>") + 2) : "";
 
-  let editPost: JSX.Element | null = null;
-  const editUrl = props.location.pathname + "/edit";
-  if (`~${window.ship}` === note?.author) {
-    editPost = (
+  const noteId = parseInt(note.post.index.split('/')[1], 10);
+
+  let adminLinks: JSX.Element | null = null;
+  if (window.ship === note?.post?.author) {
+    adminLinks = (
       <Box display="inline-block">
-        <Link to={editUrl}>
-          <Text color="green">Edit</Text>
-        </Link>
         <Text
           className="dib f9 red2 ml2 pointer"
           color="red"
@@ -81,16 +71,16 @@ export function Note(props: NoteProps & RouteComponentProps) {
         <Text>{"<- Notebook Index"}</Text>
       </Link>
       <Col>
-        <Text display="block" mb={2}>{note?.title || ""}</Text>
+        <Text display="block" mb={2}>{note?.post?.contents[0]?.text || ""}</Text>
         <Box display="flex">
           <Author
             hideNicknames={props.hideNicknames}
             hideAvatars={props.hideAvatars}
-            ship={note?.author}
+            ship={note?.post?.author}
             contacts={contacts}
-            date={note?.["date-created"]}
+            date={note?.post?.["time-sent"]}
           />
-          <Text ml={2}>{editPost}</Text>
+          <Text ml={2}>{adminLinks}</Text>
         </Box>
       </Col>
       <Box color="black" className="md" style={{ overflowWrap: "break-word" }}>
@@ -98,25 +88,20 @@ export function Note(props: NoteProps & RouteComponentProps) {
       </Box>
       <NoteNavigation
         notebook={notebook}
-        prevId={note?.["prev-note"] || undefined}
-        nextId={note?.["next-note"] || undefined}
+        noteId={noteId}
         ship={props.ship}
         book={props.book}
       />
-      {notebook.comments && (
-        <Comments
-          ship={ship}
-          book={props.book}
-          noteId={props.noteId}
-          note={props.note}
-          comments={comments}
-          numComments={props.note["num-comments"]}
-          contacts={props.contacts}
-          api={props.api}
-          hideNicknames={props.hideNicknames}
-          hideAvatars={props.hideAvatars}
-        />
-      )}
+      <Comments
+        ship={ship}
+        book={props.book}
+        note={props.note}
+        comments={comments}
+        contacts={props.contacts}
+        api={props.api}
+        hideNicknames={props.hideNicknames}
+        hideAvatars={props.hideAvatars}
+      />
       <Spinner
         text="Deleting post..."
         awaiting={deleting}

pkg/interface/src/views/apps/publish/components/lib/NoteNavigation.tsx

@@ -2,7 +2,7 @@ import React, { Component } from "react";
 import moment from "moment";
 import { Box } from "@tlon/indigo-react";
 import { Link } from "react-router-dom";
-import { Notebook } from "../../../../types/publish-update";
+import {Graph, GraphNode} from "~/types";
 
 function NavigationItem(props: {
   url: string;
@@ -10,7 +10,7 @@ function NavigationItem(props: {
   date: number;
   prev?: boolean;
 }) {
-  const date = moment(date).fromNow();
+  const date = moment(props.date).fromNow();
   return (
     <Box
       justifySelf={props.prev ? "start" : "end"}
@@ -30,12 +30,19 @@ function NavigationItem(props: {
   );
 }
 
+function getAdjacentId(graph: Graph, child: number, backwards = false): number | null {
+  const children = Array.from(graph);
+  const i = children.findIndex(([index]) => index === child);
+  const target = children[backwards ? i-1 : i+1];
+  return target?.[0] || null;
+}
+  
+
 interface NoteNavigationProps {
   book: string;
-  nextId?: string;
-  prevId?: string;
+  noteId: number;
   ship: string;
-  notebook: Notebook;
+  notebook: Graph;
 }
 
 export function NoteNavigation(props: NoteNavigationProps) {
@@ -43,32 +50,39 @@ export function NoteNavigation(props: NoteNavigationProps) {
   let prevComponent = <Box />;
   let nextUrl = "";
   let prevUrl = "";
-  const { nextId, prevId, notebook } = props;
-  const next =
-    nextId && nextId in notebook?.notes ? notebook?.notes[nextId] : null;
+  const { noteId, notebook } = props;
+  if(!notebook) {
+    return null;
+  }
+  const nextId = getAdjacentId(notebook, noteId);
+  const prevId = getAdjacentId(notebook, noteId, true);
+  const next = nextId && notebook.get(nextId);
+  const prev = prevId && notebook.get(prevId);
 
-  const prev =
-    prevId && prevId in notebook?.notes ? notebook?.notes[prevId] : null;
   if (!next && !prev) {
     return null;
   }
 
   if (next) {
-    nextUrl = `/~publish/notebook/${props.ship}/${props.book}/note/${props.nextId}`;
+    nextUrl = `/~publish/notebook/ship/${props.ship}/${props.book}/note/${nextId}`;
+    const title = next.post.contents[0]?.text;
+    const date = next.post['time-sent'];
     nextComponent = (
       <NavigationItem
-        title={next.title}
-        date={next["date-created"]}
+        title={title}
+        date={date}
         url={nextUrl}
       />
     );
   }
   if (prev) {
-    prevUrl = `/~publish/notebook/${props.ship}/${props.book}/note/${props.prevId}`;
+    prevUrl = `/~publish/notebook/ship/${props.ship}/${props.book}/note/${prevId}`;
+    const title = prev.post.contents[0]?.text;
+    const date = prev.post['time-sent'];
     prevComponent = (
       <NavigationItem
-        title={prev.title}
-        date={prev["date-created"]}
+        title={title}
+        date={date}
         url={prevUrl}
         prev
       />

pkg/interface/src/views/apps/publish/components/lib/NoteRoutes.tsx

@@ -1,27 +1,29 @@
 import React from "react";
 import { Route, Switch } from "react-router-dom";
 
-import { NoteId, Note as INote, Notebook } from "~/types/publish-update";
-import { Contacts } from "~/types/contact-update";
 import GlobalApi from "~/logic/api/global";
 import { RouteComponentProps } from "react-router-dom";
 import Note from "./Note";
 import { EditPost } from "./EditPost";
 
+import { GraphNode, Graph, Contacts } from "~/types";
+
 interface NoteRoutesProps {
   ship: string;
   book: string;
-  noteId: NoteId;
-  note: INote;
-  notebook: Notebook;
+  note: GraphNode;
+  noteId: number;
+  notebook: Graph;
   contacts: Contacts;
   api: GlobalApi;
+  hideAvatars: boolean;
+  hideNicknames: boolean;
 }
 
 export function NoteRoutes(props: NoteRoutesProps & RouteComponentProps) {
   const { ship, book, noteId } = props;
 
-  const baseUrl = `/~publish/notebook/${ship}/${book}/note/${noteId}`;
+  const baseUrl = `/~publish/notebook/ship/${ship}/${book}/note/${noteId}`;
 
   const relativePath = (path: string) => `${baseUrl}${path}`;
   return (