Remaining code review items.

src/views/info-view.jsx

@@ -202,11 +202,11 @@ class InfoView extends React.Component {
       deleter: acs && acs.isDeleter(),
       muted: acs && acs.isMuted(),
 
-      fullName: clipStr(topic.public ? topic.public.fn : undefined, MAX_TITLE_LENGTH),
-      description: clipStr(topic.public ? topic.public.note : undefined, MAX_TOPIC_DESCRIPTION_LENGTH),
+      fullName: clipStr(topic.public && topic.public.fn, MAX_TITLE_LENGTH),
+      description: clipStr(topic.public && topic.public.note, MAX_TOPIC_DESCRIPTION_LENGTH),
       avatar: makeImageUrl(topic.public ? topic.public.photo : null),
       trustedBadges: badges,
-      private: clipStr(topic.private ? topic.private.comment : null, MAX_TITLE_LENGTH),
+      private: clipStr(topic.private && topic.private.comment, MAX_TITLE_LENGTH),
       archived: topic.isArchived(),
       address: topic.name,
       groupTopic: topic.isGroupType(),

src/views/messages-view.jsx

@@ -310,9 +310,7 @@ class MessagesView extends React.Component {
         });
 
         if (nextProps.callTopic == topic.name && shouldPresentCallPanel(nextProps.callState)) {
-          Object.assign(nextState, {
-            rtcPanel: nextProps.callTopic,
-          });
+          nextState.rtcPanel = nextProps.callTopic;
         }
       } else {
         // Invalid topic.
@@ -330,9 +328,7 @@ class MessagesView extends React.Component {
       // We are still in same topic. Show the call panel if necessary.
       if (nextProps.callTopic == prevState.topic && !prevState.rtcPanel &&
           shouldPresentCallPanel(nextProps.callState)) {
-        Object.assign(nextState, {
-          rtcPanel: nextProps.callTopic,
-        });
+        nextState.rtcPanel = nextProps.callTopic;
       }
     }
 
@@ -1149,7 +1145,7 @@ class MessagesView extends React.Component {
             }
             let duration;
             if (msg.head && isVideoCall(msg.head.mime)) {
-              topic.messageVersions(msg, (cur, before, unused1, unused2) => {
+              topic.messageVersions(msg, (cur, before) => {
                 if (cur.content == 'finished' && before.content == 'accepted') {
                   duration = msg.ts - before.ts;
                 }

src/views/tinode-web.jsx

@@ -1304,15 +1304,11 @@ class TinodeWeb extends React.Component {
       // If the current URl contains the old topic name, replace it with new.
       // Update the name of the selected topic first so the navigator doen't clear
       // the state.
-      const newTopic = {topicSelected: newName};
-      this.setState(...nextState, ...newTopic, () => {
-        HashNavigation.navigateTo(HashNavigation.setUrlTopic('', newName));
-      });
-    } else {
-      this.setState(nextState, () => {
-        HashNavigation.navigateTo(HashNavigation.setUrlTopic('', newName));
-      });
+      nextState.topicSelected = newName;
     }
+    this.setState(nextState, _ => {
+      HashNavigation.navigateTo(HashNavigation.setUrlTopic('', newName));
+    });
   }
 
   handleTopicUpdateRequest(topicName, pub, priv, defacs) {
@@ -1814,7 +1810,7 @@ class TinodeWeb extends React.Component {
       case 'accept':
         console.log('TinodeWeb: received accept msg ', info);
         // If another my session has accepted the call.
-        if (info.topic == 'me' && info.from == this.state.myUserId) {
+        if (Tinode.isMeTopicName(info.topic) && this.tinode.isMe(info.from)) {
           this.setState({
             callTopic: null,
             callState: CALL_STATE_NONE,

src/widgets/call-panel.jsx

@@ -149,15 +149,15 @@ export default class CallPanel extends React.PureComponent {
     this.state.pc.setRemoteDescription(desc).catch(this.reportError);
   }
 
-  reportError(errMessage) {
-    console.log(`Error ${errMessage.name}: ${errMessage.message}`);
+  reportError(err) {
+    this.props.onError(err.message, 'err');
   }
 
   handleNegotiationNeededEvent() {
     this.state.pc.createOffer().then(offer => {
       return this.state.pc.setLocalDescription(offer);
     })
-    .then(() => {
+    .then(_ => {
       this.props.onSendOffer(this.props.topic.name, this.props.seq, this.state.pc.localDescription.toJSON());
     })
     .catch(this.reportError);
@@ -196,16 +196,17 @@ export default class CallPanel extends React.PureComponent {
   }
 
   handleTrackEvent(event) {
+    // Remote video becomes available.
     this.remoteRef.current.srcObject = event.streams[0];
-    // Make sure we redraw the UI properly.
+    // Make sure we display the title (peer's name) over the remote video.
     this.forceUpdate();
   }
 
   handleGetUserMediaError(e) {
     switch(e.name) {
       case 'NotFoundError':
-        console.log("Unable to open your call because no camera and/or microphone" +
-              "were found.");
+        // Cannot start the call b/c no camera and/or microphone found. 
+        this.reportError(e);
         break;
       case 'SecurityError':
       case 'PermissionDeniedError':
@@ -304,7 +305,7 @@ export default class CallPanel extends React.PureComponent {
       }
       track.enabled = !track.enabled;
     });
-    // Make sure we redraw the UI properly.
+    // Make sure we redraw the mute/unmute icons (e.g. mic -> mic_off).
     this.forceUpdate();
   }
 
@@ -373,7 +374,6 @@ export default class CallPanel extends React.PureComponent {
             <button className="video-call-toggle-media" onClick={this.handleToggleCameraClick}><i className="material-icons">{videoIcon}</i></button>
             <button className="video-call-toggle-media" onClick={this.handleToggleMicClick}><i className="material-icons">{audioIcon}</i></button>
           </div>
-          <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
         </div>
       </>
     );

src/widgets/chat-message.jsx

@@ -155,8 +155,8 @@ class BaseChatMessage extends React.PureComponent {
           defaultMessage="Incoming Call" description="Incoming call label" /> :
         <FormattedMessage id="calls_outgoing"
           defaultMessage="Outgoing Call" description="Outgoing call label" />;
-      const isCallDropped = this.props.content == "disconnected";
-      content = <><i className="material-icons" style={{color: isCallDropped ? "red" : "green"}}>{direction}</i>{text}
+      const isCallDropped = this.props.content == 'disconnected';
+      content = <><i className="material-icons" style={{color: isCallDropped ? 'red' : 'green'}}>{direction}</i>{text}
         { !isCallDropped && this.props.duration ?
           [' (', <FormattedDuration seconds={this.props.duration / 1000} format="{hours} {minutes} {seconds}" />, ')'] :
           null}

src/widgets/contact.jsx

@@ -71,8 +71,8 @@ class Contact extends React.Component {
     // The this.props.preview contains alreay shortened Drafty or string.
     let preview;
     if (this.props.previewIsVideoCall) {
-      preview = <><i className='material-icons'>{this.props.previewIsResponse ? 'call_received' : 'call_made'}</i>
-                  <i className='material-icons'>video_call</i></>;
+      preview = <><i className="material-icons">{this.props.previewIsResponse ? 'call_received' : 'call_made'}</i>
+                  <i className="material-icons">video_call</i></>;
     } else if (typeof this.props.preview == 'string') {
       preview = this.props.preview;
     } else if (Drafty.isValid(this.props.preview)) {