fix: use date locale with date-fns

package.json

@@ -67,6 +67,7 @@
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
+    "i18next": "^23.7.11",
     "prettier": "^3.1.1",
     "rollup-plugin-visualizer": "^5.11.0",
     "stylis-plugin-rtl": "^2.1.1",
@@ -85,7 +86,7 @@
     "@mui/lab": "^5.0.0-alpha.121",
     "@mui/material": "^5.11.11",
     "date-fns": "^3.2.0",
-    "i18next": "^23.10.0",
+    "i18next": "^23.7.0",
     "react": "*",
     "react-dom": "*",
     "react-i18next": "^13.0.0 || ^14.0.0"

src/components/Chatbox/EditBanner.tsx

@@ -11,14 +11,14 @@ import Typography from '@mui/material/Typography';
 
 import { CHATBOX } from '@graasp/translations';
 
+import { useChatboxTranslation } from '@/config/i18n';
 import {
   editBannerCloseButtonCypress,
   editBannerCypress,
   editBannerOldTextCypress,
 } from '@/config/selectors';
 import { useEditingContext } from '@/context/EditingContext';
 import { normalizeMentions } from '@/index';
-import { useChatboxTranslation } from '@/utils/utils';
 
 const Container = styled(Box)({
   display: 'flex',

src/components/Chatbox/Header.tsx

@@ -8,7 +8,7 @@ import Typography from '@mui/material/Typography';
 
 import { CHATBOX } from '@graasp/translations';
 
-import { useChatboxTranslation } from '@/utils/utils';
+import { useChatboxTranslation } from '@/config/i18n';
 
 const RootContainer = styled('div')({
   flexGrow: 1,

src/components/Chatbox/Input.tsx

@@ -14,6 +14,7 @@ import IconButton from '@mui/material/IconButton';
 import { MessageBodyType } from '@graasp/sdk';
 import { CHATBOX } from '@graasp/translations';
 
+import { useChatboxTranslation } from '@/config/i18n';
 import {
   charCounterCypress,
   inputTextFieldCypress,
@@ -29,7 +30,6 @@ import {
 import { useCurrentMemberContext } from '@/context/CurrentMemberContext';
 import { useMessagesContext } from '@/context/MessagesContext';
 import { MENTION_MARKUP } from '@/utils/mentions';
-import { useChatboxTranslation } from '@/utils/utils';
 
 const HelperText = styled(Typography)(({ theme }) => ({
   whiteSpace: 'pre',

src/components/Chatbox/Message.tsx

@@ -12,14 +12,14 @@ import { Avatar } from '@graasp/ui';
 import { format } from 'date-fns';
 import truncate from 'lodash.truncate';
 
+import { getDateLocale, useChatboxTranslation } from '@/config/i18n';
 import { messageIdCyWrapper } from '@/config/selectors';
 import {
   DEFAULT_USER_NAME,
   MAX_AVATAR_SIZE,
   MAX_USERNAME_LENGTH,
 } from '@/constants';
 import { useHooksContext } from '@/context/HooksContext';
-import { useChatboxTranslation } from '@/utils/utils';
 
 import MessageBody from './MessageBody';
 
@@ -69,7 +69,9 @@ const Message: FC<Props> = ({ message, currentMember, member }) => {
   const creatorName = member?.name
     ? truncate(member?.name, { length: MAX_USERNAME_LENGTH })
     : DEFAULT_USER_NAME;
-  const time = format(message.createdAt, 'hh:mm aaa', { locale: i18n.locale });
+  const time = format(message.createdAt, 'HH:mm aaa', {
+    locale: getDateLocale(i18n.language),
+  });
 
   return (
     <MessageWrapper

src/components/Chatbox/MessageActions.tsx

@@ -15,6 +15,7 @@ import {
 import { ChatMessage } from '@graasp/sdk';
 import { CHATBOX } from '@graasp/translations';
 
+import { useChatboxTranslation } from '@/config/i18n';
 import {
   deleteMenuItemCypress,
   editMenuItemCypress,
@@ -23,7 +24,6 @@ import {
 import { LIST_ICON_MIN_WIDTH } from '@/constants';
 import { useEditingContext } from '@/context/EditingContext';
 import { DeleteMessageFunctionType } from '@/types';
-import { useChatboxTranslation } from '@/utils/utils';
 
 type Props = {
   message: ChatMessage;

src/components/Chatbox/Messages.tsx

@@ -8,12 +8,12 @@ import { ChatMessage, CompleteMember } from '@graasp/sdk';
 import { format } from 'date-fns';
 import groupBy from 'lodash.groupby';
 
+import { getDateLocale, useChatboxTranslation } from '@/config/i18n';
 import { messagesContainerCypress } from '@/config/selectors';
 import { DEFAULT_DATE_FORMAT, SCROLL_SAFETY_MARGIN } from '@/constants';
 import { useEditingContext } from '@/context/EditingContext';
 import { useMessagesContext } from '@/context/MessagesContext';
 import type { DeleteMessageFunctionType } from '@/types';
-import { useChatboxTranslation } from '@/utils/utils';
 
 import Date from './Date';
 import Message from './Message';
@@ -77,7 +77,9 @@ const Messages: FC<Props> = ({
     message.creator?.id === currentMember?.id;
   const messagesByDay = Object.entries(
     groupBy(messages, ({ createdAt }) =>
-      format(createdAt, DEFAULT_DATE_FORMAT, { locale: i18n.locale }),
+      format(createdAt, DEFAULT_DATE_FORMAT, {
+        locale: getDateLocale(i18n.language),
+      }),
     ),
   );
 

src/components/Mentions/MentionsDialog.tsx

@@ -5,7 +5,7 @@ import { Dialog, DialogContent, DialogTitle, styled } from '@mui/material';
 
 import { CHATBOX } from '@graasp/translations';
 
-import { useChatboxTranslation } from '@/utils/utils';
+import { useChatboxTranslation } from '@/config/i18n';
 
 const DialogTitleIcon = styled(Notifications)(({ theme }) => ({
   paddingRight: theme.spacing(1),

src/components/Mentions/MentionsTable.tsx

@@ -24,7 +24,7 @@ import {
 import { CHATBOX } from '@graasp/translations';
 import { Button } from '@graasp/ui';
 
-import { useChatboxTranslation } from '@/utils/utils';
+import { useChatboxTranslation } from '@/config/i18n';
 
 import MessageBody from '../Chatbox/MessageBody';
 import ConfirmationDialog from '../common/ConfirmationDialog';

src/components/common/ConfirmationDialog.tsx

@@ -10,11 +10,11 @@ import {
 import { CHATBOX } from '@graasp/translations';
 import { Button } from '@graasp/ui';
 
+import { useChatboxTranslation } from '@/config/i18n';
 import {
   cancelDialogButtonCypress,
   confirmDialogButtonCypress,
 } from '@/config/selectors';
-import { useChatboxTranslation } from '@/utils/utils';
 
 type Props = {
   open: boolean;

src/config/i18n.ts

@@ -0,0 +1,24 @@
+import { useTranslation } from 'react-i18next';
+
+import { namespaces } from '@graasp/translations';
+
+import { Locale, ar, de, enGB, es, fr, it } from 'date-fns/locale';
+
+export const dateLocales: { [key: string]: Locale } = {
+  en: enGB,
+  es,
+  it,
+  fr,
+  ar,
+  de,
+};
+
+export const getDateLocale = (locale: string) => {
+  if (locale in dateLocales) {
+    return dateLocales[locale];
+  } else {
+    dateLocales.en;
+  }
+};
+
+export const useChatboxTranslation = () => useTranslation(namespaces.chatbox);

yarn.lock

@@ -804,6 +804,7 @@ __metadata:
     eslint-config-prettier: "npm:^9.1.0"
     eslint-plugin-react-hooks: "npm:^4.6.0"
     eslint-plugin-react-refresh: "npm:^0.4.5"
+    i18next: "npm:^23.7.11"
     lodash.groupby: "npm:^4.6.0"
     prettier: "npm:^3.1.1"
     prism-react-renderer: "npm:^2.3.1"
@@ -832,7 +833,7 @@ __metadata:
     "@mui/lab": ^5.0.0-alpha.121
     "@mui/material": ^5.11.11
     date-fns: ^3.2.0
-    i18next: ^23.10.0
+    i18next: ^23.7.0
     react: "*"
     react-dom: "*"
     react-i18next: ^13.0.0 || ^14.0.0
@@ -4129,6 +4130,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"i18next@npm:^23.7.11":
+  version: 23.7.16
+  resolution: "i18next@npm:23.7.16"
+  dependencies:
+    "@babel/runtime": "npm:^7.23.2"
+  checksum: 8e18d56970a468e0c3f38cf105d2eb22c2b275b596ecd3ac7193fe6e73a57705f3415b510ea761b702163278b975bcab6c15187f254d350fb0501baf66927168
+  languageName: node
+  linkType: hard
+
 "iconv-lite@npm:^0.6.2":
   version: 0.6.3
   resolution: "iconv-lite@npm:0.6.3"