Commit gossip list and add syncing indicator

app/lib/express.js

@@ -27,10 +27,20 @@ let homeFolder =
 let ssbSecret = ssbKeys.loadOrCreateSync(
   `${homeFolder}/.${process.env.CONFIG_FOLDER || "social"}/secret`
 );
+let syncing = false;
+
 Client(ssbSecret, ssbConfig, async (err, server) => {
   if (err) throw err;
 
   ssbServer = server;
+  queries.progress(ssbServer, (data) => {
+    if (data.incompleteFeeds > 0) {
+      if (!syncing) debug("syncing");
+      syncing = true;
+    } else {
+      syncing = false;
+    }
+  });
   console.log("SSB Client ready");
 });
 
@@ -57,7 +67,9 @@ app.use(async (req, res, next) => {
     return;
   }
 
-  req.context = {};
+  req.context = {
+    syncing: syncing,
+  };
   res.locals.context = req.context;
   try {
     const identities = await ssbServer.identities.list();
@@ -378,6 +390,10 @@ router.get("/blob/*", (req, res) => {
   serveBlobs(ssbServer)(req, res);
 });
 
+router.get("/syncing", (req, res) => {
+  res.json({ syncing });
+});
+
 const expressServer = app.listen(port, () =>
   console.log(`Example app listening at http://localhost:${port}`)
 );

app/lib/queries.js

@@ -302,6 +302,18 @@ const getProfile = async (ssbServer, id) => {
   return profile;
 };
 
+const progress = (ssbServer, callback) => {
+  pull(
+    ssbServer.replicate.changes(),
+    pull.drain(
+      callback,
+      (err) => {
+        console.error("Progress drain error", err);
+      }
+    )
+  );
+};
+
 setInterval(() => {
   debugProfile("Clearing profile cache");
   profileCache = {};
@@ -317,4 +329,5 @@ module.exports = {
   getVanishingMessages,
   profileCache,
   getFriendshipStatus,
+  progress,
 };

app/lib/ssb.js

@@ -1,6 +1,6 @@
 const fs = require("fs");
 const path = require("path");
-const { writeKey } = require("./utils");
+const { writeKey, ssbFolder } = require("./utils");
 
 let envKey =
   process.env.SSB_KEY &&
@@ -10,6 +10,9 @@ if (envKey) {
     writeKey(envKey, "/secret");
     console.log("Writing SSB_KEY from env");
   } catch (_) {}
+  if (!fs.existsSync(`${ssbFolder()}/gossip.json`)) {
+    fs.copyFileSync("gossip.json", `${ssbFolder()}/gossip.json`);
+  }
 }
 
 const Server = require("ssb-server");

app/lib/utils.js

@@ -30,12 +30,15 @@ const ssbFolder = () => {
     process.env.HOME || process.env.HOMEPATH || process.env.USERPROFILE;
   return `${homeFolder}/.${process.env.CONFIG_FOLDER || "social"}`;
 };
+module.exports.ssbFolder = ssbFolder;
 
 module.exports.writeKey = (key, path) => {
   let secretPath = `${ssbFolder()}${path}`;
 
   // Same options ssb-keys use
-  fs.mkdirSync(ssbFolder(), { recursive: true });
+  try {
+    fs.mkdirSync(ssbFolder(), { recursive: true });
+  } catch (e) {}
   fs.writeFileSync(secretPath, key, { mode: 0x100, flag: "wx" });
 };
 

app/public/js/index.js

@@ -65,3 +65,19 @@ if (jsVanishingOption) {
   jsVanishingOption.addEventListener("change", onVisibilityChange);
   onVisibilityChange();
 }
+
+const jsSyncing = document.querySelector(".js-syncing");
+if (jsSyncing) {
+  let checkSyncInterval;
+  const checkSync = () => {
+    fetch("/syncing")
+      .then((result) => result.json())
+      .then((result) => {
+        if (!result.syncing) {
+          clearInterval(checkSyncInterval);
+          jsSyncing.parentElement.removeChild(jsSyncing);
+        }
+      });
+  };
+  checkSyncInterval = setInterval(checkSync, 5000);
+}

app/views/_header.ejs

@@ -18,7 +18,13 @@
           <a href="/pubs">Pubs</a>
           <a href="/debug">Debug</a>
         </nav>
-        <div class="right-items">
+        <div class="right-items"></div>
+          <% if (context.syncing) { %>
+            <div class="columns js-syncing" style="align-items: center; padding-right: 30px;">
+              <img src="/images/syncing.gif" width="24" style="margin-right: 10px; filter: invert();">
+              <span>Syncing</span>
+            </div>
+          <% } %>
           <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...">

app/views/home.ejs

@@ -65,7 +65,15 @@
     </form>
 
     <h2 style="margin: 0">Your Wall</h2>
-    <%- include('_posts', { posts }) %>
+    <% if (posts.length > 0) { %>
+      <%- include('_posts', { posts }) %>
+    <% } else { %>
+      <div style="padding-top: 15px;">
+        <div class="post">
+          You have no posts yet, publish something!
+        </div>
+      </div>
+    <% } %>
   </div>
 </div>