feat(i18n): initial setup #711

pavanjoshi914 · 2022-03-19T12:12:57Z

Solves #600

Type of change

New feature (non-breaking change which adds functionality)

Describe the changes you have made in this PR -

setup i18next react-i18next browser-language-detector
create locale switcher
styling for both light and dark mode
translate heading
enable JSON imports in config
language persistence throughout the component
language persistence between different sessions
browser language detections
format JSON translation file using built-in eslint JSON formatted and run automated using lintstaged

Screenshots of the changes (If any) -

Updates

locale switcher shifted under settings

locale switcher on Intro shown only under development mode
store locale in extension's storage as well

How Has This Been Tested?

Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration

Checklist:

My code follows the style guidelines of this project and performed a self-review of my own code
New and existing tests pass locally with my changes

pavanjoshi914 · 2022-03-19T12:13:56Z

@bumi @escapedcat initial setup for i18n

pavanjoshi914 · 2022-03-19T12:23:39Z

if you have gone through the documentation! either we can use nesting of keys or react i18next namespaces

currently, I am using namespace. if we wish to use nesting of keys as a key management strategy we can do that as well

escapedcat

Really cool, thanks! Some minor comments.
@bumi do we want use Weblate so others can help with further translations?

package.json

src/app/components/LocaleSwitcher/LocaleSwitcher.tsx

src/i18n/locales/en.json

src/app/components/Navbar/Navbar.tsx

escapedcat · 2022-03-20T06:13:10Z

