Show communities you joined on communities page

app/lib/express.js

@@ -492,10 +492,13 @@ router.post("/about", async (req, res) => {
 router.get(
   "/communities",
   { mobileVersion: "/mobile/communities" },
-  async (_req, res) => {
-    const communities = await queries.getCommunities();
+  async (req, res) => {
+    const [communities, participating] = await Promise.all([
+      queries.getCommunities(),
+      queries.getProfileCommunities(req.context.profile.id),
+    ]);
 
-    res.render("communities/list", { communities });
+    res.render("communities/list", { communities, participating });
   }
 );
 

app/lib/mobile-routes.js

@@ -78,11 +78,15 @@ module.exports.setupRoutes = (router) => {
   router.get(
     "/mobile/communities",
     { desktopVersion: "/communities" },
-    async (_req, res) => {
-      const communities = await queries.getCommunities();
+    async (req, res) => {
+      const [communities, participating] = await Promise.all([
+        queries.getCommunities(),
+        queries.getProfileCommunities(req.context.profile.id),
+      ]);
 
       res.render("mobile/communities/list", {
         communities,
+        participating,
         layout: "mobile/_layout",
       });
     }

app/lib/queries.js

@@ -9,7 +9,10 @@ const debugPosts = require("debug")("queries:posts"),
   debugCommunities = require("debug")("queries:communities"),
   debugCommunityMembers = require("debug")("queries:communityMembers"),
   debugCommunityPosts = require("debug")("queries:communityPosts"),
-  debugCommunityIsMember = require("debug")("queries:communityIsMember");
+  debugCommunityIsMember = require("debug")("queries:communityIsMember"),
+  debugCommunityProfileCommunities = require("debug")(
+    "queries:communityProfileCommunities"
+  );
 const paramap = require("pull-paramap");
 const { promisePull, mapValues } = require("./utils");
 const ssb = require("./ssb-client");
@@ -517,6 +520,42 @@ const getCommunityMembers = async (name) => {
   return memberProfiles;
 };
 
+const getProfileCommunities = async (id) => {
+  debugCommunityProfileCommunities("Fetching");
+  const subscriptions = await promisePull(
+    ssb.client().query.read({
+      reverse: true,
+      query: [
+        {
+          $filter: {
+            value: {
+              author: id,
+              content: {
+                type: "channel",
+              },
+            },
+          },
+        },
+      ],
+    })
+  );
+  const dedupSubscriptions = {};
+  for (const subscription of subscriptions) {
+    const channel = subscription.value.content.channel;
+    if (dedupSubscriptions[channel]) continue;
+    dedupSubscriptions[channel] = subscription;
+  }
+  const onlyActiveSubscriptions = Object.values(dedupSubscriptions).filter(
+    (x) => x.value.content.subscribed
+  );
+  const channelNames = onlyActiveSubscriptions.map(
+    (x) => x.value.content.channel
+  );
+  debugCommunityProfileCommunities("Done");
+
+  return channelNames;
+};
+
 const getPostWithReplies = async (channel, key) => {
   debugCommunityPosts("Fetching");
 
@@ -651,4 +690,5 @@ module.exports = {
   progress,
   autofollow,
   isMember,
+  getProfileCommunities,
 };

app/views/_header.ejs

@@ -37,7 +37,7 @@
           <% } %>
           <form action="/search" method="GET" style="margin-right: 10px">
             <div class="search-icon">🔎</div>
-            <input type="search" class="input-search" name="query" placeholder="Search for people...">
+            <input type="search" class="input-search" name="query" placeholder="Search">
           </form>
         </div>
       <% } %>

app/views/communities/list.ejs

@@ -1,13 +1,22 @@
 <%- include('../_header') %>
 
-<h1>Communities</h1>
+<h1 style="margin-bottom: 10px">My communities</h1>
 
-<div style="padding-top: 20px">
-  <% communities.map(community => { %>
-    <a href="/communities/<%= community %>" class="link-block" style="display: inline-block">
-      #<%= community %>
-    </a>
-  <% }) %>
-</div>
+<% if (participating.length == 0) { %>
+  <p>You haven't joined any communities yet, explore some below to join</p>
+<% } %>
+<% participating.map(community => { %>
+  <a href="/mobile/communities/<%= community %>" class="link-block">
+    #<%= community %>
+  </a>
+<% }) %>
+
+<h1 style="margin-top: 40px; margin-bottom: 10px">Explore</h1>
+
+<% communities.map(community => { %>
+  <a href="/mobile/communities/<%= community %>" class="link-block">
+    #<%= community %>
+  </a>
+<% }) %>
 
 <%- include('../_footer') %>

app/views/mobile/communities/list.ejs

@@ -1,11 +1,20 @@
 <div class="pink-background">
-  <h1>Communities</h1>
+  <h1 style="margin-bottom: 10px">My communities</h1>
 
-  <div style="padding-top: 20px">
-    <% communities.map(community => { %>
-      <a href="/mobile/communities/<%= community %>" class="link-block" style="display: inline-block">
-        #<%= community %>
-      </a>
-    <% }) %>
-  </div>
+  <% if (participating.length == 0) { %>
+    <p>You haven't joined any communities yet, explore some below to join</p>
+  <% } %>
+  <% participating.map(community => { %>
+    <a href="/mobile/communities/<%= community %>" class="link-block">
+      #<%= community %>
+    </a>
+  <% }) %>
+
+  <h1 style="margin-top: 40px; margin-bottom: 10px">Explore</h1>
+
+  <% communities.map(community => { %>
+    <a href="/mobile/communities/<%= community %>" class="link-block">
+      #<%= community %>
+    </a>
+  <% }) %>
 </div>

app/views/mobile/search.ejs

@@ -1,7 +1,7 @@
 <div style="padding: 14px">
   <form action="/mobile/search" method="GET" style="padding-bottom: 20px">
     <div class="search-icon">🔎</div>
-    <input type="search" class="input-search" name="query" placeholder="Search for people..." value="<%= query %>">
+    <input type="search" class="input-search" name="query" placeholder="Search" value="<%= query %>">
   </form>
   <% if (query.length < 3) { %>
     <h2>You need to search for 3 or more characters</h2>
@@ -24,7 +24,7 @@
       <p>No results found</p>
     <% } %>
     <% communities.map(community => { %>
-        <a href="/communities/<%= community %>" class="link-block" style="display: inline-block">
+        <a href="/communities/<%= community %>" class="link-block">
           #<%= community %>
         </a>
     <% }) %>

app/views/search.ejs

@@ -23,7 +23,7 @@
     <p>No results found</p>
   <% } %>
   <% communities.map(community => { %>
-      <a href="/communities/<%= community %>" class="link-block" style="display: inline-block">
+      <a href="/communities/<%= community %>" class="link-block">
         #<%= community %>
       </a>
   <% }) %>