Converting to Webpack. Stage 1.

1 files changed, 417 insertions, 0 deletions

diff --git a/webapp/components/channel_notifications_modal.jsx b/webapp/components/channel_notifications_modal.jsx
new file mode 100644
index 000000000..cc1162b77
--- /dev/null
+++ b/webapp/components/channel_notifications_modal.jsx
@@ -0,0 +1,417 @@
+// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import {Modal} from 'react-bootstrap';
+import SettingItemMin from './setting_item_min.jsx';
+import SettingItemMax from './setting_item_max.jsx';
+
+import * as Client from 'utils/client.jsx';
+import ChannelStore from 'stores/channel_store.jsx';
+
+import {FormattedMessage} from 'react-intl';
+
+import React from 'react';
+
+export default class ChannelNotificationsModal extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.updateSection = this.updateSection.bind(this);
+
+        this.handleSubmitNotifyLevel = this.handleSubmitNotifyLevel.bind(this);
+        this.handleUpdateNotifyLevel = this.handleUpdateNotifyLevel.bind(this);
+        this.createNotifyLevelSection = this.createNotifyLevelSection.bind(this);
+
+        this.handleSubmitMarkUnreadLevel = this.handleSubmitMarkUnreadLevel.bind(this);
+        this.handleUpdateMarkUnreadLevel = this.handleUpdateMarkUnreadLevel.bind(this);
+        this.createMarkUnreadLevelSection = this.createMarkUnreadLevelSection.bind(this);
+
+        this.state = {
+            activeSection: '',
+            notifyLevel: '',
+            unreadLevel: ''
+        };
+    }
+    updateSection(section) {
+        this.setState({activeSection: section});
+    }
+    componentWillReceiveProps(nextProps) {
+        if (!this.props.show && nextProps.show) {
+            this.setState({
+                notifyLevel: nextProps.channelMember.notify_props.desktop,
+                unreadLevel: nextProps.channelMember.notify_props.mark_unread
+            });
+        }
+    }
+    handleSubmitNotifyLevel() {
+        var channelId = this.props.channel.id;
+        var notifyLevel = this.state.notifyLevel;
+
+        if (this.props.channelMember.notify_props.desktop === notifyLevel) {
+            this.updateSection('');
+            return;
+        }
+
+        var data = {};
+        data.channel_id = channelId;
+        data.user_id = this.props.currentUser.id;
+        data.desktop = notifyLevel;
+
+        //TODO: This should be moved to event_helpers
+        Client.updateNotifyProps(data,
+            () => {
+                // YUCK
+                var member = ChannelStore.getMember(channelId);
+                member.notify_props.desktop = notifyLevel;
+                ChannelStore.setChannelMember(member);
+                this.updateSection('');
+            },
+            (err) => {
+                this.setState({serverError: err.message});
+            }
+        );
+    }
+    handleUpdateNotifyLevel(notifyLevel) {
+        this.setState({notifyLevel});
+    }
+    createNotifyLevelSection(serverError) {
+        // Get glabal user setting for notifications
+        const globalNotifyLevel = this.props.currentUser.notify_props.desktop;
+        let globalNotifyLevelName;
+        if (globalNotifyLevel === 'all') {
+            globalNotifyLevelName = (
+                <FormattedMessage
+                    id='channel_notifications.allActivity'
+                    defaultMessage='For all activity'
+                />
+            );
+        } else if (globalNotifyLevel === 'mention') {
+            globalNotifyLevelName = (
+                <FormattedMessage
+                    id='channel_notifications.onlyMentions'
+                    defaultMessage='Only for mentions'
+                />
+            );
+        } else {
+            globalNotifyLevelName = (
+                <FormattedMessage
+                    id='channel_notifications.never'
+                    defaultMessage='Never'
+                />
+            );
+        }
+
+        const sendDesktop = (
+            <FormattedMessage
+                id='channel_notifications.sendDesktop'
+                defaultMessage='Send desktop notifications'
+            />
+        );
+
+        const notificationLevel = this.state.notifyLevel;
+
+        if (this.state.activeSection === 'desktop') {
+            const notifyActive = [false, false, false, false];
+            if (notificationLevel === 'default') {
+                notifyActive[0] = true;
+            } else if (notificationLevel === 'all') {
+                notifyActive[1] = true;
+            } else if (notificationLevel === 'mention') {
+                notifyActive[2] = true;
+            } else {
+                notifyActive[3] = true;
+            }
+
+            var inputs = [];
+
+            inputs.push(
+                <div key='channel-notification-level-radio'>
+                    <div className='radio'>
+                        <label>
+                            <input
+                                type='radio'
+                                checked={notifyActive[0]}
+                                onChange={this.handleUpdateNotifyLevel.bind(this, 'default')}
+                            />
+                            <FormattedMessage
+                                id='channel_notifications.globalDefault'
+                                defaultMessage='Global default ({notifyLevel})'
+                                values={{
+                                    notifyLevel: (globalNotifyLevelName)
+                                }}
+                            />
+                        </label>
+                        <br/>
+                    </div>
+                    <div className='radio'>
+                        <label>
+                            <input
+                                type='radio'
+                                checked={notifyActive[1]}
+                                onChange={this.handleUpdateNotifyLevel.bind(this, 'all')}
+                            />
+                            <FormattedMessage id='channel_notifications.allActivity'/>
+                        </label>
+                        <br/>
+                    </div>
+                    <div className='radio'>
+                        <label>
+                            <input
+                                type='radio'
+                                checked={notifyActive[2]}
+                                onChange={this.handleUpdateNotifyLevel.bind(this, 'mention')}
+                            />
+                            <FormattedMessage id='channel_notifications.onlyMentions'/>
+                        </label>
+                        <br/>
+                    </div>
+                    <div className='radio'>
+                        <label>
+                            <input
+                                type='radio'
+                                checked={notifyActive[3]}
+                                onChange={this.handleUpdateNotifyLevel.bind(this, 'none')}
+                            />
+                            <FormattedMessage id='channel_notifications.never'/>
+                        </label>
+                    </div>
+                </div>
+            );
+
+            const handleUpdateSection = function updateSection(e) {
+                this.updateSection('');
+                this.onListenerChange();
+                e.preventDefault();
+            }.bind(this);
+
+            const extraInfo = (
+                <span>
+                    <FormattedMessage
+                        id='channel_notifications.override'
+                        defaultMessage='Selecting an option other than "Default" will override the global notification settings. Desktop notifications are available on Firefox, Safari, and Chrome.'
+                    />
+                </span>
+            );
+
+            return (
+                <SettingItemMax
+                    title={sendDesktop}
+                    inputs={inputs}
+                    submit={this.handleSubmitNotifyLevel}
+                    server_error={serverError}
+                    updateSection={handleUpdateSection}
+                    extraInfo={extraInfo}
+                />
+            );
+        }
+
+        var describe;
+        if (notificationLevel === 'default') {
+            describe = (
+                <FormattedMessage
+                    id='channel_notifications.globalDefault'
+                    values={{
+                        notifyLevel: (globalNotifyLevelName)
+                    }}
+                />
+            );
+        } else if (notificationLevel === 'mention') {
+            describe = (<FormattedMessage id='channel_notifications.onlyMentions'/>);
+        } else if (notificationLevel === 'all') {
+            describe = (<FormattedMessage id='channel_notifications.allActivity'/>);
+        } else {
+            describe = (<FormattedMessage id='channel_notifications.never'/>);
+        }
+
+        return (
+            <SettingItemMin
+                title={sendDesktop}
+                describe={describe}
+                updateSection={() => {
+                    this.updateSection('desktop');
+                }}
+            />
+        );
+    }
+
+    handleSubmitMarkUnreadLevel() {
+        const channelId = this.props.channel.id;
+        const markUnreadLevel = this.state.unreadLevel;
+
+        if (this.props.channelMember.notify_props.mark_unread === markUnreadLevel) {
+            this.updateSection('');
+            return;
+        }
+
+        const data = {
+            channel_id: channelId,
+            user_id: this.props.currentUser.id,
+            mark_unread: markUnreadLevel
+        };
+
+        //TODO: This should be fixed, moved to event_helpers
+        Client.updateNotifyProps(data,
+            () => {
+                // Yuck...
+                var member = ChannelStore.getMember(channelId);
+                member.notify_props.mark_unread = markUnreadLevel;
+                ChannelStore.setChannelMember(member);
+                this.updateSection('');
+            },
+            (err) => {
+                this.setState({serverError: err.message});
+            }
+        );
+    }
+
+    handleUpdateMarkUnreadLevel(unreadLevel) {
+        this.setState({unreadLevel});
+    }
+
+    createMarkUnreadLevelSection(serverError) {
+        let content;
+
+        const markUnread = (
+            <FormattedMessage
+                id='channel_notifications.markUnread'
+                defaultMessage='Mark Channel Unread'
+            />
+        );
+        if (this.state.activeSection === 'markUnreadLevel') {
+            const inputs = [(
+                <div key='channel-notification-unread-radio'>
+                    <div className='radio'>
+                        <label>
+                            <input
+                                type='radio'
+                                checked={this.state.unreadLevel === 'all'}
+                                onChange={this.handleUpdateMarkUnreadLevel.bind(this, 'all')}
+                            />
+                                <FormattedMessage
+                                    id='channel_notifications.allUnread'
+                                    defaultMessage='For all unread messages'
+                                />
+                        </label>
+                        <br/>
+                    </div>
+                    <div className='radio'>
+                        <label>
+                            <input
+                                type='radio'
+                                checked={this.state.unreadLevel === 'mention'}
+                                onChange={this.handleUpdateMarkUnreadLevel.bind(this, 'mention')}
+                            />
+                            <FormattedMessage id='channel_notifications.onlyMentions'/>
+                        </label>
+                        <br/>
+                    </div>
+                </div>
+            )];
+
+            const handleUpdateSection = function handleUpdateSection(e) {
+                this.updateSection('');
+                this.onListenerChange();
+                e.preventDefault();
+            }.bind(this);
+
+            const extraInfo = (
+                <span>
+                    <FormattedMessage
+                        id='channel_notifications.unreadInfo'
+                        defaultMessage='The channel name is bolded in the sidebar when there are unread messages. Selecting "Only for mentions" will bold the channel only when you are mentioned.'
+                    />
+                </span>
+            );
+
+            content = (
+                <SettingItemMax
+                    title={markUnread}
+                    inputs={inputs}
+                    submit={this.handleSubmitMarkUnreadLevel}
+                    server_error={serverError}
+                    updateSection={handleUpdateSection}
+                    extraInfo={extraInfo}
+                />
+            );
+        } else {
+            let describe;
+
+            if (!this.state.unreadLevel || this.state.unreadLevel === 'all') {
+                describe = (
+                    <FormattedMessage
+                        id='channel_notifications.allUnread'
+                        defaultMessage='For all unread messages'
+                    />
+                );
+            } else {
+                describe = (<FormattedMessage id='channel_notifications.onlyMentions'/>);
+            }
+
+            const handleUpdateSection = function handleUpdateSection(e) {
+                this.updateSection('markUnreadLevel');
+                e.preventDefault();
+            }.bind(this);
+
+            content = (
+                <SettingItemMin
+                    title={markUnread}
+                    describe={describe}
+                    updateSection={handleUpdateSection}
+                />
+            );
+        }
+
+        return content;
+    }
+
+    render() {
+        var serverError = null;
+        if (this.state.serverError) {
+            serverError = <div className='form-group has-error'><label className='control-label'>{this.state.serverError}</label></div>;
+        }
+
+        return (
+            <Modal
+                show={this.props.show}
+                dialogClassName='settings-modal'
+                onHide={this.props.onHide}
+            >
+                <Modal.Header closeButton={true}>
+                    <Modal.Title>
+                        <FormattedMessage
+                            id='channel_notifications.preferences'
+                            defaultMessage='Notification Preferences for '
+                        />
+                        <span className='name'>{this.props.channel.display_name}</span>
+                    </Modal.Title>
+                </Modal.Header>
+                <Modal.Body>
+                    <div className='settings-table'>
+                        <div className='settings-content'>
+                            <div
+                                ref='wrapper'
+                                className='user-settings'
+                            >
+                                <br/>
+                                <div className='divider-dark first'/>
+                                {this.createNotifyLevelSection(serverError)}
+                                <div className='divider-light'/>
+                                {this.createMarkUnreadLevelSection(serverError)}
+                                <div className='divider-dark'/>
+                            </div>
+                        </div>
+                    </div>
+                    {serverError}
+                </Modal.Body>
+            </Modal>
+        );
+    }
+}
+
+ChannelNotificationsModal.propTypes = {
+    show: React.PropTypes.bool.isRequired,
+    onHide: React.PropTypes.func.isRequired,
+    channel: React.PropTypes.object.isRequired,
+    channelMember: React.PropTypes.object.isRequired,
+    currentUser: React.PropTypes.object.isRequired
+};