+ */
+
/* The counter of unread messages in the topic */
Contact.Unread = React.createClass({
render: function() {
@@ -697,6 +554,12 @@
me.onData = this.tnInvite;
me.onSubsUpdated = this.tnMeSubsUpdated;
},
+ componentWillUnmount: function() {
+ var me = Tinode.getMeTopic();
+ me.onContactUpdate = undefined;
+ me.onData = undefined;
+ me.onSubsUpdated = undefined;
+ },
tnMeContactUpdate: function(what, cont) {
if (what === "on" || what === "off" || what === "read") {
this.forceUpdate();
@@ -719,7 +582,7 @@
tnMeSubsUpdated: function(names) {
this.forceUpdate();
},
- onSelectionChange: function(sel) {
+ handleSelectionChange: function(sel) {
this.setState({selected: sel});
this.props.onTopicSelected(sel);
},
@@ -732,20 +595,21 @@
}
contactNodes.push(
-
+ );
+ }
+ });
+
+ NewTopicView.SelectContacts = React.createClass({
+ getInitialState: function() {
+ return {
+ search: null,
+ selectedUser: null
+ };
+ },
+ handleSelectionChange: function(sel) {
+ if (this.props.type === "p2p") {
+ this.props.onContactSelected(sel);
+ } else {
+ console.log(sel);
+ }
+ },
+ handleSearchChange: function(e) {
+ this.setState({search: e.target.value});
+ },
+ handleSearch: function(e) {
+ e.preventDefault();
+ console.log("will search for '" + this.state.search + "'");
+ },
+ render: function() {
+ var contactNodes = [];
+ Tinode.getFndTopic().subscribers(function(s) {
+ contactNodes.push(
+
+ );
+ }, this);
+ return (
+
+ );
+ }
+ });
+
+ /* END Create new topic and invite users or send an invite */
+
/* BEGIN Conversation panel */
var Received = {
UNDEF: -2,
@@ -886,10 +920,12 @@
}
},
handleDescChange: function(desc) {
- this.setState({title: desc.public.fn});
+ if (desc.public) {
+ this.setState({title: desc.public.fn});
+ }
},
handleSubsUpdated: function(uids) {
-
+ console.log("topic subscriptions updated");
},
handleNewMessage: function(msg) {
this.setState({messages: this.state.messages.concat(msg)});
@@ -1098,6 +1134,74 @@
});
/* End of modal dialog wrapper */
+ /* BEGIN Popup/dropdown menu */
+ var ContextMenu = React.createClass({
+ componentWillUnmount: function() {
+ this.toggle(false);
+ },
+ componentWillReceiveProps: function(nextProps) {
+ this.toggle(nextProps.visible);
+ },
+ toggle: function(visible) {
+ if (visible) {
+ document.addEventListener('mousedown', this.handlePageClick, false);
+ document.addEventListener('keyup', this.handleEscapeKey, false);
+ } else {
+ document.removeEventListener('mousedown', this.handlePageClick, false);
+ document.removeEventListener('keyup', this.handleEscapeKey, false);
+ }
+ },
+ handlePageClick: function(e) {
+ if (ReactDOM.findDOMNode(this).contains(e.target)) {
+ return;
+ }
+ e.preventDefault();
+ e.stopPropagation();
+ this.props.hide();
+ },
+ handleEscapeKey: function(e) {
+ if (e.keyCode === 27) {
+ this.props.hide();
+ }
+ },
+ handleClick: function(e) {
+ e.preventDefault();
+ e.stopPropagation();
+ this.props.hide();
+ this.props.onResult(this.props.items[e.currentTarget.dataset.id]);
+ },
+ render: function() {
+ if (!this.props.visible) {
+ return null;
+ }
+ var position = {
+ left: this.props.position.left + 'px',
+ top: this.props.position.top + 'px'
+ };
+ var count = 0;
+ var menuItems = [];
+ var instance = this;
+ this.props.items.map(function(item) {
+ if (item === "-") {
+ menuItems.push(
+
+ );
+ } else {
+ menuItems.push(
+
{item}
+ );
+ }
+ count++;
+ });
+ return (
+
+ );
+ }
+ });
+ /* END Popup/dropdown menu */
+
/* The top-level class to hold all fuinctionality together */
var AppView = React.createClass({
getInitialState: function() {
@@ -1106,6 +1210,7 @@
sidePanelTitle: null,
sidePanelAvatar: null,
dialogSelected: null,
+ contextMenuVisible: false,
loggedIn: false,
errorText: '',
topicSelected: '',
@@ -1142,7 +1247,11 @@
topicSelected: '',
loginDisabled: false,
subscriptions: {},
- mobilePanel: 'sidepanel'
+ mobilePanel: 'sidepanel',
+ contextMenuVisible: false,
+ contextMenuPosition: {top: 0, left: 0},
+ contextMenuItems: null,
+ handleContextMenuClick: undefined
});
},
// User clicked Login button in the side panel.
@@ -1178,16 +1287,6 @@
Tinode.getTopic(data.topic).noteRecv(data.seq);
}, RECEIVED_DELAY);
},
- // Registration of a new account.
- handleNewAccount: function(login_, password_, public_, private_) {
- var instance = this;
- Tinode.connect().then(function() {
- return Tinode.createUserBasic(login_, password_,
- {login: "basic", public: public_, private: private_});
- }).catch(function(err) {
- instance.setState({errorText: err.message});
- });
- },
// User clicked on a contact in the side panel.
handleTopicSelected: function(topicName) {
this.setState({topicSelected: topicName, mobilePanel: 'topic-view'});
@@ -1202,9 +1301,19 @@
topic.publish(msg);
},
// User chose a Sign Up menu item.
- handleSignUp: function() {
+ handleNewAccount: function() {
this.setState({sidePanelSelected: 'register'});
},
+ // Actual registration of a new account.
+ handleNewAccountRequest: function(login_, password_, public_, private_) {
+ var instance = this;
+ Tinode.connect().then(function() {
+ return Tinode.createUserBasic(login_, password_,
+ {login: "basic", public: public_, private: private_});
+ }).catch(function(err) {
+ instance.setState({errorText: err.message});
+ });
+ },
// User chose Settings menu item.
handleSettings: function() {
this.setState({sidePanelSelected: this.state.loggedIn ? 'edit-account' : 'settings'});
@@ -1217,12 +1326,53 @@
this.setState({sidePanelSelected: 'login'});
}
},
+ // User clicked a (+) menu item.
handleNewTopic: function() {
this.setState({sidePanelSelected: 'new-topic'});
},
+ // Create of a new topic. New P2P topic requires peer's name.
+ handleNewTopicRequest: function(peerName, vcard) {
+ var instance = this;
+ var topic = peerName ? Tinode.getTopic(peerName) : Tinode.newTopic();
+ var params = {get: {desc: {}, sub: {}, data: {}}};
+ params.set = peerName ? undefined : {set: {desc: {public: vcard}}};
+ topic.subscribe(params).then(function() {
+ if (peerName) {
+ instance.setState({
+ errorText: '',
+ topicSelected: topic.name,
+ sidePanelSelected: 'contacts',
+ mobilePanel: 'topic-view'
+ });
+ } else {
+ console.log("new group topic created: " + topic.name);
+ }
+ }).catch(function(err) {
+ instance.setState({errorText: err.message});
+ });
+ },
handleDialogCancel: function() {
this.setState({dialogSelected: null});
},
+ handleShowContextMenu: function(y, x, items, callback) {
+ console.log("SHOW ContextMenu called");
+ var bounds = ReactDOM.findDOMNode(this).getBoundingClientRect();
+ this.setState({
+ contextMenuVisible: true,
+ contextMenuPosition: {top: (y - bounds.top), left: (x - bounds.left)},
+ contextMenuItems: items,
+ handleContextMenuClick: callback
+ });
+ },
+ handleHideContextMenu: function() {
+ console.log("HIDE ContextMenu called");
+ this.setState({
+ contextMenuVisible: false,
+ contextMenuPosition: {top: 0, left: 0},
+ contextMenuItems: null,
+ handleContextMenuClick: undefined
+ });
+ },
render: function() {
return (
@@ -1231,6 +1381,13 @@
onOk={this.handleDialogCancel}
onCancel={this.handleDialogCancel} />
+
+
+ onCancel={this.handleSidepanelCancel}
+ showContextMenu={this.handleShowContextMenu} />