Tranlsate missing toast message

client/package.json

@@ -22,7 +22,7 @@
     "react": "^16.4.0",
     "react-click-outside": "^3.0.1",
     "react-dom": "^16.4.0",
-    "react-i18next": "^8.1.1",
+    "react-i18next": "^8.2.0",
     "react-modal": "^3.4.5",
     "react-redux": "^5.0.7",
     "react-redux-loading-bar": "^4.0.7",

client/src/__locales/vi.js

@@ -92,7 +92,8 @@ export default {
         '# Also a comment': '# Cũng là một chú thích',
         'All filters are already up-to-date': 'Tất cả bộ lọc đã được cập nhật',
         'Updated the upstream DNS servers': 'Đã cập nhật máy chủ DNS tìm kiếm',
-        'Specified DNS servers are working correctly': 'Máy chủ DNS đang hoạt động',
+        'Specified DNS servers are working correctly': 'Máy chủ DNS có thể sử dụng',
+        'Server "{{key}}": could not be used, please check that you\'ve written it correctly': 'Máy chủ "{{key}}": không thể sử dụng, vui lòng kiểm tra bạn đã điền chính xác',
         // Logs
         Unblock: 'Bỏ chặn',
         Block: 'Chặn',

client/src/actions/index.js

@@ -1,5 +1,6 @@
 import { createAction } from 'redux-actions';
 import round from 'lodash/round';
+import { t } from 'i18next';
 import { showLoading, hideLoading } from 'react-redux-loading-bar';
 
 import { normalizeHistory, normalizeFilteringStatus, normalizeLogs } from '../helpers/helpers';
@@ -476,7 +477,7 @@ export const testUpstream = servers => async (dispatch) => {
         const testMessages = Object.keys(upstreamResponse).map((key) => {
             const message = upstreamResponse[key];
             if (message !== 'OK') {
-                dispatch(addErrorToast({ error: `Server "${key}": could not be used, please check that you've written it correctly` }));
+                dispatch(addErrorToast({ error: t('Server "{{key}}": could not be used, please check that you\'ve written it correctly', { key }) }));
             }
             return message;
         });

client/src/i18n.js

@@ -1,11 +1,13 @@
 
 import i18n from 'i18next';
 import { reactI18nextModule } from 'react-i18next';
+import { initReactI18n } from 'react-i18next/hooks';
 import langDetect from 'i18next-browser-languagedetector';
 import viResource from './__locales/vi';
 
 i18n
     .use(langDetect)
+    .use(initReactI18n)
     .use(reactI18nextModule) // passes i18n down to react-i18next
     .init({
         resources: {