js-waku/web-chat/src/App.tsx

98 lines
2.8 KiB
TypeScript
Raw Normal View History

2021-04-21 05:51:52 +00:00
import { multiaddr } from 'multiaddr';
import PeerId from 'peer-id';
2021-04-21 06:11:07 +00:00
import React, { useEffect, useState } from 'react';
2021-04-14 04:44:12 +00:00
import './App.css';
2021-04-21 05:51:52 +00:00
import { ChatMessage } from 'waku-chat/chat_message';
import { WakuMessage } from 'waku/waku_message';
import { RelayDefaultTopic } from 'waku/waku_relay';
import handleCommand from './command';
2021-04-16 01:32:00 +00:00
import Room from './Room';
2021-04-21 05:51:52 +00:00
import Waku from 'waku/waku';
2021-04-19 01:34:13 +00:00
import { WakuContext } from './WakuContext';
2021-04-14 04:44:12 +00:00
2021-04-21 05:51:52 +00:00
export const ChatContentTopic = 'dingpu';
export default function App() {
2021-04-23 04:40:28 +00:00
let [stateMessages, setMessages] = useState<ChatMessage[]>([]);
let [stateWaku, setWaku] = useState<Waku | undefined>(undefined);
2021-04-23 04:43:39 +00:00
let [nick, setNick] = useState<string>('web-chat');
2021-04-19 01:34:13 +00:00
2021-04-21 06:11:07 +00:00
useEffect(() => {
async function initWaku() {
try {
2021-04-22 06:50:37 +00:00
const waku = await Waku.create({
config: {
pubsub: {
enabled: true,
2021-04-22 07:03:33 +00:00
emitSelf: true,
},
},
2021-04-22 06:50:37 +00:00
});
2021-04-19 00:36:37 +00:00
2021-04-23 04:40:28 +00:00
setWaku(waku);
2021-04-21 05:51:52 +00:00
// FIXME: Connect to a go-waku instance by default, temporary hack until
// we have a go-waku instance in the fleet
waku.libp2p.peerStore.addressBook.add(
2021-04-22 07:03:33 +00:00
PeerId.createFromB58String(
'16Uiu2HAmVVi6Q4j7MAKVibquW8aA27UNrA4Q8Wkz9EetGViu8ZF1'
),
[multiaddr('/ip4/134.209.113.86/tcp/9001/ws')]
);
2021-04-21 06:11:07 +00:00
} catch (e) {
console.log('Issue starting waku ', e);
}
}
2021-04-19 01:34:13 +00:00
const handleNewMessages = (event: { data: Uint8Array }) => {
const wakuMsg = WakuMessage.decode(event.data);
if (wakuMsg.payload) {
const chatMsg = ChatMessage.decode(wakuMsg.payload);
2021-04-23 04:40:28 +00:00
const messages = stateMessages.slice();
messages.push(chatMsg);
console.log('setState on ', messages);
2021-04-23 04:40:28 +00:00
setMessages(messages);
}
};
2021-04-23 04:40:28 +00:00
if (!stateWaku) {
2021-04-21 06:11:07 +00:00
initWaku()
.then(() => console.log('Waku init done'))
.catch((e) => console.log('Waku init failed ', e));
2021-04-22 00:58:56 +00:00
} else {
2021-04-23 04:40:28 +00:00
stateWaku.libp2p.pubsub.on(RelayDefaultTopic, handleNewMessages);
// To clean up listener when component unmounts
return () => {
2021-04-23 04:40:28 +00:00
stateWaku?.libp2p.pubsub.removeListener(
2021-04-22 07:03:33 +00:00
RelayDefaultTopic,
handleNewMessages
);
};
2021-04-21 06:11:07 +00:00
}
});
2021-04-21 05:51:52 +00:00
2021-04-21 06:11:07 +00:00
return (
<div className="chat-app">
<WakuContext.Provider value={{ waku: stateWaku }}>
<Room
nick={nick}
lines={stateMessages}
commandHandler={(input: string) => {
const { command, response } = handleCommand(
input,
stateWaku,
setNick
);
const messages = stateMessages.slice();
response.forEach((msg) => {
messages.push(new ChatMessage(new Date(), command, msg));
});
setMessages(messages);
}}
/>
</WakuContext.Provider>
2021-04-21 06:11:07 +00:00
</div>
);
2021-04-14 04:44:12 +00:00
}