forwarding UI prettier and more usable

src/config.js

@@ -95,6 +95,8 @@ export const MESSAGE_PREVIEW_LENGTH = 80;
 
 // Length of a quote in quoted reply (for outgoing messages).
 export const QUOTED_REPLY_LENGTH = 30;
+// Length of a preview of a forwarded message.
+export const FORWARDED_PREVIEW_LENGTH = 128;
 
 // Link for "Contact Us".
 export const LINK_CONTACT_US = 'email:support@tinode.co';

src/views/messages-view.jsx

@@ -216,12 +216,12 @@ class MessagesView extends React.Component {
       const topic = nextProps.tinode.getTopic(nextProps.topic);
 
       let reply = null;
-      if (nextProps.forwardedMessage) {
+      if (nextProps.forwardMessage) {
         // We are forwarding a message. Show preview.
-        const preview = nextProps.forwardedMessage.preview;
+        const preview = nextProps.forwardMessage.preview;
         reply = {
           content: preview,
-          forwarded: nextProps.forwardedMessage.head.forwarded,
+          forwarded: nextProps.forwardMessage.head.forwarded,
           seq: null
         };
       }
@@ -677,10 +677,10 @@ class MessagesView extends React.Component {
   // sendMessage sends the message with an optional subscription to topic first.
   sendMessage(msg, uploadCompletionPromise, uploader) {
     let head;
-    if (this.props.forwardedMessage) {
+    if (this.props.forwardMessage) {
       // We are forwarding a message.
-      msg = this.props.forwardedMessage.msg;
-      head = this.props.forwardedMessage.head;
+      msg = this.props.forwardMessage.msg;
+      head = this.props.forwardMessage.head;
       this.handleCancelReply();
     } else if (this.state.reply && this.state.reply.content) {
       // We are replying to a message in this topic.
@@ -844,6 +844,8 @@ class MessagesView extends React.Component {
   }
 
   handlePickReply(seq, content, forwarded, senderId, senderName) {
+    console.log("handlePickReply", seq, content, forwarded, senderId, senderName, new Error("stacktrace"));
+
     this.setState({reply: null});
 
     if (!seq || !content) {
@@ -1105,12 +1107,12 @@ class MessagesView extends React.Component {
               :
               <SendMessage
                 tinode={this.props.tinode}
-                noInput={this.props.forwardedMessage != null}
+                noInput={!!this.props.forwardMessage}
                 disabled={!this.state.isWriter}
                 onKeyPress={this.sendKeyPress}
                 onSendMessage={this.sendMessage}
-                onAttachFile={this.props.forwardedMessage == null ? this.handleAttachFile : null}
-                onAttachImage={this.props.forwardedMessage == null ? this.handleAttachImage : null}
+                onAttachFile={this.props.forwardMessage ? null : this.handleAttachFile}
+                onAttachImage={this.props.forwardMessage ? null : this.handleAttachImage}
                 onError={this.props.onError}
                 reply={this.state.reply}
                 onQuoteClick={this.handleQuoteClick}

src/views/tinode-web.jsx

@@ -1453,7 +1453,7 @@ class TinodeWeb extends React.Component {
         Tinode.Drafty.forwardedContent(params.content) :
         typeof params.content == 'string' ?
             Tinode.Drafty.init(params.content) : params.content;
-    const preview = Tinode.Drafty.preview(content, QUOTED_REPLY_LENGTH,
+    const preview = Tinode.Drafty.preview(content, FORWARDED_PREVIEW_LENGTH,
                                           undefined, params.forwarded != null);
     const msg = Tinode.Drafty.append(
         Tinode.Drafty.appendLineBreak(
@@ -1644,7 +1644,7 @@ class TinodeWeb extends React.Component {
           <ForwardDialog
             tinode={this.tinode}
             contacts={this.state.chatList}
-            topicSelected={this.props.topicSelected}
+            topicSelected={this.state.topicSelected}
             myUserId={this.state.myUserId}
 
             hide={this.handleHideForwardDialog}
@@ -1752,8 +1752,7 @@ class TinodeWeb extends React.Component {
           serverAddress={this.state.serverAddress}
           applicationVisible={this.state.applicationVisible}
 
-          // Show the forwareded message if the user has selected a topic to forward this message to.
-          forwardedMessage={this.state.forwardMessage && !this.state.forwardMessage.head.forwarded.startsWith(this.stateTopicSelected) ? this.state.forwardMessage : null}
+          forwardMessage={this.state.forwardMessage}
           onCancelForwardMessage={this.handleHideForwardDialog}
 
           errorText={this.state.errorText}

src/widgets/chat-message.jsx

@@ -78,6 +78,7 @@ class BaseChatMessage extends React.PureComponent {
       menuItems.push('menu_item_reply');
       menuItems.push('menu_item_forward');
     }
+
     this.props.showContextMenu({
       seq: this.props.seq,
       content: this.props.content,

src/widgets/context-menu.jsx

@@ -191,9 +191,7 @@ class ContextMenu extends React.Component {
       'menu_item_forward': {
         id: 'menu_item_forward',
         title: formatMessage(messages.forward),
-        handler: (params, errorHandler) => {
-          return this.forwardMessage(params, errorHandler);
-        }
+        handler: () => {} /* the action is taken directly in tinode-web */
       },
       'topic_unmute': {
         id: 'topic_unmute',
@@ -439,12 +437,6 @@ class ContextMenu extends React.Component {
     params.pickReply(params.seq, params.content, params.forwarded, params.userFrom, params.userName, errorHandler);
   }
 
-  forwardMessage(params, errorHandler) {
-    //params.pickReply({ seq: params.seq, content: params.content });
-    //this.props.
-    console.log('forwarding msg ', params);
-  }
-
   render() {
     const menu = [];
     let count = 0;

src/widgets/forward-dialog.jsx

@@ -50,8 +50,11 @@ export default class ForwardDialog extends React.Component {
 
   render() {
     let contacts = this.state.query != null ? this.props.searchResults : this.props.contacts;
-    // Filter out contacts without a 'W' permission.
-    contacts = contacts.filter((c) => { return c.acs.isJoiner() && c.acs.isWriter(); });
+    // Filter out contacts without a 'W' or 'J' permissions as well as the current topic.
+    contacts = contacts.filter((c) => {
+      console.log(c.name, this.props.topicSelected);
+      return (c.name != this.props.topicSelected) && c.acs.isJoiner() && c.acs.isWriter();
+    });
 
     return (
       <div className="alert-container">

src/widgets/send-message.jsx

@@ -177,17 +177,17 @@ class SendMessage extends React.PureComponent {
         formatMessage(messages[this.props.messagePrompt]) :
         formatMessage(messages.type_new_message));
 
+    const quote =
+      (<div id="reply-quote-preview">
+        <div className="cancel">
+          <a href="#" onClick={(e) => {e.preventDefault(); this.props.onCancelReply();}}><i className="material-icons gray">close</i></a>
+        </div>
+        {this.state.quote}
+      </div>);
+
     return (
       <div id="send-message-wrapper">
-        {this.state.quote ?
-          <div id="reply-quote-preview">
-            <div className="cancel">
-              <a href="#" onClick={(e) => {e.preventDefault(); this.props.onCancelReply();}}><i className="material-icons gray">close</i></a>
-            </div>
-            {this.state.quote}
-          </div>
-        :
-        null}
+        {this.state.quote && !this.props.noInput ? quote : null}
         <div id="send-message-panel">
           {!this.props.disabled ?
             <>
@@ -203,7 +203,7 @@ class SendMessage extends React.PureComponent {
                 :
                 null}
               {this.props.noInput ?
-                <div className="hr thin" /> :
+                (this.state.quote ? quote : <div className="hr thin" />) :
                 <textarea id="sendMessage" placeholder={prompt}
                   value={this.state.message} onChange={this.handleMessageTyping}
                   onKeyPress={this.handleKeyPress}