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

This commit is contained in:
fryorcraken.eth 2022-09-01 14:34:28 +10:00 committed by GitHub
commit f230f1aa35
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 1427 additions and 1299 deletions

View File

@ -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;
},
};

View File

@ -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"
}
}

File diff suppressed because it is too large Load Diff

View File

@ -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");
});
@ -55,6 +58,9 @@ function App() {
// 7 days/week, 24 hours/day, 60min/hour, 60secs/min, 100ms/sec
startTime.setTime(startTime.getTime() - 7 * 24 * 60 * 60 * 1000);
// TODO: Remove this timeout once https://github.com/status-im/js-waku/issues/913 is done
setTimeout(
() =>
waku.store
.queryHistory([ContentTopic], {
callback: processMessages,
@ -62,7 +68,10 @@ function App() {
})
.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>
);

View File

@ -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>
);