Improve friends request section

app/lib/queries.js

@@ -239,24 +239,43 @@ const searchPeople = (ssbServer, search) =>
 const getFriends = async (ssbServer, profile) => {
   debugFriends("Fetching");
 
-  let followingPromise = new Promise((resolve, reject) => {
+  let contacts = await new Promise((resolve, reject) => {
     pull(
-      ssbServer.query.read({
+      // @ts-ignore
-        reverse: true,
+      cat([
-        query: [
+        ssbServer.query.read({
-          {
+          reverse: true,
-            $filter: {
+          query: [
-              value: {
+            {
-                author: profile.id,
+              $filter: {
-                content: {
+                value: {
-                  type: "contact",
+                  author: profile.id,
+                  content: {
+                    type: "contact",
+                  },
                 },
               },
             },
-          },
+          ],
-        ],
+          limit: 100,
-        limit: 100,
+        }),
-      }),
+        ssbServer.query.read({
+          reverse: true,
+          query: [
+            {
+              $filter: {
+                value: {
+                  content: {
+                    type: "contact",
+                    contact: profile.id,
+                  },
+                },
+              },
+            },
+          ],
+          limit: 100,
+        }),
+      ]),
       pull.collect((err, msgs) => {
         const entries = msgs.map((x) => x.value);
 
@@ -266,42 +285,8 @@ const getFriends = async (ssbServer, profile) => {
     );
   });
 
-  let followersPromise = new Promise((resolve, reject) => {
-    pull(
-      ssbServer.query.read({
-        reverse: true,
-        query: [
-          {
-            $filter: {
-              value: {
-                content: {
-                  type: "contact",
-                  contact: profile.id,
-                },
-              },
-            },
-          },
-        ],
-        limit: 100,
-      }),
-      pull.collect((err, msgs) => {
-        const entries = msgs.map((x) => x.value);
-
-        if (err) return reject(err);
-        return resolve(entries);
-      })
-    );
-  });
-
-  const [following, followers] = await Promise.all([
-    followingPromise,
-    followersPromise,
-  ]);
-
-  const allContacts = following.concat(followers).reverse();
-
   let network = {};
-  for (let contact of allContacts) {
+  for (let contact of contacts.reverse()) {
     if (contact.content.following) {
       network[contact.author] = network[contact.author] || {};
       network[contact.author][contact.content.contact] = true;

app/public/js/index.js

@@ -18,7 +18,7 @@ messages.forEach((message) => {
       const parent = modal.parentElement;
       parent.parentElement.removeChild(parent);
       if (document.querySelectorAll(".vanishing-message").length == 0) {
-        document.querySelector(".vanishing-messages").style.display = "none";
+        document.querySelector(".js-vanishing-messages").style.display = "none";
       }
     };
 

app/public/style.css

@@ -170,20 +170,29 @@ h2 {
   width: 300px;
 }
 
-button.vanishing-message {
+.notifications {
+  display: flex;
+  align-content: flex-start;
+}
+
+a.notification-box,
+button.notification-box {
   background: none;
-  width: 84px;
   text-align: center;
   border: 1px solid #333;
-  padding: 10px;
   cursor: pointer;
   color: #000;
   margin-right: 8px;
+  padding: 5px;
+  text-decoration: none;
+  display: inline-block;
+  border-radius: 3px;
 }
 
-button.vanishing-message:hover {
+a.notification-box:hover,
-  background: #ddd;
+button.notification-box:hover {
-  color: #5f5f5f;
+  background: #e2e2e2;
+  color: #000;
 }
 
 .overlay {

app/views/home.ejs

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