call status in message preview was isolated in a class and made prettier

src/widgets/call-status.jsx

@@ -0,0 +1,18 @@
+// The counter of unread messages in the topic.
+import React from 'react';
+
+// Props:
+//  incoming: true | false.
+//  success: true | false.
+export default class CallStatus extends React.PureComponent {
+  render() {
+    const icon2 = [['call_received', 'call_missed'],['call_made', 'call_missed_outgoing']]
+      [this.props.incoming ? 0 : 1][this.props.success ? 0 : 1] || 'question_mark';
+
+    return (
+      <div className="composed-material">
+        <i class="material-icons">call</i><i class="material-icons second">{icon2}</i>
+      </div>
+    );
+  }
+};

src/widgets/contact.jsx

@@ -2,6 +2,7 @@
 import React from 'react';
 import { FormattedMessage, injectIntl } from 'react-intl';
 
+import CallStatus from './call-status.jsx';
 import ContactBadges from './contact-badges.jsx';
 import LetterTile from './letter-tile.jsx';
 import UnreadBadge from './unread-badge.jsx';
@@ -71,10 +72,10 @@ 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">call</i>
-        <i className="material-icons medium">{this.props.previewIsResponse ? 'call_received' : 'call_made'}</i>
-      </>;
+      // TODO: use words to describe call status and duration.
+      preview = <CallStatus
+        direction={this.props.previewIsResponse}
+        success={true} />; // FIXME: use actuall call completion status instead of TRUE.
     } else if (typeof this.props.preview == 'string') {
       preview = this.props.preview;
     } else if (Drafty.isValid(this.props.preview)) {