Add new posts and replies

app/lib/express.js

@@ -144,7 +144,7 @@ app.use((_req, res, next) => {
     return "/images/no-avatar.png";
   };
   res.locals.topicTitle = (post) => {
-    const title = post.content.text;
+    const title = post.content.title || post.content.text;
     if (title.length > 60) {
       return title.substr(0, 60) + "...";
     }
@@ -497,22 +497,82 @@ router.get("/communities", async (req, res) => {
   res.render("communities/list", { communities });
 });
 
+const communityData = (req) => {
+  const name = req.params.name;
+  return queries.getCommunityMembers(ssbServer, name).then((members) => ({
+    name,
+    members,
+  }));
+};
+
 router.get("/communities/:name", async (req, res) => {
   const name = req.params.name;
   if (!req.context.profile) {
     return res.render("index");
   }
-  const [members, posts] = await Promise.all([
-    queries.getCommunityMembers(ssbServer, name),
+  const [community, posts] = await Promise.all([
+    communityData(req),
     queries.getCommunityPosts(ssbServer, name),
   ]);
 
-  res.render("communities/show", {
-    community: { name, members, posts },
+  res.render("communities/community", {
+    community,
+    posts,
     layout: "communities/_layout",
   });
 });
 
+router.get("/communities/:name/new", async (req, res) => {
+  const community = await communityData(req);
+
+  res.render("communities/new_topic", {
+    community,
+    layout: "communities/_layout",
+  });
+});
+
+router.post("/communities/:name/new", async (req, res) => {
+  const name = req.params.name;
+  const title = req.body.title;
+  const post = req.body.post;
+
+  const topic = await ssbServer.identities.publishAs({
+    id: req.context.profile.id,
+    private: false,
+    content: {
+      type: "post",
+      title: title,
+      text: post,
+      channel: name,
+    },
+  });
+
+  res.redirect(`/communities/${name}/${topic.key.replace("%", "")}`);
+});
+
+router.post("/communities/:name/:key(*)/publish", async (req, res) => {
+  const name = req.params.name;
+  const key = req.params.key;
+  const reply = req.body.reply;
+
+  if (!req.context.profile) {
+    return res.render("index");
+  }
+
+  await ssbServer.identities.publishAs({
+    id: req.context.profile.id,
+    private: false,
+    content: {
+      type: "post",
+      text: reply,
+      channel: name,
+      root: "%" + key,
+    },
+  });
+
+  res.redirect(`/communities/${name}/${key}`);
+});
+
 router.get("/communities/:name/:key(*)", async (req, res) => {
   const name = req.params.name;
   const key = "%" + req.params.key;
@@ -520,14 +580,14 @@ router.get("/communities/:name/:key(*)", async (req, res) => {
   if (!req.context.profile) {
     return res.render("index");
   }
-  const [members, posts] = await Promise.all([
-    queries.getCommunityMembers(ssbServer, name),
+  const [community, posts] = await Promise.all([
+    communityData(req),
     queries.getPostWithReplies(ssbServer, name, key),
   ]);
 
   res.render("communities/topic", {
     posts,
-    community: { name, members },
+    community,
     layout: "communities/_layout",
   });
 });

app/lib/queries.js

@@ -537,7 +537,7 @@ const getPostWithReplies = async (ssbServer, channel, key) => {
   );
 
   debugCommunityPosts("Done");
-  return mapValues(postWithReplies);
+  return postWithReplies;
 };
 
 const getCommunityPosts = async (ssbServer, name) => {

app/public/style.css

@@ -66,6 +66,7 @@ textarea {
   width: 100%;
   font-size: 15px;
   margin-top: 8px;
+  border: 1px solid #bbb;
 }
 
 header {
@@ -180,6 +181,7 @@ h2 {
   padding: 14px;
   flex-grow: 1;
   background: #fff;
+  min-height: 300px;
 }
 
 .entrance {

app/views/communities/_layout.ejs

@@ -6,9 +6,13 @@
   }
 </style>
 
-<div style="background: #9b5f5f; color: #FFF; padding: 50px; border-radius: 5px 5px 0 0">
+<div style="background: #9b5f5f; padding: 50px; border-radius: 5px 5px 0 0">
   <div style="max-width: 1200px; margin: 0 auto">
-    <h1 style="font-size: 60px">#<%= community.name %></h1>
+    <h1 style="font-size: 60px">
+      <a href="/communities/<%= community.name %>" style="color: #FFF; text-decoration: none;">
+        #<%= community.name %>
+      </a>
+    </h1>
   </div>
 </div>
 

app/views/communities/community.ejs

@@ -2,7 +2,7 @@
   <h2>Topics</h2>
   <a class="button" href="/communities/<%= community.name %>/new">New Topic</a>
 </div>
-<% community.posts.map(post => { %>
+<% posts.map(post => { %>
   <a href="/communities/<%= community.name %>/<%= post.key.replace("%", "") %>" class="columns community-topic-link">
     <div class="community-topic-name">
       <%= topicTitle(post.value) %>

app/views/communities/new_topic.ejs

@@ -0,0 +1,13 @@
+<form action="/communities/<%= community.name %>/new" method="POST">
+  <label>
+    Title:
+    <input type="text" name="title" style="margin-bottom: 20px" maxlength="70" />
+  </label>
+  <label>
+    Post:
+    <textarea name="post" rows="5"></textarea>
+  </label>
+  <div class="reverse-columns" style="margin-top: 10px">
+    <input type="submit" value="Publish" />
+  </div>
+</form>

app/views/communities/topic.ejs

@@ -1,2 +1,16 @@
-<h1><%= topicTitle(posts[0]) %></h1>
-<%- include("../_posts", { posts, dont_cut: true }) %>
+<% if (posts.length > 0) { %>
+  <h1><%= topicTitle(posts[0].value) %></h1>
+  <%- include("../_posts", { posts: posts.map(x => x.value), dont_cut: true }) %>
+
+  <form action="/communities/<%= community.name %>/<%= posts[0].key.replace("%", "") %>/publish" method="POST" style="padding-top: 20px; border-top: 1px solid #ddd;">
+    <label>
+      Reply:
+      <textarea name="reply" class="compose-post" style="margin: 10px 0 0 0; height: 80px"></textarea>
+    </label>
+    <div class="reverse-columns" style="margin-top: 10px">
+      <input type="submit" value="Publish" />
+    </div>
+  </form>
+<% } else { %>
+  <h1>404 topic not found</h1>
+<% } %>