diff --git a/README.md b/README.md
index 6431bb50..c1dc9794 100644
--- a/README.md
+++ b/README.md
@@ -1,8 +1,8 @@
# Single-page chat app to show Tinode functionality
-Example using Tinode to build a single-page chat application. The app uses bootstrap, jquery (bootstrap dependency to make it dynamic), react.js.
+Example using Tinode to build a single-page chat application. The app uses bootstrap, jquery (bootstrap dependency to make it dynamic), react.js. Tinode js library has no external dependencies.
-This is work in progress. So far it's just a JS + HTML shell not hooked up to a server.
+This is work in progress. Bugs are expected.
Try it at http://api.tinode.co/x/example-react-js/
diff --git a/index.html b/index.html
index 8f103ae4..54951b79 100644
--- a/index.html
+++ b/index.html
@@ -520,6 +520,13 @@ dignissim a diam a hendrerit. Nulla vel est ut quam rhoncus pulvinar. In hac hab
keypressTimestamp: new Date().getTime() - KEYPRESS_NOTIFICATION - 1
};
},
+ handleSend: function(e) {
+ var message = this.state.message.trim();
+ if (message) {
+ this.props.sendMessage(this.state.message.trim());
+ this.setState({message: ''});
+ }
+ },
handleMessageTyping: function(e) {
var newState = {message: e.target.value};
var now = new Date().getTime();
@@ -539,7 +546,7 @@ dignissim a diam a hendrerit. Nulla vel est ut quam rhoncus pulvinar. In hac hab
-
@@ -548,20 +555,6 @@ dignissim a diam a hendrerit. Nulla vel est ut quam rhoncus pulvinar. In hac hab
}
});
- /* This is just a static page to show when no conversation is selected */
- var DummyMessagesView = React.createClass({
- render: function() {
- return (
-
- );
- }
- });
-
var MessagesView = React.createClass({
getInitialState: function() {
return {
@@ -582,7 +575,7 @@ dignissim a diam a hendrerit. Nulla vel est ut quam rhoncus pulvinar. In hac hab
if (topic.isSubscribed()) {
this.handleInfoChange(topic);
topic.messages(function(msg) {
- msgs = [msg].concat(msgs);
+ msgs = msgs.concat(msg);
});
} else {
topic.onData = this.handleNewMessage;
@@ -603,7 +596,7 @@ dignissim a diam a hendrerit. Nulla vel est ut quam rhoncus pulvinar. In hac hab
// FIXME(gene): handleNewMessage is bound to all loaded topics as onData. Unbind it when switching topics.
// Ignore messages from all other topics but the current one.
if (this.state.topic === msg.topic) {
- this.setState({messages: [msg].concat(this.state.messages)});
+ this.setState({messages: this.state.messages.concat(msg)});
}
},
render: function() {
@@ -626,12 +619,27 @@ dignissim a diam a hendrerit. Nulla vel est ut quam rhoncus pulvinar. In hac hab
-
+
);
}
});
+
+ /* This is just a static page to show when no conversation is selected */
+ var DummyMessagesView = React.createClass({
+ render: function() {
+ return (
+
+ );
+ }
+ });
+
/* END Conversation panel */
/* The top-level class to hold all fuinctionality together */
@@ -685,6 +693,10 @@ dignissim a diam a hendrerit. Nulla vel est ut quam rhoncus pulvinar. In hac hab
handleTopicSelected: function(topicName) {
this.setState({topicSelected: topicName});
},
+ handleSendMessage: function(msg) {
+ var topic = Tinode.getTopic(this.state.topicSelected);
+ topic.publish(msg);
+ },
handleSignUp: function() {
this.setState({sidePanel: 'register'});
},
@@ -722,7 +734,7 @@ dignissim a diam a hendrerit. Nulla vel est ut quam rhoncus pulvinar. In hac hab