fix formatjs setup, #62

.babelrc

@@ -1,4 +1,13 @@
 {
   "presets": ["@babel/preset-react", "@babel/preset-env"],
   "comments": false,
+  "plugins": [
+    [
+      "formatjs",
+      {
+        "idInterpolationPattern": "[sha512:contenthash:base64:6]",
+        "ast": true
+      }
+    ]
+  ]
 }

package.json

@@ -67,8 +67,8 @@
     "@babel/core": "^7.12.10",
     "@babel/preset-env": "^7.12.11",
     "@babel/preset-react": "^7.12.10",
-    "@formatjs/cli": "^3.0.1",
     "babel-loader": "^8.2.2",
+    "babel-plugin-formatjs": "^9.0.2",
     "browserslist": "^4.16.1",
     "copy-webpack-plugin": "^6.4.1",
     "cssnano": "^4.1.10",

src/views/tinode-web.jsx

@@ -240,7 +240,7 @@ class TinodeWeb extends React.Component {
           console.log("Failed to register service worker:", err);
         });
       } catch (err) {
-        this.handleError(formatMessage({id: 'push_init_failed'}), 'err');
+        this.handleError(formatMessage(messages.push_init_failed), 'err');
         console.log("Failed to initialize push notifications", err);
         this.setState({desktopAlertsEnabled: false});
       }
@@ -361,7 +361,7 @@ class TinodeWeb extends React.Component {
     if (online) {
       this.handleError();
     } else {
-      this.handleError(this.props.intl.formatMessage({id: 'no_connection'}), 'warn');
+      this.handleError(this.props.intl.formatMessage(messages.no_connection), 'warn');
     }
     this.setState({liveConnection: online});
   }
@@ -484,7 +484,7 @@ class TinodeWeb extends React.Component {
         if (ctrl.code >= 300 && ctrl.text === 'validate credentials') {
           this.setState({loadSpinnerVisible: false});
           if (cred) {
-            this.handleError(this.props.intl.formatMessage({id: 'code_doesnot_match'}), 'warn');
+            this.handleError(this.props.intl.formatMessage(messages.code_doesnot_match), 'warn');
           }
           this.handleCredentialsRequest(ctrl.params);
         } else {
@@ -1375,7 +1375,7 @@ class TinodeWeb extends React.Component {
   handleResetPassword(scheme, newPassword, token) {
     token = base64ReEncode(token);
     if (!token) {
-      this.handleError(this.props.intl.formatMessage({id: 'invalid_security_token'}), 'err');
+      this.handleError(this.props.intl.formatMessage(messages.invalid_security_token), 'err');
     } else {
       this.tinode.connect()
         .then(() => {

src/widgets/context-menu.jsx

@@ -107,7 +107,7 @@ class ContextMenu extends React.Component {
         title: formatMessage(messages.clear_messages),
         handler: (params, errorHandler) => {
           return props.onShowAlert(
-            formatMessage({id: 'menu_item_clear_messages'}), // title
+            formatMessage(messages.menu_item_clear_messages), // title
             formatMessage({id: 'clear_messages_warning'}), // content
             (() => { this.deleteMessages(true, false, params, errorHandler); }), // onConfirm
             null, // "OK"
@@ -121,7 +121,7 @@ class ContextMenu extends React.Component {
         title: formatMessage(messages.clear_for_all),
         handler: (params, errorHandler) => {
           return props.onShowAlert(
-            formatMessage({id: 'menu_item_clear_messages_for_all'}), // title
+            formatMessage(messages.menu_item_clear_messages_for_all), // title
             formatMessage({id: 'delete_messages_warning'}), // content
             (() => { return this.deleteMessages(true, true, params, errorHandler); }),
             null, // "OK"
@@ -171,7 +171,7 @@ class ContextMenu extends React.Component {
         title: formatMessage(messages.block),
         handler: (params, errorHandler) => {
           return props.onShowAlert(
-            formatMessage({id: 'menu_item_block'}), // title
+            formatMessage(messages.menu_item_block), // title
             formatMessage(messages.topic_block_warning), // content
             (() => {
               return this.topicPermissionSetter('-JP', params, errorHandler).then((ctrl) => {
@@ -190,7 +190,7 @@ class ContextMenu extends React.Component {
         title: formatMessage(messages.topic_delete),
         handler: (params, errorHandler) => {
           return props.onShowAlert(
-            formatMessage({id: 'menu_item_delete_topic'}), // title
+            formatMessage(messages.menu_item_delete_topic), // title
             formatMessage(messages.topic_delete_warning), // content
             (() => {
               const topic = this.props.tinode.getTopic(params.topicName);