From f0d5ce34fa037cf41387985c645f59c96018e2d1 Mon Sep 17 00:00:00 2001 From: Sasha Date: Thu, 30 Nov 2023 22:47:40 +0100 Subject: [PATCH] remove unsubscribe, fix problem with message rendering --- package-lock.json | 59 +++++++++++++++++++++++--------- package.json | 2 +- src/app/home/components/Waku.tsx | 4 +-- src/hooks/useWaku.ts | 37 +++++++++++++------- src/services/rln.ts | 2 +- src/services/waku.ts | 3 +- src/utils/http.ts | 3 -- 7 files changed, 71 insertions(+), 39 deletions(-) diff --git a/package-lock.json b/package-lock.json index 710bb6f..bc45aa7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,7 +8,7 @@ "name": "rln-js", "version": "0.1.0", "dependencies": { - "@waku/rln": "0.1.1-7e8cb89", + "@waku/rln": "0.1.1-60a5070", "@waku/utils": "^0.0.12", "ethers": "^5.7.2", "next": "13.5.6", @@ -1424,13 +1424,13 @@ "dev": true }, "node_modules/@waku/rln": { - "version": "0.1.1-7e8cb89", - "resolved": "https://registry.npmjs.org/@waku/rln/-/rln-0.1.1-7e8cb89.tgz", - "integrity": "sha512-ToHwjodXoc1BrllRkIqC8/D73LqMlL4AHRdaSk4ttXjzdlqELdZYaJEwMtEBlupydNPf813RZ6V6hVuE6ttbTg==", + "version": "0.1.1-60a5070", + "resolved": "https://registry.npmjs.org/@waku/rln/-/rln-0.1.1-60a5070.tgz", + "integrity": "sha512-c3rXqzuTTQVIn2l4gZKDG+/2UY2yb0XbumyrsuvX9fQhQxopCAsSi16CYePdG5HCpImXPNJEC3C3JakuiA3v9A==", "dependencies": { "@chainsafe/bls-keystore": "^3.0.0", - "@waku/utils": "^0.0.12", - "@waku/zerokit-rln-wasm": "^0.0.10", + "@waku/utils": "^0.0.13", + "@waku/zerokit-rln-wasm": "^0.0.13", "ethereum-cryptography": "^2.1.2", "ethers": "^5.7.2", "lodash": "^4.17.21", @@ -1441,6 +1441,19 @@ "node": ">=18" } }, + "node_modules/@waku/rln/node_modules/@waku/utils": { + "version": "0.0.13", + "resolved": "https://registry.npmjs.org/@waku/utils/-/utils-0.0.13.tgz", + "integrity": "sha512-sGZRJyYr7+QZpV2tlGJF48gKmwNdFha6rPKPgXiKDsz2YMhPlg70ffbGcND3bEfOwWmX4g/x5i3Oqwwl+HzwJw==", + "dependencies": { + "chai": "^4.3.8", + "debug": "^4.3.4", + "uint8arrays": "^4.0.4" + }, + "engines": { + "node": ">=18" + } + }, "node_modules/@waku/utils": { "version": "0.0.12", "resolved": "https://registry.npmjs.org/@waku/utils/-/utils-0.0.12.tgz", @@ -1455,9 +1468,9 @@ } }, "node_modules/@waku/zerokit-rln-wasm": { - "version": "0.0.10", - "resolved": "https://registry.npmjs.org/@waku/zerokit-rln-wasm/-/zerokit-rln-wasm-0.0.10.tgz", - "integrity": "sha512-qegIK1P54mxEp59uTa8C0/zidUffLc2Iee61yiKRIuGJDui2mQ+0V+KzPSPImKpIoqfVLT192EqgZkqPmj8VEw==" + "version": "0.0.13", + "resolved": "https://registry.npmjs.org/@waku/zerokit-rln-wasm/-/zerokit-rln-wasm-0.0.13.tgz", + "integrity": "sha512-x7CRIIslmfCmTZc7yVp3dhLlKeLUs8ILIm9kv7+wVJ23H4pPw0Z+uH0ueLIYYfwODI6fDiwJj3S1vdFzM8D1zA==" }, "node_modules/@zeit/schemas": { "version": "2.29.0", @@ -7796,18 +7809,30 @@ "dev": true }, "@waku/rln": { - "version": "0.1.1-7e8cb89", - "resolved": "https://registry.npmjs.org/@waku/rln/-/rln-0.1.1-7e8cb89.tgz", - "integrity": "sha512-ToHwjodXoc1BrllRkIqC8/D73LqMlL4AHRdaSk4ttXjzdlqELdZYaJEwMtEBlupydNPf813RZ6V6hVuE6ttbTg==", + "version": "0.1.1-60a5070", + "resolved": "https://registry.npmjs.org/@waku/rln/-/rln-0.1.1-60a5070.tgz", + "integrity": "sha512-c3rXqzuTTQVIn2l4gZKDG+/2UY2yb0XbumyrsuvX9fQhQxopCAsSi16CYePdG5HCpImXPNJEC3C3JakuiA3v9A==", "requires": { "@chainsafe/bls-keystore": "^3.0.0", - "@waku/utils": "^0.0.12", - "@waku/zerokit-rln-wasm": "^0.0.10", + "@waku/utils": "^0.0.13", + "@waku/zerokit-rln-wasm": "^0.0.13", "ethereum-cryptography": "^2.1.2", "ethers": "^5.7.2", "lodash": "^4.17.21", "rlnjs": "^3.2.3", "uuid": "^9.0.1" + }, + "dependencies": { + "@waku/utils": { + "version": "0.0.13", + "resolved": "https://registry.npmjs.org/@waku/utils/-/utils-0.0.13.tgz", + "integrity": "sha512-sGZRJyYr7+QZpV2tlGJF48gKmwNdFha6rPKPgXiKDsz2YMhPlg70ffbGcND3bEfOwWmX4g/x5i3Oqwwl+HzwJw==", + "requires": { + "chai": "^4.3.8", + "debug": "^4.3.4", + "uint8arrays": "^4.0.4" + } + } } }, "@waku/utils": { @@ -7821,9 +7846,9 @@ } }, "@waku/zerokit-rln-wasm": { - "version": "0.0.10", - "resolved": "https://registry.npmjs.org/@waku/zerokit-rln-wasm/-/zerokit-rln-wasm-0.0.10.tgz", - "integrity": "sha512-qegIK1P54mxEp59uTa8C0/zidUffLc2Iee61yiKRIuGJDui2mQ+0V+KzPSPImKpIoqfVLT192EqgZkqPmj8VEw==" + "version": "0.0.13", + "resolved": "https://registry.npmjs.org/@waku/zerokit-rln-wasm/-/zerokit-rln-wasm-0.0.13.tgz", + "integrity": "sha512-x7CRIIslmfCmTZc7yVp3dhLlKeLUs8ILIm9kv7+wVJ23H4pPw0Z+uH0ueLIYYfwODI6fDiwJj3S1vdFzM8D1zA==" }, "@zeit/schemas": { "version": "2.29.0", diff --git a/package.json b/package.json index b3996ce..9ad987e 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,7 @@ "lint": "next lint" }, "dependencies": { - "@waku/rln": "0.1.1-7e8cb89", + "@waku/rln": "0.1.1-60a5070", "@waku/utils": "^0.0.12", "ethers": "^5.7.2", "next": "13.5.6", diff --git a/src/app/home/components/Waku.tsx b/src/app/home/components/Waku.tsx index 89023dc..a84856a 100644 --- a/src/app/home/components/Waku.tsx +++ b/src/app/home/components/Waku.tsx @@ -103,11 +103,11 @@ function useMessage() { function renderMessage(content: MessageContent) { return ( -
  • +

  • {content.nick} - ({content.time}) + ({(new Date(content.timestamp)).toString()}) :

    diff --git a/src/hooks/useWaku.ts b/src/hooks/useWaku.ts index 5b67a19..85e9fb8 100644 --- a/src/hooks/useWaku.ts +++ b/src/hooks/useWaku.ts @@ -9,23 +9,25 @@ export type MessageContent = { }; export const useWaku = () => { - const [messages, setMessages] = React.useState([]); + const [messages, setMessages] = React.useState>(new Map()); React.useEffect(() => { const messageListener = (event: CustomEvent) => { - const messages: Message[] = event.detail; - const parsedMessaged = messages.map((message) => { - const time = new Date(message.timestamp); - const payload = JSON.parse(atob(message.payload)); + const nextMessages = new Map(messages); + const newMessages: Message[] = event.detail; - return { + newMessages.forEach((m) => { + const payload = JSON.parse(atob(m.payload)); + + const message = { nick: payload?.nick || "unknown", text: payload?.text || "empty", - time: time.toDateString(), + timestamp: m.timestamp || Date.now(), }; + nextMessages.set(`${message.nick}-${message.timestamp}-${message.text}`, message); }); - setMessages((prev) => [...prev, ...parsedMessaged]); + setMessages(nextMessages); }; waku.relay.addEventListener(CONTENT_TOPIC, messageListener); @@ -33,23 +35,32 @@ export const useWaku = () => { return () => { waku.relay.removeEventListener(CONTENT_TOPIC, messageListener); }; - }, [setMessages]); + }, [messages, setMessages]); const onSend = React.useCallback( async (nick: string, text: string) => { + const timestamp = Date.now(); await waku.relay.send({ version: 0, - timestamp: Date.now(), + timestamp, contentTopic: CONTENT_TOPIC, payload: btoa(JSON.stringify({ nick, text })), }); + const id = `${nick}-${timestamp}-${text}`; + setMessages((prev) => { + if (prev.has(id)) { + return prev; + } + const next = new Map(prev); + next.set(id, { nick, timestamp, text }); + return next; + }); }, - [] + [setMessages] ); - return { onSend, messages }; + return { onSend, messages: Array.from(messages.values()) }; }; - diff --git a/src/services/rln.ts b/src/services/rln.ts index 507f5e8..487b034 100644 --- a/src/services/rln.ts +++ b/src/services/rln.ts @@ -109,7 +109,7 @@ export class RLN implements IRLN { private initKeystore(): Keystore { const localKeystoreString = localStorage.getItem("keystore"); - + try { return Keystore.fromString(localKeystoreString || ""); } catch(error) { diff --git a/src/services/waku.ts b/src/services/waku.ts index b5e3c28..4033760 100644 --- a/src/services/waku.ts +++ b/src/services/waku.ts @@ -32,7 +32,6 @@ class Relay { } public removeEventListener(contentTopic: string, fn: EventListener) { - this.handleUnsubscribed(contentTopic); return this.subscriptionsEmitter.removeEventListener( contentTopic, fn as any @@ -53,7 +52,7 @@ class Relay { this.subscriptionRoutine = window.setInterval(async () => { await this.fetchMessages(); - }, 10 * SECOND); + }, SECOND); this.contentTopicListeners.set(contentTopic, 1); } catch (error) { diff --git a/src/utils/http.ts b/src/utils/http.ts index 47e8522..b6f9698 100644 --- a/src/utils/http.ts +++ b/src/utils/http.ts @@ -2,7 +2,6 @@ export const http = { post(url: string, body: any) { return fetch(new URL(url), { method: "POST", - mode: "no-cors", referrerPolicy: "no-referrer", headers: { 'Content-Type': 'text/plain', @@ -13,8 +12,6 @@ export const http = { delete(url: string, body: any) { return fetch(new URL(url), { method: "DELETE", - mode: "no-cors", - referrerPolicy: "no-referrer", headers: { 'Content-Type': 'text/plain', },