Merge pull request #283 from waku-org/adklempner/light-js-store-query

feat: add button to query from store in light-js

examples/light-js/index.html

@@ -60,6 +60,13 @@
     <br />
     <div id="messages"></div>
 
+    <div>
+      <h2>Store</h2>
+    </div>
+    <button disabled id="queryStoreButton" type="button">
+      Retrieve past messages
+    </button>
+
     <script src="https://unpkg.com/@multiformats/multiaddr@12.1.1/dist/index.min.js"></script>
     <script type="module">
       import {
@@ -69,11 +76,12 @@
         createDecoder,
         utf8ToBytes,
         bytesToUtf8,
-      } from "https://unpkg.com/@waku/sdk@0.0.18/bundle/index.js";
+      } from "https://unpkg.com/@waku/sdk@0.0.20/bundle/index.js";
       import {
         enrTree,
         DnsNodeDiscovery,
       } from "https://unpkg.com/@waku/dns-discovery@0.0.16/bundle/index.js";
+      import { messageHash } from "https://unpkg.com/@waku/message-hash@0.1.8/bundle/index.js";
 
       const peerIdDiv = document.getElementById("peer-id");
       const remotePeerIdDiv = document.getElementById("remote-peer-id");
@@ -82,6 +90,7 @@
       const dialButton = document.getElementById("dial");
       const subscribeButton = document.getElementById("subscribe");
       const unsubscribeButton = document.getElementById("unsubscribe");
+      const queryStoreButton = document.getElementById("queryStoreButton");
       const messagesDiv = document.getElementById("messages");
       const textInput = document.getElementById("textInput");
       const sendButton = document.getElementById("sendButton");
@@ -91,12 +100,19 @@
       const ContentTopic = "/js-waku-examples/1/chat/utf8";
       const decoder = createDecoder(ContentTopic);
       const encoder = createEncoder({ contentTopic: ContentTopic });
-      let messages = [];
+      // Each key is a unique identifier for the message. Each value is an obj { text, timestamp }
+      let messages = {};
       let unsubscribe;
 
       const updateMessages = (msgs, div) => {
         div.innerHTML = "<ul>";
-        messages.forEach((msg) => (div.innerHTML += "<li>" + msg + "</li>"));
+        Object.values(msgs)
+          .sort((a, b) => a.timestamp.getTime() - b.timestamp.getTime())
+          .forEach(
+            (msg) =>
+              (div.innerHTML +=
+                "<li>" + `${msg.text} - ${msg.timestamp}` + "</li>")
+          );
         div.innerHTML += "</ul>";
       };
 
@@ -114,6 +130,11 @@
       statusDiv.innerHTML = "<p>Starting Waku node.</p>";
       await node.start();
 
+      window.waku = node;
+      console.info(
+        "Use window.waku to access the waku node running in the browser directly through the console."
+      );
+
       // Queries all peers from libp2p peer store and updates list of connected peers
       const updatePeersList = async () => {
         // Generate <p> element with connection string from each peer
@@ -142,6 +163,7 @@
         textInput.disabled = false;
         sendButton.disabled = false;
         subscribeButton.disabled = false;
+        queryStoreButton.disabled = false;
       });
 
       statusDiv.innerHTML = "<p>Waku node started.</p>";
@@ -162,22 +184,40 @@
           statusDiv.innerHTML = "<p>Error: invalid multiaddr provided</p>";
           throw err;
         }
-        await node.dial(multiaddr, ["filter", "lightpush"]);
+        await node.dial(multiaddr, ["filter", "lightpush", "store"]);
       };
 
-      const callback = (wakuMessage) => {
+      const messageReceivedCallback = (wakuMessage) => {
+        // create a unique key for the message
+        const msgHash =
+          bytesToUtf8(messageHash(ContentTopic, wakuMessage)) +
+          wakuMessage.proto.timestamp;
         const text = bytesToUtf8(wakuMessage.payload);
-        const timestamp = wakuMessage.timestamp.toString();
-        messages.push(text + " - " + timestamp);
+        // store message by its key
+        messages[msgHash + wakuMessage.proto.timestamp] = {
+          text,
+          timestamp: wakuMessage.timestamp,
+        };
+        // call function to refresh display of messages
         updateMessages(messages, messagesDiv);
       };
 
       subscribeButton.onclick = async () => {
-        unsubscribe = await node.filter.subscribe([decoder], callback);
+        unsubscribe = await node.filter.subscribe(
+          [decoder],
+          messageReceivedCallback
+        );
         unsubscribeButton.disabled = false;
         subscribeButton.disabled = true;
       };
 
+      queryStoreButton.onclick = async () => {
+        await node.store.queryWithOrderedCallback(
+          [decoder],
+          messageReceivedCallback
+        );
+      };
+
       unsubscribeButton.onclick = async () => {
         await unsubscribe();
         unsubscribe = undefined;
@@ -203,7 +243,6 @@
         remoteMultiAddrDiv.value = event.target.value;
       });
 
-      //
       async function getPeers() {
         // Display status
         statusDiv.innerHTML = "<p>Discovering peers</p>";
@@ -232,7 +271,7 @@
 
         // Set first peer as selected
         peersSelector.options[0].selected = true;
-        remoteMultiAddrDiv.value = selectElement.options[0].value;
+        remoteMultiAddrDiv.value = peersSelector.options[0].value;
 
         statusDiv.innerHTML = "<p>Peers discovered</p>";
       }