From 7add42f525c0d8d4aec2fad13b718dc6f127168e Mon Sep 17 00:00:00 2001
From: Anthony LC <anthony.le-courric@mail.numerique.gouv.fr>
Date: Fri, 19 Jan 2024 11:40:52 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=8C=90(app-desk)=20plug=20i18n=20to=20Lan?=
 =?UTF-8?q?guagePicker?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Plug i18n to LanguagePicker.
- Make translatable all the string of the app.
---
 .../apps/desk/src/app/Header/Header.tsx       | 21 +++---
 .../desk/src/app/Language/LanguagePicker.tsx  | 65 +++++++++----------
 .../apps/desk/src/app/Teams/index.tsx         |  6 +-
 .../apps/desk/src/i18n/translations.json      |  6 +-
 .../e2e/__tests__/app-desk/language.spec.ts   |  3 -
 5 files changed, 50 insertions(+), 51 deletions(-)

diff --git a/src/frontend/apps/desk/src/app/Header/Header.tsx b/src/frontend/apps/desk/src/app/Header/Header.tsx
index 50db7d6..b8c71c4 100644
--- a/src/frontend/apps/desk/src/app/Header/Header.tsx
+++ b/src/frontend/apps/desk/src/app/Header/Header.tsx
@@ -1,6 +1,7 @@
 import { Button } from '@openfun/cunningham-react';
 import Image from 'next/image';
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 import styled from 'styled-components';
 
 import { Box, Text } from '@/components/';
