Merge pull request #84 from waku-org/store-reactjs-chat

store-reactjs-chat/config/webpack.extend.js

@@ -1,60 +0,0 @@
-const webpack = require('webpack');
-
-module.exports = {
-  dev: (config) => {
-    // Override webpack 5 config from react-scripts to load polyfills
-    if (!config.resolve) config.resolve = {};
-    if (!config.resolve.fallback) config.resolve.fallback = {};
-    Object.assign(config.resolve.fallback, {
-      buffer: require.resolve('buffer'),
-      crypto: false,
-      stream: require.resolve('stream-browserify'),
-    });
-
-    if (!config.plugins) config.plugins = [];
-    config.plugins.push(
-      new webpack.DefinePlugin({
-        'process.env.ENV': JSON.stringify('dev'),
-      })
-    );
-    config.plugins.push(
-      new webpack.ProvidePlugin({
-        process: 'process/browser.js',
-        Buffer: ['buffer', 'Buffer'],
-      })
-    );
-
-    if (!config.ignoreWarnings) config.ignoreWarnings = [];
-    config.ignoreWarnings.push(/Failed to parse source map/);
-
-    return config;
-  },
-  prod: (config) => {
-    // Override webpack 5 config from react-scripts to load polyfills
-    if (!config.resolve) config.resolve = {};
-    if (!config.resolve.fallback) config.resolve.fallback = {};
-    Object.assign(config.resolve.fallback, {
-      buffer: require.resolve('buffer'),
-      crypto: false,
-      stream: require.resolve('stream-browserify'),
-    });
-
-    if (!config.plugins) config.plugins = [];
-    config.plugins.push(
-      new webpack.DefinePlugin({
-        'process.env.ENV': JSON.stringify('prod'),
-      })
-    );
-    config.plugins.push(
-      new webpack.ProvidePlugin({
-        process: 'process/browser.js',
-        Buffer: ['buffer', 'Buffer'],
-      })
-    );
-
-    if (!config.ignoreWarnings) config.ignoreWarnings = [];
-    config.ignoreWarnings.push(/Failed to parse source map/);
-
-    return config;
-  },
-};

store-reactjs-chat/package.json

@@ -2,26 +2,23 @@
   "name": "store-reactjs-chat",
   "version": "0.1.0",
   "private": true,
-  "homepage": "/examples/store-reactjs-chat",
+  "homepage": "/store-reactjs-chat",
   "dependencies": {
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.2.0",
     "@testing-library/user-event": "^14.1.1",
-    "assert": "^2.0.0",
-    "buffer": "^6.0.3",
-    "js-waku": "^0.24.0",
+    "js-waku": "0.24.0-e3bef47",
     "protons": "^2.0.3",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
     "react-scripts": "5.0.1",
-    "stream-browserify": "^3.0.0",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
-    "start": "cra-webpack-rewired start",
-    "build": "cra-webpack-rewired build",
-    "test": "cra-webpack-rewired test",
-    "eject": "cra-webpack-rewired eject"
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "exit 0",
+    "eject": "react-scripts eject"
   },
   "eslintConfig": {
     "extends": [
@@ -45,8 +42,6 @@
   },
   "devDependencies": {
     "@testing-library/dom": "^8.16.1",
-    "cra-webpack-rewired": "^1.0.1",
-    "process": "^0.11.10",
     "typescript": "^4.7.4"
   }
 }

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,9 +23,11 @@ function App() {
 
     setWakuStatus("Starting");
 
-    Waku.create({ bootstrap: { default: true } }).then((waku) => {
-      setWaku(waku);
-      setWakuStatus("Connecting");
+    createWaku({ defaultBootstrap: true }).then((waku) => {
+      waku.start().then(() => {
+        setWaku(waku);
+        setWakuStatus("Connecting");
+      });
     });
   }, [waku, wakuStatus]);
 
@@ -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");
     });
@@ -55,14 +58,20 @@ function App() {
     // 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: processMessages,
-        timeFilter: { startTime, endTime: new Date() },
-      })
-      .catch((e) => {
-        console.log("Failed to retrieve messages", e);
-      });
+    // TODO: Remove this timeout once https://github.com/status-im/js-waku/issues/913 is done
+    setTimeout(
+      () =>
+        waku.store
+          .queryHistory([ContentTopic], {
+            callback: processMessages,
+            timeFilter: { startTime, endTime: new Date() },
+          })
+          .catch((e) => {
+            console.log("Failed to retrieve messages", e);
+            setWakuStatus("Error Encountered");
+          }),
+      200
+    );
   }, [waku, wakuStatus]);
 
   return (
@@ -92,15 +101,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>
     );

store-reactjs-chat/src/index.js

@@ -1,11 +1,11 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
+import React from "react";
+import ReactDOM from "react-dom/client";
+import "./index.css";
+import App from "./App";
 
-ReactDOM.render(
+const root = ReactDOM.createRoot(document.getElementById("root"));
+root.render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>,
-  document.getElementById('root')
+  </React.StrictMode>
 );