more work on supporting message previews

src/widgets/contact-list.jsx

@@ -11,10 +11,7 @@ import ContactAction from './contact-action.jsx';
 
 import { makeImageUrl } from '../lib/blob-helpers.js';
 
-const junk = {
-		"ent":[{"data":{"mime":"image/jpeg","name":"hello.jpg","val":"<38992, bytes: ...>","width":100, "height":80},"tp":"EX"}],
-		"fmt":[{"at":-1, "key":0}]
-	};
+import { MESSAGE_PREVIEW_LENGTH } from '../config.js';
 
 const messages = defineMessages({
   badge_you: {
@@ -76,15 +73,22 @@ class ContactList extends React.Component {
               badges.push({name: formatMessage(messages.badge_owner), color: 'blue'});
             }
           }
-          // const comment = React.createElement(React.Fragment, null, Drafty.format(junk, draftyFormatter, this));
+
           const comment = Array.isArray(c.private) ?
             c.private.join(',') : (c.private ? c.private.comment : null);
-
+          let preview;
+          if (!this.props.showMode) {
+            const content = (c.latestMessage() || { content: '' }).content;
+            preview = typeof content == 'string' ?
+              content.substr(0, MESSAGE_PREVIEW_LENGTH) :
+              Drafty.preview(content, MESSAGE_PREVIEW_LENGTH);
+          }
           contactNodes.push(
             <Contact
               title={c.public ? c.public.fn : null}
               avatar={makeImageUrl(c.public ? c.public.photo : null)}
               comment={comment}
+              preview={preview}
               unread={this.props.showUnread ? c.unread : 0}
               now={c.online && this.props.connected}
               acs={c.acs}
@@ -125,52 +129,4 @@ class ContactList extends React.Component {
   }
 };
 
-
-// Converts Drafty elements into a one-line preview.
-function draftyFormatter(style, data, values, key) {
-  let el = Drafty.tagName(style);
-  const attr = { key: key };
-  if (el) {
-    switch (style) {
-      case 'HL':
-        // Make highlight less prominent in preview.
-        attr.className = 'highlight preview';
-        break;
-      case 'LN':
-        // Disable links in previews.
-        el = 'span';
-        break;
-      case 'IM':
-        // Replace image with '[icon] Image'.
-        el = React.Fragment;
-        values = [<i className="material-icons">photo</i>, 'Picture'];
-        break;
-      case 'BN':
-        el = 'span';
-        attr.className = 'flat-button faux';
-        break;
-      case 'FM':
-        el = React.Fragment;
-        values = [<i className="material-icons">dashboard</i>, 'Form:'];
-        break;
-      case 'RW':
-        el = React.Fragment;
-        break;
-      case 'EX':
-        el = React.Fragment;
-        values = [<i className="material-icons">attachment</i>, 'Attachment'];
-        break;
-      default:
-        if (el == '_UNKN') {
-          el = React.Fragment;
-          values = [<i className="material-icons">extension</i>];
-        }
-        break;
-    }
-    return React.createElement(el, attr, values);
-  } else {
-    return values;
-  }
-};
-
 export default injectIntl(ContactList);

src/widgets/contact.jsx

@@ -6,6 +6,8 @@ import LetterTile from './letter-tile.jsx';
 import ContactBadges from './contact-badges.jsx';
 import UnreadBadge from './unread-badge.jsx';
 
+import { Drafty } from 'tinode-sdk';
+
 export default class Contact extends React.Component {
   constructor(props) {
     super(props);
@@ -35,7 +37,7 @@ export default class Contact extends React.Component {
       title = <i><FormattedMessage id="unnamed_topic" /></i>;
     } else if (title.length > 30) {
       // FIXME: this is probably wrong for RTL languages.
-      title = title.substring(0, 28) + '...';
+      title = title.substring(0, 28) + '…';
     }
     const online = this.props.now ? 'online' : 'offline';
     const avatar = this.props.avatar ? this.props.avatar : true;
@@ -53,6 +55,11 @@ export default class Contact extends React.Component {
       }
     }
 
+    const subtitle = this.props.preview ?
+      (typeof this.props.preview == 'string' ? this.props.preview :
+        React.createElement(React.Fragment, null, Drafty.format(this.props.preview, draftyFormatter, this))) :
+      this.props.comment;
+
     return (
       <li className={!this.props.showCheckmark && this.props.selected ? "selected" : null}
         onClick={this.handleClick}>
@@ -71,7 +78,7 @@ export default class Contact extends React.Component {
             {this.props.isChannel ? <img src="/img/channel.png" className="channel" alt="channel" /> : null}
             <UnreadBadge count={this.props.unread} /><ContactBadges badges={icon_badges} />
           </div>
-          {this.props.comment ? <div className="contact-comment">{this.props.comment}</div> : null}
+          {subtitle ? <div className="contact-comment">{subtitle}</div> : null}
           <span><ContactBadges badges={badges} /></span>
         </div>
         {this.props.showContextMenu ?
@@ -84,3 +91,51 @@ export default class Contact extends React.Component {
     );
   }
 };
+
+
+// Converts Drafty object into a one-line preview.
+function draftyFormatter(style, data, values, key) {
+  let el = Drafty.tagName(style);
+  const attr = { key: key };
+  if (el) {
+    switch (style) {
+      case 'HL':
+        // Make highlight less prominent in preview.
+        attr.className = 'highlight preview';
+        break;
+      case 'LN':
+        // Disable links in previews.
+        el = 'span';
+        break;
+      case 'IM':
+        // Replace image with '[icon] Image'.
+        el = React.Fragment;
+        values = [<i className="material-icons">photo</i>, 'Picture'];
+        break;
+      case 'BN':
+        el = 'span';
+        attr.className = 'flat-button faux';
+        break;
+      case 'FM':
+        el = React.Fragment;
+        values = [<i className="material-icons">dashboard</i>, 'Form:'];
+        break;
+      case 'RW':
+        el = React.Fragment;
+        break;
+      case 'EX':
+        el = React.Fragment;
+        values = [<i className="material-icons">attachment</i>, 'Attachment'];
+        break;
+      default:
+        if (el == '_UNKN') {
+          el = React.Fragment;
+          values = [<i className="material-icons">extension</i>];
+        }
+        break;
+    }
+    return React.createElement(el, attr, values);
+  } else {
+    return values;
+  }
+};