{title}
@@ -1075,16 +1093,18 @@
/* END Contact list */
/* BEGIN ContactList: component for showing a list of contacts,
- * such as a list of group members group chat */
+ * such as a list of group members in a group chat */
var ContactList = React.createClass({
render: function() {
var contactNodes = [];
var instance = this;
+ var showCheckmark = Array.isArray(this.props.topicSelected);
+
if (this.props.contacts && this.props.contacts.length > 0) {
this.props.contacts.map(function(c) {
var key = c.topic ? c.topic : c.user;
if (!key) {
- console.log("empty key!");
+ console.error("empty key!");
return;
}
@@ -1103,17 +1123,23 @@
}
}
+ var selected = showCheckmark ?
+ (this.props.topicSelected.indexOf(key) > -1) :
+ (this.props.topicSelected === key);
+
contactNodes.push(
);
}, this);
@@ -1139,24 +1165,118 @@
var GroupManager = React.createClass({
getInitialState: function() {
return {
- members: this.props.members || [],
- contacts: this.props.contacts || [],
+ members: this.props.members,
+ contacts: this.props.contacts,
+ index: this.indexMembers(this.props.members),
+ selectedContacts: this.selectedContacts(this.props.members)
};
},
- handleContactSelected: function(contact) {
+ indexMembers: function(members) {
+ var index = {};
+ members.map(function(m) {
+ index[m.user] = {delta: 0, present: true}; // Delta: 0 unchanged, +1 added, -1 removed
+ });
+ return index;
+ },
+ selectedContacts: function(members) {
+ var sel = [];
+ members.map(function(m) {
+ sel.push(m.user);
+ });
+ return sel;
+ },
+
+ handleContactSelected: function(userId, index) {
+ var status = this.state.index[userId];
+ if (status) {
+ if (status.present) {
+ // Prevent duplicate members
+ return;
+ }
+ status.delta += 1;
+ status.present = true;
+ } else {
+ status = {delta: 1, present: true};
+ }
+
+ var m = this.state.members.slice();
+ m.push(this.props.contacts[index]);
+
+ var sel = this.selectedContacts(m);
+
+ var i = this.state.index;
+ i[userId] = status;
+
+ this.setState({members: m, index: i, selectedContacts: sel});
+ },
+
+ handleMemberRemoved: function(userId, index) {
+ var status = this.state.index[userId];
+ if (!status || !status.present) {
+ return;
+ }
+ status.present = false;
+ status.delta -= 1;
+
+ var m = this.state.members.slice();
+ m.splice(index, 1);
+
+ var sel = this.selectedContacts(m);
+
+ var i = this.state.index;
+ i[userId] = status;
+
+ this.setState({members: m, index: i, selectedContacts: sel});
+ },
+
+ handleSubmit: function() {
+ var instance = this;
+ var members = [];
+ var added = [];
+ var removed = [];
+
+ var keys = Object.keys(this.state.index);
+ keys.map(function(k) {
+ if (instance.state.index[k].present) {
+ members.push(k);
+ }
+
+ if (instance.state.index[k].delta > 0) {
+ added.push(k);
+ } else if (instance.state.index[k].delta < 0) {
+ removed.push(k);
+ }
+ });
+ this.props.onSubmit(members, added, removed);
+ },
+
+ handleCancel: function() {
+ this.props.onCancel();
},
render: function() {
return (
-
+
+
+
+
+ chips={this.state.members}
+ prompt="add members"
+ onChipRemoved={this.handleMemberRemoved} />
+
+
+
+ topicSelected={this.state.selectedContacts}
+ onTopicSelected={this.handleContactSelected} />
+
+
+
+
);
}
@@ -1168,39 +1288,19 @@
getInitialState: function() {
return {
tabSelected: "p2p",
- searchQuery: '',
- contactList: [],
+ searchQuery: this.props.contactsSearchQuery,
+ contactList: this.props.foundContacts,
contactSelected: null
};
},
componentWillMount: function() {
- var fnd = Tinode.getFndTopic();
- fnd.onSubsUpdated = this.fndSubsUpdated;
- fnd.onMetaDesc = this.fndMetaDesc;
- if (fnd.isSubscribed()) {
- this.setState({searchQuery: fnd.private ? fnd.private.toString() : ''});
- this.fndSubsUpdated();
- } else {
- fnd.subscribe({get: {sub: {}, desc: {}}});
- }
+ this.props.onInitFind();
},
- componentWillUnmount: function() {
- var fnd = Tinode.getFndTopic();
- fnd.onSubsUpdated = undefined;
- fnd.onMetaDesc = undefined;
- },
- fndMetaDesc: function(desc) {
- if (desc.private) {
- this.setState({searchQuery: desc.private.toString()});
- }
- },
- fndSubsUpdated: function() {
- var contacts = [];
- // Don't attempt to create P2P topics which already exist. Server will reject the duplicates.
- Tinode.getFndTopic().subscribers(function(s) {
- contacts.push(s);
+ componentWillReceiveProps: function(nextProps) {
+ this.setState({
+ searchQuery: nextProps.contactsSearchQuery,
+ contactList: nextProps.foundContacts
});
- this.setState({contactList: contacts});
},
handleTabClick: function(e) {
e.preventDefault();
@@ -1370,6 +1470,8 @@
topic.onSubsUpdated = this.onSubsUpdated;
this.resetDesc(topic);
this.resetSubs(topic);
+
+ this.props.onInitFind();
},
componentWillUnmount: function() {
@@ -1457,11 +1559,21 @@
this.props.onChangePermissions(this.props.topic, checked ? "-P" : "+P");
},
- handleAddMembers: function() {
+ handleShowAddMembers: function() {
// this.props.onAddMember(this.props.topic);
this.setState({showMemberPanel: true});
},
+ handleHideAddMembers: function() {
+ // this.props.onAddMember(this.props.topic);
+ this.setState({showMemberPanel: false});
+ },
+
+ handleMemberUpdateRequest: function(members, added, removed) {
+ this.props.onMemberUpdateRequest(this.props.topic, added, removed);
+ this.setState({showMemberPanel: false});
+ },
+
handleLeave: function() {
this.props.onLeaveTopic(this.props.topic);
},
@@ -1485,7 +1597,10 @@
{this.state.showMemberPanel ?
+ members={this.state.contactList}
+ contacts={this.props.foundContacts}
+ onCancel={this.handleHideAddMembers}
+ onSubmit={this.handleMemberUpdateRequest} />
:
@@ -1542,7 +1657,7 @@
{this.state.sharer ?
-
+
person_add Add members
: null}
@@ -1992,7 +2107,9 @@
contextMenuClickAt: null,
contextMenuTopic: '',
contextMenuItems: [],
- serverVersion: 'no connection'
+ serverVersion: 'no connection',
+ contactsSearchQuery: '',
+ foundContacts: []
};
},
componentDidMount: function() {
@@ -2106,6 +2223,44 @@
Tinode.getTopic(data.topic).noteRecv(data.seq);
}, RECEIVED_DELAY);
},
+
+ /* Fnd topic: find contacts by tokens */
+ tnInitFind: function() {
+ var fnd = Tinode.getFndTopic();
+ fnd.onSubsUpdated = this.tnFndSubsUpdated;
+ fnd.onMetaDesc = this.tnFndMetaDesc;
+ if (fnd.isSubscribed()) {
+ this.setState({contactsSearchQuery: fnd.private ? fnd.private.toString() : ''});
+ this.tnFndSubsUpdated();
+ } else {
+ fnd.subscribe({get: {sub: {}, desc: {}}});
+ }
+ },
+
+ tnFndMetaDesc: function(desc) {
+ if (desc.private) {
+ this.setState({contactsSearchQuery: desc.private.toString()});
+ }
+ },
+
+ tnFndSubsUpdated: function() {
+ var contacts = [];
+ // Don't attempt to create P2P topics which already exist. Server will reject the duplicates.
+ Tinode.getFndTopic().subscribers(function(s) {
+ contacts.push(s);
+ });
+ this.setState({foundContacts: contacts});
+ },
+ /** Called when the user enters a contact into the contact search field in the NewAccount panel
+ @param query {Array} is an array of contacts to search for
+ */
+ handleSearchContacts: function(query) {
+ var find = Tinode.getFndTopic();
+ find.setMeta({desc: {private: query}}).then(function(ctrl) {
+ find.getMeta({sub: {}, desc: {}});
+ });
+ },
+
// User clicked on a contact in the side panel or deleted a contact.
handleTopicSelected: function(topicName) {
if (topicName) {
@@ -2250,15 +2405,6 @@
});
},
- /** Called when the user enters a contact into the contact search field in the NewAccount panel
- @param query {Array} is an array of contacts to search for
- */
- handleSearchContacts: function(query) {
- var find = Tinode.getFndTopic();
- find.setMeta({desc: {private: query}}).then(function(ctrl) {
- find.getMeta({sub: {}, desc: {}});
- });
- },
handleDialogCancel: function() {
this.setState({dialogSelected: null});
},
@@ -2344,6 +2490,29 @@
handleHideInfoView: function() {
this.setState({showInfoPanel: false});
},
+ handleMemberUpdateRequest: function(topicName, added, removed) {
+ if (!topicName) {
+ return;
+ }
+
+ var topic = Tinode.getTopic(topicName);
+ if (!topic) {
+ return;
+ }
+
+ if (added && added.length > 0) {
+ added.map(function(uid) {
+ topic.invite(uid, null, "Join my group!");
+ });
+ }
+
+ if (removed && removed.length > 0) {
+ removed.map(function(uid) {
+ topic.delSubscription(uid);
+ });
+ }
+ },
+
render: function() {
return (
@@ -2383,11 +2552,15 @@
onCreateAccount={this.handleNewAccountRequest}
onUpdateAccount={this.handleUpdateAccountRequest}
onTopicSelected={this.handleTopicSelected}
- onSearchContacts={this.handleSearchContacts}
onCreateTopic={this.handleNewTopicRequest}
onNewTopic={this.handleNewTopic}
onCancel={this.handleSidepanelCancel}
+ onInitFind={this.tnInitFind}
+ contactsSearchQuery={this.state.contactsSearchQuery}
+ foundContacts={this.state.foundContacts}
+ onSearchContacts={this.handleSearchContacts}
+
showContextMenu={this.handleShowContextMenu} />
:
null