use locale for date and times, fix 'extract-translations'
Change-Id: I335ff2bad2c5e357563a361f85c63164eb5da83f
diff --git a/client/i18next-parser.config.js b/client/i18next-parser.config.js
index 802b11f..f9f2a6c 100644
--- a/client/i18next-parser.config.js
+++ b/client/i18next-parser.config.js
@@ -17,6 +17,6 @@
*/
export default {
locales: ['fr', 'en'],
- output: 'public/locale/$LOCALE/$NAMESPACE.json',
+ output: 'src/locale/$LOCALE/$NAMESPACE.json',
input: ['src/**/*.{ts,tsx,js,jsx}'],
};
diff --git a/client/package.json b/client/package.json
index 3bfa307..ffa19ca 100644
--- a/client/package.json
+++ b/client/package.json
@@ -2,6 +2,7 @@
"name": "jami-web-client",
"version": "0.1.0",
"private": true,
+ "type": "module",
"scripts": {
"start": "vite",
"start:prod": "vite preview",
diff --git a/client/src/App.tsx b/client/src/App.tsx
index accedf8..3e5de94 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -15,6 +15,8 @@
* License along with this program. If not, see
* <https://www.gnu.org/licenses/>.
*/
+import './dayjsInitializer';
+
import { ThemeProvider } from '@mui/material/styles';
import { useEffect, useState } from 'react';
import { Navigate, Route, Routes } from 'react-router-dom';
diff --git a/client/src/components/Message.tsx b/client/src/components/Message.tsx
index 981d3d5..0256e83 100644
--- a/client/src/components/Message.tsx
+++ b/client/src/components/Message.tsx
@@ -29,10 +29,6 @@
} from '@mui/material';
import { styled } from '@mui/material/styles';
import dayjs, { Dayjs } from 'dayjs';
-import dayOfYear from 'dayjs/plugin/dayOfYear';
-import isBetween from 'dayjs/plugin/isBetween';
-import isToday from 'dayjs/plugin/isToday';
-import isYesterday from 'dayjs/plugin/isYesterday';
import { Account, Contact, Message } from 'jami-web-common';
import { ReactElement, ReactNode, useCallback, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
@@ -41,11 +37,6 @@
import ConversationAvatar from './ConversationAvatar';
import { OppositeArrowsIcon, TrashBinIcon, TwoSheetsIcon } from './SvgIcon';
-dayjs.extend(dayOfYear);
-dayjs.extend(isBetween);
-dayjs.extend(isToday);
-dayjs.extend(isYesterday);
-
type MessagePosition = 'start' | 'end';
const notificationMessageTypes = ['initial', 'member'] as const;
@@ -181,17 +172,17 @@
}
const DateIndicator = ({ time }: DateIndicatorProps) => {
- let textDate;
+ const { i18n } = useTranslation();
- if (time.isToday()) {
- textDate = 'Today';
- } else if (time.isYesterday()) {
- textDate = 'Yesterday';
- } else {
- const date = time.date().toString().padStart(2, '0');
- const month = (time.month() + 1).toString().padStart(2, '0');
- textDate = `${date}/${month}/${time.year()}`;
- }
+ const textDate = useMemo(() => {
+ if (time.isToday()) {
+ return new Intl.RelativeTimeFormat(i18n.language, { numeric: 'auto' }).format(0, 'day');
+ } else if (time.isYesterday()) {
+ return new Intl.RelativeTimeFormat(i18n.language, { numeric: 'auto' }).format(-1, 'day');
+ } else {
+ return dayjs(time).locale(i18n.language).format('L');
+ }
+ }, [i18n, time]);
return (
<Box marginTop="30px">
@@ -215,6 +206,7 @@
border="1px solid #E5E5E5"
borderRadius="5px"
padding="10px 16px"
+ textTransform="capitalize"
>
{textDate}
</Typography>
@@ -229,9 +221,11 @@
}
const TimeIndicator = ({ time, hasDateOnTop }: TimeIndicatorProps) => {
- const hour = time.hour().toString().padStart(2, '0');
- const minute = time.minute().toString().padStart(2, '0');
- const textTime = `${hour}:${minute}`;
+ const { i18n } = useTranslation();
+
+ const textTime = useMemo(() => {
+ return dayjs(time).locale(i18n.language).format('LT');
+ }, [i18n, time]);
return (
<Stack direction="row" justifyContent="center" marginTop={hasDateOnTop ? '20px' : '30px'}>
diff --git a/client/src/dayjsInitializer.ts b/client/src/dayjsInitializer.ts
new file mode 100644
index 0000000..b2ce5c3
--- /dev/null
+++ b/client/src/dayjsInitializer.ts
@@ -0,0 +1,34 @@
+/*
+ * Copyright (C) 2022 Savoir-faire Linux Inc.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation; either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public
+ * License along with this program. If not, see
+ * <https://www.gnu.org/licenses/>.
+ */
+import 'dayjs/locale/en';
+import 'dayjs/locale/fr';
+
+import dayjs from 'dayjs';
+import dayOfYear from 'dayjs/plugin/dayOfYear';
+import isBetween from 'dayjs/plugin/isBetween';
+import isToday from 'dayjs/plugin/isToday';
+import isYesterday from 'dayjs/plugin/isYesterday';
+import localizedFormat from 'dayjs/plugin/localizedFormat';
+
+dayjs.extend(dayOfYear);
+dayjs.extend(isBetween);
+dayjs.extend(isToday);
+dayjs.extend(isYesterday);
+dayjs.extend(localizedFormat);
+
+export default dayjs;