commit 0e1a0d983f05837e35dfe823feedadf59b8d2afe
author idillon-sfl <io.daza-dillon@savoirfairelinux.com> Tue Oct 25 16:52:44 2022 -0400
committer Io Daza-Dillon <io.daza-dillon@savoirfairelinux.com> Mon Oct 31 12:07:40 2022 -0400
tree 42cfece7e1c4e76ef2ffbc986ce92278b1d0e1d0
parent 118ae440de855bcca0a460cd9f7584a7adc1ccd9

use locale for date and times, fix 'extract-translations'

Change-Id: I335ff2bad2c5e357563a361f85c63164eb5da83f

client/src/components/Message.tsx

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'}>