more components are functional now

src/widgets/context-menu.jsx

@@ -1,7 +1,8 @@
-/* Context Menu: popup/dropdown menu */
-
+// Context Menu: popup/dropdown menu.
 import React from 'react';
+import ReactDom from 'react-dom';
 
+import { REM_SIZE } from '../config.js';
 
 export default class ContextMenu extends React.Component {
   constructor(props) {

src/widgets/received-marker.jsx

@@ -1,16 +1,32 @@
 // Received/read indicator.
-
 import React from 'react';
+import { defineMessages, injectIntl } from 'react-intl';
 
 import Tinode from 'tinode-sdk';
 
-export default class ReceivedMarker extends React.PureComponent {
+import { shortDateFormat } from '../lib/strformat.js';
+
+const messages = defineMessages({
+  'sending': {
+    'id': 'message_sending',
+    'defaultMessage': 'sending...',
+    'description': 'Message being sent, in place of time stamp'
+  },
+  'failed': {
+    'id': 'message_sending_failed',
+    'defaultMessage': 'failed',
+    'description': 'Failed to send message, in place of time stamp'
+  }
+});
+
+class ReceivedMarker extends React.PureComponent {
   render() {
+    const {formatMessage} = this.props.intl;
     let timestamp;
     if (this.props.received <= Tinode.MESSAGE_STATUS_SENDING) {
-      timestamp = "sending ...";
+      timestamp = formatMessage(messages.sending);
     } else if (this.props.received == Tinode.MESSAGE_STATUS_FAILED) {
-      timestamp = "failed";
+      timestamp = formatMessage(messages.failed);
     } else {
       timestamp = shortDateFormat(this.props.timestamp);
     }
@@ -35,3 +51,5 @@ export default class ReceivedMarker extends React.PureComponent {
     );
   }
 };
+
+export default injectIntl(ReceivedMarker);

src/widgets/search-contacts.jsx

@@ -1,4 +1,7 @@
 import React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import Tinode from 'tinode-sdk';
 
 export default class SearchContacts extends React.PureComponent {
   constructor(props) {
@@ -53,10 +56,13 @@ export default class SearchContacts extends React.PureComponent {
       <div className="panel-form">
         <div className="panel-form-row">
           <i className="material-icons search">search</i>
-          <input className="search" type="text"
-            placeholder="List like email:alice@example.com, tel:17025550003..."
-            value={this.state.search} onChange={this.handleSearchChange}
-            onKeyDown={this.handleKeyDown} required autoFocus />
+          <FormattedMessage id="search_placeholder" defaultMessage="List like email:alice@example.com, tel:17025550003..."
+            description="Placeholder in contacts search field">{
+            (search_placeholder) => <input className="search" type="text"
+              placeholder={search_placeholder}
+              value={this.state.search} onChange={this.handleSearchChange}
+              onKeyDown={this.handleKeyDown} required autoFocus />
+          }</FormattedMessage>
           <a href="javascript:;" onClick={this.handleClear}>
             <i className="material-icons">close</i>
           </a>

src/widgets/send-message.jsx

@@ -1,8 +1,23 @@
 // Send message form.
-
 import React from 'react';
+import { defineMessages, injectIntl } from 'react-intl';
 
-export default class SendMessage extends React.PureComponent {
+import { KEYPRESS_DELAY } from '../config.js';
+
+const messages = defineMessages({
+  'messaging_disabled': {
+    id: 'messaging_disabled_prompt',
+    defaultMessage: 'Messaging disabled',
+    description: 'Prompt in SendMessage in read-only topic'
+  },
+  'type_new_message': {
+    id: 'new_message_prompt',
+    defaultMessage: 'New message',
+    description: 'Prompt in SendMessage in read-only topic'
+  }
+});
+
+class SendMessage extends React.PureComponent {
   constructor(props) {
     super(props);
 
@@ -152,8 +167,11 @@ export default class SendMessage extends React.PureComponent {
   }
 
   render() {
-    var prompt = this.props.disabled ? "Messaging disabled" : "New message";
-    var instance = this;
+    const {formatMessage} = this.props.intl;
+    const prompt = this.props.disabled ?
+      formatMessage(messages.messaging_disabled) :
+      formatMessage(messages.type_new_message);
+    let instance = this;
     return (
       <div id="send-message-panel">
         {this.props.disabled ?
@@ -173,7 +191,9 @@ export default class SendMessage extends React.PureComponent {
           autoFocus />
           {this.props.disabled ?
             <i className="material-icons disabled">send</i> :
-            <a href="javascript:;" onClick={this.handleSend} title="Send"><i className="material-icons">send</i></a>}
+            <a href="javascript:;" onClick={this.handleSend} title="Send">
+              <i className="material-icons">send</i>
+            </a>}
       <input type="file" ref={function(ref) {instance.attachFile = ref;}}
         onChange={this.handleAttachFile} style={{display: 'none'}} />
       <input type="file" ref={function(ref) {instance.attachImage = ref;}} accept="image/*"
@@ -182,3 +202,5 @@ export default class SendMessage extends React.PureComponent {
     );
   }
 };
+
+export default injectIntl(SendMessage);

src/widgets/unread-badge.jsx

@@ -1,5 +1,4 @@
 // The counter of unread messages in the topic.
-
 import React from 'react';
 
 export default class UnreadBadge extends React.PureComponent {