Remove reducer, fix timestamp

This commit is contained in:
Franck Royer 2021-07-30 15:19:21 +10:00
parent 2306bb1708
commit f95e52c2ea
No known key found for this signature in database
GPG Key ID: A82ED75A8DFC50A4
1 changed files with 31 additions and 34 deletions

View File

@ -3,30 +3,25 @@ import { getStatusFleetNodes, Waku, WakuMessage } from 'js-waku';
import * as React from 'react'; import * as React from 'react';
import protons from 'protons'; import protons from 'protons';
const ContentTopic = `/relay-guide/1/chat/proto`; const ContentTopic = `/min-js-web-chat/1/chat/proto`;
const initialMessageState = {
messages: [],
};
const proto = protons(` const proto = protons(`
message SimpleChatMessage { message SimpleChatMessage {
float timestamp = 1; uint64 timestamp = 1;
string text = 2; string text = 2;
} }
`); `);
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('None');
const [messagesState, dispatchMessages] = React.useReducer( const [messages, setMessages] = React.useState([]);
reduceMessages, const [currentTime, setCurrentTime] = React.useState(new Date());
initialMessageState const [sendCounter, setSendCounter] = React.useState(0);
);
React.useEffect(() => { React.useEffect(() => {
if (!!waku) return; if (!!waku) return;
if (wakuStatus !== 'NotStarted') return; if (wakuStatus !== 'None') return;
setWakuStatus('Starting'); setWakuStatus('Starting');
@ -43,16 +38,16 @@ function App() {
const processIncomingMessage = React.useCallback((wakuMessage) => { const processIncomingMessage = React.useCallback((wakuMessage) => {
if (!wakuMessage.payload) return; if (!wakuMessage.payload) return;
const { timestamp, text } = proto.SimpleChatMessage.decode( const { text, timestamp } = proto.SimpleChatMessage.decode(
wakuMessage.payload wakuMessage.payload
); );
dispatchMessages({ const time = new Date();
type: 'Add', time.setTime(timestamp);
message: { const message = { text, timestamp: time };
timestamp: new Date(timestamp),
text, setMessages((currMessages) => {
}, return [message].concat(currMessages);
}); });
}, []); }, []);
@ -66,12 +61,23 @@ function App() {
}; };
}, [waku, wakuStatus, processIncomingMessage]); }, [waku, wakuStatus, processIncomingMessage]);
React.useEffect(() => {
const timer = setInterval(() => {
setCurrentTime(new Date());
}, 1000);
return () => {
clearInterval(timer);
};
}, [currentTime]);
const sendMessageOnClick = () => { const sendMessageOnClick = () => {
if (wakuStatus !== 'Ready') return; if (wakuStatus !== 'Ready') return;
sendMessage('Here is a message', waku).then(() => sendMessage(`Here is message #${sendCounter}`, waku, currentTime).then(() =>
console.log('Message sent') console.log('Message sent')
); );
setSendCounter(sendCounter + 1);
}; };
return ( return (
@ -82,7 +88,7 @@ function App() {
Send Message Send Message
</button> </button>
<ul> <ul>
{messagesState.messages.map((msg) => { {messages.map((msg) => {
return ( return (
<li> <li>
<p> <p>
@ -104,23 +110,14 @@ async function bootstrapWaku(waku) {
await Promise.all(nodes.map((addr) => waku.dial(addr))); await Promise.all(nodes.map((addr) => waku.dial(addr)));
} }
async function sendMessage(message, waku) { async function sendMessage(message, waku, timestamp) {
const time = timestamp.getTime();
const payload = proto.SimpleChatMessage.encode({ const payload = proto.SimpleChatMessage.encode({
timestamp: Date.now(), timestamp: time,
text: message, text: message,
}); });
const wakuMessage = await WakuMessage.fromBytes(payload, ContentTopic); const wakuMessage = await WakuMessage.fromBytes(payload, 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;
}
}