store-react-js retrieves messages from store

examples/store-reactjs-chat/package.json

@@ -6,7 +6,7 @@
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",
-    "js-waku": "^0.9.0",
+    "js-waku": "../../build/main",
     "protons": "^2.0.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

examples/store-reactjs-chat/src/App.js

@@ -1,23 +1,22 @@
 import './App.css';
 import { getStatusFleetNodes, Waku } from 'js-waku';
 import * as React from 'react';
-// import protons from 'protons';
+import protons from 'protons';
 
-// const ContentTopic = '/toy-chat/2/huilong/proto';
+const ContentTopic = '/toy-chat/2/huilong/proto';
 
-// const proto = protons(`
-// message ChatMessage {
-//   uint64 timestamp = 1;
-//   string nick = 2;
-//   bytes text = 3;
-// }
-// `);
+const proto = protons(`
+message ChatMessage {
+  uint64 timestamp = 1;
+  string nick = 2;
+  bytes text = 3;
+}
+`);
 
 function App() {
   const [waku, setWaku] = React.useState(undefined);
   const [wakuStatus, setWakuStatus] = React.useState('None');
-  const [connections, setConnections] = React.useState();
-  const [connectionHasChanged, setConnectionHasChanged] = React.useState(false);
+  const [messages, setMessages] = React.useState([]);
 
   React.useEffect(() => {
     if (!!waku) return;
@@ -25,7 +24,7 @@ function App() {
 
     setWakuStatus('Starting');
 
-    Waku.create({ relayKeepAlive: 5 }).then((waku) => {
+    Waku.create().then((waku) => {
       setWaku(waku);
       setWakuStatus('Connecting');
       bootstrapWaku(waku).then(() => {
@@ -34,43 +33,33 @@ function App() {
     });
   }, [waku, wakuStatus]);
 
-  React.useEffect(()=> {
-    connectionChange(waku, setConnectionHasChanged)
-  }, [waku, connectionHasChanged])
-
   React.useEffect(() => {
-    if (!waku) return
+    if (!waku) return;
 
-    const conns = Array.from(waku.libp2p.connections).map(([peerId, connections]) => {
-      return (
-        <li>
+    const interval = setInterval(() => {
+      waku.store
+        .queryHistory([ContentTopic])
+        .catch((e) => {
+          // We may not be connected to a store node just yet
+          console.log('Failed to retrieve messages', e);
+        })
+        .then((retrievedMessages) => {
+          const messages = retrievedMessages.map(decodeMessage).filter(Boolean);
 
-          {peerId}
-          <ul>
-            {connections.map((connection) => {
-              return (
-                <li>
-                  <small>{connection.remoteAddr.toString()}: {connection.stat.status}</small>
-                </li>
-              );
-            })}
-          </ul>
-        </li>
-      );
-    });
+          setMessages(messages);
+        });
+    }, 10000);
 
-    setConnections(conns)
-    setConnectionHasChanged(false)
-
-  }, [waku, wakuStatus, connectionHasChanged])
+    return () => clearInterval(interval);
+  }, [waku]);
 
   return (
     <div className="App">
       <header className="App-header">
         <h2>{wakuStatus}</h2>
-        <h3>Connections</h3>
+        <h3>Messages</h3>
         <ul>
-          {connections}
+          <Messages messages={messages} />
         </ul>
       </header>
     </div>
@@ -84,30 +73,40 @@ async function bootstrapWaku(waku) {
   await Promise.all(nodes.map((addr) => waku.dial(addr)));
 }
 
-// function decodeMessage(wakuMessage) {
-//   if (!wakuMessage.payload) return;
-//
-//   const { timestamp, nick, buf } = proto.ChatMessage.decode(
-//     wakuMessage.payload
-//   );
-//
-//   const time = new Date();
-//   time.setTime(timestamp);
-//
-//   const text = Buffer.from(buf).toString('utf-8');
-//
-//   return { text, timestamp: time, nick };
-// }
+function decodeMessage(wakuMessage) {
+  if (!wakuMessage.payload) return;
 
-function connectionChange(waku, setChange) {
-  if (!waku) return;
+  const { timestamp, nick, text } = proto.ChatMessage.decode(
+    wakuMessage.payload
+  );
 
-  waku.libp2p.connectionManager.on('peer:connect', () => {
-    setChange(true)
-  })
-  waku.libp2p.connectionManager.on('peer:disconnect', () => {
-    console.log("Peer disconnected")
-    setChange(true)
-  })
+  if (!timestamp) return;
+  if (!text) return;
 
+  const time = new Date();
+  time.setTime(timestamp);
+
+  const utf8Text = Buffer.from(text).toString('utf-8');
+
+  return { text: utf8Text, timestamp: time, nick };
+}
+
+function Messages(props) {
+  return props.messages.map(({ text, timestamp, nick }) => {
+    return (
+      <li>
+        ({formatDate(timestamp)}) {nick}: {text}
+      </li>
+    );
+  });
+}
+
+function formatDate(timestamp) {
+  return timestamp.toLocaleString([], {
+    month: 'short',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: '2-digit',
+    hour12: false,
+  });
 }