From b307b373bb522af6befc96e7df11a108e7c624e4 Mon Sep 17 00:00:00 2001 From: Anthony LC Date: Mon, 19 Feb 2024 16:02:44 +0100 Subject: [PATCH] =?UTF-8?q?=E2=9E=95(app-desk)=20add=20luxon=20to=20displa?= =?UTF-8?q?y=20date?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 | 2 ++ .../desk/src/features/teams/api/types.tsx | 2 ++ .../features/teams/components/TeamInfo.tsx | 20 +++++++++++++++++-- .../apps/e2e/__tests__/app-desk/team.spec.ts | 12 +++++++++-- src/frontend/yarn.lock | 10 ++++++++++ 5 files changed, 42 insertions(+), 4 deletions(-) diff --git a/src/frontend/apps/desk/package.json b/src/frontend/apps/desk/package.json index a02a0e6..dac6f03 100644 --- a/src/frontend/apps/desk/package.json +++ b/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", diff --git a/src/frontend/apps/desk/src/features/teams/api/types.tsx b/src/frontend/apps/desk/src/features/teams/api/types.tsx index 9274f36..8e571d4 100644 --- a/src/frontend/apps/desk/src/features/teams/api/types.tsx +++ b/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; } diff --git a/src/frontend/apps/desk/src/features/teams/components/TeamInfo.tsx b/src/frontend/apps/desk/src/features/teams/components/TeamInfo.tsx index 5407ca6..15d3db1 100644 --- a/src/frontend/apps/desk/src/features/teams/components/TeamInfo.tsx +++ b/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 ( @@ -52,11 +68,11 @@ export const TeamInfo = ({ team }: TeamInfoProps) => { {t('Created at')}  - 06/02/2024 + {created_at} {t('Last update at')}  - 07/02/2024 + {updated_at} diff --git a/src/frontend/apps/e2e/__tests__/app-desk/team.spec.ts b/src/frontend/apps/e2e/__tests__/app-desk/team.spec.ts index 6d0c6ac..73c779c 100644 --- a/src/frontend/apps/e2e/__tests__/app-desk/team.spec.ts +++ b/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(); }); }); diff --git a/src/frontend/yarn.lock b/src/frontend/yarn.lock index 1d9f050..1816415 100644 --- a/src/frontend/yarn.lock +++ b/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"