mirror of https://github.com/waku-org/js-waku.git
Can input messages to send!
This commit is contained in:
parent
dc7b9ba5ae
commit
3e409c46b5
|
@ -20,7 +20,10 @@
|
|||
"start": "react-scripts start",
|
||||
"build": "react-scripts build",
|
||||
"test": "react-scripts test",
|
||||
"eject": "react-scripts eject"
|
||||
"eject": "react-scripts eject",
|
||||
"fix": "run-s fix:*",
|
||||
"fix:prettier": "prettier \"src/**/*.ts\" --write",
|
||||
"fix:lint": "eslint src --ext .ts --fix"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"extends": [
|
||||
|
|
|
@ -0,0 +1,34 @@
|
|||
import React from 'react';
|
||||
|
||||
interface Props {
|
||||
messageHandler: (msg: string)=>void;
|
||||
}
|
||||
|
||||
interface State {
|
||||
inputText: string;
|
||||
}
|
||||
|
||||
export default class Input extends React.Component<Props, State> {
|
||||
constructor(props: Props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
inputText: ''
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<label>Enter message:</label>
|
||||
<input type='textarea'
|
||||
name='textValue'
|
||||
onChange={(event) => {
|
||||
this.props.messageHandler(event.target.value)
|
||||
}
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
|
@ -1,19 +1,31 @@
|
|||
import React from 'react';
|
||||
import Input from './Input';
|
||||
import Send from './Send';
|
||||
|
||||
interface Props {
|
||||
lines: string[]
|
||||
lines: string[],
|
||||
}
|
||||
|
||||
interface State {
|
||||
messageToSend: string
|
||||
}
|
||||
|
||||
|
||||
export default class Room extends React.Component<Props, State> {
|
||||
constructor(props: Props) {
|
||||
super(props);
|
||||
|
||||
this.state = { messageToSend: '' };
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<Send />
|
||||
<Input messageHandler={(msg: string) => {
|
||||
this.setState({ messageToSend: msg });
|
||||
}
|
||||
} />
|
||||
<Send message={this.state.messageToSend} />
|
||||
<div className='room'>
|
||||
{this.renderLines(this.props.lines)}
|
||||
</div>
|
||||
|
|
|
@ -2,17 +2,15 @@ import React from 'react';
|
|||
import { useWaku } from './WakuContext';
|
||||
|
||||
interface Props {
|
||||
message: string
|
||||
}
|
||||
|
||||
interface State {
|
||||
}
|
||||
|
||||
const Send = () => {
|
||||
const Send = (props: Props) => {
|
||||
const { waku } = useWaku();
|
||||
|
||||
return (
|
||||
<button className='sendButton' onClick={async () => {
|
||||
await waku!.send('Hello world!');
|
||||
await waku!.send(props.message);
|
||||
}}>
|
||||
</button>
|
||||
);
|
||||
|
|
|
@ -4,7 +4,7 @@ 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);
|
||||
|
|
|
@ -13,12 +13,11 @@ class EventEmitter<T> {
|
|||
emit(event: string, data: T) {
|
||||
let cbs = this.callbacks[event];
|
||||
if (cbs) {
|
||||
cbs.forEach(cb => cb(data));
|
||||
cbs.forEach((cb) => cb(data));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export interface Message {
|
||||
timestamp: Date;
|
||||
handle: string;
|
||||
|
@ -48,7 +47,7 @@ export default class WakuMock extends EventEmitter<Message> {
|
|||
this.emit('message', {
|
||||
timestamp,
|
||||
handle,
|
||||
message
|
||||
message,
|
||||
});
|
||||
}
|
||||
|
||||
|
@ -64,8 +63,7 @@ export default class WakuMock extends EventEmitter<Message> {
|
|||
this.emit('message', {
|
||||
timestamp,
|
||||
handle,
|
||||
message: `This is message #${this.index++}.`
|
||||
message: `This is message #${this.index++}.`,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -22,3 +22,7 @@ code {
|
|||
content: "";
|
||||
display: table;
|
||||
}
|
||||
|
||||
.sendButton {
|
||||
height: 10px;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue