dependencies updated, breaking change in react-intl fixed

index-dev.html

@@ -34,8 +34,8 @@
     <!-- React-Intl for translations -->
     <script crossorigin="anonymous" src="https://cdn.jsdelivr.net/npm/react-intl@3/dist/react-intl.js"></script>
     <!-- Firebase for push notifications -->
-    <script crossorigin="anonymous" src="https://cdn.jsdelivr.net/npm/firebase@7.14.0/firebase-app.js"></script>
-    <script crossorigin="anonymous" src="https://cdn.jsdelivr.net/npm/firebase@7.14.0/firebase-messaging.js"></script>
+    <script crossorigin="anonymous" src="https://cdn.jsdelivr.net/npm/firebase@7.14.6/firebase-app.js"></script>
+    <script crossorigin="anonymous" src="https://cdn.jsdelivr.net/npm/firebase@7.14.6/firebase-messaging.js"></script>
   </head>
 
   <body>

index.html

@@ -25,8 +25,8 @@
 <script crossorigin="anonymous" src="https://cdn.jsdelivr.net/npm/react@16.13.1/umd/react.production.min.js"></script>
 <script crossorigin="anonymous" src="https://cdn.jsdelivr.net/npm/react-dom@16.13.1/umd/react-dom.production.min.js"></script>
 <script crossorigin="anonymous" src="https://cdn.jsdelivr.net/npm/react-intl@3.12.1/dist/react-intl.min.js"></script>
-<script crossorigin="anonymous" src="https://cdn.jsdelivr.net/npm/firebase@7.14.0/firebase-app.js"></script>
-<script crossorigin="anonymous" src="https://cdn.jsdelivr.net/npm/firebase@7.14.0/firebase-messaging.js"></script>
+<script crossorigin="anonymous" src="https://cdn.jsdelivr.net/npm/firebase@7.14.6/firebase-app.js"></script>
+<script crossorigin="anonymous" src="https://cdn.jsdelivr.net/npm/firebase@7.14.6/firebase-messaging.js"></script>
 </head>
 <body>
 <noscript><div id="noscript-message"><div id="noscript-title">Javascript support is required.</div>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "tinode-webapp",
   "description": "Tinode messenger for the web",
-  "version": "0.16.5",
+  "version": "0.16.6-rc1",
   "repository": {
     "type": "git",
     "url": "https://github.com/tinode/example-react-js.git"
@@ -68,25 +68,25 @@
   "author": "Tinode Authors <info@tinode.co>",
   "license": "Apache-2.0",
   "dependencies": {
-    "firebase": "^7.14.0",
+    "firebase": "^7.14.6",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "react-intl": "^3.12.1",
-    "tinode-sdk": "^0.16.5"
+    "react-intl": "^4.6.9",
+    "tinode-sdk": "^0.16.6-rc1"
   },
   "devDependencies": {
-    "@babel/core": "^7.9.0",
-    "@babel/preset-env": "^7.9.5",
-    "@babel/preset-react": "^7.9.4",
+    "@babel/core": "^7.10.2",
+    "@babel/preset-env": "^7.10.2",
+    "@babel/preset-react": "^7.10.1",
     "babel-loader": "^8.1.0",
-    "babel-plugin-react-intl": "^5.1.18",
-    "browserslist": "^4.11.1",
-    "copy-webpack-plugin": "^5.1.1",
+    "babel-plugin-react-intl": "^7.5.20",
+    "browserslist": "^4.12.0",
+    "copy-webpack-plugin": "^6.0.2",
     "cssnano": "^4.1.10",
-    "postcss": "^7.0.27",
-    "postcss-cli": "^7.1.0",
-    "terser-webpack-plugin": "^2.3.5",
-    "webpack": "^4.42.1",
+    "postcss": "^7.0.32",
+    "postcss-cli": "^7.1.1",
+    "terser-webpack-plugin": "^3.0.3",
+    "webpack": "^4.43.0",
     "webpack-cli": "^3.3.11"
   }
 }

scripts/flatten-messages.js

