Add group namespace

src/components/Group/Forum/GroupMail.tsx

@@ -1,5 +1,4 @@
 import React, {
-  FC,
   useCallback,
   useEffect,
   useMemo,
@@ -17,7 +16,6 @@ import {
   ComposeIcon,
   ComposeP,
   GroupContainer,
-  GroupNameP,
   InstanceFooter,
   InstanceListContainer,
   InstanceListContainerRow,
@@ -58,10 +56,12 @@ import { executeEvent } from '../../../utils/events';
 import RefreshIcon from '@mui/icons-material/Refresh';
 import { getArbitraryEndpointReact, getBaseApiReact } from '../../../App';
 import { addDataPublishesFunc, getDataPublishesFunc } from '../Group';
+import { useTranslation } from 'react-i18next';
 
 const filterOptions = ['Recently active', 'Newest', 'Oldest'];
 
 export const threadIdentifier = 'DOCUMENT';
+
 export const GroupMail = ({
   selectedGroup,
   userInfo,
@@ -82,6 +82,7 @@ export const GroupMail = ({
   const anchorElInstanceFilter = useRef<any>(null);
   const [tempPublishedList, setTempPublishedList] = useState([]);
   const dataPublishes = useRef({});
+  const { t } = useTranslation(['core']);
 
   const [isLoading, setIsLoading] = useState(false);
   const groupIdRef = useRef<any>(null);
@@ -627,9 +628,9 @@ export const GroupMail = ({
         <ThreadContainer>
           <Box
             sx={{
+              alignItems: 'center',
               display: 'flex',
               justifyContent: 'space-between',
-              alignItems: 'center',
             }}
           >
             <NewThread
@@ -667,8 +668,8 @@ export const GroupMail = ({
           <Spacer height="30px" />
           <Box
             sx={{
-              display: 'flex',
               alignItems: 'center',
+              display: 'flex',
               justifyContent: 'space-between',
             }}
           >
@@ -682,6 +683,7 @@ export const GroupMail = ({
               }}
             />
           </Box>
+
           <Spacer height="30px" />
 
           {combinedListTempAndReal.map((thread) => {
@@ -754,8 +756,8 @@ export const GroupMail = ({
                   {filterMode === 'Recently active' && (
                     <div
                       style={{
-                        display: 'flex',
                         alignItems: 'center',
+                        display: 'flex',
                       }}
                     >
                       <ThreadSingleLastMessageP>
@@ -776,16 +778,16 @@ export const GroupMail = ({
                     }, 300);
                   }}
                   sx={{
-                    position: 'absolute',
-                    bottom: '2px',
-                    right: '2px',
-                    borderRadius: '5px',
+                    alignItems: 'center',
                     backgroundColor: '#27282c',
+                    borderRadius: '5px',
+                    bottom: '2px',
+                    cursor: 'pointer',
                     display: 'flex',
                     gap: '10px',
-                    alignItems: 'center',
                     padding: '5px',
-                    cursor: 'pointer',
+                    position: 'absolute',
+                    right: '2px',
                     '&:hover': {
                       background: 'rgba(255, 255, 255, 0.60)',
                     },
@@ -795,9 +797,11 @@ export const GroupMail = ({
                     sx={{
                       color: 'white',
                       fontSize: '12px',
-                    }} // TODO translate
+                    }}
                   >
-                    Last page
+                    {t('core:page.last', {
+                      postProcess: 'capitalize',
+                    })}
                   </Typography>
                   <ArrowForwardIosIcon
                     sx={{

src/components/Group/Forum/NewThread.tsx

@@ -1,11 +1,9 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { Box, CircularProgress, Input } from '@mui/material';
 import ShortUniqueId from 'short-unique-id';
-import CloseIcon from '@mui/icons-material/Close';
 import ModalCloseSVG from '../../../assets/svgs/ModalClose.svg';
 import ComposeIconSVG from '../../../assets/svgs/ComposeIcon.svg';
 import {
-  AttachmentContainer,
   CloseContainer,
   ComposeContainer,
   ComposeIcon,
@@ -30,6 +28,7 @@ import TipTap from '../../Chat/TipTap';
 import { MessageDisplay } from '../../Chat/MessageDisplay';
 import { CustomizedSnackbars } from '../../Snackbar/Snackbar';
 import { saveTempPublish } from '../../Chat/GroupAnnouncements';
+import { useTranslation } from 'react-i18next';
 
 const uid = new ShortUniqueId({ length: 8 });
 
@@ -129,6 +128,7 @@ export const encryptSingleFunc = async (data: string, secretKeyObject: any) => {
     console.log(error);
   }
 };
+
 export const NewThread = ({
   groupInfo,
   members,
@@ -143,8 +143,8 @@ export const NewThread = ({
   setPostReply,
   isPrivate,
 }: NewMessageProps) => {
+  const { t } = useTranslation(['core', 'group']);
   const { show } = React.useContext(MyContext);
-
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const [value, setValue] = useState('');
   const [isSending, setIsSending] = useState(false);
@@ -183,21 +183,27 @@ export const NewThread = ({
       const missingFields: string[] = [];
 
       if (!isMessage && !threadTitle) {
-        errorMsg = 'Please provide a thread title';
+        errorMsg = t('group:provide_thread', {
+          postProcess: 'capitalize',
+        });
       }
 
       if (!name) {
-        errorMsg = 'Cannot send a message without a access to your name';
+        errorMsg = t('group:result.cannot.access_name', {
+          postProcess: 'capitalize',
+        });
       }
       if (!groupInfo) {
-        errorMsg = 'Cannot access group information';
-      } // TODO translate
+        errorMsg = t('group:result.cannot.group_info', {
+          postProcess: 'capitalize',
+        });
+      }
 
       // if (!description) missingFields.push('subject')
       if (missingFields.length > 0) {
         const missingFieldsString = missingFields.join(', ');
         const errMsg = `Missing: ${missingFieldsString}`;
-        errorMsg = errMsg;
+        errorMsg = errMsg; // TODO translate
       }
 
       if (errorMsg) {