mirror of
https://github.com/waku-org/js-waku.git
synced 2025-01-13 14:05:24 +00:00
Display messages
This commit is contained in:
parent
8a7f2401ea
commit
7c715d8fa7
@ -4,9 +4,17 @@ import * as React from 'react';
|
|||||||
|
|
||||||
const ContentTopic = `/relay-guide/1/chat/proto`;
|
const ContentTopic = `/relay-guide/1/chat/proto`;
|
||||||
|
|
||||||
|
const initialMessageState = {
|
||||||
|
messages: [],
|
||||||
|
};
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
const [waku, setWaku] = React.useState(undefined);
|
const [waku, setWaku] = React.useState(undefined);
|
||||||
const [wakuStatus, setWakuStatus] = React.useState('NotStarted');
|
const [wakuStatus, setWakuStatus] = React.useState('NotStarted');
|
||||||
|
const [messagesState, dispatchMessages] = React.useReducer(
|
||||||
|
reduceMessages,
|
||||||
|
initialMessageState
|
||||||
|
);
|
||||||
|
|
||||||
React.useEffect(() => {
|
React.useEffect(() => {
|
||||||
if (!!waku) return;
|
if (!!waku) return;
|
||||||
@ -25,7 +33,7 @@ function App() {
|
|||||||
|
|
||||||
// Need to keep the same reference around to add and delete from relay observer
|
// Need to keep the same reference around to add and delete from relay observer
|
||||||
const processIncomingMessage = React.useCallback((wakuMessage) => {
|
const processIncomingMessage = React.useCallback((wakuMessage) => {
|
||||||
console.log('Message Received', wakuMessage);
|
dispatchMessages({ type: 'Add', message: wakuMessage.payloadAsUtf8 });
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
React.useEffect(() => {
|
React.useEffect(() => {
|
||||||
@ -53,6 +61,11 @@ function App() {
|
|||||||
<button onClick={sendMessageOnClick} disabled={wakuStatus !== 'Ready'}>
|
<button onClick={sendMessageOnClick} disabled={wakuStatus !== 'Ready'}>
|
||||||
Send Message
|
Send Message
|
||||||
</button>
|
</button>
|
||||||
|
<ul>
|
||||||
|
{messagesState.messages.map((msg) => {
|
||||||
|
return <li>{msg}</li>;
|
||||||
|
})}
|
||||||
|
</ul>
|
||||||
</header>
|
</header>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
@ -69,3 +82,14 @@ async function sendMessage(message, waku) {
|
|||||||
const wakuMessage = await WakuMessage.fromUtf8String(message, ContentTopic);
|
const wakuMessage = await WakuMessage.fromUtf8String(message, ContentTopic);
|
||||||
await waku.relay.send(wakuMessage);
|
await waku.relay.send(wakuMessage);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function reduceMessages(state, action) {
|
||||||
|
switch (action.type) {
|
||||||
|
case 'Add':
|
||||||
|
const messages = state.messages.slice();
|
||||||
|
messages.push(action.message);
|
||||||
|
return { ...state, messages };
|
||||||
|
default:
|
||||||
|
return state;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user