Actually "delete" vanishing messages now

app/lib/express.js

@@ -107,6 +107,18 @@ router.post("/publish", async (req, res) => {
   res.redirect("/");
 });
 
+// TODO: tie reading with deleting
+router.post("/vanish", async (req, res) => {
+  const key = req.body.key;
+
+  await ssbServer.publish({
+    type: "delete",
+    dest: key,
+  });
+
+  res.send("ok");
+});
+
 router.post("/profile/:id/publish", async (req, res) => {
   const id = req.params.id;
   const visibility = req.body.visibility;

app/lib/queries.js

@@ -117,9 +117,9 @@ const getPosts = (ssbServer, profile) =>
     );
   });
 
-const getVanishingMessages = (ssbServer, profile) =>
-  debug("Fetching vanishing messages") ||
-  new Promise((resolve, reject) => {
+const getVanishingMessages = async (ssbServer, profile) => {
+  debug("Fetching vanishing messages");
+  const messagesPromise = new Promise((resolve, reject) => {
     pull(
       // @ts-ignore
       cat([
@@ -165,15 +165,46 @@ const getVanishingMessages = (ssbServer, profile) =>
       ),
       paramap(mapProfiles(ssbServer)),
       pull.collect((err, msgs) => {
-        debug("Done fetching vanishing messages");
-        const entries = msgs.map((x) => x.value);
-
         if (err) return reject(err);
-        return resolve(entries);
+        return resolve(msgs);
       })
     );
   });
 
+  const deletedPromise = new Promise((resolve, reject) => {
+    pull(
+      ssbServer.query.read({
+        reverse: true,
+        query: [
+          {
+            $filter: {
+              value: {
+                author: profile.id,
+                content: {
+                  type: "delete",
+                },
+              },
+            },
+          },
+        ],
+      }),
+      pull.collect((err, msgs) => {
+        if (err) return reject(err);
+        return resolve(Object.values(msgs));
+      })
+    );
+  });
+
+  const [messages, deleted] = await Promise.all([
+    messagesPromise,
+    deletedPromise,
+  ]);
+  const deletedIds = deleted.map((x) => x.value.content.dest);
+
+  debug("Done fetching vanishing messages");
+  return messages.filter((m) => !deletedIds.includes(m.key));
+};
+
 const searchPeople = (ssbServer, search) =>
   debug("Searching people") ||
   new Promise((resolve, reject) => {
@@ -261,10 +292,9 @@ const getAllEntries = (ssbServer, query) =>
       }),
       pull.collect((err, msgs) => {
         debug("Done fetching all entries");
-        const entries = msgs.map((x) => x.value);
 
         if (err) return reject(err);
-        return resolve(entries);
+        return resolve(msgs);
       })
     );
   });

app/public/js/index.js

@@ -25,5 +25,11 @@ messages.forEach((message) => {
     overlay.addEventListener("click", onClose);
     closeButton.addEventListener("click", onClose);
     escCallback = onClose;
+
+    fetch("/vanish", {
+      method: "POST",
+      headers: { "Content-Type": "application/x-www-form-urlencoded" },
+      body: "key=" + encodeURIComponent(message.dataset.key),
+    });
   });
 });

app/public/style.css

@@ -163,6 +163,8 @@ button.vanishing-message {
   padding: 10px;
   padding-bottom: 0;
   font-weight: bold;
+  text-decoration: none;
+  color: #000;
 }
 
 .modal-body {

app/views/index.ejs

@@ -25,20 +25,20 @@
     <% if (vanishingMessages.length > 0) { %>
       <div class="vanishing-messages" style="padding-bottom: 20px">
         <h2>Vanishing Messages</h2>
-        <% vanishingMessages.reverse().map(post => { %>
+        <% vanishingMessages.reverse().map(message => { %>
           <span>
-            <button class="vanishing-message">
-              <div><img src="<%= profileImageUrl(post.authorProfile) %>" class="post-profile-pic" /></div>
-              <div><%= post.authorProfile.name %></div>
+            <button class="vanishing-message" data-key="<%= message.key %>">
+              <div><img src="<%= profileImageUrl(message.value.authorProfile) %>" class="post-profile-pic" /></div>
+              <div><%= message.value.authorProfile.name %></div>
             </button>
             <div class="overlay"></div>
             <div class="modal">
-              <div class="modal-header">
-                <img src="<%= profileImageUrl(post.authorProfile) %>" class="post-profile-pic" style="padding-right: 10px" />
-                <%= post.authorProfile.name %>
-              </div>
+              <a href="<%= profileUrl(message.value.authorProfile.id) %>" class="modal-header">
+                <img src="<%= profileImageUrl(message.value.authorProfile) %>" class="post-profile-pic" style="padding-right: 10px" />
+                <%= message.value.authorProfile.name %>
+              </a>
               <div class="modal-body">
-                <%= post.content.text %>
+                <%= message.value.content.text %>
               </div>
               <div class="modal-footer">
                 after you close this box the message will be gone forever