➕(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();
   });
 });

src/frontend/yarn.lock

@@ -3239,6 +3239,11 @@
   resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
   integrity sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==
 
+"@types/luxon@3.4.2":
+  version "3.4.2"
+  resolved "https://registry.yarnpkg.com/@types/luxon/-/luxon-3.4.2.tgz#e4fc7214a420173cea47739c33cdf10874694db7"
+  integrity sha512-TifLZlFudklWlMBfhubvgqTXRzLDI5pCbGa4P8a3wPyUQSW+1xQ5eDsreP9DWHX3tjq1ke96uYG/nwundroWcA==
+
 "@types/minimatch@^3.0.3":
   version "3.0.5"
   resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.5.tgz#1001cc5e6a3704b83c236027e77f2f58ea010f40"
@@ -6834,6 +6839,11 @@ lru-cache@^6.0.0:
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-10.1.0.tgz#2098d41c2dc56500e6c88584aa656c84de7d0484"
   integrity sha512-/1clY/ui8CzjKFyjdvwPWJUYKiFVXG2I2cY0ssG7h4+hwk+XOIX7ZSG9Q7TW8TW3Kp3BUSqgFWBLgL4PJ+Blag==
 
+luxon@3.4.4:
+  version "3.4.4"
+  resolved "https://registry.yarnpkg.com/luxon/-/luxon-3.4.4.tgz#cf20dc27dc532ba41a169c43fdcc0063601577af"
+  integrity sha512-zobTr7akeGHnv7eBOXcRgMeCP6+uyYsczwmeRCauvpvaAltgNyTbLH/+VaEAPUeWBT+1GuNmz4wC/6jtQzbbVA==
+
 lz-string@^1.5.0:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/lz-string/-/lz-string-1.5.0.tgz#c1ab50f77887b712621201ba9fd4e3a6ed099941"