fixes for inviting/blocking users

css/base.css

@@ -302,6 +302,10 @@ li.right:hover .menuTrigger {
   color: #D32F2F; /* red 700 */
 }
 
+.amber {
+  color: #FFC107; /* amber 500 */
+}
+
 .gray {
   color: #757575;
 }

src/views/messages-view.jsx

@@ -38,8 +38,11 @@ const messages = defineMessages({
 
 // Checks if the access permissions are granted but not yet accepted.
 function isUnconfirmed(acs) {
-  const ex = acs ? acs.getExcessive() || '' : '';
+  if (acs) {
-  return (ex.includes('R') || ex.includes('W'));
+    const ex = acs.getExcessive() || '';
+    return acs.isJoiner('given') && (ex.includes('R') || ex.includes('W'));
+  }
+  return false;
 }
 
 class MessagesView extends React.Component {
@@ -114,8 +117,9 @@ class MessagesView extends React.Component {
       // is the owner and is editing the topic.
       let getQuery = topic.startMetaQuery().withLaterDesc().withLaterSub();
       if (this.state.isReader) {
+        // If reading is permitted, ask for messages.
         getQuery = getQuery.withLaterData(MESSAGES_PAGE).withLaterDel();
-        // Show "loading" spinner.
+        // And show "loading" spinner.
         this.setState({ fetchingMessages: true });
       }
       const setQuery = Tinode.isNewGroupTopicName(this.props.topic) ?
@@ -214,17 +218,30 @@ class MessagesView extends React.Component {
       }
     }
 
-    let val = nextProps.acs ? nextProps.acs.isWriter() : true;
+    if (nextProps.acs) {
-    if (val != prevState.isWriter) {
+      if (nextProps.acs.isWriter() != prevState.isWriter) {
-      nextState.isWriter = val;
+        nextState.isWriter = !prevState.isWriter;
+      }
+      if (nextProps.acs.isReader() != prevState.isReader) {
+        nextState.isReader = !prevState.isReader;
+      }
+      if (!nextProps.acs.isReader('given') != prevState.readingBlocked) {
+        nextState.readingBlocked = !prevState.readingBlocked;
+      }
+    } else {
+      if (prevState.isWriter) {
+        nextState.isWriter = false;
+      }
+      if (prevState.isReader) {
+        nextState.isReader = false;
+      }
+      if (!prevState.readingBlocked) {
+        prevState.readingBlocked = true;
+      }
     }
-    val = nextProps.acs ? nextProps.acs.isReader() : true;
+
-    if (val != prevState.isReader) {
+    if (isUnconfirmed(nextProps.acs) == !prevState.unconformed) {
-      nextState.isReader = val;
+      nextState.unconfirmed = !prevState.unconformed;
-    }
-    val = isUnconfirmed(nextProps.acs);
-    if (val != prevState.unconformed) {
-      nextState.unconfirmed = val;
     }
 
     // Clear subscribers online when there is no connection.
@@ -302,6 +319,7 @@ class MessagesView extends React.Component {
       this.setState({
         isWriter: desc.acs.isWriter(),
         isReader: desc.acs.isReader(),
+        readingBlocked: !desc.acs.isReader('given'),
         unconfirmed: isUnconfirmed(desc.acs),
       });
     }
@@ -564,14 +582,14 @@ class MessagesView extends React.Component {
             </div>
             {!this.state.isReader ?
             <div id="write-only-background">
+              {this.state.readingBlocked ?
               <div id="write-only-note">
                 <FormattedMessage id="messages_not_readable" defaultMessage="no access to messages"
                   description="Message shown in topic without the read access" />
               </div>
+              : null }
             </div>
-            :
+            : null }
-            null
-            }
           </div>
           {this.state.unconfirmed ?
             <Invitation onAction={this.handleNewChatAcceptance} />

src/views/tinode-web.jsx

@@ -682,9 +682,9 @@ class TinodeWeb extends React.Component {
         topicSelectedAcs: null,
         showInfoPanel: false
       });
-      if (this.state.topicSelected) {
+
-        HashNavigation.navigateTo(HashNavigation.setUrlTopic('', null));
+      console.log("handleTopicSelected: null navigation");
-      }
+      HashNavigation.navigateTo(HashNavigation.setUrlTopic('', null));
     }
   }
 
@@ -750,17 +750,12 @@ class TinodeWeb extends React.Component {
         response = topic.delTopic();
         break;
       case 'block':
+        console.log("Blocking...");
         // Ban the topic making futher invites impossible.
-        response = topic.setMeta({sub: {mode: 'N'}});
+        // Just self-ban.
-        if (topic.getType() == 'p2p') {
+        const am = topic.getAccessMode().updateWant('-JP').getWant();
-          // For P2P topics change 'given' permission of the peer too.
+        response = topic.setMeta({sub: {mode: am}}).then((ctrl) => {
-          // In p2p topics the other user has the same name as the topic.
+          return this.handleTopicSelected(null);
-          response = response.then((ctrl) => {
-            topic.setMeta({sub: {user: topicName, mode: 'N'}});
-          });
-        }
-        response = response.then((ctrl) => {
-          this.handleTopicSelected(null);
         });
         break;
       default:
@@ -1066,7 +1061,7 @@ class TinodeWeb extends React.Component {
     const topic = this.tinode.getTopic(topicName);
     const {formatMessage} = this.props.intl;
 
-    let muted = false, blocked = false, subscribed = false, deleter = false, archived = false;
+    let muted = false, blocked = false, self_blocked = false, subscribed = false, deleter = false, archived = false;
     if (topic) {
       subscribed = topic.isSubscribed();
       archived = topic.isArchived();
@@ -1075,6 +1070,7 @@ class TinodeWeb extends React.Component {
       if (acs) {
         muted = acs.isMuted();
         blocked = !acs.isJoiner();
+        self_blocked = !acs.isJoiner('want');
         deleter = acs.isDeleter();
       }
     }
@@ -1083,8 +1079,8 @@ class TinodeWeb extends React.Component {
       subscribed ? {title: formatMessage({id: 'menu_item_info'}), handler: this.handleShowInfoView} : null,
       subscribed ? 'messages_clear' : null,
       subscribed && deleter ? 'messages_clear_hard' : null,
-      muted ? (blocked ? null : 'topic_unmute') : 'topic_mute'),
+      muted ? (blocked ? null : 'topic_unmute') : 'topic_mute',
-      blocked ? 'topic_unblock' : 'topic_block',
+      self_blocked ? 'topic_unblock' : 'topic_block',
       !archived ? 'topic_archive' : null,
       'topic_delete'
     ];
@@ -1191,6 +1187,11 @@ class TinodeWeb extends React.Component {
             items={this.state.contextMenuItems}
             hide={this.handleHideContextMenu}
             onAction={this.handleContextMenuAction}
+            onTopicRemoved={(topicName) => {
+              if (topicName == this.state.topicSelected) {
+                this.handleTopicSelected(null);
+              }
+            }}
             onError={this.handleError} />
           :
           null

src/widgets/context-menu.jsx

@@ -4,6 +4,7 @@ import ReactDOM from 'react-dom';
 import { injectIntl, defineMessages } from 'react-intl';
 
 import { REM_SIZE } from '../config.js';
+import HashNavigation from '../lib/navigation.js';
 
 const messages = defineMessages({
   info: {
@@ -126,12 +127,17 @@ class ContextMenu extends React.Component {
       'topic_unblock': {
         id: 'topic_unblock',
         title: formatMessage(messages.unblock),
-        handler: this.topicPermissionSetter.bind(this, '+J')
+        handler: this.topicPermissionSetter.bind(this, '+JP')
       },
       'topic_block': {
         id: 'topic_block',
         title: formatMessage(messages.block),
-        handler: this.topicPermissionSetter.bind(this, '-J')
+        handler: (params, errorHandler) => {
+          return this.topicPermissionSetter('-JP', params, errorHandler).then((ctrl) => {
+            this.props.onTopicRemoved(params.topicName);
+            return ctrl;
+          });
+        }
       },
       'topic_delete': {
         id: 'topic_delete',
@@ -302,11 +308,13 @@ class ContextMenu extends React.Component {
       am = topic.getAccessMode().updateWant(mode).getWant();
     }
 
-    return topic.setMeta({sub: {user: params.user, mode: am}}).catch((err) => {
+    let result = topic.setMeta({sub: {user: params.user, mode: am}});
-      if (errorHandler) {
+    if (errorHandler) {
+      result = result.catch((err) => {
         errorHandler(err.message, 'err');
-      }
+      });
-    });
+    }
+    return result;
   }
 
   render() {

src/widgets/received-marker.jsx

@@ -35,7 +35,7 @@ class ReceivedMarker extends React.PureComponent {
     if (this.props.received <= Tinode.MESSAGE_STATUS_SENDING) {
       marker = (<i className="material-icons small">access_time</i>); // watch face
     } else if (this.props.received == Tinode.MESSAGE_STATUS_FAILED) {
-      marker = (<i className="material-icons small red">error_outline</i>); // icon (!)
+      marker = (<i className="material-icons small amber">warning</i>); // yellow icon /!\
     } else if (this.props.received == Tinode.MESSAGE_STATUS_SENT) {
       marker = (<i className="material-icons small">done</i>); // checkmark
     } else if (this.props.received == Tinode.MESSAGE_STATUS_RECEIVED) {