chore: upgrade i18Next to v21 (#1390)

Upgrade dependency i18next to v21 and refactor impacted code.

Author: zacheryconverse

.github/workflows/ci.yml

@@ -54,12 +54,12 @@ jobs:
           E2E_APP_SECRET: ${{ secrets.E2E_APP_SECRET }}
           E2E_TEST_USER_1_TOKEN: ${{ secrets.E2E_TEST_USER_1_TOKEN }}
           E2E_TEST_USER_2_TOKEN: ${{ secrets.E2E_TEST_USER_2_TOKEN }}
-  
+
   test:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node: [10, 12, 14]
+        node: [14, 16]
     name: Test with Node ${{ matrix.node }}
     steps:
       - uses: actions/checkout@v2
@@ -82,4 +82,4 @@ jobs:
         run: |
           yarn lint
           yarn coverage
-          yarn validate-translations
+          yarn validate-translations

babel.i18next-extract.js

@@ -0,0 +1,14 @@
+// https://github.com/i18next/i18next-parser#options
+module.exports = {
+  createOldCatalogs: false,
+  input: ['./src/**/*.{tsx,ts}'],
+  keySeparator: false,
+  locales: ['de', 'en', 'es', 'fr', 'hi', 'it', 'ja', 'ko', 'nl', 'pt', 'ru', 'tr'],
+  namespaceSeparator: false,
+  output: 'src/i18n/$LOCALE.json',
+  sort(a, b) {
+    return a < b ? -1 : 1; // alfabetical order
+  },
+  useKeysAsDefaultValue: true,
+  verbose: true,
+};

i18next-parser.config.js

@@ -32,7 +32,7 @@
     "dayjs": "^1.10.4",
     "emoji-mart": "3.0.1",
     "emoji-regex": "^9.2.0",
-    "i18next": "^19.8.4",
+    "i18next": "^21.6.14",
     "isomorphic-ws": "^4.0.1",
     "linkifyjs": "^2.1.9",
     "lodash.debounce": "^4.0.8",
@@ -110,7 +110,6 @@
     "babel-eslint": "^10.1.0",
     "babel-jest": "^26.3.0",
     "babel-loader": "8.2.2",
-    "babel-plugin-i18next-extract": "^0.8.2",
     "babel-plugin-module-resolver": "^4.1.0",
     "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
     "codecov": "^3.8.1",
@@ -140,6 +139,7 @@
     "file-loader": "^6.2.0",
     "htmlparser2": "^5.0.1",
     "husky": "^4.3.0",
+    "i18next-parser": "^6.0.0",
     "jest": "^26.6.3",
     "jest-axe": "^5.0.1",
     "moment": "^2.29.1",
@@ -180,7 +180,7 @@
     "build": "rm -rf dist && mkdir -p dist/assets assets && yarn --silent copy-version && yarn build-translations && yarn types && yarn bundle",
     "bundle": "rollup -c",
     "bundle-size": "BUNDLE_SIZE=true yarn bundle",
-    "build-translations": "rm -rf .tmpi18ncache || true && mkdir .tmpi18ncache && yarn run babel --config-file ./babel.i18next-extract.js --extensions '.ts','.tsx','.js','.jsx' 'src/**/*.{js,jsx,ts,tsx}' --out-dir '.tmpi18ncache/' && rm -rf .tmpi18ncache && prettier --write 'src/i18n/*.{js,jsx,ts,tsx,json}'",
+    "build-translations": "i18next",
     "copy-version": "echo '\u001b[34mℹ\u001b[0m Copying Version to \u001b[34msrc/version.ts\u001b[0m' && PACKAGE_VERSION=$(node -pe 'require(`./package.json`).version') && PACKAGE_STRING=\"'$PACKAGE_VERSION'\" && echo 'export const version = '$PACKAGE_STRING';' > src/version.ts && echo '\u001b[32m✓\u001b[0m Done Copying Version'",
     "coverage": "jest --collectCoverage && codecov",
     "eslint": "eslint '**/*.{js,md,ts,jsx,tsx}' --max-warnings 0",

package.json

@@ -7,7 +7,7 @@ export const MenuIcon = ({ title }: { title?: string }) => {
 
   return (
     <svg data-testid='menu-icon' viewBox='0 0 448 512' xmlns='http://www.w3.org/2000/svg'>
-      <title>{title || t('Menu')}</title>
+      <title>{title ?? t('Menu')}</title>
       <path
         d='M0 88C0 74.75 10.75 64 24 64H424C437.3 64 448 74.75 448 88C448 101.3 437.3 112 424 112H24C10.75 112 0 101.3 0 88zM0 248C0 234.7 10.75 224 24 224H424C437.3 224 448 234.7 448 248C448 261.3 437.3 272 424 272H24C10.75 272 0 261.3 0 248zM424 432H24C10.75 432 0 421.3 0 408C0 394.7 10.75 384 24 384H424C437.3 384 448 394.7 448 408C448 421.3 437.3 432 424 432z'
         fill='currentColor'

src/components/ChannelHeader/icons.tsx

@@ -18,41 +18,26 @@ const UnMemoizedMessageRepliesCountButton: React.FC<MessageRepliesCountButtonPro
 
   const { t } = useTranslationContext('MessageRepliesCountButton');
 
-  let singleReplyText;
-  let pluralReplyText;
-
-  if (reply_count === 1) {
-    if (labelSingle) {
-      singleReplyText = `1 ${labelSingle}`;
-    } else {
-      singleReplyText = t('1 reply');
-    }
-  }
+  if (!reply_count) return null;
 
-  if (reply_count && reply_count > 1) {
-    if (labelPlural) {
-      pluralReplyText = `${reply_count} ${labelPlural}`;
-    } else {
-      pluralReplyText = t('{{ replyCount }} replies', {
-        replyCount: reply_count,
-      });
-    }
-  }
+  let replyCountText = t('replyCount', { count: reply_count });
 
-  if (reply_count && reply_count !== 0) {
-    return (
-      <button
-        className='str-chat__message-replies-count-button'
-        data-testid='replies-count-button'
-        onClick={onClick}
-      >
-        <ReplyIcon />
-        {reply_count === 1 ? singleReplyText : pluralReplyText}
-      </button>
-    );
+  if (labelPlural && reply_count > 1) {
+    replyCountText = `${reply_count} ${labelPlural}`;
+  } else if (labelSingle) {
+    replyCountText = `1 ${labelSingle}`;
   }
 
-  return null;
+  return (
+    <button
+      className='str-chat__message-replies-count-button'
+      data-testid='replies-count-button'
+      onClick={onClick}
+    >
+      <ReplyIcon />
+      {replyCountText}
+    </button>
+  );
 };
 
 export const MessageRepliesCountButton = React.memo(

src/components/Message/MessageRepliesCountButton.tsx

@@ -2,17 +2,19 @@ import React from 'react';
 import { cleanup, fireEvent, render } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { MessageRepliesCountButton } from '../MessageRepliesCountButton';
-import { TranslationContext } from '../../../context';
+import { TranslationProvider } from '../../../context';
 
 const onClickMock = jest.fn();
+const defaultSingularText = '1 reply';
+const defaultPluralText = '2 replies';
 
-const i18nMock = (key) => key;
+const i18nMock = (key, { count }) => (count > 1 ? defaultPluralText : defaultSingularText);
 
 const renderComponent = (props) =>
   render(
-    <TranslationContext.Provider value={{ t: i18nMock }}>
+    <TranslationProvider value={{ t: i18nMock }}>
       <MessageRepliesCountButton {...props} onClick={onClickMock} />
-    </TranslationContext.Provider>,
+    </TranslationProvider>,
   );
 
 describe('MessageRepliesCountButton', () => {
@@ -24,27 +26,27 @@ describe('MessageRepliesCountButton', () => {
   it('should render the right text when there is one reply, and labelSingle is not defined', () => {
     const { getByText } = renderComponent({ reply_count: 1 });
 
-    expect(getByText('1 reply')).toBeInTheDocument();
+    expect(getByText(defaultSingularText)).toBeInTheDocument();
   });
 
   it('should render the right text when there is one reply, and labelSingle is defined', () => {
-    const labelSingle = 'text';
-    const { getByText } = renderComponent({ labelSingle, reply_count: 1 });
+    const customSingularLabel = 'text';
+    const { getByText } = renderComponent({ labelSingle: customSingularLabel, reply_count: 1 });
 
-    expect(getByText(`1 ${labelSingle}`)).toBeInTheDocument();
+    expect(getByText(`1 ${customSingularLabel}`)).toBeInTheDocument();
   });
 
   it('should render the right text when there is more than one reply, and labelPlural is not defined', () => {
     const { getByText } = renderComponent({ reply_count: 2 });
 
-    expect(getByText('{{ replyCount }} replies')).toBeInTheDocument();
+    expect(getByText(defaultPluralText)).toBeInTheDocument();
   });
 
   it('should render the right text when there is more than one reply, and labelPlural is defined', () => {
-    const labelPlural = 'text';
-    const { getByText } = renderComponent({ labelPlural, reply_count: 2 });
+    const customPluralLabel = 'text';
+    const { getByText } = renderComponent({ labelPlural: customPluralLabel, reply_count: 2 });
 
-    expect(getByText(`2 ${labelPlural}`)).toBeInTheDocument();
+    expect(getByText(`2 ${customPluralLabel}`)).toBeInTheDocument();
   });
 
   it('should call the onClick prop if the button is clicked', () => {

src/components/Message/__tests__/MessageRepliesCountButton.test.js

@@ -81,10 +81,7 @@ const DefaultThreadHeader = <
 
   const getReplyCount = () => {
     if (!thread.reply_count) return '';
-    if (thread.reply_count === 1) return t('1 reply');
-    return t('{{ replyCount }} replies', {
-      replyCount: thread.reply_count,
-    });
+    return t('replyCount', { count: thread.reply_count });
   };
 
   return (

src/components/Thread/Thread.tsx

@@ -71,7 +71,11 @@ const channelActionContextMock = {
   loadMoreThread: jest.fn(() => Promise.resolve()),
 };
 
-const i18nMock = jest.fn((key) => key);
+const i18nMock = jest.fn((key, props) => {
+  if (key === 'replyCount' && props.count === 1) return '1 reply';
+  else if (key === 'replyCount' && props.count > 1) return '2 replies';
+  return key;
+});
 
 const renderComponent = ({
   chatClient,
@@ -112,10 +116,10 @@ describe('Thread', () => {
   it('should render the reply count', () => {
     const { getByText } = renderComponent({ chatClient });
 
-    expect(i18nMock).toHaveBeenCalledWith('{{ replyCount }} replies', {
-      replyCount: threadStart.reply_count,
+    expect(i18nMock).toHaveBeenCalledWith('replyCount', {
+      count: threadStart.reply_count,
     });
-    expect(getByText('{{ replyCount }} replies')).toBeInTheDocument();
+    expect(getByText('2 replies')).toBeInTheDocument();
   });
 
   it('should render the message that starts the thread', () => {

src/components/Thread/__tests__/Thread.test.js

@@ -1,5 +1,4 @@
 {
-  "1 reply": "1 Antwort",
   "Attach files": "Dateien anhängen",
   "Cancel": "Stornieren",
   "Channel Missing": "Kanal fehlt",
@@ -61,13 +60,14 @@
   "You have no channels currently": "Du hast momentan noch keinen Channels",
   "You've reached the maximum number of files": "Die maximale Dateianzahl ist erreicht",
   "live": "live",
+  "replyCount_one": "1 Antwort",
+  "replyCount_other": "{{ count }} Antworten",
   "this content could not be displayed": "Dieser Inhalt konnte nicht angezeigt werden",
   "{{ commaSeparatedUsers }} and {{ moreCount }} more": "{{ commaSeparatedUsers }} und {{moreCount}} Mehr",
   "{{ commaSeparatedUsers }}, and {{ lastUser }}": "{{ commaSeparatedUsers }} und {{ lastUser }}",
   "{{ firstUser }} and {{ secondUser }}": "{{ firstUser }} und {{ secondUser }}",
   "{{ imageCount }} more": "{{ imageCount }} mehr",
   "{{ memberCount }} members": "{{ memberCount }} Mitglieder",
-  "{{ replyCount }} replies": "{{ replyCount }} Antworten",
   "{{ user }} has been muted": "{{ user }} wurde stummgeschaltet",
   "{{ user }} has been unmuted": "{{ user }} wurde nicht stummgeschaltet",
   "{{ watcherCount }} online": "{{ watcherCount }} online",