summaryrefslogtreecommitdiffstats
path: root/web/react/components/msg_typing.jsx
diff options
context:
space:
mode:
Diffstat (limited to 'web/react/components/msg_typing.jsx')
-rw-r--r--web/react/components/msg_typing.jsx49
1 files changed, 49 insertions, 0 deletions
diff --git a/web/react/components/msg_typing.jsx b/web/react/components/msg_typing.jsx
new file mode 100644
index 000000000..9d3904757
--- /dev/null
+++ b/web/react/components/msg_typing.jsx
@@ -0,0 +1,49 @@
+// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+
+var SocketStore = require('../stores/socket_store.jsx');
+var UserStore = require('../stores/user_store.jsx');
+
+module.exports = React.createClass({
+ timer: null,
+ lastTime: 0,
+ componentDidMount: function() {
+ SocketStore.addChangeListener(this._onChange);
+ },
+ componentWillUnmount: function() {
+ SocketStore.removeChangeListener(this._onChange);
+ },
+ _onChange: function(msg) {
+ if (msg.action == "typing" &&
+ this.props.channelId == msg.channel_id &&
+ this.props.parentId == msg.props.parent_id) {
+
+ this.lastTime = new Date().getTime();
+
+ var username = "Someone";
+ if (UserStore.hasProfile(msg.user_id)) {
+ username = UserStore.getProfile(msg.user_id).username;
+ }
+
+ this.setState({ text: username + " is typing..." });
+
+ if (!this.timer) {
+ var outer = this;
+ outer.timer = setInterval(function() {
+ if ((new Date().getTime() - outer.lastTime) > 8000) {
+ outer.setState({ text: "" });
+ }
+ }, 3000);
+ }
+ }
+ },
+ getInitialState: function() {
+ return { text: "" };
+ },
+ render: function() {
+ return (
+ <span className="msg-typing">{ this.state.text }</span>
+ );
+ }
+});