summaryrefslogtreecommitdiffstats
path: root/web/react/components/msg_typing.jsx
blob: aacb315dd9edd77644fa5fd58f817bdffaefa1bd (plain)
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
// 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);
    },
    componentWillReceiveProps: function(newProps) {
        if(this.props.channelId !== newProps.channelId) {
            this.setState({text:""});
        }
    },
    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);
            }
        }
        else if (msg.action == "posted" && msg.channel_id === this.props.channelId) {
            this.setState({text:""})
        }
    },
    getInitialState: function() {
        return { text: "" };
    },
    render: function() {
        return (
            <span className="msg-typing">{ this.state.text }</span>
        );
    }
});