refactor: change lang selector logic

Author: dcoa

README.rst

@@ -86,12 +86,19 @@ This library has the following exports:
 * ``messages``: Internationalization messages suitable for use with `@edx/frontend-platform/i18n <https://edx.github.io/frontend-platform/module-Internationalization.html>`_
 * ``dist/footer.scss``: A SASS file which contains style information for the component.  It should be imported into the micro-frontend's own SCSS file.
 
-<Footer /> component props
-==========================
+Language Selector
+-----------------
 
-* onLanguageSelected: Provides the footer with an event handler for when the user selects a
-  language from its dropdown.
-* supportedLanguages: An array of objects representing available languages.  See example below for object shape.
+The language selector dropdown is optional and can be enabled by setting the MFE configuration variable ``ENABLE_FOOTER_LANG_SELECTOR`` to ``true``.
+Secondly, configue the languages that should be displayed in the dropdown by setting the MFE configuration variable ``SITE_SUPPORTED_LANGUAGES`` to an array of locale languages.
+Example:
+
+.. code-block:: python 
+
+  MFE_CONFIG["EDX_FRONTEND_APP_CONFIG"] = {
+    "ENABLE_FOOTER_LANG_SELECTOR": True,
+    "SITE_SUPPORTED_LANGUAGES": ['en', 'es', 'fr', 'pt-br'],
+  }
 
 Plugin
 ======
@@ -108,13 +115,7 @@ Component Usage Example::
 
   ...
 
-  <Footer
-    onLanguageSelected={(languageCode) => {/* set language */}}
-    supportedLanguages={[
-      { label: 'English', value: 'en'},
-      { label: 'Español', value: 'es' },
-    ]}
-  />
+  <Footer />
 
 * `An example of minimal component and messages usage. <https://github.com/openedx/frontend-template-application/blob/3355bb3a96232390e9056f35b06ffa8f105ed7ca/src/index.jsx#L23>`_
 * `An example of SCSS file usage. <https://github.com/openedx/frontend-template-application/blob/3cd5485bf387b8c479baf6b02bf59e3061dc3465/src/index.scss#L9>`_

env.config.js

@@ -0,0 +1,7 @@
+// This file is used only for the example application.
+const config = {
+  ENABLE_FOOTER_LANG_SELECTOR: true,
+  SITE_SUPPORTED_LANGUAGES: ['es', 'en'],
+};
+
+export default config;

example/index.jsx

@@ -15,13 +15,7 @@ subscribe(APP_READY, () => {
         authenticatedUser: null,
         config: getConfig(),
       }}>
-        <Footer
-          onLanguageSelected={() => {}}
-          supportedLanguages={[
-            { label: 'English', value: 'en' },
-            { label: 'Español', value: 'es' },
-          ]}
-        />
+        <Footer />
       </AppContext.Provider>
     </AppProvider>,
     document.getElementById('root'),

src/components/Footer.jsx

