Add translation support using i18next #681

Airyzz · 2022-07-14T10:03:59Z

Description

Adds support for new languages as per #164

Adds i18next, i18next-browser-languagedetector, i18next-http-backend, react-i18next as dependencies

Type of change

New feature (non-breaking change which adds functionality)

Checklist:

My code follows the style guidelines of this project
I have performed a self-review of my own code
I have commented my code, particularly in hard-to-understand areas
I have made corresponding changes to the documentation
My changes generate no new warnings

Preview: https://62fa1243e46824314616a3e3--pr-cinny.netlify.app
⚠️ Exercise caution. Use test accounts. ⚠️

Only implemented to a few pages as an example, looking to get feedback. I do not know japanese, I just used google translate to translate a few words as an example - is most likely incorrect

Implemented the change to SpaceSettings as an example.

This reverts commit 1ed9d6d.

There was a 'jp' translation that I used to test

Airyzz · 2022-07-16T15:48:23Z

It seems the netlify preview 404s when trying to retrieve the translation.json file. Is this a problem with the netlify set up or something that I need to fix?

menturion · 2022-07-16T16:44:44Z

Did you check whether the path given in the 404 error corresponds with the path you expected to be set within the code?

Airyzz · 2022-07-16T23:29:06Z

Its the same path that gets requested when running locally, but netlify 404s while running locally works fine. If somebody could test running on their machine that might help to narrow to down?

Airyzz · 2022-07-17T01:35:02Z

I think it might actually be an issue with the webpack, looking in to it now

kfiven · 2022-07-17T04:31:24Z

You need to copy them to dist directory during build, see

cinny/webpack.common.js

Line 71 in 1979646

