summaryrefslogtreecommitdiffstats
path: root/web/react/components/channel_notifications.jsx
diff options
context:
space:
mode:
Diffstat (limited to 'web/react/components/channel_notifications.jsx')
-rw-r--r--web/react/components/channel_notifications.jsx302
1 files changed, 198 insertions, 104 deletions
diff --git a/web/react/components/channel_notifications.jsx b/web/react/components/channel_notifications.jsx
index 38bc91682..cd477feb7 100644
--- a/web/react/components/channel_notifications.jsx
+++ b/web/react/components/channel_notifications.jsx
@@ -9,159 +9,230 @@ var client = require('../utils/client.jsx');
var UserStore = require('../stores/user_store.jsx');
var ChannelStore = require('../stores/channel_store.jsx');
-module.exports = React.createClass({
- componentDidMount: function() {
- ChannelStore.addChangeListener(this._onChange);
+export default class ChannelNotifications extends React.Component {
+ constructor(props) {
+ super(props);
+ this.onListenerChange = this.onListenerChange.bind(this);
+ this.updateSection = this.updateSection.bind(this);
+ this.handleUpdate = this.handleUpdate.bind(this);
+ this.handleRadioClick = this.handleRadioClick.bind(this);
+ this.handleQuietToggle = this.handleQuietToggle.bind(this);
+ this.state = {notifyLevel: '', title: '', channelId: '', activeSection: ''};
+ }
+ componentDidMount() {
+ ChannelStore.addChangeListener(this.onListenerChange);
var self = this;
- $(this.refs.modal.getDOMNode()).on('show.bs.modal', function(e) {
+ $(this.refs.modal.getDOMNode()).on('show.bs.modal', function showModal(e) {
var button = e.relatedTarget;
- var channel_id = button.getAttribute('data-channelid');
+ var channelId = button.getAttribute('data-channelid');
- var notifyLevel = ChannelStore.getMember(channel_id).notify_level;
+ var notifyLevel = ChannelStore.getMember(channelId).notify_level;
var quietMode = false;
- if (notifyLevel === "quiet") quietMode = true;
- self.setState({ notify_level: notifyLevel, quiet_mode: quietMode, title: button.getAttribute('data-title'), channel_id: channel_id });
+
+ if (notifyLevel === 'quiet') {
+ quietMode = true;
+ }
+
+ self.setState({notifyLevel: notifyLevel, quietMode: quietMode, title: button.getAttribute('data-title'), channelId: channelId});
});
- },
- componentWillUnmount: function() {
- ChannelStore.removeChangeListener(this._onChange);
- },
- _onChange: function() {
- if (!this.state.channel_id) return;
- var notifyLevel = ChannelStore.getMember(this.state.channel_id).notify_level;
+ }
+ componentWillUnmount() {
+ ChannelStore.removeChangeListener(this.onListenerChange);
+ }
+ onListenerChange() {
+ if (!this.state.channelId) {
+ return;
+ }
+
+ var notifyLevel = ChannelStore.getMember(this.state.channelId).notify_level;
var quietMode = false;
- if (notifyLevel === "quiet") quietMode = true;
+ if (notifyLevel === 'quiet') {
+ quietMode = true;
+ }
var newState = this.state;
- newState.notify_level = notifyLevel;
- newState.quiet_mode = quietMode;
+ newState.notifyLevel = notifyLevel;
+ newState.quietMode = quietMode;
if (!utils.areStatesEqual(this.state, newState)) {
this.setState(newState);
}
- },
- updateSection: function(section) {
- this.setState({ activeSection: section });
- },
- getInitialState: function() {
- return { notify_level: "", title: "", channel_id: "", activeSection: "" };
- },
- handleUpdate: function() {
- var channel_id = this.state.channel_id;
- var notify_level = this.state.quiet_mode ? "quiet" : this.state.notify_level;
+ }
+ updateSection(section) {
+ this.setState({activeSection: section});
+ }
+ handleUpdate() {
+ var channelId = this.state.channelId;
+ var notifyLevel = this.state.notifyLevel;
+ if (this.state.quietMode) {
+ notifyLevel = 'quiet';
+ }
var data = {};
- data["channel_id"] = channel_id;
- data["user_id"] = UserStore.getCurrentId();
- data["notify_level"] = notify_level;
+ data.channel_id = channelId;
+ data.user_id = UserStore.getCurrentId();
+ data.notify_level = notifyLevel;
- if (!data["notify_level"] || data["notify_level"].length === 0) return;
+ if (!data.notify_level || data.notify_level.length === 0) {
+ return;
+ }
client.updateNotifyLevel(data,
- function(data) {
- var member = ChannelStore.getMember(channel_id);
- member.notify_level = notify_level;
+ function success() {
+ var member = ChannelStore.getMember(channelId);
+ member.notify_level = notifyLevel;
ChannelStore.setChannelMember(member);
- this.updateSection("");
+ this.updateSection('');
}.bind(this),
- function(err) {
- this.setState({ server_error: err.message });
+ function error(err) {
+ this.setState({serverError: err.message});
}.bind(this)
);
- },
- handleRadioClick: function(notifyLevel) {
- this.setState({ notify_level: notifyLevel, quiet_mode: false });
+ }
+ handleRadioClick(notifyLevel) {
+ this.setState({notifyLevel: notifyLevel, quietMode: false});
this.refs.modal.getDOMNode().focus();
- },
- handleQuietToggle: function(quietMode) {
- this.setState({ notify_level: "none", quiet_mode: quietMode });
+ }
+ handleQuietToggle(quietMode) {
+ this.setState({notifyLevel: 'none', quietMode: quietMode});
this.refs.modal.getDOMNode().focus();
- },
- render: function() {
- var server_error = this.state.server_error ? <div className='form-group has-error'><label className='control-label'>{ this.state.server_error }</label></div> : null;
+ }
+ render() {
+ var serverError = null;
+ if (this.state.serverError) {
+ serverError = <div className='form-group has-error'><label className='control-label'>{this.state.serverError}</label></div>;
+ }
var self = this;
+ var describe = '';
+ var inputs = [];
+
+ var handleUpdateSection;
var desktopSection;
if (this.state.activeSection === 'desktop') {
var notifyActive = [false, false, false];
- if (this.state.notify_level === "mention") {
+ if (this.state.notifyLevel === 'mention') {
notifyActive[1] = true;
- } else if (this.state.notify_level === "all") {
+ } else if (this.state.notifyLevel === 'all') {
notifyActive[0] = true;
} else {
notifyActive[2] = true;
}
- var inputs = [];
-
inputs.push(
<div>
- <div className="radio">
+ <div className='radio'>
<label>
- <input type="radio" checked={notifyActive[0]} onClick={function(){self.handleRadioClick("all")}}>For all activity</input>
+ <input
+ type='radio'
+ checked={notifyActive[0]}
+ onChange={self.handleRadioClick.bind(this, 'all')}
+ >
+ For all activity
+ </input>
</label>
<br/>
</div>
- <div className="radio">
+ <div className='radio'>
<label>
- <input type="radio" checked={notifyActive[1]} onClick={function(){self.handleRadioClick("mention")}}>Only for mentions</input>
+ <input
+ type='radio'
+ checked={notifyActive[1]}
+ onChange={self.handleRadioClick.bind(this, 'mention')}
+ >
+ Only for mentions
+ </input>
</label>
<br/>
</div>
- <div className="radio">
+ <div className='radio'>
<label>
- <input type="radio" checked={notifyActive[2]} onClick={function(){self.handleRadioClick("none")}}>Never</input>
+ <input
+ type='radio'
+ checked={notifyActive[2]}
+ onChange={self.handleRadioClick.bind(this, 'none')}
+ >
+ Never
+ </input>
</label>
</div>
</div>
);
+ handleUpdateSection = function updateSection(e) {
+ self.updateSection('');
+ self.onListenerChange();
+ e.preventDefault();
+ };
+
desktopSection = (
<SettingItemMax
- title="Send desktop notifications"
+ title='Send desktop notifications'
inputs={inputs}
submit={this.handleUpdate}
- server_error={server_error}
- updateSection={function(e){self.updateSection("");self._onChange();e.preventDefault();}}
+ server_error={serverError}
+ updateSection={handleUpdateSection}
/>
);
} else {
- var describe = "";
- if (this.state.notify_level === "mention") {
- describe = "Only for mentions";
- } else if (this.state.notify_level === "all") {
- describe = "For all activity";
+ if (this.state.notifyLevel === 'mention') {
+ describe = 'Only for mentions';
+ } else if (this.state.notifyLevel === 'all') {
+ describe = 'For all activity';
} else {
- describe = "Never";
+ describe = 'Never';
}
+ handleUpdateSection = function updateSection(e) {
+ self.updateSection('desktop');
+ e.preventDefault();
+ };
+
desktopSection = (
<SettingItemMin
- title="Send desktop notifications"
+ title='Send desktop notifications'
describe={describe}
- updateSection={function(e){self.updateSection("desktop");e.preventDefault();}}
+ updateSection={handleUpdateSection}
/>
);
}
var quietSection;
if (this.state.activeSection === 'quiet') {
- var quietActive = ["",""];
- if (this.state.quiet_mode) {
- quietActive[0] = "active";
+ var quietActive = [false, false];
+ if (this.state.quietMode) {
+ quietActive[0] = true;
} else {
- quietActive[1] = "active";
+ quietActive[1] = true;
}
- var inputs = [];
-
inputs.push(
<div>
- <div className="btn-group" data-toggle="buttons-radio">
- <button className={"btn btn-default "+quietActive[0]} onClick={function(){self.handleQuietToggle(true)}}>On</button>
- <button className={"btn btn-default "+quietActive[1]} onClick={function(){self.handleQuietToggle(false)}}>Off</button>
+ <div className='radio'>
+ <label>
+ <input
+ type='radio'
+ checked={quietActive[0]}
+ onChange={self.handleQuietToggle.bind(this, true)}
+ >
+ On
+ </input>
+ </label>
+ <br/>
+ </div>
+ <div className='radio'>
+ <label>
+ <input
+ type='radio'
+ checked={quietActive[1]}
+ onChange={self.handleQuietToggle.bind(this, false)}
+ >
+ Off
+ </input>
+ </label>
+ <br/>
</div>
</div>
);
@@ -173,62 +244,85 @@ module.exports = React.createClass({
</div>
);
+ handleUpdateSection = function updateSection(e) {
+ self.updateSection('');
+ self.onListenerChange();
+ e.preventDefault();
+ };
+
quietSection = (
<SettingItemMax
- title="Quiet mode"
+ title='Quiet mode'
inputs={inputs}
submit={this.handleUpdate}
- server_error={server_error}
- updateSection={function(e){self.updateSection("");self._onChange();e.preventDefault();}}
+ server_error={serverError}
+ updateSection={handleUpdateSection}
/>
);
} else {
- var describe = "";
- if (this.state.quiet_mode) {
- describe = "On";
+ if (this.state.quietMode) {
+ describe = 'On';
} else {
- describe = "Off";
+ describe = 'Off';
}
+ handleUpdateSection = function updateSection(e) {
+ self.updateSection('quiet');
+ e.preventDefault();
+ };
+
quietSection = (
<SettingItemMin
- title="Quiet mode"
+ title='Quiet mode'
describe={describe}
- updateSection={function(e){self.updateSection("quiet");e.preventDefault();}}
+ updateSection={handleUpdateSection}
/>
);
}
- var self = this;
return (
- <div className="modal fade" id="channel_notifications" ref="modal" tabIndex="-1" role="dialog" aria-hidden="true">
- <div className="modal-dialog settings-modal">
- <div className="modal-content">
- <div className="modal-header">
- <button type="button" className="close" data-dismiss="modal">
- <span aria-hidden="true">&times;</span>
- <span className="sr-only">Close</span>
+ <div
+ className='modal fade'
+ id='channel_notifications'
+ ref='modal'
+ tabIndex='-1'
+ role='dialog'
+ aria-hidden='true'
+ >
+ <div className='modal-dialog settings-modal'>
+ <div className='modal-content'>
+ <div className='modal-header'>
+ <button
+ type='button'
+ className='close'
+ data-dismiss='modal'
+ >
+ <span aria-hidden='true'>&times;</span>
+ <span className='sr-only'>Close</span>
</button>
- <h4 className="modal-title">{"Notification Preferences for " + this.state.title}</h4>
+ <h4 className='modal-title'>{'Notification Preferences for ' + this.state.title}</h4>
</div>
- <div className="modal-body">
- <div className="settings-table">
- <div className="settings-content">
- <div ref="wrapper" className="user-settings">
+ <div className='modal-body'>
+ <div className='settings-table'>
+ <div className='settings-content'>
+ <div
+ ref='wrapper'
+ className='user-settings'
+ >
<br/>
- <div className="divider-dark first"/>
+ <div className='divider-dark first'/>
{desktopSection}
- <div className="divider-light"/>
+ <div className='divider-light'/>
{quietSection}
- <div className="divider-dark"/>
+ <div className='divider-dark'/>
</div>
</div>
</div>
- { server_error }
+ {serverError}
</div>
</div>
</div>
</div>
);
}
-});
+}
generated by cgit v1.2.3-1-g7c22 (git 2.25.1) at 2024-10-30 21:00:49 +0000