fix: use new js-waku API

store-reactjs-chat/src/App.js

@@ -1,6 +1,7 @@
-import { Waku } from "js-waku";
+import { waitForRemotePeer, utils } from "js-waku";
 import * as React from "react";
 import protons from "protons";
+import { createWaku } from "js-waku/lib/create_waku";
 
 const ContentTopic = "/toy-chat/2/huilong/proto";
 
@@ -22,10 +23,12 @@ function App() {
 
     setWakuStatus("Starting");
 
-    Waku.create({ bootstrap: { default: true } }).then((waku) => {
+    createWaku({ defaultBootstrap: true }).then((waku) => {
+      waku.start().then(() => {
         setWaku(waku);
         setWakuStatus("Connecting");
       });
+    });
   }, [waku, wakuStatus]);
 
   React.useEffect(() => {
@@ -34,7 +37,7 @@ function App() {
     // We do not handle disconnection/re-connection in this example
     if (wakuStatus === "Connected") return;
 
-    waku.waitForRemotePeer().then(() => {
+    waitForRemotePeer(waku, ["store"]).then(() => {
       // We are now connected to a store node
       setWakuStatus("Connected");
     });
@@ -62,6 +65,7 @@ function App() {
       })
       .catch((e) => {
         console.log("Failed to retrieve messages", e);
+        setWakuStatus("Error Encountered");
       });
   }, [waku, wakuStatus]);
 
@@ -92,15 +96,20 @@ function decodeMessage(wakuMessage) {
   const time = new Date();
   time.setTime(timestamp);
 
-  const utf8Text = Buffer.from(text).toString("utf-8");
+  const utf8Text = utils.bytesToUtf8(text);
 
-  return { text: utf8Text, timestamp: time, nick };
+  return {
+    text: utf8Text,
+    timestamp: time,
+    nick,
+    timestampInt: wakuMessage.timestamp,
+  };
 }
 
 function Messages(props) {
-  return props.messages.map(({ text, timestamp, nick }) => {
+  return props.messages.map(({ text, timestamp, nick, timestampInt }) => {
     return (
-      <li>
+      <li key={timestampInt}>
         ({formatDate(timestamp)}) {nick}: {text}
       </li>
     );