web/react/components/channel_info_modal.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

// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved.
// See License.txt for license information.

var ChannelStore = require('../stores/channel_store.jsx');

export default class CommandList extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            channel_id: ChannelStore.getCurrentId()
        };
    }

    componentDidMount() {
        var self = this;
        if (this.refs.modal) {
            $(React.findDOMNode(this.refs.modal)).on('show.bs.modal', function show(e) {
                var button = e.relatedTarget;
                self.setState({channel_id: $(button).attr('data-channelid')});
            });
        }
    }

    render() {
        var channel = ChannelStore.get(this.state.channel_id);

        if (!channel) {
            channel = {};
            channel.display_name = 'No Channel Found';
            channel.name = 'No Channel Found';
            channel.id = 'No Channel Found';
        }

        return (
            <div
              className='modal fade'
              ref='modal'
              id='channel_info'
              tabIndex='-1'
              role='dialog'
              aria-hidden='true'
            >
               <div className='modal-dialog'>
                  <div className='modal-content'>
                    <div className='modal-header'>
                      <button
                        type='button'
                        className='close'
                        data-dismiss='modal'
                        aria-label='Close'
                      >
                        <span aria-hidden='true'>&times;</span>
                      </button>
                      <h4
                        className='modal-title'
                        id='myModalLabel'
                      >
                        <span className='name'>{channel.display_name}</span>
                      </h4>
                    </div>
                    <div className='modal-body'>
                      <div className='row form-group'>
                        <div className='col-sm-3 info__label'>Channel Name: </div>
                        <div className='col-sm-9'>{channel.display_name}</div>
                      </div>
                      <div className='row form-group'>
                        <div className='col-sm-3 info__label'>Channel Handle:</div>
                        <div className='col-sm-9'>{channel.name}</div>
                      </div>
                      <div className='row'>
                        <div className='col-sm-3 info__label'>Channel ID:</div>
                        <div className='col-sm-9'>{channel.id}</div>
                      </div>
                    </div>
                    <div className='modal-footer'>
                      <button
                        type='button'
                        className='btn btn-default'
                        data-dismiss='modal'
                      >Close</button>
                    </div>
                  </div>
               </div>
            </div>
        );
    }
}