@@ -25,8 +25,12 @@ let messages = globSync(MESSAGES_PATTERN)
   .map((file) => JSON.parse(file))
   .reduce((collection, descriptors) => {
     descriptors.forEach(({id, defaultMessage}) => {
+      if (!defaultMessage) {
+        return;
+      }
       if (collection.hasOwnProperty(id)) {
-          throw new Error(`Duplicate message id: ${id}`);
+        // Message is already defined.
+        throw new Error(`Duplicate message id: ${id}`);
       }
       collection[id] = defaultMessage;
     });

service-worker.js

@@ -1,6 +1,6 @@
 // Must be located at the root.
-importScripts('https://cdn.jsdelivr.net/npm/firebase@7.14.0/firebase-app.js');
-importScripts('https://cdn.jsdelivr.net/npm/firebase@7.14.0/firebase-messaging.js');
+importScripts('https://cdn.jsdelivr.net/npm/firebase@7.14.6/firebase-app.js');
+importScripts('https://cdn.jsdelivr.net/npm/firebase@7.14.6/firebase-messaging.js');
 importScripts('firebase-init.js');
 
 firebase.initializeApp(FIREBASE_INIT);
@@ -11,6 +11,14 @@ const i18n = {
     'new_message': "New message",
     'new_chat': "New chat",
   },
+  'es': {
+    'new_message': "Nuevo mensaje",
+    'new_chat': "Nueva conversación",
+  },
+  'ko': {
+    'new_message': "새로운 메시지",
+    'new_chat': "새로운 채팅",
+  },
   'ru': {
     'new_message': "Новое сообщение",
     'new_chat': "Новый чат",

src/i18n/en.json

@@ -95,13 +95,14 @@
   "sidepanel_title_reset": "Reset Password",
   "sidepanel_title_archive": "Archived Chats",
   "sidepanel_title_blocked": "Blocked Chats",
-  "update_available": "Update available. <a href=\"\">Reload</a>.",
   "reconnect_countdown": "Disconnected. Reconnecting in {seconds}…",
   "reconnect_now": "Try now",
   "push_init_failed": "Failed to initialize push notifications",
   "invalid_security_token": "Invalid security token",
   "no_connection": "No connection",
   "code_doesnot_match": "Code does not match",
+  "update_available": "Update available.",
+  "reload_update": "Reload",
   "phone_dative": "phone",
   "email_dative": "email",
   "enter_confirmation_code_prompt": "Enter confirmation code sent to you by {method}:",

src/i18n/es.json

@@ -95,7 +95,8 @@
   "sidepanel_title_reset": "Restablecer contraseña",
   "sidepanel_title_archive": "Chats archivados",
   "sidepanel_title_blocked": "Chats bloqueados",
-  "update_available": "Actualización disponible. <a href=\"\">Recargar</a>.",
+  "update_available": "Actualización disponible.",
+  "reload_update": "Recargar",
   "reconnect_countdown": "Desconectado. Reconectando en {seconds}…",
   "reconnect_now": "Reintentar",
   "push_init_failed": "Error al inicializar las notificaciones push",

src/i18n/ko.json

@@ -95,7 +95,8 @@
   "sidepanel_title_reset": "비밀번호재설정",
   "sidepanel_title_archive": "보관된채팅",
   "sidepanel_title_blocked": "차단된채팅",
-  "update_available": "업데이트가능.<a href=\"\">재로드</a>.",
+  "update_available": "업데이트가능.",
+  "reload_update": "재로드",
   "reconnect_countdown": "연결이끊어졌습니다.다시연결하는중{초}…",
   "reconnect_now": "지금시도",
   "push_init_failed": "푸시알림을초기화하지못했습니다",

src/i18n/ru.json

@@ -118,7 +118,8 @@
   "button_create": "Создать",
   "badge_you": "вы",
   "badge_owner": "влад.",
-  "update_available": "Есть новая версия приложения. <a href=\"\">Обновить</a>.",
+  "update_available": "Есть новая версия приложения.",
+  "reload_update": "Обновить",
   "user_not_found": "Не найден",
   "reconnect_countdown": "Нет связи. Подключение через {seconds}…",
   "reconnect_now": "Подключить сейчас.",

src/i18n/zh.json

@@ -66,7 +66,8 @@
   "sidepanel_title_cred": "确认凭据",
   "sidepanel_title_reset": "重置密码",
   "sidepanel_title_archive": "已存档会话",
-  "update_available": "更新可用。<a href=\"\">重新载入</a>.",
+  "update_available": "更新可用。",
+  "reload_update": "重新载入",
   "reconnect_countdown": "连接已断开。{seconds} 秒后重新连接…",
   "reconnect_now": "立即尝试",
   "phone_dative": "电话",

src/messages.json

@@ -96,13 +96,14 @@
     "sidepanel_title_reset": "Reset Password",
     "sidepanel_title_archive": "Archived Chats",
     "sidepanel_title_blocked": "Blocked Chats",
-    "update_available": "Update available. <a href=\"\">Reload</a>.",
     "reconnect_countdown": "Disconnected. Reconnecting in {seconds}…",
     "reconnect_now": "Try now",
     "push_init_failed": "Failed to initialize push notifications",
     "invalid_security_token": "Invalid security token",
     "no_connection": "No connection",
     "code_doesnot_match": "Code does not match",
+    "update_available": "Update available.",
+    "reload_update": "Reload",
     "phone_dative": "phone",
     "email_dative": "email",
     "enter_confirmation_code_prompt": "Enter confirmation code sent to you by {method}:",
@@ -269,7 +270,8 @@
     "sidepanel_title_reset": "Restablecer contraseña",
     "sidepanel_title_archive": "Chats archivados",
     "sidepanel_title_blocked": "Chats bloqueados",
-    "update_available": "Actualización disponible. <a href=\"\">Recargar</a>.",
+    "update_available": "Actualización disponible.",
+    "reload_update": "Recargar",
     "reconnect_countdown": "Desconectado. Reconectando en {seconds}…",
     "reconnect_now": "Reintentar",
     "push_init_failed": "Error al inicializar las notificaciones push",
@@ -440,7 +442,8 @@
     "sidepanel_title_reset": "비밀번호재설정",
     "sidepanel_title_archive": "보관된채팅",
     "sidepanel_title_blocked": "차단된채팅",
-    "update_available": "업데이트가능.<a href=\"\">재로드</a>.",
+    "update_available": "업데이트가능.",
+    "reload_update": "재로드",
     "reconnect_countdown": "연결이끊어졌습니다.다시연결하는중{초}…",
     "reconnect_now": "지금시도",
     "push_init_failed": "푸시알림을초기화하지못했습니다",
@@ -635,7 +638,8 @@
     "button_create": "Создать",
     "badge_you": "вы",
     "badge_owner": "влад.",
-    "update_available": "Есть новая версия приложения. <a href=\"\">Обновить</a>.",
+    "update_available": "Есть новая версия приложения.",
+    "reload_update": "Обновить",
     "user_not_found": "Не найден",
     "reconnect_countdown": "Нет связи. Подключение через {seconds}…",
     "reconnect_now": "Подключить сейчас.",
@@ -756,7 +760,8 @@
     "sidepanel_title_cred": "确认凭据",
     "sidepanel_title_reset": "重置密码",
     "sidepanel_title_archive": "已存档会话",
-    "update_available": "更新可用。<a href=\"\">重新载入</a>.",
+    "update_available": "更新可用。",
+    "reload_update": "重新载入",
     "reconnect_countdown": "连接已断开。{seconds} 秒后重新连接…",
     "reconnect_now": "立即尝试",
     "phone_dative": "电话",

src/version.js

@@ -1,3 +1,3 @@
 // This is a generated file. Don't edit.
 
-export const PACKAGE_VERSION = "0.16.5";
+export const PACKAGE_VERSION = "0.16.6-rc1";

src/views/contacts-view.jsx

@@ -1,6 +1,6 @@
 /* ContactsView holds all contacts-related stuff */
 import React from 'react';
-import { FormattedHTMLMessage, defineMessages } from 'react-intl';
+import { FormattedMessage, defineMessages } from 'react-intl';
 
 import ContactList from '../widgets/contact-list.jsx';
 
@@ -85,7 +85,7 @@ export default class ContactsView extends React.Component {
 
   render() {
     return (
-      <FormattedHTMLMessage id="contacts_not_found"
+      <FormattedMessage id="contacts_not_found"
         defaultMessage="You have no chats<br />¯∖_(ツ)_/¯"
         description="HTML message shown in ContactList when no contacts are found">{
         (no_contacts) => <ContactList
@@ -99,7 +99,7 @@ export default class ContactsView extends React.Component {
           onTopicSelected={this.props.onTopicSelected}
           showContextMenu={this.props.showContextMenu}
           onAction={this.handleAction} />
-      }</FormattedHTMLMessage>
+      }</FormattedMessage>
     );
   }
 };

src/views/tinode-web.jsx

@@ -1,7 +1,7 @@
 // The top-level class to hold all functionality together.
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { defineMessages, injectIntl } from 'react-intl';
+import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
 
 import * as firebase from 'firebase/app';
 import 'firebase/messaging';
@@ -28,11 +28,6 @@ import { updateFavicon } from '../lib/utils.js';
 const POP_SOUND = new Audio('audio/msg.mp3');
 
 const messages = defineMessages({
-  update_available: {
-    id: 'update_available',
-    defaultMessage: 'Update available. <a href="">Reload</a>.',
-    description: 'Message shown when an app update is available.'
-  },
   reconnect_countdown: {
     id: 'reconnect_countdown',
     defaultMessage: 'Disconnected. Reconnecting in {seconds}…',
@@ -306,12 +301,19 @@ class TinodeWeb extends React.Component {
 
   // Check if a newer version of TinodeWeb app is available at the server.
   checkForAppUpdate(reg) {
-    const {formatHTMLMessage} = this.props.intl;
     reg.onupdatefound = () => {
       const installingWorker = reg.installing;
       installingWorker.onstatechange = () => {
         if (installingWorker.state == 'installed' && navigator.serviceWorker.controller) {
-          this.handleError(formatHTMLMessage(messages.update_available), 'info');
+          const msg = <>
+            <FormattedMessage id="update_available"
+              defaultMessage="Update available."
+              description="Message shown when an app update is available." /> <a href="">
+              <FormattedMessage id="reload_update"
+                defaultMessage="Reload"
+                description="Call to action to reload application when update is available." />
+            </a>.</>;
+          this.handleError(msg, 'info');
         }
       }
     }
@@ -427,19 +429,19 @@ class TinodeWeb extends React.Component {
       return;
     }
 
-    const {formatHTMLMessage} = this.props.intl;
+    const {formatMessage} = this.props.intl;
     let count = sec / 1000;
     count = count | count;
     this.reconnectCountdown = setInterval(() => {
       const timeLeft = (count > 99) ? secondsToTime(count) : count;
       this.handleError(
-        formatHTMLMessage(messages.reconnect_countdown, {seconds: timeLeft}),
+        formatMessage(messages.reconnect_countdown, {seconds: timeLeft}),
         'warn',
         () => {
           clearInterval(this.reconnectCountdown);
           this.tinode.reconnect();
         },
-        formatHTMLMessage(messages.reconnect_now)
+        formatMessage(messages.reconnect_now)
       );
       count -= 1;
     }, 1000);

src/widgets/error-panel.jsx

@@ -36,7 +36,7 @@ export default class ErrorPanel extends React.PureComponent {
       <div className={className}>
         <div className="icon"><i className="material-icons">{level}</i></div>
         <span>
-          <span dangerouslySetInnerHTML={{__html: this.props.text}} />
+          {this.props.text}
           {this.props.action ?
             <>
               &#32;<a href="#"

webpack.config.js

@@ -52,9 +52,11 @@ module.exports = (env, argv) => {
       maxAssetSize: 262144
     },
     plugins: [
-      new CopyPlugin([
-        { from: `node_modules/tinode-sdk/umd/tinode.${mode}.js`, to: `tinode.${mode}.js` },
-      ]),
+      new CopyPlugin({
+        patterns: [
+          { from: `node_modules/tinode-sdk/umd/tinode.${mode}.js`, to: `tinode.${mode}.js` },
+        ],
+      }),
     ],
     externals: {
       'react': 'React',