pro/im_webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add alert for destructable actions

Browse Source
This commit is contained in:
or-else
2019-09-24 17:12:38 +03:00
parent f3420dc66f
commit f9a29ed3ef
21 changed files with 723 additions and 301 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/edit-account-view.jsx
+1 -1
View File
@@ -291,7 +291,7 @@ export default class EditAccountView extends React.Component {
<div className="hr" />
<div className="panel-form-column">
<a href="#" className="red flat-button" onClick={(e) => {e.preventDefault(); this.props.onLogout();}}>
<i className="material-icons">exit_to_app</i> <FormattedMessage id="button_logout"
<i className="material-icons">exit_to_app</i> &nbsp;<FormattedMessage id="button_logout"
defaultMessage="Logout" description="Button [Logout]" />
</a>
</div>
src/views/info-view.jsx
+106 -21
View File
@@ -40,7 +40,47 @@ const messages = defineMessages({
id: 'label_other_user',
defaultMessage: 'Other',
description: 'Label for the other user when the user is unnamed'
}
},
delete_messages: {
id: "action_delete_messages",
defaultMessage: "Delete Messages",
description: "Flat button [Delete Messages]"
},
delete_messages_warning: {
id: "delete_messages_warning",
defaultMessage: "Are you sure you want to delete all mesages? It cannot be undone.",
description: "Alert dialog warning when deleting all messages."
},
leave_chat: {
id: "action_leave_chat",
defaultMessage: "Leave Conversation",
description: "Flat button [Leave Conversation]"
},
leave_chat_warning: {
id: "leave_chat_warning",
defaultMessage: "Are you sure you want to leave this conversation?",
description: "Alert dialog warning when unsubscribing from a chat."
},
block_contact: {
id: "action_block_contact",
defaultMessage: "Block Contact",
description: "Flat button [Block Contact]"
},
block_contact_warning: {
id: "block_contact_warning",
defaultMessage: "Are you sure you want to block this contact?",
description: "Alert dialog warning when blocking a contact."
},
report_chat: {
id: "action_report_chat",
defaultMessage: "Report Conversation",
description: "Flat button [Report Group]"
},
report_chat_warning: {
id: "report_chat_warning",
defaultMessage: "Are you sure you want to block and report this conversation?",
description: "Alert dialog warning when reporting a conversation for abuse"
},
});
class InfoView extends React.Component {
@@ -91,7 +131,10 @@ class InfoView extends React.Component {
this.handleShowAddMembers = this.handleShowAddMembers.bind(this);
this.handleHideAddMembers = this.handleHideAddMembers.bind(this);
this.handleMemberUpdateRequest = this.handleMemberUpdateRequest.bind(this);
this.handleDeleteMessages = this.handleDeleteMessages.bind(this);
this.handleLeave = this.handleLeave.bind(this);
this.handleBlock = this.handleBlock.bind(this);
this.handleReport = this.handleReport.bind(this);
this.handleMemberSelected = this.handleMemberSelected.bind(this);
this.handleMoreInfo = this.handleMoreInfo.bind(this);
this.handleTagsUpdated = this.handleTagsUpdated.bind(this);
@@ -354,9 +397,56 @@ class InfoView extends React.Component {
this.setState({showMemberPanel: false});
}
handleDeleteMessages(e) {
e.preventDefault();
const {formatMessage} = this.props.intl;
this.props.onShowAlert(
formatMessage(messages.delete_messages), // title
formatMessage(messages.delete_messages_warning), // content
(() => { this.props.onDeleteMessages(this.props.topic); }), // onConfirm
null, // "OK"
true, // Show Reject button
null // "Cancel"
);
}
handleLeave(e) {
e.preventDefault();
this.props.onLeaveTopic(this.props.topic);
const {formatMessage} = this.props.intl;
this.props.onShowAlert(
formatMessage(messages.leave_chat), // title
formatMessage(messages.leave_chat_warning), // content
(() => { this.props.onLeaveTopic(this.props.topic); }), // onConfirm
null, // "OK"
true, // Show Reject button
null // "Cancel"
);
}
handleBlock(e) {
e.preventDefault();
const {formatMessage} = this.props.intl;
this.props.onShowAlert(
formatMessage(messages.block_contact), // title
formatMessage(messages.block_contact_warning), // content
(() => { this.props.onBlockTopic(this.props.topic); }), // onConfirm
null, // "OK"
true, // Show Reject button
null // "Cancel"
);
}
handleReport(e) {
e.preventDefault();
const {formatMessage} = this.props.intl;
this.props.onShowAlert(
formatMessage(messages.report_chat), // title
formatMessage(messages.report_chat_warning), // content
(() => { this.props.onReportTopic(this.props.topic); }), // onConfirm
null, // "OK"
true, // Show Reject button
null // "Cancel"
);
}
handleMemberSelected(uid) {
@@ -591,29 +681,24 @@ class InfoView extends React.Component {
}
<div className="panel-form-column">
<a href="#" className="flat-button" onClick={this.handleDeleteMessages}>
<i className="material-icons">delete_outline</i> &npbs;<FormattedMessage id="action_delete_messages"
defaultMessage="Delete Messages" description="Flat button [Delete Messages]" />
<i className="material-icons">delete_outline</i> &nbsp;{formatMessage(messages.delete_messages)}
</a>
<a href="#" className="red flat-button" onClick={this.handleLeave}>
<i className="material-icons">exit_to_app</i> &npbs;<FormattedMessage id="action_leave_chat"
defaultMessage="Leave Conversation" description="Flat button [Leave Conversation]" />
<i className="material-icons">exit_to_app</i> &nbsp;{formatMessage(messages.leave_chat)}
</a>
{this.state.groupTopic ?
<a href="#" className="red flat-button" onClick={this.handleReport}>
<i className="material-icons">report</i> &npbs;<FormattedMessage id="action_report_group"
defaultMessage="Report Group" description="Flat button [Report Group]" />
{!this.state.groupTopic ?
<a href="#" className="red flat-button" onClick={this.handleBlock}>
<i className="material-icons">block</i> &nbsp;{formatMessage(messages.block_contact)}
</a>
:
<>
<a href="#" className="red flat-button" onClick={this.handleBlock}>
<i className="material-icons">block</i> &npbs;<FormattedMessage id="action_block_contact"
defaultMessage="Block Contact" description="Flat button [Block Contact]" />
</a>
<a href="#" className="red flat-button" onClick={this.handleReport}>
<i className="material-icons">report</i> &npbs;<FormattedMessage id="action_report_contact"
defaultMessage="Report Contact" description="Flat button [Report Contact]" />
</a>
</>
:
null
}
{!this.state.owner ?
<a href="#" className="red flat-button" onClick={this.handleReport}>
<i className="material-icons">report</i> &nbsp;{formatMessage(messages.report_chat)}
</a>
:
null
}
</div>
{this.state.groupTopic ?
src/views/tinode-web.jsx
+82 -7
View File
@@ -8,6 +8,7 @@ import 'firebase/messaging';
import Tinode from 'tinode-sdk';
import Alert from '../widgets/alert.jsx';
import ContextMenu from '../widgets/context-menu.jsx';
import InfoView from './info-view.jsx';
@@ -98,11 +99,14 @@ class TinodeWeb extends React.Component {
this.handleChangePermissions = this.handleChangePermissions.bind(this);
this.handleTagsUpdated = this.handleTagsUpdated.bind(this);
this.handleLogout = this.handleLogout.bind(this);
this.handleDeleteMessagesRequest = this.handleDeleteMessagesRequest.bind(this);
this.handleLeaveUnsubRequest = this.handleLeaveUnsubRequest.bind(this);
this.handleDialogCancel = this.handleDialogCancel.bind(this);
this.handleBlockTopicRequest = this.handleBlockTopicRequest.bind(this);
this.handleReportTopic = this.handleReportTopic.bind(this);
this.handleShowContextMenu = this.handleShowContextMenu.bind(this);
this.defaultTopicContextMenu = this.defaultTopicContextMenu.bind(this);
this.handleHideContextMenu = this.handleHideContextMenu.bind(this);
this.handleShowAlert = this.handleShowAlert.bind(this);
this.handleShowInfoView = this.handleShowInfoView.bind(this);
this.handleHideInfoView = this.handleHideInfoView.bind(this);
this.handleMemberUpdateRequest = this.handleMemberUpdateRequest.bind(this);
@@ -138,8 +142,7 @@ class TinodeWeb extends React.Component {
sidePanelSelected: 'login',
sidePanelTitle: null,
sidePanelAvatar: null,
dialogSelected: null,
contextMenuVisible: false,
login: '',
password: '',
myUserId: null,
@@ -159,6 +162,10 @@ class TinodeWeb extends React.Component {
contextMenuParams: null,
contextMenuItems: [],
// Modal alert dialog.
alertVisible: false,
alertParams: {},
// Chats as shown in the ContactsView
chatList: [],
// Contacts returned by a search query.
@@ -419,7 +426,6 @@ class TinodeWeb extends React.Component {
connected: false,
ready: false,
topicSelectedOnline: false,
dialogSelected: null,
errorText: err && err.message ? err.message : "Disconnected",
errorLevel: err && err.message ? 'err' : 'warn',
loginDisabled: false,
@@ -1080,6 +1086,18 @@ class TinodeWeb extends React.Component {
HashNavigation.navigateTo('');
}
handleDeleteMessagesRequest(topicName) {
const topic = this.tinode.getTopic(topicName);
if (!topic) {
return;
}
// Request hard-delete all messages.
topic.delMessagesAll(true).catch((err) => {
this.handleError(err.message, 'err');
});
}
handleLeaveUnsubRequest(topicName) {
const topic = this.tinode.getTopic(topicName);
if (!topic) {
@@ -1094,8 +1112,39 @@ class TinodeWeb extends React.Component {
});
}
handleDialogCancel() {
this.setState({dialogSelected: null});
handleBlockTopicRequest(topicName) {
const topic = this.tinode.getTopic(topicName);
if (!topic) {
return;
}
topic.updateMode(null, '-JP').then((ctrl) => {
// Hide MessagesView and InfoView panels.
HashNavigation.navigateTo(HashNavigation.setUrlTopic(window.location.hash, ''));
}).catch((err) => {
this.handleError(err.message, 'err');
});
}
handleReportTopic(topicName) {
const topic = this.tinode.getTopic(topicName);
if (!topic) {
return;
}
// Publish spam report.
this.tinode.publish(Tinode.TOPIC_SYS, Tinode.Drafty.attachJSON(null, {
'action': 'report',
'target': topicName
}));
// Remove J and P permissions.
topic.updateMode(null, '-JP').then((ctrl) => {
// Hide MessagesView and InfoView panels.
HashNavigation.navigateTo(HashNavigation.setUrlTopic(window.location.hash, ''));
}).catch((err) => {
this.handleError(err.message, 'err');
});
}
handleShowContextMenu(params, menuItems) {
@@ -1156,6 +1205,20 @@ class TinodeWeb extends React.Component {
}
}
handleShowAlert(title, content, onConfirm, confirm, onReject, reject) {
this.setState({
alertVisible: true,
alertParams: {
title: title,
content: content,
onConfirm: onConfirm,
confirm: confirm,
onReject: onReject,
reject: reject
}
});
}
handleShowInfoView() {
HashNavigation.navigateTo(HashNavigation.addUrlParam(window.location.hash, 'info', true));
this.setState({showInfoPanel: true});
@@ -1258,7 +1321,15 @@ class TinodeWeb extends React.Component {
:
null
}
<Alert
visible={this.state.alertVisible}
title={this.state.alertParams.title}
content={this.state.alertParams.content}
onReject={this.state.alertParams.onReject ? (() => { this.setState({alertVisible: false}); }) : null}
reject={this.state.alertParams.reject}
onConfirm={() => { this.setState({alertVisible: false}); this.state.alertParams.onConfirm(); }}
confirm={this.state.alertParams.confirm}
/>
<SidepanelView
tinode={this.tinode}
connected={this.state.connected}
@@ -1365,9 +1436,13 @@ class TinodeWeb extends React.Component {
onTopicDescUpdate={this.handleTopicUpdateRequest}
onCancel={this.handleHideInfoView}
onShowAlert={this.handleShowAlert}
onChangePermissions={this.handleChangePermissions}
onMemberUpdateRequest={this.handleMemberUpdateRequest}
onDeleteMessages={this.handleDeleteMessagesRequest}
onLeaveTopic={this.handleLeaveUnsubRequest}
onBlockTopic={this.handleBlockTopicRequest}
onReportTopic={this.handleReportTopic}
onAddMember={this.handleManageGroupMembers}
onTopicTagsUpdate={this.handleTagsUpdated}
onInitFind={this.tnInitFind}