Save preferred locale in NVP

README.md

@@ -248,7 +248,7 @@ localize the following types of data when presented to the user (even accessibil
 - Phones: see [LocalPhoneNumber](https://github.com/Expensify/Expensify.cash/blob/bdfbafe18ee2d60f766c697744f23fad64b62cad/src/libs/LocalePhoneNumber.js#L51-L52)
 
 In most cases, you will be needing to localize data used in a component, if that's the case, there's a HOC [withLocalize](https://github.com/Expensify/Expensify.cash/blob/37465dbd07da1feab8347835d82ed3d2302cde4c/src/components/withLocalize.js).
-It will abstract most of the logic you need (mostly subscribe to the [PREFERRED_LOCALE](https://github.com/Expensify/Expensify.cash/blob/6cf1a56df670a11bf61aa67eeb64c1f87161dea1/src/ONYXKEYS.js#L88) Onyx key)
+It will abstract most of the logic you need (mostly subscribe to the [NVP_PREFERRED_LOCALE](https://github.com/Expensify/Expensify.cash/blob/6cf1a56df670a11bf61aa67eeb64c1f87161dea1/src/ONYXKEYS.js#L88) Onyx key)
 and is the preferred way of localizing things inside components.
 
 Some pointers:

src/ONYXKEYS.js

@@ -91,7 +91,7 @@ export default {
     },
 
     // Indicates which locale should be used
-    PREFERRED_LOCALE: 'preferredLocale',
+    NVP_PREFERRED_LOCALE: 'preferredLocale',
 
     // List of transactionIDs in process of rejection
     TRANSACTIONS_BEING_REJECTED: 'transactionsBeingRejected',

src/components/withLocalize.js

@@ -78,7 +78,7 @@ function withLocalizeHOC(WrappedComponent) {
 export default compose(
     withOnyx({
         preferredLocale: {
-            key: ONYXKEYS.PREFERRED_LOCALE,
+            key: ONYXKEYS.NVP_PREFERRED_LOCALE,
         },
     }),
     withLocalizeHOC,

src/libs/API.js

@@ -538,6 +538,19 @@ function PersonalDetails_Update(parameters) {
     return Network.post(commandName, parameters);
 }
 
+/**
+ * @param {Object} parameters
+ * @param {Object} parameters.name
+ * @param {Object} parameters.value
+ * @returns {Promise}
+ */
+function PreferredLocale_Update(parameters) {
+    const commandName = 'PreferredLocale_Update';
+    requireParameters(['name', 'value'],
+        parameters, commandName);
+    return Network.post(commandName, parameters);
+}
+
 /**
  * @param {Object} parameters
  * @param {String} parameters.socket_id
@@ -1099,4 +1112,5 @@ export {
     GetCurrencyList,
     Policy_Create,
     Policy_Employees_Remove,
+    PreferredLocale_Update,
 };

src/libs/Navigation/AppNavigator/AuthScreens.js

@@ -145,10 +145,14 @@ class AuthScreens extends React.Component {
             appKey: CONFIG.PUSHER.APP_KEY,
             cluster: CONFIG.PUSHER.CLUSTER,
             authEndpoint: `${CONFIG.EXPENSIFY.URL_API_ROOT}api?command=Push_Authenticate`,
-        }).then(subscribeToUserEvents);
+        }).then(() => {
+            subscribeToUserEvents();
+            User.subscribeToUserEvents();
+        });
 
         // Fetch some data we need on initialization
         NameValuePair.get(CONST.NVP.PRIORITY_MODE, ONYXKEYS.NVP_PRIORITY_MODE, 'default');
+        NameValuePair.get(CONST.NVP.PREFERRED_LOCALE, ONYXKEYS.NVP_PREFERRED_LOCALE, 'en');
         PersonalDetails.fetchPersonalDetails();
         User.getUserDetails();
         User.getBetas();

src/libs/OptionsListUtils.js

@@ -37,7 +37,7 @@ Onyx.connect({
 
 let preferredLocale;
 Onyx.connect({
-    key: ONYXKEYS.PREFERRED_LOCALE,
+    key: ONYXKEYS.NVP_PREFERRED_LOCALE,
     callback: val => preferredLocale = val || CONST.DEFAULT_LOCALE,
 });
 

src/libs/Pusher/EventType.js

@@ -6,4 +6,5 @@ export default {
     REPORT_COMMENT: 'reportComment',
     REPORT_COMMENT_EDIT: 'reportCommentEdit',
     REPORT_TOGGLE_PINNED: 'reportTogglePinned',
+    PREFERRED_LOCALE: 'preferredLocale',
 };

src/libs/actions/App.js

@@ -1,5 +1,6 @@
 import Onyx from 'react-native-onyx';
 import ONYXKEYS from '../../ONYXKEYS';
+import * as API from '../API';
 
 /**
  * @param {String} url
@@ -9,10 +10,11 @@ function setCurrentURL(url) {
 }
 
 /**
- * @param {String} locale
- */
+* @param {String} locale
+*/
 function setLocale(locale) {
-    Onyx.set(ONYXKEYS.PREFERRED_LOCALE, locale);
+    API.PreferredLocale_Update({name: 'preferredLocale', value: locale});
+    Onyx.merge(ONYXKEYS.NVP_PREFERRED_LOCALE, locale);
 }
 
 export {

src/libs/actions/User.js

@@ -9,14 +9,19 @@ import * as API from '../API';
 import CONST from '../../CONST';
 import Navigation from '../Navigation/Navigation';
 import ROUTES from '../../ROUTES';
+import * as Pusher from '../Pusher/pusher';
+import Log from '../Log';
+import NetworkConnection from '../NetworkConnection';
 
 let sessionAuthToken = '';
 let sessionEmail = '';
+let currentUserAccountID = '';
 Onyx.connect({
     key: ONYXKEYS.SESSION,
     callback: (val) => {
         sessionAuthToken = lodashGet(val, 'authToken', '');
         sessionEmail = lodashGet(val, 'email', '');
+        currentUserAccountID = lodashGet(val, 'accountID', '');
     },
 });
 
@@ -236,6 +241,33 @@ function getDomainInfo() {
         });
 }
 
+/**
+ * Initialize our pusher subscription to listen for user changes
+ */
+function subscribeToUserEvents() {
+    // If we don't have the user's accountID yet we can't subscribe so return early
+    if (!currentUserAccountID) {
+        return;
+    }
+
+    const pusherChannelName = `private-user-accountID-${currentUserAccountID}`;
+
+    // Live-update an user's preferred locale
+    Pusher.subscribe(pusherChannelName, Pusher.TYPE.PREFERRED_LOCALE, (pushJSON) => {
+        Onyx.merge(ONYXKEYS.NVP_PREFERRED_LOCALE, pushJSON.preferredLocale);
+    }, false,
+    () => {
+        NetworkConnection.triggerReconnectionCallbacks('pusher re-subscribed to private user channel');
+    })
+        .catch((error) => {
+            Log.info(
+                '[User] Failed to subscribe to Pusher channel',
+                true,
+                {error, pusherChannelName, eventName: Pusher.TYPE.PREFERRED_LOCALE},
+            );
+        });
+}
+
 export {
     changePassword,
     getBetas,
@@ -246,4 +278,5 @@ export {
     validateLogin,
     isBlockedFromConcierge,
     getDomainInfo,
+    subscribeToUserEvents,
 };

src/libs/translate.js

@@ -9,7 +9,7 @@ import ONYXKEYS from '../ONYXKEYS';
 
 let preferredLocale = CONST.DEFAULT_LOCALE;
 Onyx.connect({
-    key: ONYXKEYS.PREFERRED_LOCALE,
+    key: ONYXKEYS.NVP_PREFERRED_LOCALE,
     callback: (val) => {
         if (val) {
             preferredLocale = val;

src/pages/settings/PreferencesPage.js

@@ -12,12 +12,12 @@ import Text from '../../components/Text';
 import NameValuePair from '../../libs/actions/NameValuePair';
 import CONST from '../../CONST';
 import {setExpensifyNewsStatus} from '../../libs/actions/User';
-import {setLocale} from '../../libs/actions/App';
 import ScreenWrapper from '../../components/ScreenWrapper';
 import Switch from '../../components/Switch';
 import Picker from '../../components/Picker';
 import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
 import compose from '../../libs/compose';
+import {setLocale} from '../../libs/actions/App';
 
 const propTypes = {
     /** The chat priority mode */
@@ -143,7 +143,7 @@ export default compose(
             key: ONYXKEYS.USER,
         },
         preferredLocale: {
-            key: ONYXKEYS.PREFERRED_LOCALE,
+            key: ONYXKEYS.NVP_PREFERRED_LOCALE,
         },
     }),
 )(PreferencesPage);