Can input messages to send!

This commit is contained in:
Franck Royer 2021-04-19 12:55:33 +10:00 committed by Franck Royer
parent dc7b9ba5ae
commit 3e409c46b5
No known key found for this signature in database
GPG Key ID: A82ED75A8DFC50A4
7 changed files with 63 additions and 14 deletions

View File

@ -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": [

34
web-chat/src/Input.tsx Normal file
View File

@ -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>
);
}
}

View File

@ -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>

View File

@ -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>
);

View File

@ -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);

View File

@ -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++}.`,
});
}
}

View File

@ -22,3 +22,7 @@ code {
content: "";
display: table;
}
.sendButton {
height: 10px;
}