✨(frontend) language switcher

CHANGELOG.md

@@ -29,6 +29,7 @@ Versioning](https://semver.org/spec/v2.0.0.html).
 - Add a shared media widget directly in the video player
 - Add a transcript plugin to the video player
 - Add a link to LTI resources to retrieve them in the standalone website
+- Add Language Picker in the standalone website (#2366)
 
 ### Changed
 

src/frontend/apps/standalone_site/src/conf/global.ts

@@ -1,6 +1,4 @@
-export const DEFAULT_LANGUAGE = 'en_US';
 export const ITEM_PER_PAGE = 20;
-export const REACT_LOCALES = ['en_US', 'es_ES', 'fr_FR', 'fr_CA'];
 export const ROOT_APP = '/';
 export const REACT_QUERY_CONF_API = {
   keepPreviousData: true,

src/frontend/apps/standalone_site/src/features/App/App.spec.tsx

@@ -1,5 +1,7 @@
 import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import fetchMock from 'fetch-mock';
+import { Grommet, ResponsiveContext } from 'grommet';
 import {
   playlistMockFactory,
   useCurrentUser,
@@ -18,6 +20,13 @@ const consoleWarn = jest
   .spyOn(console, 'warn')
   .mockImplementation(() => jest.fn());
 
+jest.mock('grommet', () => ({
+  ...jest.requireActual('grommet'),
+  Grommet: ({ children }: { children: React.ReactNode }) => (
+    <div>{children}</div>
+  ),
+}));
+
 window.scrollTo = jest.fn();
 window.isCDNLoaded = true;
 
@@ -81,7 +90,13 @@ describe('<App />', () => {
         full_name: 'John Doe',
       }),
     });
-    render(<App />);
+    render(
+      <Grommet>
+        <ResponsiveContext.Provider value="large">
+          <App />
+        </ResponsiveContext.Provider>
+      </Grommet>,
+    );
 
     expect(await screen.findByText(/John Doe/i)).toBeInTheDocument();
     expect(
@@ -111,18 +126,18 @@ describe('<App />', () => {
       }),
       { virtual: true },
     );
-    const languageGetter = jest.spyOn(window.navigator, 'language', 'get');
-    languageGetter.mockReturnValue('fr');
 
     render(<App />);
 
-    expect(await screen.findByText(/John Doe/i)).toBeInTheDocument();
+    await userEvent.click(
+      await screen.findByLabelText(/Language Picker; Selected: en/i),
+    );
+
+    await userEvent.click(screen.getByText(/Français/i));
+
     expect(
       await screen.findByRole('menuitem', { name: /Mon Tableau de bord/i }),
     ).toBeInTheDocument();
-    expect(
-      await screen.findByText(/some welcome classroom/i),
-    ).toBeInTheDocument();
   });
 
   test('the content features are correcty loaded', async () => {

src/frontend/apps/standalone_site/src/features/App/AppConfig.spec.tsx

@@ -6,6 +6,7 @@ import { defineMessages, useIntl } from 'react-intl';
 
 import { ConfigResponse } from 'api/useConfig';
 import { useContentFeatures } from 'features/Contents';
+import { useLanguageStore } from 'features/Language/store/languageStore';
 
 import AppConfig from './AppConfig';
 
@@ -244,8 +245,6 @@ describe('AppConfig', () => {
       }),
       { virtual: true },
     );
-    const languageGetter = jest.spyOn(window.navigator, 'language', 'get');
-    languageGetter.mockReturnValue('fr');
 
     deferredConfig.resolve(config);
 
@@ -255,6 +254,9 @@ describe('AppConfig', () => {
       </AppConfig>,
     );
 
+    expect(await screen.findByText(/My test/i)).toBeInTheDocument();
+
+    useLanguageStore.getState().setLanguage('fr');
     expect(await screen.findByText(/Mon test/i)).toBeInTheDocument();
   });
 

src/frontend/apps/standalone_site/src/features/App/AppConfig.tsx

