We can send messages!

This commit is contained in:
Franck Royer 2021-04-19 11:34:13 +10:00 committed by Franck Royer
parent 35db88a63e
commit dc7b9ba5ae
No known key found for this signature in database
GPG Key ID: A82ED75A8DFC50A4
4 changed files with 56 additions and 11 deletions

View File

@ -2,15 +2,19 @@ import React from 'react';
import './App.css';
import Room from './Room';
import WakuMock from './WakuMock';
import { WakuContext } from './WakuContext';
interface Props {
}
interface State {
messages: string[]
messages: string[],
waku?: WakuMock
}
class App extends React.Component<Props, State> {
waku?: WakuMock;
constructor(props: Props) {
super(props);
@ -18,20 +22,25 @@ class App extends React.Component<Props, State> {
messages: []
};
WakuMock.create().then((wakuMock) => {
wakuMock.on('message',(message)=>{
const messages = this.state.messages.slice();
messages.push(message.message);
this.setState({messages});
})
});
WakuMock.create().then((wakuMock) => {
this.setState({ waku: wakuMock, messages: this.state.messages });
wakuMock.on('message', (message) => {
const messages = this.state.messages.slice();
messages.push(message.message);
this.setState({ messages });
});
});
}
render() {
return (
<div className='App'>
<div className='chat-room'>
<Room lines={this.state.messages} />
<WakuContext.Provider value={{ waku: this.state.waku }}>
<Room lines={this.state.messages} />
</WakuContext.Provider>
</div>
</div>
);

View File

@ -1,4 +1,5 @@
import React from 'react';
import Send from './Send';
interface Props {
lines: string[]
@ -7,11 +8,15 @@ interface Props {
interface State {
}
export default class Room extends React.Component<Props, State> {
render() {
return (
<div className='room'>
{this.renderLines(this.props.lines)}
<div>
<Send />
<div className='room'>
{this.renderLines(this.props.lines)}
</div>
</div>
);
}

21
web-chat/src/Send.tsx Normal file
View File

@ -0,0 +1,21 @@
import React from 'react';
import { useWaku } from './WakuContext';
interface Props {
}
interface State {
}
const Send = () => {
const { waku } = useWaku();
return (
<button className='sendButton' onClick={async () => {
await waku!.send('Hello world!');
}}>
</button>
);
};
export default Send;

View File

@ -0,0 +1,10 @@
import { createContext, useContext } from 'react';
import WakuMock from './WakuMock';
export type WakuContextType = {
waku?: WakuMock;
// setWaku: (waku: WakuMock) => void;
}
export const WakuContext = createContext<WakuContextType>({ waku: undefined });
export const useWaku = () => useContext(WakuContext);