-
Notifications
You must be signed in to change notification settings - Fork 1
/
main.jsx
124 lines (105 loc) · 3.01 KB
/
main.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
var React = require('react');
var ReactDOM = require('react-dom');
var io = require('socket.io-client');
var Panel = require('react-bootstrap').Panel;
var FormGroup = require('react-bootstrap').FormGroup;
var FormControl = require('react-bootstrap').FormControl;
var InputGroup = require('react-bootstrap').InputGroup;
var Button = require('react-bootstrap').Button;
var socket = io.connect('http://' + document.domain + ':' + location.port);
var Message = React.createClass({
render: function() {
return (
<div className="message">
<span><strong>{this.props.user}</strong> {this.props.text}</span>
<hr/>
</div>
);
}
});
var MessageList = React.createClass({
componentDidUpdate: function() {
ReactDOM.findDOMNode(this).scrollTop = ReactDOM.findDOMNode(this).scrollHeight;
},
render() {
return (
<div className='messageList'>
{
this.props.messages.map(function(message, i) {
return (
<Message key={i} user={message.user} text={message.text}/>
);
})
}
</div>
);
}
});
var MessageForm = React.createClass({
getInitialState() {
return {text: ''};
},
handleSubmit(e) {
e.preventDefault();
var message = {
user : "You:",
text : this.state.text
}
this.props.onMessageSubmit(message);
this.setState({ text: '' });
},
handleChange(e) {
this.setState({ text : e.target.value });
},
render() {
return(
<div className='messageForm'>
<form onSubmit={this.handleSubmit}>
<FormGroup>
<InputGroup>
<FormControl type="text" onChange={this.handleChange} value={this.state.text}/>
<InputGroup.Button>
<Button type="submit">Send</Button>
</InputGroup.Button>
</InputGroup>
</FormGroup>
</form>
</div>
);
}
});
var BotApp = React.createClass({
getInitialState: function() {
return {messages: [{user: 'FriendBot:', text: 'Hi I\'m FriendBot!'}]};
},
componentDidMount() {
socket.on('msg:response', this.handleMessageReceive);
},
handleMessageReceive(message) {
var {messages} = this.state;
messages.push(message);
this.setState({messages});
},
handleMessageSubmit(message) {
var {messages} = this.state;
messages.push(message);
this.setState({messages});
socket.emit('msg:send', message);
},
render: function() {
var _MessageForm = ( <MessageForm onMessageSubmit={this.handleMessageSubmit}/> );
return (
<div className="mainContent">
<div className="container">
<Panel header="FriendBot Chat" footer={_MessageForm}>
<MessageList messages={this.state.messages}/>
</Panel>
</div>
</div>
);
}
});
ReactDOM.render(
<BotApp/>,
document.getElementById('container')
);