Translate groupJoinRequests

public/locales/en/group.json

@@ -23,6 +23,7 @@
     "type": "group type"
   },
   "invitation_expiry": "invitation Expiry Time",
+  "join_requests": "join requests",
   "question": {
     "create_group": "would you like to perform an CREATE_GROUP transaction?",
     "group_invite": "would you like to perform a GROUP_INVITE transaction?",
@@ -32,6 +33,8 @@
   "message": {
     "generic": {
       "encryption_key": "the group's first common encryption key is in the process of creation. Please wait a few minutes for it to be retrieved by the network. Checking every 2 minutes...",
+      "group_invited_you": "{{group}} has invited you",
+      "no_display": "nothing to display",
       "no_selection": "no group selected",
       "not_part_group": "you are not part of the encrypted group of members. Wait until an admin re-encrypts the keys.",
       "only_encrypted": "only unencrypted messages will be displayed.",

src/components/Group/GroupInvites.tsx

@@ -69,7 +69,7 @@ export const GroupInvites = ({ myAddress, setOpenAddGroup }) => {
         <Typography
           sx={{
             fontSize: '1rem',
-          }} // TODO translate
+          }}
         >
           {t('group:group_invites', { postProcess: 'capitalize' })}{' '}
           {groupsWithJoinRequests?.length > 0 &&
@@ -130,7 +130,9 @@ export const GroupInvites = ({ myAddress, setOpenAddGroup }) => {
                   fontWeight: 400,
                 }}
               >
-                Nothing to display
+                {t('group:message.generic.no_display', {
+                  postProcess: 'capitalize',
+                })}
               </Typography>
             </Box>
           )}
@@ -177,7 +179,10 @@ export const GroupInvites = ({ myAddress, setOpenAddGroup }) => {
                           fontWeight: 400,
                         },
                       }}
-                      primary={`${group?.groupName} has invited you`}
+                      primary={t('group:message.generic.group_invited_you', {
+                        group: group?.groupName,
+                        postProcess: 'capitalize',
+                      })}
                     />
                   </ListItemButton>
                 </ListItem>

src/components/Group/GroupJoinRequests.tsx

@@ -14,6 +14,7 @@ import { myGroupsWhereIAmAdminAtom } from '../../atoms/global';
 import { useSetRecoilState } from 'recoil';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import ExpandLessIcon from '@mui/icons-material/ExpandLess';
+import { useTranslation } from 'react-i18next';
 export const requestQueueGroupJoinRequests = new RequestQueueWithPromise(2);
 
 export const GroupJoinRequests = ({
@@ -27,7 +28,7 @@ export const GroupJoinRequests = ({
   setDesktopViewMode,
 }) => {
   const [isExpanded, setIsExpanded] = React.useState(false);
-
+  const { t } = useTranslation(['core', 'group']);
   const [groupsWithJoinRequests, setGroupsWithJoinRequests] = React.useState(
     []
   );
@@ -139,9 +140,9 @@ export const GroupJoinRequests = ({
         <Typography
           sx={{
             fontSize: '1rem',
-          }} // TODO translate
+          }}
         >
-          Join Requests{' '}
+          {t('group:join_requests', { postProcess: 'capitalize' })}{' '}
           {filteredJoinRequests?.filter((group) => group?.data?.length > 0)
             ?.length > 0 &&
             ` (${filteredJoinRequests?.filter((group) => group?.data?.length > 0)?.length})`}
@@ -163,14 +164,13 @@ export const GroupJoinRequests = ({
       <Collapse in={isExpanded} timeout="auto" unmountOnExit>
         <Box
           sx={{
-            width: '322px',
+            bgcolor: 'background.paper',
-            height: '250px',
+            borderRadius: '19px',
-
             display: 'flex',
             flexDirection: 'column',
-            bgcolor: 'background.paper',
+            height: '250px',
             padding: '20px',
-            borderRadius: '19px',
+            width: '322px',
           }}
         >
           {loading && filteredJoinRequests.length === 0 && (
@@ -204,18 +204,20 @@ export const GroupJoinRequests = ({
                     color: 'rgba(255, 255, 255, 0.2)',
                   }}
                 >
-                  Nothing to display
+                  {t('group:message.generic.no_display', {
+                    postProcess: 'capitalize',
+                  })}
                 </Typography>
               </Box>
             )}
           <List
             className="scrollable-container"
             sx={{
-              width: '100%',
-              maxWidth: 360,
               bgcolor: 'background.paper',
               maxHeight: '300px',
+              maxWidth: 360,
               overflow: 'auto',
+              width: '100%',
             }}
           >
             {filteredJoinRequests?.map((group) => {