change method signatures to make TopicCommonView usable in INfoView

src/views/acc-security-view.jsx

@@ -46,7 +46,7 @@ class AccSecurityView extends React.Component {
 
   handlePasswordUpdate(pwd) {
     this.setState({password: pwd});
-    this.props.onUpdateAccount(pwd);
+    this.props.onUpdatePassword(pwd);
   }
 
   handleLaunchPermissionsEditor(which) {
@@ -63,7 +63,7 @@ class AccSecurityView extends React.Component {
   handlePermissionsChanged(perm) {
     let defacs = {};
     defacs[this.state.showPermissionEditorFor] = perm;
-    this.props.onUpdateAccount(undefined, undefined, defacs);
+    this.props.onUpdateAccountDesc('me', undefined, undefined, defacs);
 
     let newState = {showPermissionEditorFor: undefined};
     newState[this.state.showPermissionEditorFor] = perm;

src/views/sidepanel-view.jsx

@@ -181,7 +181,7 @@ class SidepanelView extends React.Component {
             tinode={this.props.tinode}
             myUserId={this.props.myUserId}
             onBasicNavigate={this.props.onBasicNavigate}
-            onUpdateAccount={this.props.onUpdateAccount}
+            onUpdateTopicDesc={this.props.onUpdateAccountDesc}
             onUpdateTags={this.props.onUpdateAccountTags}
             onCredAdd={this.props.onCredAdd}
             onCredDelete={this.props.onCredDelete}
@@ -201,7 +201,8 @@ class SidepanelView extends React.Component {
           view === 'security' ?
           <AccSecurityView
             tinode={this.props.tinode}
-            onUpdateAccount={this.props.onUpdateAccount}
+            onUpdateAccountDesc={this.props.onUpdateAccountDesc}
+            onUpdatePassword={this.props.onUpdatePassword}
             onLogout={this.props.onLogout}
             onDeleteAccount={this.props.onDeleteAccount}
             onShowAlert={this.props.onShowAlert}

src/views/tinode-web.jsx

@@ -1,6 +1,5 @@
 // The top-level class to hold all functionality together.
 import React from 'react';
-import ReactDOM from 'react-dom';
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
 
 import * as firebase from 'firebase/app';
@@ -70,6 +69,8 @@ class TinodeWeb extends React.Component {
   constructor(props) {
     super(props);
 
+    this.selfRef = React.createRef();
+
     this.state = this.getBlankState();
 
     this.handleResize = this.handleResize.bind(this);
@@ -100,7 +101,7 @@ class TinodeWeb extends React.Component {
     this.handleNewChatInvitation = this.handleNewChatInvitation.bind(this);
     this.handleNewAccount = this.handleNewAccount.bind(this);
     this.handleNewAccountRequest = this.handleNewAccountRequest.bind(this);
-    this.handleUpdateAccountRequest = this.handleUpdateAccountRequest.bind(this);
+    this.handleUpdatePasswordRequest = this.handleUpdatePasswordRequest.bind(this);
     this.handleUpdateAccountTagsRequest = this.handleUpdateAccountTagsRequest.bind(this);
     this.handleToggleIncognitoMode = this.handleToggleIncognitoMode.bind(this);
     this.handleSettings = this.handleSettings.bind(this);
@@ -980,31 +981,6 @@ class TinodeWeb extends React.Component {
       });
   }
 
-  handleUpdateAccountRequest(password, pub, defacs) {
-    this.handleError();
-
-    if (pub || defacs) {
-      const params = {};
-      if (pub) {
-        params.public = pub;
-        if (pub.photo && pub.photo.ref) {
-          params.attachments = [pub.photo.ref];
-        }
-      }
-      if (defacs) {
-        params.defacs = defacs;
-      }
-      this.tinode.getMeTopic().setMeta({desc: params}).catch((err) => {
-        this.handleError(err.message, 'err');
-      });
-    }
-    if (password) {
-      this.tinode.updateAccountBasic(null, this.tinode.getCurrentLogin(), password).catch((err) => {
-        this.handleError(err.message, 'err');
-      });
-    }
-  }
-
   handleToggleIncognitoMode(on) {
     const me = this.tinode.getMeTopic();
     const am = me.getAccessMode().updateWant(on ? '-P' : '+P').getWant();
@@ -1212,19 +1188,24 @@ class TinodeWeb extends React.Component {
     }
   }
 
-  handleTopicUpdateRequest(topicName, pub, priv, permissions) {
+  handleTopicUpdateRequest(topicName, pub, priv, defacs) {
+    this.handleError();
+
     const topic = this.tinode.getTopic(topicName);
     if (topic) {
       const params = {};
       if (pub) {
         params.public = pub;
+        if (pub.photo && pub.photo.ref) {
+          params.attachments = [pub.photo.ref];
+        }
       }
       if (priv) {
         params.private = (priv === Tinode.DEL_CHAR) ?
           Tinode.DEL_CHAR : {comment: priv};
       }
-      if (permissions) {
-        params.defacs = permissions;
+      if (defacs) {
+        params.defacs = defacs;
       }
       topic.setMeta({desc: params}).catch((err) => {
         this.handleError(err.message, 'err');
@@ -1232,6 +1213,16 @@ class TinodeWeb extends React.Component {
     }
   }
 
+  handleUpdatePasswordRequest(password)  {
+    this.handleError();
+
+    if (password) {
+      this.tinode.updateAccountBasic(null, this.tinode.getCurrentLogin(), password).catch((err) => {
+        this.handleError(err.message, 'err');
+      });
+    }
+  }
+
   handleChangePermissions(topicName, mode, uid) {
     const topic = this.tinode.getTopic(topicName);
     if (topic) {
@@ -1359,7 +1350,7 @@ class TinodeWeb extends React.Component {
       contextMenuClickAt: {x: params.x, y: params.y},
       contextMenuParams: params,
       contextMenuItems: menuItems || this.defaultTopicContextMenu(params.topicName),
-      contextMenuBounds: ReactDOM.findDOMNode(this).getBoundingClientRect()
+      contextMenuBounds: this.selfRef.getBoundingClientRect()
     });
   }
 
@@ -1510,7 +1501,7 @@ class TinodeWeb extends React.Component {
 
   render() {
     return (
-      <div id="app-container">
+      <div id="app-container" ref={this.selfRef}>
         {this.state.contextMenuVisible ?
           <ContextMenu
             tinode={this.tinode}
@@ -1579,7 +1570,8 @@ class TinodeWeb extends React.Component {
           onLoginRequest={this.handleLoginRequest}
           onPersistenceChange={this.handlePersistenceChange}
           onCreateAccount={this.handleNewAccountRequest}
-          onUpdateAccount={this.handleUpdateAccountRequest}
+          onUpdateAccountDesc={this.handleTopicUpdateRequest}
+          onUpdatePassword={this.handleUpdatePasswordRequest}
           onUpdateAccountTags={this.handleUpdateAccountTagsRequest}
           onTogglePushNotifications={this.togglePushToken}
           onToggleMessageSounds={this.handleToggleMessageSounds}

src/views/topic-common-view.jsx

@@ -71,7 +71,7 @@ export default class TopicCommonView extends React.Component {
     fn = fn.trim().substring(0, MAX_TITLE_LENGTH);
     if (fn) {
       this.setState({fullName: fn});
-      this.props.onUpdateAccount(undefined, theCard(fn, null));
+      this.props.onUpdateTopicDesc(this.props.topic, theCard(fn, null));
     }
   }
 
@@ -81,7 +81,7 @@ export default class TopicCommonView extends React.Component {
     this.setState({newAvatar: img, newAvatarMime: mime});
     if (!img) {
       // Deleting the avatar.
-      this.props.onUpdateAccount(undefined, theCard(null, Tinode.DEL_CHAR));
+      this.props.onUpdateTopicDesc(this.props.topic, theCard(null, Tinode.DEL_CHAR));
     }
   }
 
@@ -105,7 +105,7 @@ export default class TopicCommonView extends React.Component {
         this.setState({uploading: true});
         uploader.upload(blob)
           .then((url) => {
-            this.props.onUpdateAccount(undefined, theCard(null, url));
+            this.props.onUpdateTopicDesc(this.props.topic, theCard(null, url));
           })
           .catch((err) => {
             this.props.onError(err, 'err');
@@ -119,7 +119,7 @@ export default class TopicCommonView extends React.Component {
         blobToBase64(blob, (unused, base64bits) => {
           const du = makeImageUrl({data: base64bits, type: mime});
           this.setState({source: du});
-          this.props.onUpdateAccount(undefined, theCard(null, du));
+          this.props.onUpdateTopicDesc(this.props.topic, theCard(null, du));
           this.setState({uploading: false});
         });
       }