App: [Network] Language Picker on Login Page call the API unnecessarily & does not behave correctly

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

ISSUES

Language Picker calls the API which is unnecessary and It blocks the network queue.
Its theme does not match other inputs in the app. No border, etc.
We have to select the two times to make language change take effect.

We have to select the language two times to switch it.

Action Performed:

Open the login page & sign in with some account.
Sign out of the app.
Switch a language.
Check Console logs for seeing the blocked network queue.

Expected Result:

No API calls should be made instead language should be set on Onyx only.
The picker theme should match with the theme of other Pickers.
It should work in the first change.

Actual Result:

It blocks the queue and makes an unnecessary backend request.
Styling does not match the app theme.
We have to select the language two times to activate it.

Workaround:

None. UI issue

Platform:

Where is this issue occurring?

Web
iOS
Android
Desktop App
Mobile Web

Version Number: 1.0.85.0 Logs: https://stackoverflow.com/c/expensify/questions/4856 Notes/Photos/Videos: Any additional supporting documentation

https://user-images.githubusercontent.com/24370807/128774998-c097efea-5ce1-42eb-8473-00994ccc565d.mp4

Expensify/Expensify Issue URL:

View all open jobs on Upwork

view this job on Upwork

Proposal

Correct the Dropdown theme so that it shows the outline when opened.
Block the API call when Language is selected. To do this we can add a prop offline to the LocalPicker which can then pass to https://github.com/Expensify/App/blob/8b10c1c1a0267eb66ef8fdc6e0049f9b101836a2/src/libs/actions/App.js#L38 to block the API call when offline is true.
Or, based on the suggestion from Peter, we can simply check for the currentUserAccountID before making the API call as this is only present when the user is logined.

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 24 (12 by maintainers)

Most upvoted comments

ok i paid it (note: i put it up for 500 because you both reported and solved it).

jboniface on Sep 9, 2021

Thanks for confirming and re-posing @parasharrajat - The job is yours! Please submit a PR when you have a chance 👍

Beamanator on Aug 24, 2021

Sure.

Correct the Dropdown theme so that it matches other dropdowns in the app.
Block the API call when Language is selected. based on the suggestion we can just put a check in the setLocale for currentUserAccountID where If this is undefined don’t make the API call. https://github.com/Expensify/App/blob/8b10c1c1a0267eb66ef8fdc6e0049f9b101836a2/src/libs/actions/App.js#L38
Fix the language switching so that it works on the first attempt. It looks like blocking API call will fix it too. Thanks to Kidroca for help.

parasharrajat on Aug 24, 2021

Or the request can be skipped simply because there would not be a currentUserAccountID

function setLocale(locale) {
  if (currentUserAccountID) {
      API.PreferredLocale_Update({name: 'preferredLocale', value: locale});
  }

  Onyx.merge(ONYXKEYS.NVP_PREFERRED_LOCALE, locale);
}

kidroca on Aug 16, 2021