fix: add translations

.eslintrc

@@ -36,14 +36,5 @@
     "@typescript-eslint/no-use-before-define": ["error"],
     "react/jsx-uses-react": "off",
     "react/react-in-jsx-scope": "off"
-  },
-  "overrides": [
-    {
-      // enable the rule specifically for TypeScript files
-      "files": ["*.ts", "*.tsx"],
-      "rules": {
-        "@typescript-eslint/explicit-function-return-type": ["error"]
-      }
-    }
-  ]
+  }
 }

.prettierrc

@@ -4,10 +4,11 @@
   "semi": true,
   "singleQuote": true,
   "importOrder": [
-    "^@(?!graasp|mui)(.*)",
     "^react",
-    "^@?mui(.*)",
-    "^@?graasp(.*)",
+    "^@?mui",
+    "^@?graasp",
+    "<THIRD_PARTY_MODULES>",
+    "^@/",
     "^[./]"
   ],
   "importOrderSeparation": true,

package.json

@@ -28,7 +28,7 @@
     "node": ">=16"
   },
   "scripts": {
-    "build": "tsc",
+    "build": "tsc && tsc-alias",
     "start": "rimraf dist && tsc && rollup --watch -c rollup.config.js",
     "start:example": "yarn workspace graasp-chatbox-example start",
     "prepack": "yarn build",
@@ -48,6 +48,7 @@
   "peerDependencies": {
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
+    "@graasp/translations": "1.10.0",
     "@mui/icons-material": "^5.11.11",
     "@mui/lab": "^5.0.0-alpha.121",
     "@mui/material": "^5.11.11",
@@ -58,7 +59,6 @@
   "dependencies": {
     "@graasp/query-client": "0.4.0",
     "@graasp/sdk": "0.10.0",
-    "@graasp/translations": "1.10.0",
     "@graasp/ui": "2.3.1",
     "i18next": "21.8.1",
     "lodash.truncate": "4.4.2",
@@ -82,6 +82,7 @@
     "@cypress/webpack-dev-server": "3.3.0",
     "@emotion/react": "11.10.6",
     "@emotion/styled": "11.10.6",
+    "@graasp/translations": "github:graasp/graasp-translations#145-add-notification-translations",
     "@mui/icons-material": "5.11.11",
     "@mui/lab": "5.0.0-alpha.121",
     "@mui/material": "5.11.11",

src/components/Chatbox/EditBanner.tsx

@@ -1,5 +1,4 @@
 import { FC } from 'react';
-import { useTranslation } from 'react-i18next';
 
 import Close from '@mui/icons-material/Close';
 import Edit from '@mui/icons-material/Edit';
@@ -16,9 +15,10 @@ import {
   editBannerCloseButtonCypress,
   editBannerCypress,
   editBannerOldTextCypress,
-} from '../../config/selectors';
-import { useEditingContext } from '../../context/EditingContext';
-import { normalizeMentions } from '../../utils/mentions';
+} from '@/config/selectors';
+import { useEditingContext } from '@/context/EditingContext';
+import { normalizeMentions } from '@/utils/mentions';
+import { useChatboxTranslation } from '@/utils/utils';
 
 const Container = styled(Box)({
   display: 'flex',
@@ -48,7 +48,7 @@ type Props = {
 
 const EditBanner: FC<Props> = ({ onClose, editedText }) => {
   const { open } = useEditingContext();
-  const { t } = useTranslation();
+  const { t } = useChatboxTranslation();
   if (!open) {
     return null;
   }

src/components/Chatbox/Header.tsx

@@ -1,5 +1,4 @@
 import { FC } from 'react';
-import { useTranslation } from 'react-i18next';
 
 import ChatIcon from '@mui/icons-material/Chat';
 import { styled } from '@mui/material';
@@ -9,6 +8,8 @@ import Typography from '@mui/material/Typography';
 
 import { CHATBOX } from '@graasp/translations';
 
+import { useChatboxTranslation } from '@/utils/utils';
+
 const RootContainer = styled('div')({
   flexGrow: 1,
 });
@@ -25,7 +26,7 @@ type Props = {
 };
 
 const Header: FC<Props> = ({ title }) => {
-  const { t } = useTranslation();
+  const { t } = useChatboxTranslation();
 
   return (
     <RootContainer>

src/components/Chatbox/Input.tsx

@@ -1,5 +1,4 @@
 import React, { FC, ReactElement, RefObject, useEffect, useState } from 'react';
-import { useTranslation } from 'react-i18next';
 import {
   Mention,
   MentionItem,
@@ -15,22 +14,23 @@ import IconButton from '@mui/material/IconButton';
 import { MessageBodyType } from '@graasp/sdk';
 import { CHATBOX } from '@graasp/translations';
 
+import FullWidthWrapper from '@/components/common/FullWidthWrapper';
 import {
   charCounterCypress,
   inputTextFieldCypress,
   inputTextFieldTextAreaCypress,
   sendButtonCypress,
-} from '../../config/selectors';
+} from '@/config/selectors';
 import {
   ALL_MEMBERS_ID,
   ALL_MEMBERS_SUGGESTION,
   GRAASP_MENTION_COLOR,
   HARD_MAX_MESSAGE_LENGTH,
-} from '../../constants';
-import { useCurrentMemberContext } from '../../context/CurrentMemberContext';
-import { useMessagesContext } from '../../context/MessagesContext';
-import { MENTION_MARKUP } from '../../utils/mentions';
-import FullWidthWrapper from '../common/FullWidthWrapper';
+} from '@/constants';
+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',
@@ -120,7 +120,7 @@ const Input: FC<Props> = ({
 
   const { members } = useMessagesContext();
   const { id: currentMemberId } = useCurrentMemberContext();
-  const { t } = useTranslation();
+  const { t } = useChatboxTranslation();
   const [currentMentions, setCurrentMentions] = useState<string[]>([]);
   const [plainTextMessage, setPlainTextMessage] = useState<string>('');
 

src/components/Chatbox/Message.tsx

@@ -1,8 +1,4 @@
-import truncate from 'lodash.truncate';
-import moment from 'moment';
-
 import { FC } from 'react';
-import { useTranslation } from 'react-i18next';
 
 import { styled } from '@mui/material';
 import Box from '@mui/material/Box';
@@ -13,13 +9,18 @@ import { ChatMessageRecord, MemberRecord } from '@graasp/sdk/frontend';
 import { CHATBOX } from '@graasp/translations';
 import { Avatar } from '@graasp/ui';
 
-import { messageIdCyWrapper } from '../../config/selectors';
+import truncate from 'lodash.truncate';
+import moment from 'moment';
+
+import { messageIdCyWrapper } from '@/config/selectors';
 import {
   DEFAULT_USER_NAME,
   MAX_AVATAR_SIZE,
   MAX_USERNAME_LENGTH,
-} from '../../constants';
-import { useHooksContext } from '../../context/HooksContext';
+} from '@/constants';
+import { useHooksContext } from '@/context/HooksContext';
+import { useChatboxTranslation } from '@/utils/utils';
+
 import MessageBody from './MessageBody';
 
 const MessageWrapper = styled(Box)(({ theme }) => ({
@@ -53,7 +54,7 @@ type Props = {
 };
 
 const Message: FC<Props> = ({ message, currentMember, member }) => {
-  const { t } = useTranslation();
+  const { t } = useChatboxTranslation();
   const { useAvatarHook } = useHooksContext();
   const {
     data: thumbnailBlob,

src/components/Chatbox/MessageActions.tsx

@@ -1,5 +1,4 @@
 import React, { FC, useState } from 'react';
-import { useTranslation } from 'react-i18next';
 
 import Delete from '@mui/icons-material/Delete';
 import Edit from '@mui/icons-material/Edit';
@@ -20,10 +19,11 @@ import {
   deleteMenuItemCypress,
   editMenuItemCypress,
   messageActionsButtonCypress,
-} from '../../config/selectors';
-import { LIST_ICON_MIN_WIDTH } from '../../constants';
-import { useEditingContext } from '../../context/EditingContext';
-import { DeleteMessageFunctionType } from '../../types';
+} from '@/config/selectors';
+import { LIST_ICON_MIN_WIDTH } from '@/constants';
+import { useEditingContext } from '@/context/EditingContext';
+import { DeleteMessageFunctionType } from '@/types';
+import { useChatboxTranslation } from '@/utils/utils';
 
 type Props = {
   message: ChatMessageRecord;
@@ -45,7 +45,7 @@ const MessageActions: FC<Props> = ({
 }) => {
   const [menuOpen, setMenuOpen] = useState(false);
   const [menuAnchor, setMenuAnchor] = useState<HTMLElement | null>(null);
-  const { t } = useTranslation();
+  const { t } = useChatboxTranslation();
   const { enableEdit } = useEditingContext();
 
   const handleOnClickMenu = (e: React.MouseEvent<HTMLButtonElement>): void => {

src/components/Mentions/MentionButton.tsx

@@ -1,17 +1,18 @@
-import { List } from 'immutable';
-
 import { FC, useState } from 'react';
-import { useTranslation } from 'react-i18next';
 import { UseQueryResult } from 'react-query';
 
 import Notifications from '@mui/icons-material/Notifications';
 import { Badge, BadgeProps, IconButton, SvgIconProps } from '@mui/material';
 
 import { MentionStatus } from '@graasp/sdk';
 import { MemberMentionsRecord, MemberRecord } from '@graasp/sdk/frontend';
-import { CHATBOX, namespaces } from '@graasp/translations';
+import { CHATBOX } from '@graasp/translations';
+
+import { List } from 'immutable';
+
+import { mentionButtonCypress } from '@/config/selectors';
+import { useChatboxTranslation } from '@/utils/utils';
 
-import { mentionButtonCypress } from '../../config/selectors';
 import MentionsDialog from './MentionsDialog';
 import MentionsTable from './MentionsTable';
 
@@ -36,7 +37,7 @@ const MentionButton: FC<Props> = ({
   deleteMentionFunction,
   clearAllMentionsFunction,
 }) => {
-  const { t } = useTranslation(namespaces.chatbox);
+  const { t } = useChatboxTranslation();
 
   const { data: memberMentions } = useMentions();
   const mentions = memberMentions?.mentions;

src/components/Mentions/MentionsDialog.tsx

@@ -1,10 +1,11 @@
 import { FC, ReactElement } from 'react';
-import { useTranslation } from 'react-i18next';
 
 import Notifications from '@mui/icons-material/Notifications';
 import { Dialog, DialogContent, DialogTitle, styled } from '@mui/material';
 
-import { namespaces } from '@graasp/translations';
+import { CHATBOX } from '@graasp/translations';
+
+import { useChatboxTranslation } from '@/utils/utils';
 
 const DialogTitleIcon = styled(Notifications)(({ theme }) => ({
   paddingRight: theme.spacing(1),
@@ -22,13 +23,13 @@ type Props = {
 };
 
 const MentionsDialog: FC<Props> = ({ content, open, setOpen }) => {
-  const { t } = useTranslation(namespaces.chatbox);
+  const { t } = useChatboxTranslation();
   return (
     <Dialog open={open} onClose={(): void => setOpen(false)} maxWidth="lg">
       <DialogTitle>
         <DialogTitleContainer>
           <DialogTitleIcon color="primary" />
-          {t('Notifications')}
+          {t(CHATBOX.NOTIFICATIONS_DIALOG_TITLE)}
         </DialogTitleContainer>
       </DialogTitle>
       <DialogContent>{content}</DialogContent>

src/components/Mentions/MentionsTable.tsx

@@ -1,7 +1,4 @@
-import { List } from 'immutable';
-
 import { FC, ReactElement, useState } from 'react';
-import { useTranslation } from 'react-i18next';
 
 import Check from '@mui/icons-material/Check';
 import Close from '@mui/icons-material/Close';
@@ -24,9 +21,13 @@ import {
   getIdsFromPath,
 } from '@graasp/sdk';
 import { ChatMentionRecord } from '@graasp/sdk/frontend';
-import { CHATBOX, namespaces } from '@graasp/translations';
+import { CHATBOX } from '@graasp/translations';
 import { Button } from '@graasp/ui';
 
+import { List } from 'immutable';
+
+import { useChatboxTranslation } from '@/utils/utils';
+
 import MessageBody from '../Chatbox/MessageBody';
 import ConfirmationDialog from '../common/ConfirmationDialog';
 
@@ -51,7 +52,7 @@ const MentionsTable: FC<Props> = ({
   clearAllMentions,
 }) => {
   const [openConfirmation, setOpenConfirmation] = useState(false);
-  const { t } = useTranslation(namespaces.chatbox);
+  const { t } = useChatboxTranslation();
   const markAsRead = (id: string): void => {
     patchMention({ id: id, status: MentionStatus.READ });
   };
@@ -60,7 +61,7 @@ const MentionsTable: FC<Props> = ({
     if (!mentions || !mentions.size) {
       return (
         <TableRow>
-          <TableCell colSpan={4}>No Notifications</TableCell>
+          <TableCell colSpan={4}>{t(CHATBOX.EMPTY_NOTIFICATIONS)}</TableCell>
         </TableRow>
       );
     }

src/components/common/ConfirmationDialog.tsx

@@ -1,5 +1,4 @@
 import { FC, ReactElement } from 'react';
-import { useTranslation } from 'react-i18next';
 
 import {
   Dialog,
@@ -14,7 +13,8 @@ import { Button } from '@graasp/ui';
 import {
   cancelDialogButtonCypress,
   confirmDialogButtonCypress,
-} from '../../config/selectors';
+} from '@/config/selectors';
+import { useChatboxTranslation } from '@/utils/utils';
 
 type Props = {
   open: boolean;
@@ -35,7 +35,7 @@ const ConfirmationDialog: FC<Props> = ({
   onConfirm,
   onCancel,
 }) => {
-  const { t } = useTranslation();
+  const { t } = useChatboxTranslation();
 
   return (
     <Dialog open={open}>

src/utils/utils.ts

@@ -0,0 +1,5 @@
+import { useTranslation } from 'react-i18next';
+
+import { namespaces } from '@graasp/translations';
+
+export const useChatboxTranslation = () => useTranslation(namespaces.chatbox);