add new chat acceptance handlers

css/base.css

@@ -1087,7 +1087,7 @@ i.search {
   flex: none;
   padding: 0.4rem 0.4rem 0.4rem 0.6rem;
   background-color: #eceff1;
-  box-shadow: 0 -1px rgba(0,0,0,0.1); /* Faint shadow above panel */
+  box-shadow: 0px -2px 3px -1px rgba(0,0,0,0.1); /* Faint shadow above panel */
   z-index: 2;
   height: 4rem;
 }
@@ -1113,8 +1113,9 @@ i.search {
 
 .accept-invite-panel {
   background-color: #eceff1;
-  box-shadow: 0 -1px rgba(0,0,0,0.1); /* Faint shadow above panel */
+  box-shadow: 0px -2px 3px -1px rgba(0,0,0,0.1); /* Faint shadow above panel */
   width: 100%;
+  z-index: 1;
 }
 
 .accept-invite-panel .title {
@@ -1123,11 +1124,10 @@ i.search {
 }
 
 .accept-invite-panel .footer {
-  border-top: 1px solid #f5f5f5;
   background-color: #fafafa;
   white-space: nowrap;
-  padding-left: 2rem;
   padding-bottom: 0.35rem;
+  text-align: center;
 }
 
 .accept-invite-panel button {

src/views/messages-view.jsx

@@ -115,33 +115,35 @@ class MessagesView extends React.Component {
     this.propsChange(nextProps, this.state);
   }
 
-  propsChange(props, state) {
+  propsChange(nextProps, prevState) {
     const nextState = {};
-    if (!props || !props.topic) {
+    if (!nextProps || !nextProps.topic) {
-      const oldTopic = state.topic;
+      const oldTopic = prevState.topic;
       this.setState({messages: [], onlineSubs: [], topic: null}, this.leave(oldTopic));
       return;
     }
 
-    if (!props.connected) {
+    if (!nextProps.connected) {
       // connection lost, clear online subs
       this.setState({onlineSubs: []});
       return;
     }
 
-    const topic = props.tinode.getTopic(props.topic);
+    const topic = nextProps.tinode.getTopic(nextProps.topic);
     if (!topic) {
       return;
     }
 
-    let newGroupTopic = Tinode.isNewGroupTopicName(props.topic);
+    let newGroupTopic = Tinode.isNewGroupTopicName(nextProps.topic);
-    let tryToResubscribe = !props.connected && props.connected;
+    let tryToResubscribe = !nextProps.connected && nextProps.connected;
 
-    if (props.topic != state.topic) {
+    if (nextProps.topic != prevState.topic) {
-      let msgs = [];
+      const msgs = [];
-      let subs = [];
+      const subs = [];
 
       // Bind the new topic to component.
+      // FIXME: getDerivedStateFromProps is static, "this" is unaccessible.
+      // Move to componentDidUpdate
       topic.onData = this.handleNewMessage;
       topic.onAllMessagesReceived = this.handleAllMessagesReceived;
       topic.onInfo = this.handleInfoReceipt;
@@ -149,25 +151,28 @@ class MessagesView extends React.Component {
       topic.onSubsUpdated = this.handleSubsUpdated;
       topic.onPres = this.handleSubsUpdated;
       // Unbind the previous topic from this component.
-      this.leave(state.topic);
+      // FIXME: getDerivedStateFromProps is static, "this" is unaccessible.
+      // Move to componentDidUpdate
+      this.leave(prevState.topic);
 
+      // FIXME: getDerivedStateFromProps is static, "this" is unaccessible.
       this.handleDescChange(topic);
       topic.subscribers((sub) => {
-        if (sub.online && sub.user != props.myUserId) {
+        if (sub.online && sub.user != nextProps.myUserId) {
           subs.push(sub);
         }
       });
 
       topic.messages(function(msg) {
         if (!msg.deleted) {
-          msgs = msgs.concat(msg);
+          msgs.push(msg);
         }
       });
 
       this.setState({
         messages: msgs,
         onlineSubs: subs,
-        topic: props.topic,
+        topic: nextProps.topic,
         imagePreview: null,
         scrollPosition: 0
       });
@@ -175,31 +180,32 @@ class MessagesView extends React.Component {
 
       // The user switched to the new topic before the timer for
       // the previous topic has triggered, kill it.
-      this.props.readTimerHandler(null);
+      nextProps.readTimerHandler(null);
     }
 
-    console.log("propsChange", props.acs);
     this.setState({
-      readOnly: props.acs ? !props.acs.isWriter() : true,
+      readOnly: nextProps.acs ? !nextProps.acs.isWriter() : true,
-      writeOnly: props.acs ? !props.acs.isReader() : true,
+      writeOnly: nextProps.acs ? !nextProps.acs.isReader() : true,
-      unconfirmed: isUnconfirmed(props.acs)
+      unconfirmed: isUnconfirmed(nextProps.acs)
     });
 
+    console.log("propsChange", nextProps.acs, isUnconfirmed(nextProps.acs));
+
     if (!topic.isSubscribed() && tryToResubscribe) {
       // Don't request the tags. They are useless unless the user
       // is the owner and is editing the topic.
-      let getQuery = topic.startMetaQuery()
+      const getQuery = topic.startMetaQuery()
         .withLaterDesc()
         .withLaterSub()
         .withLaterData(MESSAGES_PAGE)
         .withLaterDel();
-      let setQuery = newGroupTopic ? props.newGroupTopicParams : undefined;
+      const setQuery = newGroupTopic ? nextProps.newGroupTopicParams : undefined;
       // Show "loading" spinner.
       this.setState({ fetchingMessages: true });
       topic.subscribe(getQuery.build(), setQuery)
         .then((ctrl) => {
           this.setState({topic: ctrl.topic});
-          props.onNewTopicCreated(props.topic, ctrl.topic);
+          nextProps.onNewTopicCreated(nextProps.topic, ctrl.topic);
           // If there are unsent messages, try sending them now.
           topic.queuedMessages((pub) => {
             if (!pub._sending && topic.isSubscribed()) {
@@ -208,10 +214,13 @@ class MessagesView extends React.Component {
           });
         })
         .catch((err) => {
-          props.onError(err.message, 'err');
+          nextProps.onError(err.message, 'err');
-          const {formatMessage} = props.intl;
+          const {formatMessage} = nextProps.intl;
 
-          console.log("subscribe failed", props.acs);
+          console.log("subscribe failed", nextProps.acs);
+          // FIXME: getDerivedStateFromProps is static, "this" is unaccessible
+          // and returning newState is meaningless.
+          // Move to componentDidUpdate
           this.setState({
             title: formatMessage(messages.not_found),
             avatar: null,
@@ -412,10 +421,10 @@ class MessagesView extends React.Component {
 
   handleShowContextMenuMessage(params) {
     params.topicName = this.state.topic;
-    var menuItems = ['message_delete'];
+    const menuItems = ['message_delete'];
-    var topic = this.props.tinode.getTopic(params.topicName);
+    const topic = this.props.tinode.getTopic(params.topicName);
     if (topic) {
-      var acs = topic.getAccessMode();
+      const acs = topic.getAccessMode();
       if (acs && acs.isDeleter()) {
         menuItems.push('message_delete_hard');
       }
@@ -428,7 +437,7 @@ class MessagesView extends React.Component {
   }
 
   handleNewChatAcceptance(action) {
-    console.log(action);
+    this.props.onNewChat(this.state.topic, action);
   }
 
   render() {

src/views/tinode-web.jsx

@@ -74,6 +74,7 @@ class TinodeWeb extends React.Component {
     this.handleTopicSelected = this.handleTopicSelected.bind(this);
     this.handleHideMessagesView = this.handleHideMessagesView.bind(this);
     this.handleSendMessage = this.handleSendMessage.bind(this);
+    this.handleNewChatInvitation = this.handleNewChatInvitation.bind(this);
     this.handleNewAccount = this.handleNewAccount.bind(this);
     this.handleNewAccountRequest = this.handleNewAccountRequest.bind(this);
     this.handleUpdateAccountRequest = this.handleUpdateAccountRequest.bind(this);
@@ -728,6 +729,41 @@ class TinodeWeb extends React.Component {
       });
   }
 
+  handleNewChatInvitation(topicName, action) {
+    const topic = this.tinode.getTopic(topicName);
+    let response = null;
+    switch (action) {
+      case 'accept':
+        // Accept given permissions.
+        const mode = topic.getAccessMode().getGiven();
+        response = topic.setMeta({sub: {mode: mode}});
+        if (topic.getType() == 'p2p') {
+          // For P2P topics chage 'given' permission of the peer too.
+          // In p2p topics the other user has the same name as the topic.
+          response = response.then((ctrl) => {
+            topic.setMeta({sub: {user: topicName, mode: mode}});
+          });
+        }
+        break;
+      case 'delete':
+        // Ignore invitation by deleting it.
+        response = topic.delTopic();
+        break;
+      case 'block':
+        // Ban the topic making futher invites impossible.
+        response = topic.setMeta({sub: {mode: 'N'}});
+        break;
+      default:
+        console.log("Unknown invitation action", '"' + action + '""');
+    }
+
+    if (response != null) {
+      response.catch((err) => {
+        this.handleError(err.message, 'err');
+      });
+    }
+  }
+
   // User chose a Sign Up menu item.
   handleNewAccount() {
     HashNavigation.navigateTo(HashNavigation.setUrlSidePanel(window.location.hash, 'register'));
@@ -1232,6 +1268,7 @@ class TinodeWeb extends React.Component {
           onNewTopicCreated={this.handleNewTopicCreated}
           readTimerHandler={this.handleReadTimer}
           showContextMenu={this.handleShowContextMenu}
+          onNewChat={this.handleNewChatInvitation}
           sendMessage={this.handleSendMessage} />
 
         {this.state.showInfoPanel ?

src/widgets/invitation.jsx

@@ -11,7 +11,6 @@ export default class Invitation extends React.PureComponent {
 
   handleButtonAction(evt, data) {
     evt.preventDefault();
-    console.log("button clicked", data);
     this.props.onAction(data);
   }