Add language switcher in user settings modal

[sejas]

• Closes Feature Request: Language Switcher #25

Proposed Changes

• Add language picker in user settings for authenticated and non authenticated users, which allows changing the language on the fly.
• Add language to AppData user data file
• Remove locale from AppGlobals and refactor locale code

The only downside is that the user needs to be logged in to open the user settings.

Testing Instructions

• Run npm start
• Observe the App starts with the computer's language
• Login to Studio with your WPcom account
• Click in your profile picture in the left sidebar
• Change the language to any language, even RTL
• Observe the interface changes immediately
• Close the app
• Run npm start
• Observe the App starts with the latest language you selected
• Open the settings
• Log out
• Press cmd+. on Mac or use the menu bar to open the settings modal
• Observe the language picker is still in place and works as expected.

u9Cv10.mp4

No Auth:

Auth:

Pre-merge Checklist

• Have you checked for TypeScript, React or other console errors?

[nguyenquanghoang]

Amazing, Thanks for the update @sejas 🙏

[kozer]

Amazing work @sejas ! I tested it and works as expected!

Example 1	Example2

[nguyenquanghoang]

@kozer How to test it?

[kozer]

@kozer How to test it?

Hey @nguyenquanghoang !
What I did is the following:

1. Clone the repo, and checkout that branch ( add/user-locale-settings )
2. Run the project: npm start
3. Follow the Testing instructions mentioned above.

Do you face any problems while trying to replicate those instructions?

[nguyenquanghoang]

@kozer I don't know how to do with the above instructions, Don't know what npm is? Sorry because I'm new, don't have much technical knowledge

[kozer]

@kozer I don't know how to do with the above instructions, Don't know what npm is? Sorry because I'm new, don't have much technical knowledge

Sure! It's ok!
First of all, you need to install nodejs. Navigate to that site, and click the Download button. Then you need to follow the instructions mentioned.
After that, open a terminal of your choice and run npm. You should wee an output similar to the below:

After that, you should be able to clone the repo, and run the npm instructions.
Make sure that after you clone the repo, and being in the root of the project, to run npm install first.
Feel free to ask for any help!

[wojtekn]

@sejas the feature works great, it's awesome that it reloads the whole UI as user changes the language.

The only downside is that the user needs to be logged in to open the user settings.

Let's display the language selector in settings for a logged-out user, too.

[Mahjouba91]

Great feature, thank you :)

[nguyenquanghoang]

I am currently using Studio on Windows, Tried following the instructions but it didn't work. Hope it can be easier for newbies like me, just turn on Studio, log in to your WordPress .com account and select the language you want to use.

[sejas]

Let's display the language selector in settings for a logged-out user, too.
Done!

Here is the updated screencast:

4lZZsz.mp4

[sejas]

I am currently using Studio on Windows, Tried following the instructions but it didn't work. Hope it can be easier for newbies like me, just turn on Studio, log in to your WordPress .com account and select the language you want to use.

@nguyenquanghoang, Yes, once we merge this PR and create the next release it will be as easy as starting Studio with double click.

[nguyenquanghoang]

@sejas Yes, I have enjoyed Studio since its launch. Everything is easier for newbies like me, always fast and has the essentials. Great UI 🙏

[fluiddot]

Heads up that I've encountered some issues related to this PR: #502 (review)

Regarding the menu items, since it's created when instantiating the main window, the strings won't be translated because the locale date is fetched after the creation.

I'll work on a fix to be included before the next release.

UPDATE: Here's the PR.