implement comment previewing

src/index.js

@@ -143,8 +143,35 @@ const { about, blob, friend, meta, post, vote } = require("./models")({
   isPublic: config.public,
 });
 
+const resolveCommentComponents = async function (ctx) {
+    const { message } = ctx.params;
+    const parentId = message
+      const parentMessage = await post.get(parentId);
+      const myFeedId = await meta.myFeedId();
+
+      const hasRoot =
+        typeof parentMessage.value.content.root === "string" &&
+        ssbRef.isMsg(parentMessage.value.content.root);
+      const hasFork =
+        typeof parentMessage.value.content.fork === "string" &&
+        ssbRef.isMsg(parentMessage.value.content.fork);
+
+      const rootMessage = hasRoot
+        ? hasFork
+          ? parentMessage
+          : await post.get(parentMessage.value.content.root)
+        : parentMessage;
+
+      const messages = await post.topicComments(rootMessage.key);
+
+      messages.push(rootMessage);
+      return { messages, myFeedId, parentMessage }
+}
+
+
 const {
   authorView,
+  previewCommentView,
   commentView,
   editProfileView,
   indexingView,
@@ -587,31 +614,8 @@ router
     ctx.body = await publishView();
   })
   .get("/comment/:message", async (ctx) => {
-    const { message } = ctx.params;
-    const comment = async (parentId) => {
-      const parentMessage = await post.get(parentId);
-      const myFeedId = await meta.myFeedId();
-
-      const hasRoot =
-        typeof parentMessage.value.content.root === "string" &&
-        ssbRef.isMsg(parentMessage.value.content.root);
-      const hasFork =
-        typeof parentMessage.value.content.fork === "string" &&
-        ssbRef.isMsg(parentMessage.value.content.fork);
-
-      const rootMessage = hasRoot
-        ? hasFork
-          ? parentMessage
-          : await post.get(parentMessage.value.content.root)
-        : parentMessage;
-
-      const messages = await post.topicComments(rootMessage.key);
-
-      messages.push(rootMessage);
-
-      return commentView({ messages, myFeedId, parentMessage });
-    };
-    ctx.body = await comment(message);
+    const { messages, myFeedId, parentMessage } = await resolveCommentComponents(ctx)
+    ctx.body = await commentView({ messages, myFeedId, parentMessage })
   })
   .post("/subtopic/:message", koaBody(), async (ctx) => {
     const { message } = ctx.params;
@@ -629,6 +633,19 @@ router
     ctx.body = await publishSubtopic({ message, text });
     ctx.redirect(`/thread/${encodeURIComponent(message)}`);
   })
+  .post("/comment/preview/:message", koaBody(), async (ctx) => {
+    const { messages, myFeedId, parentMessage } = await resolveCommentComponents(ctx)
+    const text = String(ctx.request.body.text);
+
+    const ssb = await cooler.open();
+    const authorMeta = {
+      id: ssb.id,
+      name: await about.name(ssb.id),
+      image: await about.image(ssb.id),
+    }
+
+    ctx.body = await previewCommentView({ messages, myFeedId, parentMessage, authorMeta, text });
+  })
   .post("/comment/:message", koaBody(), async (ctx) => {
     const { message } = ctx.params;
     const text = String(ctx.request.body.text);

src/views/index.js

@@ -654,7 +654,14 @@ exports.authorView = ({
   return template(i18n.profile, prefix, items);
 };
 
-exports.commentView = async ({ messages, myFeedId, parentMessage }) => {
+exports.previewCommentView = async ({ authorMeta, text, messages, myFeedId, parentMessage }) => {
+  const publishAction = `/comment/${encodeURIComponent(messages[0].key)}`;
+
+  const preview = generatePreview({ authorMeta, text, contentWarning: undefined, action: publishAction })
+  return exports.commentView({ messages, myFeedId, parentMessage }, preview, text)
+};
+
+exports.commentView = async ({ messages, myFeedId, parentMessage }, preview, text) => {
   let markdownMention;
 
   const messageElements = await Promise.all(
@@ -672,7 +679,7 @@ exports.commentView = async ({ messages, myFeedId, parentMessage }) => {
     })
   );
 
-  const action = `/comment/${encodeURIComponent(messages[0].key)}`;
+  const action = `/comment/preview/${encodeURIComponent(messages[0].key)}`;
   const method = "post";
 
   const isPrivate = parentMessage.value.meta.private;
@@ -684,6 +691,7 @@ exports.commentView = async ({ messages, myFeedId, parentMessage }) => {
   return template(
     i18n.commentTitle({ authorName }),
     messageElements,
+    preview !== undefined ? preview : '',
     p(
       ...i18n.commentLabel({ publicOrPrivate, markdownUrl }),
       ...maybeSubtopicText
@@ -696,13 +704,14 @@ exports.commentView = async ({ messages, myFeedId, parentMessage }) => {
           required: true,
           name: "text",
         },
+        text ? text : 
         isPrivate ? null : markdownMention
       ),
       button(
         {
           type: "submit",
         },
-        i18n.comment
+        "Preview comment"
       )
     )
   );
@@ -812,7 +821,7 @@ exports.publishView = () => {
   );
 };
 
-const generatePreview = ({ authorMeta, text, contentWarning }) => {
+const generatePreview = ({ authorMeta, text, contentWarning, action }) => {
   // craft message that looks like it came from the db
   const msg = {
     key: "%non-existant.preview",
@@ -845,7 +854,7 @@ const generatePreview = ({ authorMeta, text, contentWarning }) => {
 
       // doesn't need blobs, preview adds them to the text
       form(
-        { action: "/publish", method: "post" },
+        { action, method: "post" },
         input({
           name: "contentWarning",
           type: "hidden",
@@ -904,7 +913,7 @@ exports.previewView = ({ authorMeta, text, contentWarning }) => {
         input({ type: "file", id: "blob", name: "blob" })
       )
     ),
-    generatePreview({ authorMeta, text, contentWarning }),
+    generatePreview({ action: "/publish", authorMeta, text, contentWarning }),
     p(i18n.publishCustomInfo({ href: "/publish/custom" }))
   );
 };