@@ -35,14 +35,10 @@ class SiteFooter extends React.Component {
 
   render() {
     const {
-      supportedLanguages,
-      onLanguageSelected,
       logo,
       intl,
     } = this.props;
-    const showLanguageSelector = supportedLanguages.length > 0 && onLanguageSelected;
-    const { config } = this.context;
-
+    const { config, authenticatedUser } = this.context;
     return (
       <footer
         role="contentinfo"
@@ -61,11 +57,14 @@ class SiteFooter extends React.Component {
             />
           </a>
           <div className="flex-grow-1" />
-          {showLanguageSelector && (
-            <LanguageSelector
-              options={supportedLanguages}
-              onSubmit={onLanguageSelected}
-            />
+          {config.ENABLE_FOOTER_LANG_SELECTOR && (
+            <div className="mb-2">
+              <LanguageSelector
+                options={config.SITE_SUPPORTED_LANGUAGES}
+                username={authenticatedUser?.username}
+                langCookieName={config.LANGUAGE_PREFERENCE_COOKIE_NAME}
+              />
+            </div>
           )}
         </div>
       </footer>
@@ -78,17 +77,10 @@ SiteFooter.contextType = AppContext;
 SiteFooter.propTypes = {
   intl: intlShape.isRequired,
   logo: PropTypes.string,
-  onLanguageSelected: PropTypes.func,
-  supportedLanguages: PropTypes.arrayOf(PropTypes.shape({
-    label: PropTypes.string.isRequired,
-    value: PropTypes.string.isRequired,
-  })),
 };
 
 SiteFooter.defaultProps = {
   logo: undefined,
-  onLanguageSelected: undefined,
-  supportedLanguages: [],
 };
 
 export default injectIntl(SiteFooter);

src/components/Footer.test.jsx

@@ -5,6 +5,7 @@ import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { AppContext } from '@edx/frontend-platform/react';
+import '@testing-library/jest-dom';
 
 import Footer from './Footer';
 import FooterSlot from '../plugin-slots/FooterSlot';
@@ -30,33 +31,36 @@ const FooterWithContext = ({ locale = 'es' }) => {
   );
 };
 
-const FooterWithLanguageSelector = ({ languageSelected = () => {} }) => {
+const { LANGUAGE_PREFERENCE_COOKIE_NAME } = process.env;
+const FooterWithLanguageSelector = ({ authenticatedUser = null }) => {
   const contextValue = useMemo(() => ({
-    authenticatedUser: null,
+    authenticatedUser,
     config: {
+      ENABLE_FOOTER_LANG_SELECTOR: true,
+      LANGUAGE_PREFERENCE_COOKIE_NAME,
       LOGO_TRADEMARK_URL: process.env.LOGO_TRADEMARK_URL,
       LMS_BASE_URL: process.env.LMS_BASE_URL,
+      SITE_SUPPORTED_LANGUAGES: ['es', 'en'],
     },
-  }), []);
+  }), [authenticatedUser]);
 
   return (
     <IntlProvider locale="en">
       <AppContext.Provider
         value={contextValue}
       >
-        <Footer
-          onLanguageSelected={languageSelected}
-          supportedLanguages={[
-            { label: 'English', value: 'en' },
-            { label: 'Español', value: 'es' },
-          ]}
-        />
+        <Footer />
       </AppContext.Provider>
     </IntlProvider>
   );
 };
 
 describe('<Footer />', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    initializeMockApp();
+  });
+
   describe('renders correctly', () => {
     it('renders without a language selector', () => {
       const tree = renderer

src/components/LanguageSelector.jsx

@@ -0,0 +1,32 @@
+import { getConfig } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { convertKeyNames, snakeCaseObject } from '@edx/frontend-platform/utils';
+
+export async function patchPreferences(username, params) {
+  let processedParams = snakeCaseObject(params);
+  processedParams = convertKeyNames(processedParams, {
+    pref_lang: 'pref-lang',
+  });
+
+  await getAuthenticatedHttpClient()
+    .patch(`${getConfig().LMS_BASE_URL}/api/user/v1/preferences/${username}`, processedParams, {
+      headers: { 'Content-Type': 'application/merge-patch+json' },
+    });
+
+  return params;
+}
+
+export async function postSetLang(code) {
+  const formData = new FormData();
+  const requestConfig = {
+    headers: {
+      Accept: 'application/json',
+      'X-Requested-With': 'XMLHttpRequest',
+    },
+  };
+  const url = `${getConfig().LMS_BASE_URL}/i18n/setlang/`;
+  formData.append('language', code);
+
+  await getAuthenticatedHttpClient()
+    .post(url, formData, requestConfig);
+}

src/components/LanguageSelector/data.js

@@ -0,0 +1,82 @@
+import React, { useMemo, useState } from 'react';
+import PropTypes from 'prop-types';
+import { publish } from '@edx/frontend-platform';
+import {
+  injectIntl, LOCALE_CHANGED, getLocale, handleRtl, getPrimaryLanguageSubtag,
+} from '@edx/frontend-platform/i18n';
+import { logError } from '@edx/frontend-platform/logging';
+import { Dropdown, useWindowSize } from '@openedx/paragon';
+import { Language } from '@openedx/paragon/icons';
+import { getCookies } from '@edx/frontend-platform/i18n/lib';
+import { patchPreferences, postSetLang } from './data';
+
+const onLanguageSelected = async ({ langCookieName, username, selectedLlocale }) => {
+  try {
+    if (username) {
+      await patchPreferences(username, { prefLang: selectedLlocale });
+      await postSetLang(selectedLlocale);
+    } else {
+      getCookies().set(langCookieName, selectedLlocale);
+    }
+    publish(LOCALE_CHANGED, getLocale());
+    handleRtl();
+  } catch (error) {
+    logError(error);
+  }
+};
+const getLocaleName = (locale) => {
+  const langName = new Intl.DisplayNames([locale], { type: 'language', languageDisplay: 'standard' }).of(locale);
+  return langName.replace(/^\w/, (c) => c.toUpperCase());
+};
+
+const LanguageSelector = ({
+  langCookieName, options, username,
+}) => {
+  const [currentLocale, setLocale] = useState(getLocale());
+  const { width } = useWindowSize();
+
+  const handleSelect = (selectedLlocale) => {
+    if (currentLocale !== selectedLlocale) {
+      onLanguageSelected({ langCookieName, username, selectedLlocale });
+    }
+    setLocale(selectedLlocale);
+  };
+
+  const currentLocaleLabel = useMemo(() => {
+    if (width < 576) {
+      return null;
+    }
+    if (width < 768) {
+      return getPrimaryLanguageSubtag(currentLocale).toUpperCase();
+    }
+    return getLocaleName(currentLocale);
+  }, [currentLocale, width]);
+
+  return (
+    <Dropdown onSelect={handleSelect}>
+      <Dropdown.Toggle
+        id="lang-selector-dropdown"
+        iconBefore={Language}
+        variant="outline-primary"
+        size="sm"
+      >
+        {currentLocaleLabel}
+      </Dropdown.Toggle>
+      <Dropdown.Menu>
+        {options.map((locale) => (
+          <Dropdown.Item key={`lang-selector-${locale}`} eventKey={locale}>
+            {getLocaleName(locale)}
+          </Dropdown.Item>
+        ))}
+      </Dropdown.Menu>
+    </Dropdown>
+  );
+};
+
+LanguageSelector.propTypes = {
+  langCookieName: PropTypes.string.isRequired,
+  options: PropTypes.arrayOf(PropTypes.string).isRequired,
+  username: PropTypes.string,
+};
+
+export default injectIntl(LanguageSelector);