Improve communities design

app/lib/express.js

@@ -484,7 +484,7 @@ router.get("/communities", async (req, res) => {
   }
   const communities = await queries.getCommunities(ssbServer);
 
-  res.render("communities", { communities });
+  res.render("communities/list", { communities });
 });
 
 router.get("/communities/:name", async (req, res) => {
@@ -497,7 +497,7 @@ router.get("/communities/:name", async (req, res) => {
     queries.getCommunityPosts(ssbServer, name),
   ]);
 
-  res.render("community", { community: { name, members, posts } });
+  res.render("communities/show", { community: { name, members, posts } });
 });
 
 router.get("/search", async (req, res) => {

app/lib/queries.js

@@ -4,7 +4,7 @@ const debugPosts = require("debug")("queries:posts"),
   debugMessages = require("debug")("queries:messages"),
   debugFriends = require("debug")("queries:friends"),
   debugFriendshipStatus = require("debug")("queries:friendship_status"),
-  debugPeople = require("debug")("queries:people"),
+  debugSearch = require("debug")("queries:search"),
   debugProfile = require("debug")("queries:profile"),
   debugCommunities = require("debug")("queries:communities"),
   debugCommunityMembers = require("debug")("queries:communityMembers"),
@@ -189,7 +189,7 @@ const getSecretMessages = async (ssbServer, profile) => {
 };
 
 const search = async (ssbServer, search) => {
-  debugPeople("Fetching");
+  debugSearch("Fetching");
 
   // https://stackoverflow.com/questions/3446170/escape-string-for-use-in-javascript-regex
   const normalizedSearch = search
@@ -202,7 +202,7 @@ const search = async (ssbServer, search) => {
   const loosenSpacesSearch = safelyEscapedSearch.replace(" ", ".*");
   const searchRegex = new RegExp(`.*${loosenSpacesSearch}.*`, "i");
 
-  const people = await promisePull(
+  const peoplePromise = promisePull(
     ssbServer.query.read({
       reverse: true,
       query: [
@@ -229,7 +229,7 @@ const search = async (ssbServer, search) => {
     paramap(mapProfiles(ssbServer))
   );
 
-  const communitiesPosts = await promisePull(
+  const communitiesPostsPromise = promisePull(
     ssbServer.query.read({
       reverse: true,
       query: [
@@ -249,6 +249,11 @@ const search = async (ssbServer, search) => {
     })
   );
 
+  const [people, communitiesPosts] = await Promise.all([
+    peoplePromise,
+    communitiesPostsPromise,
+  ]);
+
   const communities = Array.from(
     new Set(communitiesPosts.map((p) => p.value.content.channel))
   ).filter((name) => {
@@ -258,7 +263,7 @@ const search = async (ssbServer, search) => {
     return searchRegex.exec(normalizedName);
   });
 
-  debugPeople("Done");
+  debugSearch("Done");
   return { people: Object.values(mapValues(people)), communities };
 };
 
@@ -518,7 +523,7 @@ const getCommunityPosts = async (ssbServer, name) => {
 
   debugCommunityPosts("Done");
 
-  return mapValues(Object.values(communityPostsByKey));
+  return Object.values(communityPostsByKey);
 };
 
 setInterval(() => {

app/public/style.css

@@ -352,3 +352,14 @@ h2 {
   border-radius: 3px;
   padding: 10px;
 }
+
+.community-topic-link {
+  justify-content: space-between;
+  padding: 8px 0;
+  border-top: 1px solid #ccc;
+  text-decoration: none;
+}
+
+.community-topic-link:hover .community-topic-name {
+  text-decoration: underline;
+}

app/views/communities/list.ejs

@@ -1,4 +1,4 @@
-<%- include('_header') %>
+<%- include('../_header') %>
 
 <h1>Communities</h1>
 
@@ -10,4 +10,4 @@
   <% }) %>
 </div>
 
-<%- include('_footer') %>
+<%- include('../_footer') %>

app/views/communities/show.ejs

@@ -0,0 +1,42 @@
+<%- include('../_header', { main_class: "screen-center" }) %>
+<style>
+  main {
+    max-width: none;
+    margin: 0 auto;
+  }
+</style>
+
+<div style="background: #9b5f5f; color: #FFF; padding: 50px; border-radius: 5px 5px 0 0">
+  <div style="max-width: 1200px; margin: 0 auto">
+    <h1 style="font-size: 60px">#<%= community.name %></h1>
+  </div>
+</div>
+
+<div style="max-width: 1200px; margin: 0 auto; border-radius: 0 0 5px 5px">
+  <div class="columns">
+    <div class="friends-communities" style="border-radius: 0">
+      <h2>Members</h2>
+      <%- include('../_friends', { friends: community.members }) %>
+    </div>
+    <div class="wall">
+      <div class="columns" style="justify-content: space-between; align-items: baseline; padding-bottom: 5px">
+        <h2>Topics</h2>
+        <a class="button" href="/communities/<%= community.name %>/new">New Topic</a>
+      </div>
+      <% community.posts.map(post => { %>
+        <a href="/communities/<%= community.name %>/<%= post.key %>" class="columns community-topic-link">
+          <div class="community-topic-name">
+            <% if (post.value.content.text.length > 60) { %>
+              <%= post.value.content.text.substr(0, 60) %>...
+            <% } else { %>
+              <%= post.value.content.text %>
+            <% } %>
+          </div>
+          <div style="min-width: 110px; text-align: right;">💬 <%= post.value.replies.length %> replies</div>
+        </a>
+      <% }) %>
+    </div>
+  </div>
+</div>
+
+<%- include('../_footer') %>

app/views/community.ejs

@@ -1,30 +0,0 @@
-<%- include('_header') %>
-<style>
-  main {
-    max-width: none;
-    margin: 0 auto;
-  }
-</style>
-
-<div style="background: #666; color: #FFF; padding: 50px 0">
-  <div style="max-width: 1200px; margin: 0 auto">
-    <h1 style="font-size: 60px">#<%= community.name %></h1>
-  </div>
-</div>
-
-<div style="max-width: 1200px; margin: 0 auto">
-  <div class="columns">
-    <div class="about">
-      <h2>Members</h2>
-      <%- include('_friends', { friends: community.members }) %>
-    </div>
-    <div class="wall">
-      <h2>Topics</h2>
-      <% community.posts.map(post => { %>
-        <p><%= post.content.text.substr(0, 70) %>. Replies <%= post.replies.length %></p>
-      <% }) %>
-    </div>
-  </div>
-</div>
-
-<%- include('_footer') %>