@@ -22,6 +23,8 @@ const RedStripe = styled.div`
 `;
 
 const Header = () => {
+  const { t } = useTranslation();
+
   return (
     <Box
       className="mb-l"
@@ -35,17 +38,17 @@ const Header = () => {
       <RedStripe />
       <Box className="ml-l mr-l" $align="center" $justify="space-between">
         <Box $direction="column">
-          <Image priority src={IconMarianne} alt="Marianne Logo" />
+          <Image priority src={IconMarianne} alt={t('Marianne Logo')} />
           <Box $align="center" $gap="6rem">
             <Image
               priority
               src={IconGouv}
-              alt="Freedom Equality Fraternity Logo"
+              alt={t('Freedom Equality Fraternity Logo')}
             />
             <Box $align="center" $gap="1rem">
-              <Image priority src={IconDesk} alt="Desk Logo" />
+              <Image priority src={IconDesk} alt={t('Desk Logo')} />
               <Text className="m-0" as="h2">
-                Desk
+                {t('Desk')}
               </Text>
             </Box>
           </Box>
@@ -62,17 +65,17 @@ const Header = () => {
         >
           <Box $align="center">
             <Button
-              aria-label="Access to FAQ"
-              icon={<Image priority src={IconFAQ} alt="FAQ Icon" />}
+              aria-label={t('Access to FAQ')}
+              icon={<Image priority src={IconFAQ} alt={t('FAQ Icon')} />}
               className="m-s c__button-no-bg p-0"
             >
-              FAQ
+              {t('FAQ')}
             </Button>
             <LanguagePicker />
           </Box>
           <Button
-            aria-label="Access to the cells menu"
-            icon={<Image priority src={IconCells} alt="Cells icon" />}
+            aria-label={t('Access to the cells menu')}
+            icon={<Image priority src={IconCells} alt={t('Cells icon')} />}
             color="tertiary"
             className="c__button-no-bg p-0 m-0"
           />
diff --git a/src/frontend/apps/desk/src/app/Language/LanguagePicker.tsx b/src/frontend/apps/desk/src/app/Language/LanguagePicker.tsx
index a7c2e18..d7e990e 100644
--- a/src/frontend/apps/desk/src/app/Language/LanguagePicker.tsx
+++ b/src/frontend/apps/desk/src/app/Language/LanguagePicker.tsx
@@ -1,5 +1,7 @@
 import { Select } from '@openfun/cunningham-react';
 import Image from 'next/image';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
 import styled from 'styled-components';
 
 import { Box, Text } from '@/components/';
@@ -31,49 +33,42 @@ const SelectStyled = styled(Select)<{ $isSmall?: boolean }>`
   }
 `;
 
-const optionsPicker = [
-  {
-    value: 'FR',
-    label: 'FR',
-    render: () => (
-      <Box
-        className="c_select__render"
-        $direction="row"
-        $gap="0.7rem"
-        $align="center"
-      >
-        <Image priority src={IconLanguage} alt="Language Icon" />
-        <Text>FR</Text>
-      </Box>
-    ),
-  },
-  {
-    value: 'EN',
-    label: 'EN',
-    render: () => (
-      <Box
-        className="c_select__render"
-        $direction="row"
-        $gap="0.7rem"
-        $align="center"
-      >
-        <Image priority src={IconLanguage} alt="Language Icon" />
-        <Text>EN</Text>
-      </Box>
-    ),
-  },
-];
-
 export const LanguagePicker = () => {
+  const { t, i18n } = useTranslation();
+  const { preload: languages } = i18n.options;
+
+  const optionsPicker = useMemo(() => {
+    return (languages || []).map((lang) => ({
+      value: lang,
+      label: lang,
+      render: () => (
+        <Box
+          className="c_select__render"
+          $direction="row"
+          $gap="0.7rem"
+          $align="center"
+        >
+          <Image priority src={IconLanguage} alt={t('Language Icon')} />
+          <Text>{lang.toUpperCase()}</Text>
+        </Box>
+      ),
+    }));
+  }, [languages, t]);
+
   return (
     <SelectStyled
-      label="Langue"
+      label={t('Language')}
       showLabelWhenSelected={false}
       clearable={false}
       hideLabel
-      defaultValue="FR"
+      defaultValue={i18n.language}
       className="c_select__no_bg"
       options={optionsPicker}
+      onChange={(e) => {
+        i18n.changeLanguage(e.target.value as string).catch((err) => {
+          console.error('Error changing language', err);
+        });
+      }}
     />
   );
 };
diff --git a/src/frontend/apps/desk/src/app/Teams/index.tsx b/src/frontend/apps/desk/src/app/Teams/index.tsx
index 2c42d9c..6318bdc 100644
--- a/src/frontend/apps/desk/src/app/Teams/index.tsx
+++ b/src/frontend/apps/desk/src/app/Teams/index.tsx
@@ -1,5 +1,6 @@
 import { Button, Field, Input, Loader } from '@openfun/cunningham-react';
 import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { useCreateTeam } from './api/useCreateTeam';
 import { useTeams } from './api/useTeams';
@@ -8,6 +9,7 @@ export const Teams = () => {
   const { data, isPending } = useTeams();
   const { mutate: createTeam } = useCreateTeam();
   const [teamName, setTeamName] = useState('');
+  const { t } = useTranslation();
 
   if (isPending) {
     return (
@@ -22,11 +24,11 @@ export const Teams = () => {
       <Field>
         <Input
           type="text"
-          label="Team name"
+          label={t('Team name')}
           onChange={(e) => setTeamName(e.target.value)}
         />
         <Button fullWidth onClick={() => createTeam(teamName)} className="mt-s">
-          Create Team
+          {t('Create Team')}
         </Button>
       </Field>
       <section>
diff --git a/src/frontend/apps/desk/src/i18n/translations.json b/src/frontend/apps/desk/src/i18n/translations.json
index 706b934..4df4409 100644
--- a/src/frontend/apps/desk/src/i18n/translations.json
+++ b/src/frontend/apps/desk/src/i18n/translations.json
@@ -1,12 +1,14 @@
 {
   "en": {
     "translation": {
-      "Hello Desk !": "Hello Desk !"
+      "Hello Desk !": "Hello Desk !",
+      "Freedom Equality Fraternity Logo": "Freedom Equality Fraternity Logo"
     }
   },
   "fr": {
     "translation": {
-      "Hello Desk !": "Bienvenue sur Desk !"
+      "Hello Desk !": "Bienvenue sur Desk !",
+      "Freedom Equality Fraternity Logo": "Logo Liberté Egalité Fraternité"
     }
   }
 }
diff --git a/src/frontend/apps/e2e/__tests__/app-desk/language.spec.ts b/src/frontend/apps/e2e/__tests__/app-desk/language.spec.ts
index 0b35bb9..525bc84 100644
--- a/src/frontend/apps/e2e/__tests__/app-desk/language.spec.ts
+++ b/src/frontend/apps/e2e/__tests__/app-desk/language.spec.ts
@@ -18,9 +18,6 @@ test.describe("Language", () => {
     const header = page.locator("header").first();
 
     await header.getByRole("combobox").getByText("FR").click();
-    await expect(
-      header.getByRole("option", { name: "Language Icon FR" }),
-    ).toHaveAttribute("aria-selected", "true");
     await header.getByRole("option", { name: "Language Icon EN" }).click();
     await expect(header.getByRole("combobox").getByText("EN")).toBeVisible();
   });