package.json

  },
  "lint-staged": {
-    "src/**/*.{js,jsx,ts,tsx}": [
+    "src/**/*.{js,jsx,ts,tsx,json}": [


escapedcat

Awesome job @pavanjoshi914 !

src/app/components/LocaleSwitcher/LocaleSwitcher.tsx

pavanjoshi914 · 2022-03-21T05:04:59Z

Squashed all the commits into a single commit. @bumi PR is ready to be merged!

pavanjoshi914 · 2022-03-21T05:09:35Z

Really cool, thanks! Some minor comments. @bumi do we want to use Weblate so others can help with further translations?

regarding weblate! currently, we can just focus on completing i18n with a single alternate language. setup for continuous localization can be done once we are finished with this
https://gist.github.com/pavanjoshi914/a65af473209541c3a5cfecbac0f6e70f#continuous-localization

escapedcat · 2022-03-22T00:52:59Z

Applied for the "Libre hosting" plan on weblate already

bumi

I think we should save the selected language in the settings storage. Otherwise it will get lost after the app reloads.

You can see how to save the settings there:

lightning-browser-extension/src/app/screens/Settings.tsx

Line 42 in 4a8d633

async function saveSetting(

pavanjoshi914 · 2022-03-23T09:59:22Z

I think we should save the selected language in the settings storage. Otherwise it will get lost after the app reloads.

You can see how to save the settings there:

lightning-browser-extension/src/app/screens/Settings.tsx

Line 42 in 4a8d633

async function saveSetting(

sure so we will have incoming locale from three places

browser
language switcher
settings

Case 1. storing browser detected language or fallback language

when a user installs the app we let the browser detector, detect the language and use that language. either browser detected language will be used and if not available fallback language :en will be used

resolvedLanguage can handle this case, we exported the final resolved language under default settings

export const DEFAULT_SETTINGS = {
  websiteEnhancements: true,
  userName: "",
  locale: i18n.resolvedLanguage,
};

Case 2: store language changed via locale switcher

locale switcher under settings
passing saveSetting function as props and executed in LocaleSwitcher.tsx

<LocaleSwitcher saveSettings={saveSetting} />

 if (dropdownLang !== newLanguage) {
      setDropdownLang(newLanguage);
      i18n.changeLanguage(newLanguage);
      props.saveSettings({ locale: newLanguage });
    }

locale switcher under intro section
I can't pass a function as props for this locale switcher. one idea I think is to refactor settings to make it exportable and make the function accessible.

I am still learning React :) what can be the best possible approach for handling case 2 @bumi @escapedcat any ideas?

bumi · 2022-03-23T19:07:56Z

Can you elaborate on 2.? Why doesn't it work the same way as in the settings on the welcome page?

pavanjoshi914 · 2022-03-24T07:55:06Z

Can you elaborate on 2.? Why doesn't it work the same way as in the settings on the welcome page?

I made a silly mistake! I thought saveSetting is the function which is providing save functionality and I was trying this to pass as props in localeSwitcher component. it was just a wrapper for const response = await api.setSetting(setting);

async function saveSetting(
    setting: Record<string, string | number | boolean>
  ) {
    const response = await api.setSetting(setting);
    setSettings(response);
  }

did required changes @bumi @escapedcat kindly review

escapedcat · 2022-03-24T08:20:48Z

I made a silly mistake

bumi

From the code I don't fully understand where we load the language from the settings.
Can you point me to that?

Also how do we roll this out? Should we only show the language switcher in dev mode until we have a decent amount of the app translated?

src/app/router/Welcome/Welcome.tsx

pavanjoshi914 · 2022-03-24T08:49:27Z

if you have gone through the documentation! either we can use nesting of keys or react i18next namespaces

currently, I am using namespace. if we wish to use nesting of keys as a key management strategy we can do that as well

...

bumi · 2022-03-24T08:51:55Z

sorry, my bad. forgot...sure. really good, let's add that to the wiki? and add a link in the i18config in code to that wiki page?

bumi · 2022-03-24T08:52:29Z

(ups and I don't even hit the right button this morning, sorry. :) )

pavanjoshi914 · 2022-03-24T08:56:31Z

sorry, my bad. forgot...sure. really good, let's add that to the wiki? and add a link in the i18config in code to that wiki page?

sure , but before that i have to do few revisions to make it more formal.

escapedcat · 2022-03-24T08:58:18Z

Also how do we roll this out? Should we only show the language switcher in dev mode until we have a decent amount of the app translated?

Good point. We can also add alpha to the settings-label, already show it and open an issue to move all texts step by step to translation-strings.

pavanjoshi914 · 2022-03-24T09:09:15Z

From the code I don't fully understand where we load the language from the settings. Can you point me to that?

Also how do we roll this out? Should we only show the language switcher in dev mode until we have a decent amount of the app translated?

I made a silly mistake

haha nice one @escapedcat 😁

AaronDewes · 2022-03-24T10:35:44Z

@bumi If you're looking for a translation platform, I recommend hosted.weblate.org, they are free for open source projects if you apply. I'm using it for Citadel and it works great

pavanjoshi914 · 2022-03-24T11:31:05Z

I think we should save the selected language in the settings storage. Otherwise it will get lost after the app reloads.

I think this will not happen! what does it mean by reloading? (refreshing browser?).
what the browser detector plugin does is, stores the language by default in local storage, that is why it will still be persisted.

And uses the following sequence in priority to resolve the locale.

cookie
localStorage
navigator
querystring (append ?lng=LANGUAGE to URL)
htmlTag
path
subdomain

dylancom · 2022-03-29T14:07:47Z

@pavanjoshi914 Going to test it now!

dylancom · 2022-03-29T14:23:28Z

The vertical alignment of the LanguageSwitcher seems off. It also doesn't show the pointer cursor while hovering over it.
We already have a component by the way that you can use from components/form

dylancom · 2022-03-29T14:28:25Z

src/app/router/Welcome/Welcome.tsx

-      {process.env.NODE_ENV === "development" && <DevMenu />}
-
+      {process.env.NODE_ENV === "development" && (
+        <Fragment>


Troughout the project we use the short syntax for fragments that doesn't require an import.
https://reactjs.org/docs/fragments.html#short-syntax

dylancom · 2022-03-29T14:36:23Z

src/app/components/LocaleSwitcher/LocaleSwitcher.tsx

+import { useState } from "react";
+import type { ChangeEvent } from "react";
+import i18n from "i18next";
+import "../../../i18n/i18nConfig";


You can replace the two i18n imports by:
import i18n from "../../../i18n/i18nConfig";

dylancom · 2022-03-29T14:38:25Z

src/app/components/LocaleSwitcher/LocaleSwitcher.tsx

+import api from "../../../common/lib/api";
+
+export default function LocaleSwitcher() {
+  const [dropdownLang, setDropdownLang] = useState(i18n.language || "en");


Suggested change

const [dropdownLang, setDropdownLang] = useState(i18n.language || "en");

const [dropdownLang, setDropdownLang] = useState(i18n.language || i18n.options.fallbackLng[0]);

src/app/components/LocaleSwitcher/LocaleSwitcher.tsx

pavanjoshi914 · 2022-04-01T08:07:23Z

The vertical alignment of the LanguageSwitcher seems off. It also doesn't show the pointer cursor while hovering over it. We already have a component by the way that you can use from components/form

not sure what I have to do here! any screenshot which can help to understand where is the problem?

pavanjoshi914 · 2022-04-01T08:09:19Z

@dylancom

escapedcat · 2022-04-01T08:15:21Z

The vertical alignment of the LanguageSwitcher seems off. It also doesn't show the pointer cursor while hovering over it. We already have a component by the way that you can use from components/form

not sure what I have to do here! any screenshot which can help to understand where is the problem?

I think he meant you can use this component instead of a normal select:
https://github.com/getAlby/lightning-browser-extension/blob/test/select-account-after-account-delete/src/app/components/form/Select/index.tsx

You can find an example how to use it here:

https://github.com/getAlby/lightning-browser-extension/blob/master/src/app/components/form/Select/Select.stories.tsx
https://github.com/getAlby/lightning-browser-extension/blob/master/src/app/screens/Receive.tsx/#L199-L214
Funnily it looks like this is commented out so we do not actually use this component anywhere atm. But still it would be good to use it to make sure future selects are aligned

pavanjoshi914 · 2022-04-01T08:18:24Z

The vertical alignment of the LanguageSwitcher seems off. It also doesn't show the pointer cursor while hovering over it. We already have a component by the way that you can use from components/form

not sure what I have to do here! any screenshot which can help to understand where is the problem?

I think he meant you can use this component instead of a normal select: https://github.com/getAlby/lightning-browser-extension/blob/test/select-account-after-account-delete/src/app/components/form/Select/index.tsx

You can find an example how to use it here:

https://github.com/getAlby/lightning-browser-extension/blob/master/src/app/components/form/Select/Select.stories.tsx

https://github.com/getAlby/lightning-browser-extension/blob/master/src/app/screens/Receive.tsx/#L199-L214
Funnily it looks like this is commented out so we do not actually use this component anywhere atm. But still it would be good to use it to make sure future selects are aligned

already using! but i refactored by default class present with component!

pavanjoshi914 · 2022-04-01T08:25:49Z

already using! but i refactored by default class present with component!

the only important class was h-14 in that default class (w-full h-14 border-gray-300 rounded-md shadow-sm text-gray-700 bg-white), added that too! not sure if this is what Dylan willing to have

escapedcat · 2022-04-01T08:28:10Z

already using! but i refactored by default class present with component!

👍 Ah sorry, didn't see.

Might be good having default styles on a select which can be extended or overwritten, but we can take care of that later on.

pavanjoshi914 · 2022-04-01T08:31:12Z

already using! but i refactored by default class present with component!

👍 Ah sorry, didn't see.

Might be good having default styles on a select which can be extended or overwritten, but we can take care of that later on.

yup but the class has w-full which we don't want in case of language switcher also tried overwriting it! nothing happened

dylancom · 2022-04-01T10:57:24Z

@pavanjoshi914 What is the problem with the w-full class? You let the width of the component to be decided by the parent that it's wrapped in. It might need some updated styling if it's too high now, as it has been styled a while ago and not used in prod yet. But I would keep default styles instead of passing in custom classes, and let a parent element decide how it's aligned, what it's width is etc.

pavanjoshi914 · 2022-04-01T12:37:15Z

w-full covers entire screen

pavanjoshi914 · 2022-04-01T12:38:33Z

@pavanjoshi914 What is the problem with the w-full class? You let the width of the component to be decided by the parent that it's wrapped in. It might need some updated styling if it's too high now, as it has been styled a while ago and not used in prod yet. But I would keep default styles instead of passing in custom classes, and let a parent element decide how it's aligned, what it's width is etc.

so I can wrap the select element in div tag to overwrite few of the styles.

dylancom · 2022-04-01T12:39:47Z

w-full means width: 100%; which means take 100% width of the parent container. So if your parent container is 400px wide, w-full means a width of 400px.

setup i18next react-i18next browser-language-detector create locale switcher styling for both light and dark mode translate heading enable json imports in tsconfig language persistence throughout different components language persistence between different sessions browser language detections format JSON translation file using built-in eslint JSON formatted and run automated using lintstaged format existing json file place language switcher on intro and under settings (for intro under development mode) store locale in extensions storage signed-off-by: pavan joshi <pavanj914@gmail.com>

pavanjoshi914 · 2022-04-01T13:48:18Z

@dylancom can you review it again!

dylancom · 2022-04-01T14:36:14Z

If your screen width is smaller than 1300px in the Welcome screen, then you can't click the language switcher. (elements overlapping)

signed-off-by: pavan joshi <pavanj914@gmail.com>

pavanjoshi914 · 2022-04-01T17:04:34Z

If your screen width is smaller than 1300px in the Welcome screen, then you can't click the language switcher. (elements overlapping)

oops! corrected

pavanjoshi914 · 2022-04-05T12:21:51Z

@bumi kindly review and merge

escapedcat reviewed Mar 19, 2022

View reviewed changes

package.json Outdated Show resolved Hide resolved

src/app/components/LocaleSwitcher/LocaleSwitcher.tsx Outdated Show resolved Hide resolved

src/i18n/locales/en.json Show resolved Hide resolved

src/app/components/Navbar/Navbar.tsx Outdated Show resolved Hide resolved

escapedcat reviewed Mar 20, 2022

View reviewed changes

pavanjoshi914 force-pushed the i18n-inital-setup branch from 3d78783 to 1f1f19a Compare March 21, 2022 04:34

escapedcat approved these changes Mar 21, 2022

View reviewed changes

src/app/components/LocaleSwitcher/LocaleSwitcher.tsx Outdated Show resolved Hide resolved

pavanjoshi914 force-pushed the i18n-inital-setup branch from 1f1f19a to 5ab80a2 Compare March 21, 2022 05:02

pavanjoshi914 force-pushed the i18n-inital-setup branch from 5ab80a2 to 2c1abfc Compare March 21, 2022 05:15

bumi requested a review from dylancom March 21, 2022 08:29

bumi requested changes Mar 22, 2022

View reviewed changes

pavanjoshi914 force-pushed the i18n-inital-setup branch from 2c1abfc to 079834f Compare March 24, 2022 07:50

escapedcat requested a review from bumi March 24, 2022 08:19

bumi reviewed Mar 24, 2022

View reviewed changes

src/app/router/Welcome/Welcome.tsx Show resolved Hide resolved

bumi closed this Mar 24, 2022

bumi reopened this Mar 24, 2022

dylancom suggested changes Mar 29, 2022

View reviewed changes

pavanjoshi914 force-pushed the i18n-inital-setup branch from c344ac0 to 05a92a0 Compare April 1, 2022 08:04

pavanjoshi914 force-pushed the i18n-inital-setup branch from 05a92a0 to b380dc9 Compare April 1, 2022 08:23

pavanjoshi914 requested a review from dylancom April 1, 2022 08:26

pavanjoshi914 force-pushed the i18n-inital-setup branch from b380dc9 to 7d4b1ac Compare April 1, 2022 13:03

pavanjoshi914 force-pushed the i18n-inital-setup branch from 7d4b1ac to d3b853e Compare April 1, 2022 13:45

refactor: some minor improvements

36c1efd

signed-off-by: pavan joshi <pavanj914@gmail.com>

pavanjoshi914 force-pushed the i18n-inital-setup branch from d3b853e to 36c1efd Compare April 1, 2022 17:03

dylancom approved these changes Apr 5, 2022

View reviewed changes

bumi merged commit 369c507 into getAlby:master Apr 5, 2022

pavanjoshi914 deleted the i18n-inital-setup branch April 5, 2022 14:16

escapedcat mentioned this pull request Apr 9, 2022

Use i18n for the whole app #781

Closed

	const [dropdownLang, setDropdownLang] = useState(i18n.language \|\| "en");
	const [dropdownLang, setDropdownLang] = useState(i18n.language \|\| i18n.options.fallbackLng[0]);

feat(i18n): initial setup #711

feat(i18n): initial setup #711

Conversation

pavanjoshi914 commented Mar 19, 2022 • edited

Type of change

Describe the changes you have made in this PR -

Screenshots of the changes (If any) -

Updates

How Has This Been Tested?

Checklist:

pavanjoshi914 commented Mar 19, 2022

pavanjoshi914 commented Mar 19, 2022

escapedcat left a comment

Choose a reason for hiding this comment

escapedcat Mar 20, 2022

Choose a reason for hiding this comment

escapedcat left a comment

Choose a reason for hiding this comment

pavanjoshi914 commented Mar 21, 2022

pavanjoshi914 commented Mar 21, 2022

escapedcat commented Mar 22, 2022

bumi left a comment

Choose a reason for hiding this comment

pavanjoshi914 commented Mar 23, 2022 • edited

bumi commented Mar 23, 2022

pavanjoshi914 commented Mar 24, 2022

escapedcat commented Mar 24, 2022

bumi left a comment

Choose a reason for hiding this comment

pavanjoshi914 commented Mar 24, 2022

bumi commented Mar 24, 2022

bumi commented Mar 24, 2022

pavanjoshi914 commented Mar 24, 2022

escapedcat commented Mar 24, 2022

pavanjoshi914 commented Mar 24, 2022 • edited

AaronDewes commented Mar 24, 2022

pavanjoshi914 commented Mar 24, 2022 • edited

dylancom commented Mar 29, 2022

dylancom commented Mar 29, 2022 • edited

dylancom Mar 29, 2022

Choose a reason for hiding this comment

pavanjoshi914 Apr 1, 2022

Choose a reason for hiding this comment

dylancom Mar 29, 2022

Choose a reason for hiding this comment

pavanjoshi914 Apr 1, 2022

Choose a reason for hiding this comment

dylancom Mar 29, 2022

Choose a reason for hiding this comment

pavanjoshi914 Apr 1, 2022

Choose a reason for hiding this comment

pavanjoshi914 commented Apr 1, 2022

pavanjoshi914 commented Apr 1, 2022

escapedcat commented Apr 1, 2022

pavanjoshi914 commented Apr 1, 2022

pavanjoshi914 commented Apr 1, 2022

escapedcat commented Apr 1, 2022

pavanjoshi914 commented Apr 1, 2022

dylancom commented Apr 1, 2022 • edited

pavanjoshi914 commented Apr 1, 2022

pavanjoshi914 commented Apr 1, 2022

dylancom commented Apr 1, 2022 • edited

pavanjoshi914 commented Apr 1, 2022

dylancom commented Apr 1, 2022

pavanjoshi914 commented Apr 1, 2022

pavanjoshi914 commented Apr 5, 2022

pavanjoshi914 commented Mar 19, 2022 •

edited

pavanjoshi914 commented Mar 23, 2022 •

edited

pavanjoshi914 commented Mar 24, 2022 •

edited

pavanjoshi914 commented Mar 24, 2022 •

edited

dylancom commented Mar 29, 2022 •

edited

dylancom commented Apr 1, 2022 •

edited

dylancom commented Apr 1, 2022 •

edited