received marker in message previews

src/lib/utils.js

@@ -1,5 +1,7 @@
 // Odds and ends
 
+import Tinode from 'tinode-sdk';
+
 // Make shortcut icon appear with a green dot + show unread count in title.
 export function updateFavicon(count) {
   const oldIcon = document.getElementById('shortcut-icon');
@@ -144,3 +146,20 @@ export function sanitizeImageUrl(url) {
 
   return null;
 }
+
+// Given message's received status, return name and color of a delivery indicator icon.
+export function deliveryMarker(received) {
+  switch (received) {
+    case Tinode.MESSAGE_STATUS_SENDING:
+      return { name: 'access_time' }; // watch face
+    case Tinode.MESSAGE_STATUS_FAILED:
+      return { name: 'warning', color: 'amber' }; // yellow icon /!\
+    case Tinode.MESSAGE_STATUS_SENT:
+      return { name: 'done' }; // checkmark
+    case Tinode.MESSAGE_STATUS_RECEIVED:
+      return { name: 'done_all' }; // double checkmark
+    case Tinode.MESSAGE_STATUS_READ:
+      return { name: 'done_all', color: 'blue' }; // blue double checkmark
+  }
+  return null;
+}

src/widgets/contact-list.jsx

@@ -77,11 +77,15 @@ class ContactList extends React.Component {
           const comment = Array.isArray(c.private) ?
             c.private.join(',') : (c.private ? c.private.comment : null);
           let preview;
+          let deliveryStatus;
           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);
+            const msg = c.latestMessage();
+            if (msg) {
+              deliveryStatus = c.msgStatus(msg);
+              preview = typeof msg.content == 'string' ?
+                msg.content.substr(0, MESSAGE_PREVIEW_LENGTH) :
+                Drafty.preview(msg.content, MESSAGE_PREVIEW_LENGTH);
+            }
           }
           contactNodes.push(
             <Contact
@@ -89,6 +93,7 @@ class ContactList extends React.Component {
               avatar={makeImageUrl(c.public ? c.public.photo : null)}
               comment={comment}
               preview={preview}
+              received={deliveryStatus}
               unread={this.props.showUnread ? c.unread : 0}
               now={c.online && this.props.connected}
               acs={c.acs}

src/widgets/contact.jsx

@@ -2,12 +2,15 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import LetterTile from './letter-tile.jsx';
 import ContactBadges from './contact-badges.jsx';
+import LetterTile from './letter-tile.jsx';
+import ReceivedMarker from './received-marker.jsx'
 import UnreadBadge from './unread-badge.jsx';
 
 import { Drafty } from 'tinode-sdk';
 
+import { deliveryMarker } from '../lib/utils.js';
+
 export default class Contact extends React.Component {
   constructor(props) {
     super(props);
@@ -60,8 +63,11 @@ export default class Contact extends React.Component {
         React.createElement(React.Fragment, null, Drafty.format(this.props.preview, draftyFormatter, this))) :
       this.props.comment;
 
+    const icon = deliveryMarker(this.props.received);
+    const marker = icon ? <i className={'material-icons small space-right ' + icon.color}>{icon.name}</i> : null;
+
     return (
-      <li className={!this.props.showCheckmark && this.props.selected ? "selected" : null} onClick={this.handleClick}>
+      <li className={!this.props.showCheckmark && this.props.selected ? 'selected' : null} onClick={this.handleClick}>
         <div className="avatar-box">
           <LetterTile
             avatar={avatar}
@@ -77,7 +83,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>
-          <div className="contact-comment">{subtitle || '\u00A0'}</div>
+          <div className="contact-comment">{marker}{subtitle || '\u00A0'}</div>
           <span><ContactBadges badges={badges} /></span>
         </div>
         {this.props.showContextMenu ?

src/widgets/received-marker.jsx

@@ -5,6 +5,7 @@ import { defineMessages, injectIntl } from 'react-intl';
 import Tinode from 'tinode-sdk';
 
 import { shortDateFormat } from '../lib/strformat.js';
+import { deliveryMarker } from '../lib/utils.js';
 
 const messages = defineMessages({
   'sending': {
@@ -31,18 +32,8 @@ class ReceivedMarker extends React.PureComponent {
       timestamp = shortDateFormat(this.props.timestamp, this.props.intl.locale);
     }
 
-    let marker = null;
-    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 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) {
-      marker = (<i className="material-icons small">done_all</i>); // double checkmark
-    } else if (this.props.received == Tinode.MESSAGE_STATUS_READ) {
-      marker = (<i className="material-icons small blue">done_all</i>); // blue double checkmark
-    }
+    const icon = deliveryMarker(this.props.received);
+    const marker = icon ? <i className={'material-icons small ' + icon.color}>{icon.name}</i> : null;
 
     return (
       <span className="timestamp">