From 0d86c9172068fb1d5b75c8c364eac8a0589f57bc Mon Sep 17 00:00:00 2001
From: Franck Royer <franck@status.im>
Date: Tue, 12 Oct 2021 14:13:54 +1100
Subject: [PATCH] Add Pure JS example

---
 examples/examples.md               |  1 +
 examples/unpkg-js-store/README.md  | 11 ++++
 examples/unpkg-js-store/index.html | 84 ++++++++++++++++++++++++++++++
 3 files changed, 96 insertions(+)
 create mode 100644 examples/unpkg-js-store/README.md
 create mode 100644 examples/unpkg-js-store/index.html
diff --git a/examples/examples.md b/examples/examples.md
index bb7a4f8b49..e1dac59613 100644
--- a/examples/examples.md
+++ b/examples/examples.md
@@ -6,3 +6,4 @@ Here is the list of the code examples and the features they demonstrate:
 - [Ethereum Private Message Web App](eth-pm): Private Messaging, React/TypeScript, Light Push, Signature with Web3, Asymmetric Encryption.
 - [Minimal ReactJS Chat App](min-react-js-chat): Group chat, React/JavaScript, Relay, Protobuf using `protons`.
 - [Minimal ReactJS Waku Store App](store-reactjs-chat): Waku Store, React/JavaScript, Protobuf using `protons`.
+- [Pure Javascript Using Minified Library](unpkg-js-store): Stop retrieving results from Waku Store on condition, Use minified bundle from Unpkg.com, JavaScript. 
diff --git a/examples/unpkg-js-store/README.md b/examples/unpkg-js-store/README.md
new file mode 100644
index 0000000000..827660a7c3
--- /dev/null
+++ b/examples/unpkg-js-store/README.md
@@ -0,0 +1,11 @@
+# Pure Javascript Using Minified Library
+
+**Demonstrates**:
+
+- Waku Store: Using a condition to stop retrieving results from Waku Store.
+- Pure Javascript/HTML.
+- Use minified bundle of js from unpkg (todo), no import, no package manager.
+
+This example uses Waku Store to retrieve the latest ping relay message (used for keep alive purposes) and displays its timestamp.
+
+To test the example, simply download the `index.html` file from this folder and open it in a browser.
diff --git a/examples/unpkg-js-store/index.html b/examples/unpkg-js-store/index.html
new file mode 100644
index 0000000000..cddaa07b03
--- /dev/null
+++ b/examples/unpkg-js-store/index.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html lang='en'>
+
+<head>
+  <meta charset='UTF-8' />
+  <meta content='width=device-width, initial-scale=1.0' name='viewport' />
+  <title>JS-Waku unpkg example</title>
+</head>
+
+<body>
+
+<div><h1>Timestamp of latest relay ping</h1></div>
+<div id='timestamp'></div>
+
+<script
+  src='https://unpkg.com/js-waku@0.14.0-rc.0/build/umd/js-waku.min.bundle.js'></script>
+<script>
+  /**
+   * This example demonstrates how to use the js-waku minified bundle
+   * available on unpkg.com.
+   *
+   * It is a simple scripts that uses Waku Store to retrieve ping relay messages
+   * and displays the timestamp of the most recent ping relay message.
+   *
+   * More explanations are provided in this guide (TODO).
+   */
+  const timestampDiv = document.getElementById('timestamp');
+
+  try {
+    timestampDiv.innerHTML = '<p>Starting waku.</p>';
+    jswaku.Waku.create({ bootstrap: true }).catch(e => {
+        timestampDiv.innerHTML = 'Failed to create Waku: ' + e.toString();
+      }
+    ).then(waku => {
+      timestampDiv.innerHTML = '<p>Connecting to a peer.</p>';
+      waku.waitForConnectedPeer()
+        .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;
+          };
+
+          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();
+            });
+        });
+    });
+  } catch (e) {
+    timestampDiv.innerHTML = 'Failed to start application' + e.toString();
+  }
+</script>
+</body>
+
+</html>
