even more translations and fixes

src/widgets/context-menu.jsx

@@ -1,38 +1,99 @@
 // Context Menu: popup/dropdown menu.
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { injectIntl, defineMessages } from 'react-intl';
 
 import { REM_SIZE } from '../config.js';
 
-export default class ContextMenu extends React.Component {
+const messages = defineMessages({
+  info: {
+    id: 'menu_item_info',
+    defaultMessage: 'Info',
+    description: 'Show extended topic information'
+  },
+  clear_messages: {
+    id: 'menu_item_clear_messages',
+    defaultMessage: 'Clear messages',
+    description: 'Delete all messages'
+  },
+  clear_for_all: {
+    id: 'menu_item_clear_messages_for_all',
+    defaultMessage: 'Clear for All',
+    description: 'Delete all message(s) for all members'
+  },
+  'delete': {
+    id: 'menu_item_delete',
+    defaultMessage: 'Delete',
+    description: 'Delete selected messages'
+  },
+  delete_for_all: {
+    id: 'menu_item_delete_for_all',
+    defaultMessage: 'Delete for All',
+    description: 'Delete selected message(s) for all members'
+  },
+  mute: {
+    id: 'menu_item_mute',
+    defaultMessage: 'Mute',
+    description: 'Turn off notifications'
+  },
+  unmute: {
+    id: 'menu_item_unmute',
+    defaultMessage: 'Unmute',
+    description: 'Turn notifications on'
+  },
+  topic_delete: {
+    id: 'menu_item_delete_topic',
+    defaultMessage: 'Delete',
+    description: 'Delete entire topic'
+  },
+  unblock: {
+    id: 'menu_item_unblock',
+    defaultMessage: 'Unblock',
+    description: 'Unblock user'
+  },
+  block: {
+    id: 'menu_item_block',
+    defaultMessage: 'Block',
+    description: 'Block user'
+  },
+  member_delete: {
+    id: 'menu_item_member_delete',
+    defaultMessage: 'Remove',
+    description: 'Remove user from topic'
+  }
+});
+
+class ContextMenu extends React.Component {
   constructor(props) {
     super(props);
 
+    const {formatMessage} = props.intl;
+
     this.handlePageClick = this.handlePageClick.bind(this);
     this.handleEscapeKey = this.handleEscapeKey.bind(this);
     this.handleClick = this.handleClick.bind(this);
 
     // Preconfigured menu items.
     this.MenuItems = {
-      'topic_info':     {title: "Info", handler: null},
+      'topic_info':     {title: formatMessage(messages.info), handler: null},
 
-      'messages_clear': {title: "Clear messages", handler: (params, errorHandler) => {
+      'messages_clear': {title: formatMessage(messages.clear_messages), handler: (params, errorHandler) => {
         this.deleteMessages(true, false, params, errorHandler);
       }},
-      'messages_clear_hard': {title: "Clear for All", handler: (params, errorHandler) => {
+      'messages_clear_hard': {title: formatMessage(messages.clear_for_all), handler: (params, errorHandler) => {
         this.deleteMessages(true, true, params, errorHandler);
       }},
-      'message_delete': {title: "Delete", handler: (params, errorHandler) => {
+      'message_delete': {title: formatMessage(messages.delete), handler: (params, errorHandler) => {
         this.deleteMessages(false, false, params, errorHandler);
       }},
-      'message_delete_hard': {title: "Delete for All", handler: (params, errorHandler) => {
+      'message_delete_hard': {title: formatMessage(messages.delete_for_all), handler: (params, errorHandler) => {
         this.deleteMessages(false, true, params, errorHandler);
       }},
-      'topic_unmute':   {title: "Unmute", handler: this.topicPermissionSetter.bind(this, '+P')},
-      'topic_mute':     {title: "Mute", handler: this.topicPermissionSetter.bind(this, '-P')},
-      'topic_unblock':  {title: "Unblock", handler: this.topicPermissionSetter.bind(this, '+J')},
-      'topic_block':    {title: "Block", handler: this.topicPermissionSetter.bind(this, '-J')},
-      'topic_delete':   {title: "Delete", handler: (params, errorHandler) => {
+      'topic_unmute':   {title: formatMessage(messages.unmute), handler: this.topicPermissionSetter.bind(this, '+P')},
+      'topic_mute':     {title: formatMessage(messages.mute), handler: this.topicPermissionSetter.bind(this, '-P')},
+      'topic_unblock':  {title: formatMessage(messages.unblock), handler: this.topicPermissionSetter.bind(this, '+J')},
+      'topic_block':    {title: formatMessage(messages.block), handler: this.topicPermissionSetter.bind(this, '-J')},
+      'topic_delete':   {title: formatMessage(messages.topic_delete), handler: (params, errorHandler) => {
         let topic = this.props.tinode.getTopic(params.topicName);
         if (!topic) {
           console.log("Topic not found: ", params.topicName);
@@ -44,9 +105,9 @@ export default class ContextMenu extends React.Component {
           }
         });
       }},
-
-      'permissions':    {title: "Edit permissions", handler: null},
-      'member_delete':  {title: "Remove", handler: (params, errorHandler) => {
+      // menu_item_edit_permissions is defined elsewhere.
+      'permissions':    {title: formatMessage({id: 'menu_item_edit_permissions'}), handler: null},
+      'member_delete':  {title: formatMessage(messages.member_delete), handler: (params, errorHandler) => {
         let topic = this.props.tinode.getTopic(params.topicName);
         if (!topic || !params.user) {
           console.log("Topic or user not found: '" + params.topicName + "', '" + params.user + "'");
@@ -58,10 +119,10 @@ export default class ContextMenu extends React.Component {
           }
         });
       }},
-      'member_mute':    {title: "Mute", handler: this.topicPermissionSetter.bind(this, '-P')},
-      'member_unmute':  {title: "Unmute", handler: this.topicPermissionSetter.bind(this, '+P')},
-      'member_block':   {title: "Block", handler: this.topicPermissionSetter.bind(this, '-J')},
-      'member_unblock': {title: "Unblock", handler: this.topicPermissionSetter.bind(this, '+J')},
+      'member_mute':    {title: formatMessage(messages.mute), handler: this.topicPermissionSetter.bind(this, '-P')},
+      'member_unmute':  {title: formatMessage(messages.unmute), handler: this.topicPermissionSetter.bind(this, '+P')},
+      'member_block':   {title: formatMessage(messages.block), handler: this.topicPermissionSetter.bind(this, '-J')},
+      'member_unblock': {title: formatMessage(messages.unblock), handler: this.topicPermissionSetter.bind(this, '+J')},
     };
   }
 
@@ -104,7 +165,7 @@ export default class ContextMenu extends React.Component {
   // Menu Actions
 
   deleteMessages(all, hard, params, errorHandler) {
-    var topic = this.props.tinode.getTopic(params.topicName);
+    const topic = this.props.tinode.getTopic(params.topicName);
     if (!topic) {
       console.log("Topic not found: ", params.topicName);
       return;
@@ -127,13 +188,13 @@ export default class ContextMenu extends React.Component {
 
   // Function is used by context menu to set permissions.
   topicPermissionSetter(mode, params, errorHandler) {
-    var topic = this.props.tinode.getTopic(params.topicName);
+    const topic = this.props.tinode.getTopic(params.topicName);
     if (!topic) {
       console.log("Topic not found", params.topicName);
       return;
     }
 
-    var am, user;
+    let am, user;
     if (params.user) {
       user = topic.subscriber(params.user);
       if (!user) {
@@ -171,16 +232,16 @@ export default class ContextMenu extends React.Component {
     });
 
     // Ensure that menu is inside the app-container.
-    var hSize = 12 * REM_SIZE;
-    var vSize = REM_SIZE * (0.7 + menu.length * 2.5);
-    var left = (this.props.bounds.right - this.props.clickAt.x < hSize) ?
+    const hSize = 12 * REM_SIZE;
+    const vSize = REM_SIZE * (0.7 + menu.length * 2.5);
+    const left = (this.props.bounds.right - this.props.clickAt.x < hSize) ?
         (this.props.clickAt.x - this.props.bounds.left - hSize) :
         (this.props.clickAt.x - this.props.bounds.left);
-    var top = (this.props.bounds.bottom - this.props.clickAt.y < vSize) ?
+    const top = (this.props.bounds.bottom - this.props.clickAt.y < vSize) ?
         (this.props.clickAt.y - this.props.bounds.top - vSize) :
         (this.props.clickAt.y - this.props.bounds.top);
 
-    var position = {
+    const position = {
       left: left + 'px',
       top: top + 'px'
     };
@@ -192,3 +253,5 @@ export default class ContextMenu extends React.Component {
     );
   }
 }
+
+export default injectIntl(ContextMenu);