From e42b825672a368a6b7224cfca161f235ab64375d Mon Sep 17 00:00:00 2001
From: Franck Royer <franck@status.im>
Date: Wed, 27 Jul 2022 12:36:39 +1000
Subject: [PATCH] feat(example): migrate store-js to esm

---
 examples/store-js/index.html | 90 +++++++++++++++++-------------------
 1 file changed, 43 insertions(+), 47 deletions(-)

diff --git a/examples/store-js/index.html b/examples/store-js/index.html
index 9a9d724e69..cee9a3367a 100644
--- a/examples/store-js/index.html
+++ b/examples/store-js/index.html
@@ -12,9 +12,13 @@
 <div><h1>Timestamp of latest relay ping</h1></div>
 <div id='timestamp'></div>
 
-<script
-  src='https://unpkg.com/js-waku@latest/build/umd/js-waku.min.bundle.js'></script>
-<script>
+<script type='module'>
+  import {
+    createWaku,
+    waitForRemotePeer,
+    Protocols
+  } from '../../dist/bundle.min.js';
+
   /**
    * This example demonstrates how to use the js-waku minified bundle
    * available on unpkg.com.
@@ -25,56 +29,48 @@
   const timestampDiv = document.getElementById('timestamp');
 
   try {
+    timestampDiv.innerHTML = '<p>Creating waku.</p>';
+    const node = await createWaku({ bootstrap: { default: true } });
+
     timestampDiv.innerHTML = '<p>Starting waku.</p>';
-    jswaku.Waku.create({ bootstrap: { default: true } }).catch(e => {
-        timestampDiv.innerHTML = 'Failed to create Waku: ' + e.toString();
+    await node.start();
+
+    timestampDiv.innerHTML = '<p>Connecting to a peer.</p>';
+    await waitForRemotePeer(node, [Protocols.Store]);
+
+    timestampDiv.innerHTML = '<p>Retrieving messages.</p>';
+    const callback = (wakuMessages) => {
+      // Messages are ordered with oldest first
+      // even with page direction `backward`
+      const latestFirst = wakuMessages.reverse();
+      const latestMessage = latestFirst[0];
+      if (latestMessage) {
+        timestampDiv.innerHTML = latestMessage.timestamp;
+      } else {
+        timestampDiv.innerHTML = '<p>No ping message available</p>';
       }
-    ).then(waku => {
-      timestampDiv.innerHTML = '<p>Connecting to a peer.</p>';
-      waku.waitForRemotePeer()
-        .catch((e) => {
-          timestampDiv.innerHTML = 'Failed to connect to peers' + e.toString();
-        })
-        .then(() => {
-          timestampDiv.innerHTML = '<p>Retrieving messages.</p>';
 
-          const callback = (wakuMessages) => {
-            // Messages are ordered with oldest first
-            // even with page direction `backward`
-            const latestFirst = wakuMessages.reverse();
-            const latestMessage = latestFirst[0];
-            if (latestMessage) {
-              timestampDiv.innerHTML = latestMessage.timestamp;
-            } else {
-              timestampDiv.innerHTML = '<p>No ping message available</p>';
-            }
+      // When returning true, `queryHistory` stops retrieving pages
+      // In our case, we only want one message, hence one page.
+      return true;
+    };
 
-            // When returning true, `queryHistory` stops retrieving pages
-            // In our case, we only want one message, hence one page.
-            return true;
-          };
+    const startTime = new Date();
+    // Only retrieve a week of messages
+    startTime.setTime(Date.now() - 7 * 24 * 60 * 60 * 1000);
 
-          const startTime = new Date();
-          // Only retrieve a week of messages
-          startTime.setTime(Date.now() - 7 * 24 * 60 * 60 * 1000);
-
-          waku.store
-            .queryHistory(['/relay-ping/1/ping/null'], {
-              callback,
-              pageDirection: 'backward',
-              pageSize: 1,
-              timeFilter: {
-                startTime,
-                endTime: new Date()
-              }
-            })
-            .catch((e) => {
-              timestampDiv.innerHTML = 'Failed to retrieve messages' + e.toString();
-            });
-        });
-    });
+    await node.store
+      .queryHistory(['/relay-ping/1/ping/null'], {
+        callback,
+        pageDirection: 'backward',
+        pageSize: 1,
+        timeFilter: {
+          startTime,
+          endTime: new Date()
+        }
+      });
   } catch (e) {
-    timestampDiv.innerHTML = 'Failed to start application' + e.toString();
+    timestampDiv.innerHTML = 'Error encountered: ' + e.toString();
   }
 </script>
 </body>