From 0d82b748542fa68b61bd568765b3f7d906e99f29 Mon Sep 17 00:00:00 2001
From: Franck Royer <franck@status.im>
Date: Tue, 5 Oct 2021 13:41:21 +1100
Subject: [PATCH] Add and update time filter guides

---
 guides/reactjs-store.md           |  8 ++---
 guides/store-retrieve-messages.md | 55 ++++++++++++++++++++++++-------
 2 files changed, 48 insertions(+), 15 deletions(-)

diff --git a/guides/reactjs-store.md b/guides/reactjs-store.md
index a051a0df70..4c9c3cbfb9 100644
--- a/guides/reactjs-store.md
+++ b/guides/reactjs-store.md
@@ -266,16 +266,16 @@ Note that `WakuStore.queryHistory` select an available store node for you.
 However, it can only select a connected node, which is why the bootstrapping is necessary.
 It will throw an error if no store node is available.
 
-## Filter messages
+## Filter messages by send time
 
 By default, Waku Store nodes store messages for 30 days.
 Depending on your use case, you may not need to retrieve 30 days worth of messages.
 
-Messages have an optional unencrypted `timestamp` field.
-The timestamp is set by the sender and may be present.
+[Waku Message](https://rfc.vac.dev/spec/14/) defines an optional unencrypted `timestamp` field.
+The timestamp is set by the sender.
 By default, js-waku [sets the timestamp of outgoing message to the current time](https://github.com/status-im/js-waku/blob/a056227538f9409aa9134c7ef0df25f602dbea58/src/lib/waku_message/index.ts#L76).
 
-You can filter messages that include a timestamp with the `timeFilter` option.
+You can filter messages that include a timestamp within given bound with the `timeFilter` option.
 
 Let's only retrieve messages up to a week old:
 
diff --git a/guides/store-retrieve-messages.md b/guides/store-retrieve-messages.md
index ffefff452b..16437574a6 100644
--- a/guides/store-retrieve-messages.md
+++ b/guides/store-retrieve-messages.md
@@ -147,19 +147,19 @@ To process messages as soon as they received (page by page), use the `callback`
 ```js
 const ContentTopic = '/store-guide/1/news/proto';
 
-waku.store
-  .queryHistory([ContentTopic], {
-    callback: (retrievedMessages) => {
-      const articles = retrievedMessages
-        .map(decodeWakuMessage) // Decode messages
-        .filter(Boolean); // Filter out undefined values
+const callback = (retrievedMessages) => {
+  const articles = retrievedMessages
+    .map(decodeWakuMessage) // Decode messages
+    .filter(Boolean); // Filter out undefined values
 
-      console.log(`${articles.length} articles have been retrieved`);
-    }
-  })
+  console.log(`${articles.length} articles have been retrieved`);
+};
+
+waku.store
+  .queryHistory([ContentTopic], { callback })
   .catch((e) => {
-    // Be sure to catch any potential error
-    console.log('Failed to retrieve messages', e);
+    // Catch any potential error
+    console.log('Failed to retrieve messages from store', e);
   });
 ```
 
@@ -167,3 +167,36 @@ Note that `WakuStore.queryHistory` select an available store node for you.
 However, it can only select a connected node, which is why the bootstrapping is necessary.
 It will throw an error if no store node is available.
 
+## Filter messages by send time
+
+By default, Waku Store nodes store messages for 30 days.
+Depending on your use case, you may not need to retrieve 30 days worth of messages.
+
+[Waku Message](https://rfc.vac.dev/spec/14/) defiles an optional unencrypted `timestamp` field.
+The timestamp is set by the sender.
+By default, js-waku [sets the timestamp of outgoing message to the current time](https://github.com/status-im/js-waku/blob/a056227538f9409aa9134c7ef0df25f602dbea58/src/lib/waku_message/index.ts#L76).
+
+You can filter messages that include a timestamp within given bound with the `timeFilter` option.
+
+Let's only retrieve messages up to a week old:
+
+```js
+// `ContentTopic` and `callback` definitions
+
+const startTime = new Date();
+// 7 days/week, 24 hours/day, 60min/hour, 60secs/min, 100ms/sec
+startTime.setTime(startTime.getTime() - 7 * 24 * 60 * 60 * 1000);
+
+waku.store
+  .queryHistory([ContentTopic], {
+    callback,
+    timeFilter: { startTime, endTime: new Date() }
+  })
+  .catch((e) => {
+    console.log('Failed to retrieve messages from store', e);
+  });
+```
+
+## End result
+
+You can see a similar example implemented in ReactJS in the [Minimal ReactJS Waku Store App](/examples/store-reactjs-chat).