logos-messaging/logos-messaging-frontend
1
0
Fork 0
mirror of https://github.com/logos-messaging/logos-messaging-frontend.git synced 2026-01-02 13:53:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #24 from waku-org/weboko/change-pubsub

Browse Source 
feat: allow to change pubsub topic
This commit is contained in:
Sasha 2023-12-06 08:30:33 +01:00 committed by GitHub
commit 48d02611e1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 97 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
src/app/components/Waku.tsx
View File

@ -3,12 +3,15 @@ import { Block } from "@/components/Block";
import { Subtitle } from "@/components/Subtitle";
import { Button } from "@/components/Button";
import { MessageContent } from "@/hooks";
import { SUPPORTED_PUBSUB_TOPICS } from "@/constants";
type WakuProps = {
onSend: (nick: string, text: string) => Promise<void>;
activeContentTopic: string;
activePubsubTopic: string;
messages: MessageContent[];
onActiveContentTopicChange: (contentTopic: string) => void;
onActivePubsubTopicChange: (pubsubTopic: string) => void;
}
export const Waku: React.FunctionComponent<WakuProps> = (props) => {
@ -19,10 +22,14 @@ export const Waku: React.FunctionComponent<WakuProps> = (props) => {
onMessageChange,
resetText,
} = useMessage();
const {
const [
contentTopic,
onContentTopicChange,
} = useContentTopic(props.activeContentTopic);
] = useTopic<HTMLInputElement>(props.activeContentTopic);
const [
pubsubTopic,
onPubsubTopicChange,
] = useTopic<HTMLSelectElement>(props.activePubsubTopic);
const onSendClick = async () => {
await props.onSend(nick, text);
@ -38,18 +45,40 @@ export const Waku: React.FunctionComponent<WakuProps> = (props) => {
<Block className="mt-10 flex flex-col md:flex-row lg:flex-row">
<Block>
<Block>
<Subtitle>
Waku
</Subtitle>
<Subtitle>Chat</Subtitle>
</Block>
<Block className="mt-5">
<label
htmlFor="contentTopic-input"
className="block mb-2 mt-2 text-sm font-medium text-gray-900 dark:text-white"
htmlFor="pubsubTopic"
className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>
Pubsub topic
</label>
<select
id="pubsubTopic"
value={pubsubTopic}
onChange={onPubsubTopicChange}
className="w-96 mr-2 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 pr-4 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
>
{SUPPORTED_PUBSUB_TOPICS.map((v) => (
<option key={v} value={v}>{v}</option>
))}
</select>
<Button className="mt-1" onClick={() => { props.onActivePubsubTopicChange(pubsubTopic); }}>Change</Button>
</Block>
<Block className="mt-5">
<label
htmlFor="contentTopic"
className="block text-sm mb-2 font-medium text-gray-900 dark:text-white"
>
Content topic
</label>
<input
type="text"
id="contentTopic-input"
id="contentTopic"
value={contentTopic}
onChange={onContentTopicChange}
className="w-96 mr-2 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
@ -59,14 +88,14 @@ export const Waku: React.FunctionComponent<WakuProps> = (props) => {
<Block className="mt-4 mr-10 min-w-fit">
<label
htmlFor="nick-input"
htmlFor="nick"
className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>
Your nickname
</label>
<input
type="text"
id="nick-input"
id="nick"
placeholder="Choose a nickname"
value={nick}
onChange={onNickChange}
@ -74,16 +103,16 @@ export const Waku: React.FunctionComponent<WakuProps> = (props) => {
/>
</Block>
<Block className="mt-4">
<Block className="mt-5">
<Block className="mb-2">
<label
htmlFor="message-input"
htmlFor="message"
className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>
Message
</label>
<textarea
id="message-input"
id="message"
value={text}
onChange={onMessageChange}
placeholder="Text your message here"
@ -104,21 +133,22 @@ export const Waku: React.FunctionComponent<WakuProps> = (props) => {
);
};
function useContentTopic(globalContentTopic: string) {
const [contentTopic, setContentTopic] = React.useState<string>(globalContentTopic);
function useTopic<T>(globalTopic: string): [string, (e: React.SyntheticEvent<T>) => void] {
const [topic, setTopic] = React.useState<string>(globalTopic);
React.useEffect(() => {
setContentTopic(globalContentTopic);
}, [globalContentTopic]);
setTopic(globalTopic);
}, [globalTopic]);
const onContentTopicChange = (e: React.SyntheticEvent<HTMLInputElement>) => {
setContentTopic(e.currentTarget.value || "");
const onTopicChange = (e: React.SyntheticEvent<T>) => {
const target = e.currentTarget as any;
setTopic(target?.value || "");
};
return {
contentTopic,
onContentTopicChange,
};
return [
topic,
onTopicChange,
];
}
function useMessage() {

6
src/app/page.tsx
View File

@ -10,7 +10,9 @@ export default function Home() {
messages,
debugInfo,
contentTopic,
onContentTopicChange
onContentTopicChange,
pubsubTopic,
onPubsubTopicChange
} = useWaku();
return (
@ -23,6 +25,8 @@ export default function Home() {
messages={messages}
activeContentTopic={contentTopic}
onActiveContentTopicChange={onContentTopicChange}
activePubsubTopic={pubsubTopic}
onActivePubsubTopicChange={onPubsubTopicChange}
/>
</main>
);

12
src/constants.ts
View File

@ -1,5 +1,15 @@
export const CONTENT_TOPIC = "/toy-chat/2/luzhou/proto";
export const PUBSUB_TOPIC = "/waku/2/default-waku/proto";
export const PUBSUB_TOPIC = "/waku/2/rs/1/0";
export const SUPPORTED_PUBSUB_TOPICS = [
"/waku/2/rs/1/0",
"/waku/2/rs/1/1",
"/waku/2/rs/1/2",
"/waku/2/rs/1/3",
"/waku/2/rs/1/4",
"/waku/2/rs/1/5",
"/waku/2/rs/1/6",
"/waku/2/rs/1/7",
];
export const SIGNATURE_MESSAGE =
"The signature of this message will be used to generate your RLN credentials. Anyone accessing it may send messages on your behalf, please only share with the RLN dApp";

24
src/hooks/useWaku.ts
View File

@ -1,5 +1,5 @@
import React from "react";
import { CONTENT_TOPIC } from "@/constants";
import { CONTENT_TOPIC, PUBSUB_TOPIC } from "@/constants";
import { DebugInfo, Message, waku } from "@/services/waku";
export type MessageContent = {
@ -10,6 +10,7 @@ export type MessageContent = {
export const useWaku = () => {
const [contentTopic, setContentTopic] = React.useState<string>(CONTENT_TOPIC);
const [pubsubTopic, setPubsubTopic] = React.useState<string>(PUBSUB_TOPIC);
const [messages, setMessages] = React.useState<Map<string, MessageContent>>(new Map());
const [debugInfo, setDebugInfo] = React.useState<undefined | DebugInfo>();
@ -58,10 +59,10 @@ export const useWaku = () => {
};
}, [debugInfo, setDebugInfo]);
const onSend = React.useCallback(
const onSend =
async (nick: string, text: string) => {
const timestamp = Date.now();
await waku.relay.send({
await waku.relay.send(pubsubTopic, {
version: 0,
timestamp,
contentTopic,
@ -79,9 +80,7 @@ export const useWaku = () => {
next.set(id, { nick, timestamp, text });
return next;
});
},
[setMessages]
);
};
const onContentTopicChange = async (nextContentTopic: string) => {
if (nextContentTopic === contentTopic) {
@ -91,11 +90,22 @@ export const useWaku = () => {
setContentTopic(nextContentTopic);
};
const onPubsubTopicChange = async (nextPubsubTopic: string) => {
if (nextPubsubTopic === pubsubTopic) {
return;
}
setPubsubTopic(nextPubsubTopic);
waku.relay.changeActivePubsubTopic(nextPubsubTopic);
};
return {
onSend,
debugInfo,
contentTopic,
onContentTopicChange,
messages: Array.from(messages.values())
pubsubTopic,
onPubsubTopicChange,
messages: Array.from(messages.values()),
};
};

17
src/services/waku.ts
View File

@ -1,4 +1,4 @@
import { PUBSUB_TOPIC } from "@/constants";
import { PUBSUB_TOPIC, SUPPORTED_PUBSUB_TOPICS } from "@/constants";
import { http } from "@/utils/http";
export type Message = {
@ -17,6 +17,7 @@ const RELAY = "/relay/v1";
const buildURL = (endpoint: string) => `${LOCAL_NODE}${endpoint}`;
class Relay {
private activePubsubTopic = SUPPORTED_PUBSUB_TOPICS[0];
private subscribing = false;
private readonly subscriptionsEmitter = new EventTarget();
// only one content topic subscriptions is possible now
@ -43,13 +44,13 @@ class Relay {
this.subscribing = true;
try {
await http.post(buildURL(`${RELAY}/subscriptions`), [PUBSUB_TOPIC]);
await http.post(buildURL(`${RELAY}/subscriptions`), SUPPORTED_PUBSUB_TOPICS);
this.subscriptionRoutine = window.setInterval(async () => {
await this.fetchMessages();
}, 5 * SECOND);
} catch (error) {
console.error(`Failed to subscribe node ${PUBSUB_TOPIC}:`, error);
console.error(`Failed to subscribe node any of ${SUPPORTED_PUBSUB_TOPICS}:`, error);
}
this.subscribing = false;
}
@ -71,7 +72,7 @@ class Relay {
private async fetchMessages(): Promise<void> {
const response = await http.get(
buildURL(`${RELAY}/messages/${encodeURIComponent(PUBSUB_TOPIC)}`)
buildURL(`${RELAY}/messages/${encodeURIComponent(this.activePubsubTopic)}`)
);
const body: Message[] = await response.json();
@ -102,8 +103,12 @@ class Relay {
});
}
public async send(message: Message): Promise<void> {
await http.post(buildURL(`${RELAY}/messages/${encodeURIComponent(PUBSUB_TOPIC)}`), message);
public changeActivePubsubTopic(pubsubTopic: string) {
this.activePubsubTopic = pubsubTopic;
}
public async send(pubsubTopic: string, message: Message): Promise<void> {
await http.post(buildURL(`${RELAY}/messages/${encodeURIComponent(pubsubTopic)}`), message);
}
}