@@ -1,21 +1,14 @@
-import { getIntl } from 'lib-common';
 import { useP2PConfig, useSentry, useSiteConfig } from 'lib-components';
 import { PropsWithChildren, useEffect, useState } from 'react';
-import { IntlShape, RawIntlProvider } from 'react-intl';
+import { RawIntlProvider } from 'react-intl';
 
 import { useConfig } from 'api/useConfig';
 import { ContentSpinner } from 'components/Spinner';
-import { DEFAULT_LANGUAGE } from 'conf/global';
 import { featureContentLoader, useContentFeatures } from 'features/Contents';
-import { getCurrentTranslation, getLanguage, getLocaleCode } from 'utils/lang';
+import { useLanguage } from 'features/Language';
 
 const AppConfig = ({ children }: PropsWithChildren<unknown>) => {
-  const [currentTranslation, setCurrentTranslation] =
-    useState<Record<string, string>>();
-  const [language, setLanguage] = useState<string>();
-  const [localCode, setLocalCode] = useState<string>();
-  const [intl, setIntl] = useState<IntlShape>();
-
+  const intl = useLanguage();
   const [isDomReady, setIsDomReady] = useState(false);
   const setSentry = useSentry((state) => state.setSentry);
   const setP2PConfig = useP2PConfig((state) => state.setP2PConfig);
@@ -27,23 +20,6 @@ const AppConfig = ({ children }: PropsWithChildren<unknown>) => {
   const isFeatureLoaded = useContentFeatures((state) => state.isFeatureLoaded);
   const isConfigReady = isFeatureLoaded && isDomReady && intl;
 
-  useEffect(() => {
-    const language = getLanguage();
-    setLanguage(language);
-    setLocalCode(getLocaleCode(language));
-  }, []);
-
-  /**
-   * Load the current language and translation
-   */
-  useEffect(() => {
-    if (language) {
-      getCurrentTranslation(language).then((translation) => {
-        setCurrentTranslation(translation);
-      });
-    }
-  }, [language]);
-
   useEffect(() => {
     const handleCDNLoaded = () => {
       setIsDomReady(window.isCDNLoaded || false);
@@ -86,15 +62,6 @@ const AppConfig = ({ children }: PropsWithChildren<unknown>) => {
     });
   }, [setSentry, setP2PConfig, config, setSiteConfig]);
 
-  useEffect(() => {
-    setIntl(
-      getIntl({
-        locale: localCode || getLocaleCode(DEFAULT_LANGUAGE),
-        messages: currentTranslation,
-      }),
-    );
-  }, [currentTranslation, localCode]);
-
   if (!isConfigReady) {
     return <ContentSpinner boxProps={{ height: '100vh' }} />;
   }

src/frontend/apps/standalone_site/src/features/Contents/components/Contents/Contents.tsx

@@ -1,4 +1,4 @@
-import { Box, Text } from 'grommet';
+import { Box, Heading, Text } from 'grommet';
 import { StyledLink } from 'lib-components';
 import { Fragment } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
@@ -38,7 +38,9 @@ const Contents = ({ playlistId }: ContentsProps) => {
             justify="between"
             margin={{ bottom: 'small' }}
           >
-            <Text weight="bolder">{intl.formatMessage(sample.title)}</Text>
+            <Heading weight="bolder" level="4" margin="none">
+              {intl.formatMessage(sample.title)}
+            </Heading>
             <Text weight="bolder">
               <StyledLink
                 to={{

src/frontend/apps/standalone_site/src/features/Header/Header.spec.tsx

@@ -21,6 +21,10 @@ describe('<Header />', () => {
     render(<Header />);
     expect(screen.getByRole('menubar')).toBeInTheDocument();
     expect(screen.getByText(/John Doe/i)).toBeInTheDocument();
+    expect(screen.getByText(/language/i)).toBeInTheDocument();
+    expect(
+      screen.getByLabelText(/Language Picker; Selected: en/i),
+    ).toBeInTheDocument();
   });
 
   test('scroll and update background', () => {