mirror of https://github.com/waku-org/js-waku.git
We can send messages!
This commit is contained in:
parent
35db88a63e
commit
dc7b9ba5ae
|
@ -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>
|
||||
);
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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;
|
|
@ -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);
|
Loading…
Reference in New Issue