fix: remove moment (#164)

package.json

@@ -38,8 +38,8 @@
     "@mui/icons-material": "^5.15.1",
     "@mui/material": "^5.15.1",
     "cypress": "^13.6.1",
+    "date-fns": "^3.2.0",
     "lodash.groupby": "^4.6.0",
-    "moment": "^2.29.4",
     "prism-react-renderer": "^2.3.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -84,6 +84,7 @@
     "@mui/icons-material": "^5.11.11",
     "@mui/lab": "^5.0.0-alpha.121",
     "@mui/material": "^5.11.11",
+    "date-fns": "^3.2.0",
     "i18next": "^23.10.0",
     "react": "*",
     "react-dom": "*",

src/components/Chatbox/Message.tsx

@@ -9,8 +9,8 @@ import { ChatMessage, CompleteMember, Member } from '@graasp/sdk';
 import { CHATBOX } from '@graasp/translations';
 import { Avatar } from '@graasp/ui';
 
+import { format } from 'date-fns';
 import truncate from 'lodash.truncate';
-import moment from 'moment';
 
 import { messageIdCyWrapper } from '@/config/selectors';
 import {
@@ -54,7 +54,7 @@ type Props = {
 };
 
 const Message: FC<Props> = ({ message, currentMember, member }) => {
-  const { t } = useChatboxTranslation();
+  const { t, i18n } = useChatboxTranslation();
   const { useAvatarUrl } = useHooksContext();
   const {
     data: avatarUrl,
@@ -69,7 +69,7 @@ const Message: FC<Props> = ({ message, currentMember, member }) => {
   const creatorName = member?.name
     ? truncate(member?.name, { length: MAX_USERNAME_LENGTH })
     : DEFAULT_USER_NAME;
-  const time = moment(message.createdAt as unknown as string).format('hh:mm a');
+  const time = format(message.createdAt, 'hh:mm aaa', { locale: i18n.locale });
 
   return (
     <MessageWrapper

src/components/Chatbox/Messages.tsx

@@ -5,14 +5,15 @@ import Box from '@mui/material/Box';
 
 import { ChatMessage, CompleteMember } from '@graasp/sdk';
 
+import { format } from 'date-fns';
 import groupBy from 'lodash.groupby';
-import moment from 'moment';
 
 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';
@@ -55,6 +56,7 @@ const Messages: FC<Props> = ({
   isAdmin = false,
   deleteMessageFunction,
 }) => {
+  const { i18n } = useChatboxTranslation();
   const ref = useRef<HTMLDivElement>(null);
   const { open } = useEditingContext();
   const { messages, members } = useMessagesContext();
@@ -75,7 +77,7 @@ const Messages: FC<Props> = ({
     message.creator?.id === currentMember?.id;
   const messagesByDay = Object.entries(
     groupBy(messages, ({ createdAt }) =>
-      moment(createdAt).format(DEFAULT_DATE_FORMAT),
+      format(createdAt, DEFAULT_DATE_FORMAT, { locale: i18n.locale }),
     ),
   );
 

src/constants.ts

@@ -13,7 +13,7 @@ export const DEFAULT_USER_NAME = 'Anonymous';
 export const UNKNOWN_USER_NAME = 'Unknown';
 export const MAX_USERNAME_LENGTH = 30;
 export const HARD_MAX_MESSAGE_LENGTH = 400;
-export const DEFAULT_DATE_FORMAT = 'DD MMM YYYY';
+export const DEFAULT_DATE_FORMAT = 'dd MMMM yyyy';
 export const EXPORT_DATE_FORMAT = 'YYYY-MM-DD';
 export const HEADER_HEIGHT = 64;
 export const LIST_ICON_MIN_WIDTH = 30;

vite.config.ts

@@ -43,6 +43,7 @@ export default ({ mode }: { mode: string }): UserConfigExport => {
           '@mui/icons-material',
           '@mui/lab',
           '@mui/material',
+          'date-fns',
           'i18next',
           'react-dom',
           'react-i18next',

yarn.lock

@@ -799,12 +799,12 @@ __metadata:
     "@typescript-eslint/parser": "npm:^6.14.0"
     "@vitejs/plugin-react": "npm:^4.2.1"
     cypress: "npm:^13.6.1"
+    date-fns: "npm:^3.2.0"
     eslint: "npm:^8.55.0"
     eslint-config-prettier: "npm:^9.1.0"
     eslint-plugin-react-hooks: "npm:^4.6.0"
     eslint-plugin-react-refresh: "npm:^0.4.5"
     lodash.groupby: "npm:^4.6.0"
-    moment: "npm:^2.29.4"
     prettier: "npm:^3.1.1"
     prism-react-renderer: "npm:^2.3.1"
     react: "npm:^18.2.0"
@@ -831,6 +831,7 @@ __metadata:
     "@mui/icons-material": ^5.11.11
     "@mui/lab": ^5.0.0-alpha.121
     "@mui/material": ^5.11.11
+    date-fns: ^3.2.0
     i18next: ^23.10.0
     react: "*"
     react-dom: "*"
@@ -2819,6 +2820,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"date-fns@npm:^3.2.0":
+  version: 3.2.0
+  resolution: "date-fns@npm:3.2.0"
+  checksum: f93e987f785d7f2b7349986d150b014ce21fa6425e2e1edea6f0e01731dceef68deabf0f723689c28604e857648ac708a52b924cb7584e4321835686aa665371
+  languageName: node
+  linkType: hard
+
 "dayjs@npm:^1.10.4":
   version: 1.11.10
   resolution: "dayjs@npm:1.11.10"
@@ -5558,13 +5566,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"moment@npm:^2.29.4":
-  version: 2.29.4
-  resolution: "moment@npm:2.29.4"
-  checksum: 844c6f3ce42862ac9467c8ca4f5e48a00750078682cc5bda1bc0e50cc7ca88e2115a0f932d65a06e4a90e26cb78892be9b3ca3dd6546ca2c4d994cebb787fc2b
-  languageName: node
-  linkType: hard
-
 "ms@npm:2.1.2":
   version: 2.1.2
   resolution: "ms@npm:2.1.2"