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

archiving works, refactored UNSAFE_componentWillReceiveProps in chips-input

Browse Source
This commit is contained in:
or-else
2019-02-06 20:08:50 +03:00
parent 160e2574d4
commit 87947b3de6
12 changed files with 313 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/contacts-view.jsx
+5 -2
View File
@@ -53,10 +53,13 @@ export default class ContactsView extends React.Component {
updateFavicon(unreadThreads);
return {contactList: contacts, archivedCount: archivedCount};
return {
contactList: contacts,
archivedCount: archivedCount
};
}
handleAction(action) {
handleAction(action_ignored) {
this.props.onShowArchive();
}
src/views/messages-view.jsx
+30 -24
View File
@@ -69,18 +69,6 @@ class MessagesView extends React.Component {
this.handleBackNavigation = this.handleBackNavigation.bind(this);
}
// Scroll last message into view on component update e.g. on message received
// or vertical shrinking.
componentDidUpdate(prevProps, prevState) {
if (this.messagesScroller) {
if (prevState.title != this.state.title || prevState.messages.length != this.state.messages.length) {
this.messagesScroller.scrollTop = this.messagesScroller.scrollHeight - this.state.scrollPosition;
} else if (prevProps.viewportHeight > this.props.viewportHeight) {
this.messagesScroller.scrollTop += prevProps.viewportHeight - this.props.viewportHeight;
}
}
}
componentDidMount() {
this.propsChange(this.props);
if (this.messagesScroller) {
@@ -95,13 +83,31 @@ class MessagesView extends React.Component {
}
}
UNSAFE_componentWillReceiveProps(nextProps) {
this.propsChange(nextProps);
// Scroll last message into view on component update e.g. on message received
// or vertical shrinking.
componentDidUpdate(prevProps, prevState) {
if (this.messagesScroller) {
if (prevState.title != this.state.title || prevState.messages.length != this.state.messages.length) {
this.messagesScroller.scrollTop = this.messagesScroller.scrollHeight - this.state.scrollPosition;
} else if (prevProps.viewportHeight > this.props.viewportHeight) {
this.messagesScroller.scrollTop += prevProps.viewportHeight - this.props.viewportHeight;
}
}
}
propsChange(props) {
//static getDerivedStateFromProps(nextProps, prevState) {
//
//}
// Deprecated!
UNSAFE_componentWillReceiveProps(nextProps) {
this.propsChange(nextProps, this.state);
}
propsChange(props, state) {
const nextState = {};
if (!props || !props.topic) {
let oldTopic = this.state.topic;
const oldTopic = state.topic;
this.setState({messages: [], onlineSubs: [], topic: null}, this.leave(oldTopic));
return;
}
@@ -112,15 +118,15 @@ class MessagesView extends React.Component {
return;
}
let topic = this.props.tinode.getTopic(props.topic);
const topic = props.tinode.getTopic(props.topic);
if (!topic) {
return;
}
let newGroupTopic = Tinode.isNewGroupTopicName(props.topic);
let tryToResubscribe = !this.props.connected && props.connected;
let tryToResubscribe = !props.connected && props.connected;
if (props.topic != this.state.topic) {
if (props.topic != state.topic) {
let msgs = [];
let subs = [];
@@ -132,11 +138,11 @@ class MessagesView extends React.Component {
topic.onSubsUpdated = this.handleSubsUpdated;
topic.onPres = this.handleSubsUpdated;
// Unbind the previous topic from this component.
this.leave(this.state.topic);
this.leave(state.topic);
this.handleDescChange(topic);
topic.subscribers((sub) => {
if (sub.online && sub.user != this.props.myUserId) {
if (sub.online && sub.user != props.myUserId) {
subs.push(sub);
}
});
@@ -180,7 +186,7 @@ class MessagesView extends React.Component {
topic.subscribe(getQuery.build(), setQuery)
.then((ctrl) => {
this.setState({topic: ctrl.topic});
this.props.onNewTopicCreated(props.topic, ctrl.topic);
props.onNewTopicCreated(props.topic, ctrl.topic);
// If there are unsent messages, try sending them now.
topic.queuedMessages((pub) => {
if (!pub._sending && topic.isSubscribed()) {
@@ -189,8 +195,8 @@ class MessagesView extends React.Component {
});
})
.catch((err) => {
this.props.onError(err.message, 'err');
const {formatMessage} = this.props.intl;
props.onError(err.message, 'err');
const {formatMessage} = props.intl;
this.setState({
title: formatMessage(messages.not_found),
avatar: null,
src/views/tinode-web.jsx
+11
View File
@@ -104,6 +104,7 @@ class TinodeWeb extends React.Component {
this.handleValidateCredentialsRequest = this.handleValidateCredentialsRequest.bind(this);
this.handlePasswordResetRequest = this.handlePasswordResetRequest.bind(this);
this.handleResetPassword = this.handleResetPassword.bind(this);
this.handleContextMenuAction = this.handleContextMenuAction.bind(this);
}
getBlankState() {
@@ -1049,6 +1050,16 @@ class TinodeWeb extends React.Component {
});
}
handleContextMenuAction(action, promise, params) {
if (action == 'topic_archive') {
if (promise && params.topicName && params.topicName == this.state.topicSelected) {
promise.then(() => {
this.handleTopicSelected(null);
});
}
}
}
handleShowInfoView() {
HashNavigation.navigateTo(HashNavigation.addUrlParam(window.location.hash, 'info', true));
this.setState({showInfoPanel: true});
src/widgets/chip-input.jsx
+13 -13
View File
@@ -9,13 +9,7 @@ export default class ChipInput extends React.Component {
constructor(props) {
super(props);
this.state = {
placeholder: props.chips ? '' : props.prompt,
sortedChips: ChipInput.sortChips(props.chips, props.required),
chipIndex: ChipInput.indexChips(props.chips),
input: '',
focused: false
};
this.state = ChipInput.getDerivedStateFromProps(props);
this.handleTextInput = this.handleTextInput.bind(this);
this.removeChipAt = this.removeChipAt.bind(this);
@@ -25,15 +19,21 @@ export default class ChipInput extends React.Component {
this.handleKeyDown = this.handleKeyDown.bind(this);
}
UNSAFE_componentWillReceiveProps(nextProps) {
this.setState({
static getDerivedStateFromProps(nextProps, prevState) {
const state = {
placeholder: nextProps.chips ? '' : nextProps.prompt,
sortedChips: ChipInput.sortChips(nextProps.chips, nextProps.required),
chipIndex: ChipInput.indexChips(nextProps.chips)
});
if (nextProps.chips.length > this.props.chips.length) {
chipIndex: ChipInput.indexChips(nextProps.chips),
input: '',
focused: prevState && prevState.focused
};
if (!prevState || nextProps.chips.length > prevState.sortedChips.length) {
// Chip added: clear input.
this.setState({input: ''});
state.input ='';
}
return state;
}
// Map chip index to user name
src/widgets/contact-action.jsx
+1 -1
View File
@@ -18,7 +18,7 @@ class ContactAction extends React.PureComponent {
render() {
const {formatMessage} = this.props.intl;
return (
<li onClick={this.handleClick}>
<li onClick={this.handleClick} className="action">
<div className="action-text">{formatMessage(this.props.title, this.props.values)}</div>
</li>
);
src/widgets/context-menu.jsx
+133 -58
View File
@@ -80,66 +80,133 @@ class ContextMenu extends React.Component {
// Preconfigured menu items.
this.MenuItems = {
'topic_info': {title: formatMessage(messages.info), handler: null},
'messages_clear': {title: formatMessage(messages.clear_messages), handler: (params, errorHandler) => {
this.deleteMessages(true, false, params, errorHandler);
}},
'messages_clear_hard': {title: formatMessage(messages.clear_for_all), handler: (params, errorHandler) => {
this.deleteMessages(true, true, params, errorHandler);
}},
'message_delete': {title: formatMessage(messages.delete), handler: (params, errorHandler) => {
this.deleteMessages(false, false, params, errorHandler);
}},
'message_delete_hard': {title: formatMessage(messages.delete_for_all), handler: (params, errorHandler) => {
this.deleteMessages(false, true, params, errorHandler);
}},
'topic_unmute': {title: formatMessage(messages.unmute), handler: this.topicPermissionSetter.bind(this, '+P')},
'topic_mute': {title: formatMessage(messages.mute), handler: this.topicPermissionSetter.bind(this, '-P')},
'topic_unblock': {title: formatMessage(messages.unblock), handler: this.topicPermissionSetter.bind(this, '+J')},
'topic_block': {title: formatMessage(messages.block), handler: this.topicPermissionSetter.bind(this, '-J')},
'topic_delete': {title: formatMessage(messages.topic_delete), handler: (params, errorHandler) => {
const topic = this.props.tinode.getTopic(params.topicName);
if (!topic) {
console.log("Topic not found: ", params.topicName);
return;
'topic_info': {
id: 'topic_info',
title: formatMessage(messages.info),
handler: null
},
'messages_clear': {
id: 'messages_clear',
title: formatMessage(messages.clear_messages),
handler: (params, errorHandler) => {
return this.deleteMessages(true, false, params, errorHandler);
}
topic.delTopic().catch((err) => {
if (errorHandler) {
errorHandler(err.message, 'err');
}
});
}},
'topic_archive': {title: formatMessage(messages.archive), handler: (params, errorHandler) => {
const topic = this.props.tinode.getTopic(params.topicName);
if (!topic) {
console.log("Topic not found: ", params.topicName);
return;
},
'messages_clear_hard': {
id: 'messages_clear_hard',
title: formatMessage(messages.clear_for_all),
handler: (params, errorHandler) => {
return this.deleteMessages(true, true, params, errorHandler);
}
topic.archive(true).catch((err) => {
if (errorHandler) {
errorHandler(err.message, 'err');
},
'message_delete': {
id: 'message_delete',
title: formatMessage(messages.delete),
handler: (params, errorHandler) => {
return this.deleteMessages(false, false, params, errorHandler);
}
},
'message_delete_hard': {
id: 'message_delete_hard',
title: formatMessage(messages.delete_for_all),
handler: (params, errorHandler) => {
return this.deleteMessages(false, true, params, errorHandler);
}
},
'topic_unmute': {
id: 'topic_unmute',
title: formatMessage(messages.unmute),
handler: this.topicPermissionSetter.bind(this, '+P')
},
'topic_mute': {
id: 'topic_mute',
title: formatMessage(messages.mute),
handler: this.topicPermissionSetter.bind(this, '-P')
},
'topic_unblock': {
id: 'topic_unblock',
title: formatMessage(messages.unblock),
handler: this.topicPermissionSetter.bind(this, '+J')
},
'topic_block': {
id: 'topic_block',
title: formatMessage(messages.block),
handler: this.topicPermissionSetter.bind(this, '-J')
},
'topic_delete': {
id: 'topic_delete',
title: formatMessage(messages.topic_delete),
handler: (params, errorHandler) => {
const topic = this.props.tinode.getTopic(params.topicName);
if (!topic) {
console.log("Topic not found: ", params.topicName);
return;
}
});
}},
return topic.delTopic().catch((err) => {
if (errorHandler) {
errorHandler(err.message, 'err');
}
});
}
},
'topic_archive': {
id: 'topic_archive',
title: formatMessage(messages.archive),
handler: (params, errorHandler) => {
const topic = this.props.tinode.getTopic(params.topicName);
if (!topic) {
console.log("Topic not found: ", params.topicName);
return;
}
return topic.archive(true).catch((err) => {
if (errorHandler) {
errorHandler(err.message, 'err');
}
});
}
},
// menu_item_edit_permissions is defined elsewhere.
'permissions': {title: formatMessage({id: 'menu_item_edit_permissions'}), handler: null},
'member_delete': {title: formatMessage(messages.member_delete), handler: (params, errorHandler) => {
const topic = this.props.tinode.getTopic(params.topicName);
if (!topic || !params.user) {
console.log("Topic or user not found: '" + params.topicName + "', '" + params.user + "'");
return;
}
topic.delSubscription(params.user).catch((err) => {
if (errorHandler) {
errorHandler(err.message, 'err');
'permissions': {
id: 'permissions',
title: formatMessage({id: 'menu_item_edit_permissions'}),
handler: null
},
'member_delete': {
id: 'member_delete',
title: formatMessage(messages.member_delete),
handler: (params, errorHandler) => {
const topic = this.props.tinode.getTopic(params.topicName);
if (!topic || !params.user) {
console.log("Topic or user not found: '" + params.topicName + "', '" + params.user + "'");
return;
}
});
}},
'member_mute': {title: formatMessage(messages.mute), handler: this.topicPermissionSetter.bind(this, '-P')},
'member_unmute': {title: formatMessage(messages.unmute), handler: this.topicPermissionSetter.bind(this, '+P')},
'member_block': {title: formatMessage(messages.block), handler: this.topicPermissionSetter.bind(this, '-J')},
'member_unblock': {title: formatMessage(messages.unblock), handler: this.topicPermissionSetter.bind(this, '+J')},
return topic.delSubscription(params.user).catch((err) => {
if (errorHandler) {
errorHandler(err.message, 'err');
}
});
}
},
'member_mute': {
id: 'member_mute',
title: formatMessage(messages.mute),
handler: this.topicPermissionSetter.bind(this, '-P')
},
'member_unmute': {
id: 'member_unmute',
title: formatMessage(messages.unmute),
handler: this.topicPermissionSetter.bind(this, '+P')
},
'member_block': {
id: 'member_block',
title: formatMessage(messages.block),
handler: this.topicPermissionSetter.bind(this, '-J')
},
'member_unblock': {
id: 'member_unblock',
title: formatMessage(messages.unblock),
handler: this.topicPermissionSetter.bind(this, '+J')
},
};
}
@@ -176,7 +243,15 @@ class ContextMenu extends React.Component {
if (typeof item == 'string') {
item = this.MenuItems[item];
}
item.handler(this.props.params, this.props.onError);
if (!item) {
console.log("Invalid menu item ID", e.currentTarget.dataset.id);
} else {
this.props.onAction(
item.id,
item.handler(this.props.params, this.props.onError),
this.props.params);
}
}
// Menu Actions
@@ -200,7 +275,7 @@ class ContextMenu extends React.Component {
topic.delMessagesAll(hard) :
topic.delMessagesList([params.seq], hard);
promise.catch((err) => {
return promise.catch((err) => {
if (errorHandler) {
errorHandler(err.message, 'err');
}
@@ -227,7 +302,7 @@ class ContextMenu extends React.Component {
am = topic.getAccessMode().updateWant(mode).getWant();
}
topic.setMeta({sub: {user: params.user, mode: am}}).catch((err) => {
return topic.setMeta({sub: {user: params.user, mode: am}}).catch((err) => {
if (errorHandler) {
errorHandler(err.message, 'err');
}