new CopyPlugin({

Airyzz · 2022-07-17T04:37:29Z

At the moment I have it working using i18next-loader, would it be preferable to copy?

cinny/webpack.common.js

Line 52 in ef31851

test: /locales/,

kfiven · 2022-07-17T04:46:33Z

No, you are doing it right with i18next-loader.

Chatner-Dev · 2022-08-02T14:31:48Z

That is such a needed feature, cant wait for merge

Added to Auth.jsx and Client.jsx

Created a <Twemojify> component which can be passed through translation as a component, which then twemojify's the user name after translation

ajbura

Thanks. BTW please don't such big PR in future. 🙏

src/app/molecules/image-pack/ImagePack.jsx

src/app/molecules/message/Message.jsx

src/app/molecules/room-members/RoomMembers.jsx

src/app/organisms/invite-user/InviteUser.jsx

ajbura · 2022-08-15T05:19:15Z

src/app/organisms/settings/CrossSigning.jsx

-const failedDialog = () => {
-  const renderFailure = (requestClose) => (
-    <div className="cross-signing__failure">
-      <Text variant="h1">{twemojify('❌')}</Text>
-      <Text weight="medium">Failed to setup cross signing. Please try again.</Text>
-      <Button onClick={requestClose}>Close</Button>
-    </div>
-  );
+import '../../i18n';

-  openReusableDialog(
-    <Text variant="s1" weight="medium">Setup cross signing</Text>,
-    renderFailure,
-  );
-};
+function CrossSigningSetup() {
+  const { t } = useTranslation();

-const securityKeyDialog = (key) => {
-  const downloadKey = () => {
-    const blob = new Blob([key.encodedPrivateKey], {
-      type: 'text/plain;charset=us-ascii',
-    });
-    FileSaver.saveAs(blob, 'security-key.txt');
-  };
-  const copyKey = () => {
-    copyToClipboard(key.encodedPrivateKey);
-  };
+  const initialValues = { phrase: '', confirmPhrase: '' };
+  const [genWithPhrase, setGenWithPhrase] = useState(undefined);

-  const renderSecurityKey = () => (
-    <div className="cross-signing__key">
-      <Text weight="medium">Please save this security key somewhere safe.</Text>
-      <Text className="cross-signing__key-text">
-        {key.encodedPrivateKey}
-      </Text>
-      <div className="cross-signing__key-btn">
-        <Button variant="primary" onClick={() => copyKey(key)}>Copy</Button>
-        <Button onClick={() => downloadKey(key)}>Download</Button>
+  const failedDialog = () => {
+    const renderFailure = (requestClose) => (
+      <div className="cross-signing__failure">
+        <Text variant="h1">{twemojify('❌')}</Text>
+        <Text weight="medium">{t('Organisms.CrossSigning.setup_failed')}</Text>
+        <Button onClick={requestClose}>{t('common.close')}</Button>
      </div>
-    </div>
-  );
+    );

-  // Download automatically.
-  downloadKey();
+    openReusableDialog(
+      <Text variant="s1" weight="medium">{t('Organisms.CrossSigning.setup')}</Text>,
+      renderFailure,
+    );
+  };

-  openReusableDialog(
-    <Text variant="s1" weight="medium">Security Key</Text>,
-    () => renderSecurityKey(),
-  );
-};


Can't we do translation without moving these inside component?

I think it needs to be inside component for the t() hook to function properly. Is there a particular reason to not have these inside component?

you can use t(), but <Trans i18nKey="" /> seems to work

src/app/organisms/settings/DeviceManage.jsx

2-www · 2022-10-03T18:55:24Z

hi! sorry, i am new to web dev, what program would i use to translate this format?

Airyzz · 2022-10-04T07:31:11Z

hi! sorry, i am new to web dev, what program would i use to translate this format?

At the moment we dont have a translation platform set up. It will be easier if you wait for that to be finalised, but if you want to work on it right now, just fork this repo and the language files are just .json so you can edit with any text editor

notramo · 2022-10-06T10:12:56Z

@aybura Could you please use the open-source Weblate platform for translating this? Using closed platforms like Transifex or Crowdin prevents some potential translators to contribute (including myself as I have a Weblate account, but not Transifex or Crowdin).

Airyzz · 2022-10-07T04:19:11Z

@notramo discussion involving translation platforms has been taking place in #164

Maders · 2022-10-16T11:12:41Z

Hi,
@ajbura According to your last review comments, which were from 2 months ago, have you any plans to merge this PR?

aceArt-GmbH · 2023-12-07T14:08:48Z

@Airyzz could you perhaps rebase this PR to a more recent commit (doesn't have to be latest), or at least squash your commits?
Thanks for your work on this

Dylan Van Nielen and others added 11 commits June 14, 2022 18:15

Add translation example

9f921bd

Only implemented to a few pages as an example, looking to get feedback. I do not know japanese, I just used google translate to translate a few words as an example - is most likely incorrect

Added translation to Tabs

1ed9d6d

Implemented the change to SpaceSettings as an example.

Revert "Added translation to Tabs"

8c77495

This reverts commit 1ed9d6d.

Implemented translation to all organisms

7bb187b

Added "Organisms." prefix to translations for organims

09c7aa9

Removed test translation file

71bc3ea

There was a 'jp' translation that I used to test

Added translation to all molecules

3668342

Fix code style

41ff8db

Fixed more code style

1ce26a7

Merge branch 'dev' into dev

05fc88a

Fix merge error

5ec5421

Added i18next-loader to webpack

ef31851

Merge branch 'dev' into dev

db73ced

ajbura self-requested a review August 3, 2022 14:31

Airyzz and others added 8 commits August 6, 2022 17:09

Added translation to templates

62c92d5

Added to Auth.jsx and Client.jsx

Merge branch 'dev' of https://github.com/Airyzz/cinny into dev

cf901fa

Resolve conflicts in package/lock json

af506a6

Merge branch 'dev' into dev

4676280

Fixed invalid keys in SecretStorageAccess

4e07079

Fixed issue when user display names containing emoji are translated

7627d43

Created a <Twemojify> component which can be passed through translation as a component, which then twemojify's the user name after translation

Added translation to custom emoji + stickers

e460010

Merge branch 'dev' into dev

192c1bd

ajbura reviewed Aug 15, 2022

View reviewed changes

Airyzz added 5 commits August 15, 2022 18:41

Fix unnecessary translation in ImagePack

ab91e26

Fix incorrect translation key

1ba6ccc

Fix merge error

2b048c5

Fix merge error

07b3115

Remove translation from message reaction tooltip

0360702

Airyzz requested a review from ajbura August 19, 2022 00:44

This was referenced Dec 8, 2023

Add translation support using i18next #1576

Merged

Allow for translation #164

Open

This was referenced Dec 15, 2023

Translate Part1 #1590

Closed

Translate Part2 #1591

Closed

Translate Part3 #1594

Closed

Translate Part4 #1595

Closed

Translate Part 5 #1601

Closed

Translate Part 6 #1602

Closed

Translate Part 7 #1605

Closed

aceArt-GmbH mentioned this pull request Dec 26, 2023

Internationalization #1610

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add translation support using i18next #681

Add translation support using i18next #681

Airyzz commented Jul 14, 2022 •

edited by github-actions bot

Loading

Airyzz commented Jul 16, 2022

menturion commented Jul 16, 2022

Airyzz commented Jul 16, 2022

Airyzz commented Jul 17, 2022

kfiven commented Jul 17, 2022

Airyzz commented Jul 17, 2022 •

edited

Loading

kfiven commented Jul 17, 2022

Chatner-Dev commented Aug 2, 2022

ajbura left a comment

ajbura Aug 15, 2022

Airyzz Aug 15, 2022

aceArt-GmbH Dec 19, 2023

2-www commented Oct 3, 2022

Airyzz commented Oct 4, 2022

notramo commented Oct 6, 2022

Airyzz commented Oct 7, 2022

Maders commented Oct 16, 2022

aceArt-GmbH commented Dec 7, 2023

Add translation support using i18next #681

Are you sure you want to change the base?

Add translation support using i18next #681

Conversation

Airyzz commented Jul 14, 2022 • edited by github-actions bot Loading

Description

Type of change

Checklist:

Airyzz commented Jul 16, 2022

menturion commented Jul 16, 2022

Airyzz commented Jul 16, 2022

Airyzz commented Jul 17, 2022

kfiven commented Jul 17, 2022

Airyzz commented Jul 17, 2022 • edited Loading

kfiven commented Jul 17, 2022

Chatner-Dev commented Aug 2, 2022

ajbura left a comment

Choose a reason for hiding this comment

ajbura Aug 15, 2022

Choose a reason for hiding this comment

Airyzz Aug 15, 2022

Choose a reason for hiding this comment

aceArt-GmbH Dec 19, 2023

Choose a reason for hiding this comment

2-www commented Oct 3, 2022

Airyzz commented Oct 4, 2022

notramo commented Oct 6, 2022

Airyzz commented Oct 7, 2022

Maders commented Oct 16, 2022

aceArt-GmbH commented Dec 7, 2023

Airyzz commented Jul 14, 2022 •

edited by github-actions bot

Loading

Airyzz commented Jul 17, 2022 •

edited

Loading