➕(app-desk) add luxon to display date

Add luxon to display date in the team description.
The date are internationalized and formatted as the
mockup requested.

src/frontend/apps/desk/package.json

@@ -18,6 +18,7 @@
     "@openfun/cunningham-react": "2.4.0",
     "@tanstack/react-query": "5.22.2",
     "i18next": "23.9.0",
+    "luxon": "3.4.4",
     "next": "14.1.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
@@ -31,6 +32,7 @@
     "@testing-library/jest-dom": "6.4.2",
     "@testing-library/react": "14.2.1",
     "@types/jest": "29.5.12",
+    "@types/luxon": "3.4.2",
     "@types/node": "*",
     "@types/react": "18.2.56",
     "@types/react-dom": "18.2.18",

src/frontend/apps/desk/src/features/teams/api/types.tsx

@@ -14,4 +14,6 @@ export interface Team {
   id: string;
   name: string;
   accesses: Access[];
+  created_at: string;
+  updated_at: string;
 }

src/frontend/apps/desk/src/features/teams/components/TeamInfo.tsx

@@ -1,3 +1,4 @@
+import { DateTime, DateTimeFormatOptions } from 'luxon';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -7,6 +8,12 @@ import { useCunninghamTheme } from '@/cunningham';
 
 import { Team } from '../api/types';
 
+const format: DateTimeFormatOptions = {
+  month: '2-digit',
+  day: '2-digit',
+  year: 'numeric',
+};
+
 interface TeamInfoProps {
   team: Team;
 }
@@ -14,6 +21,15 @@ interface TeamInfoProps {
 export const TeamInfo = ({ team }: TeamInfoProps) => {
   const { t } = useTranslation();
   const { colorsTokens } = useCunninghamTheme();
+  const { i18n } = useTranslation();
+
+  const created_at = DateTime.fromISO(team.created_at)
+    .setLocale(i18n.language)
+    .toLocaleString(format);
+
+  const updated_at = DateTime.fromISO(team.updated_at)
+    .setLocale(i18n.language)
+    .toLocaleString(format);
 
   return (
     <Card className="m-b" style={{ paddingBottom: 0 }}>
@@ -52,11 +68,11 @@ export const TeamInfo = ({ team }: TeamInfoProps) => {
         </Text>
         <Text $size="s" $direction="row">
           {t('Created at')}&nbsp;
-          <Text $weight="bold">06/02/2024</Text>
+          <Text $weight="bold">{created_at}</Text>
         </Text>
         <Text $size="s" $direction="row">
           {t('Last update at')}&nbsp;
-          <Text $weight="bold">07/02/2024</Text>
+          <Text $weight="bold">{updated_at}</Text>
         </Text>
       </Box>
     </Card>

src/frontend/apps/e2e/__tests__/app-desk/team.spec.ts

@@ -33,7 +33,15 @@ test.describe('Team', () => {
 
     await expect(page.getByText(`1 member`)).toBeVisible();
 
-    await expect(page.getByText(`Created at 06/02/2024`)).toBeVisible();
-    await expect(page.getByText(`Last update at 07/02/2024`)).toBeVisible();
+    const today = new Date(Date.now());
+    const todayFormated = today.toLocaleDateString('en', {
+      month: '2-digit',
+      day: '2-digit',
+      year: 'numeric',
+    });
+    await expect(page.getByText(`Created at ${todayFormated}`)).toBeVisible();
+    await expect(
+      page.getByText(`Last update at ${todayFormated}`),
+    ).toBeVisible();
   });
 });