Add translations

public/locales/en/group.json

@@ -12,7 +12,10 @@
     "join_group": "join group",
     "kick_member": "kick member from group",
     "invite_member": "invite member",
+    "leave_group": "leave group",
+    "load_members": "load members with names",
     "make_admin": "make an admin",
+    "manage_members": "manage members",
     "refetch_page": "refetch page",
     "remove_admin": "remove as admin",
     "return_to_thread": "return to threads"
@@ -27,6 +30,7 @@
   "group": {
     "closed": "closed (private) - users need permission to join",
     "description": "description of group",
+    "id": "group id",
     "invites": "group invites",
     "management": "group management",
     "member_number": "number of members",
@@ -36,11 +40,8 @@
   },
   "invitation_expiry": "invitation Expiry Time",
   "invitees_list": "invitees list",
+  "join_link": "join group link",
   "join_requests": "join requests",
-  "question": {
-    "perform_transaction": "would you like to perform a {{action}} transaction?",
-    "provide_thread": "please provide a thread title"
-  },
   "message": {
     "generic": {
       "already_in_group": "you are already in this group!",
@@ -48,6 +49,7 @@
       "descrypt_wallet": "decrypting wallet...",
       "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",
+      "loading_members": "loading member list with names... please wait.",
       "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.",
@@ -79,6 +81,9 @@
       "group_join_request": "requested to join Group {{group_name}}: awaiting confirmation",
       "group_join_outcome": "requested to join Group {{group_name}}: success!",
       "group_kick": "successfully kicked member from group. It may take a couple of minutes for the changes to propagate",
+      "group_leave": "successfully requested to leave group. It may take a couple of minutes for the changes to propagate",
+      "group_leave_name": "left group {{group_name}}: awaiting confirmation",
+      "group_leave_label": "left group {{name}}: success!",
       "group_member_admin": "successfully made member an admin. It may take a couple of minutes for the changes to propagate",
       "group_remove_member": "successfully removed member as an admin. It may take a couple of minutes for the changes to propagate",
       "invitation_cancellation": "successfully canceled invitation. It may take a couple of minutes for the changes to propagate",
@@ -89,5 +94,10 @@
       "unbanned_user": "successfully unbanned user. It may take a couple of minutes for the changes to propagate",
       "user_joined": "user successfully joined!"
     }
-  }
+  },
+  "question": {
+    "perform_transaction": "would you like to perform a {{action}} transaction?",
+    "provide_thread": "please provide a thread title"
+  },
+  "thread_posts": "new thread posts"
 }

src/components/Group/ListOfThreadPostsWatched.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useEffect, useState } from 'react';
 import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
 import ListItemButton from '@mui/material/ListItemButton';
@@ -9,10 +9,12 @@ import { Box, Typography } from '@mui/material';
 import { Spacer } from '../../common/Spacer';
 import { CustomLoader } from '../../common/CustomLoader';
 import VisibilityIcon from '@mui/icons-material/Visibility';
+import { useTranslation } from 'react-i18next';
 
 export const ListOfThreadPostsWatched = () => {
-  const [posts, setPosts] = React.useState([]);
+  const [posts, setPosts] = useState([]);
-  const [loading, setLoading] = React.useState(true);
+  const [loading, setLoading] = useState(true);
+  const { t } = useTranslation(['core', 'group']);
 
   const getPosts = async () => {
     try {
@@ -42,7 +44,10 @@ export const ListOfThreadPostsWatched = () => {
             rej(response.error);
           })
           .catch((error) => {
-            rej(error.message || 'An error occurred');
+            rej(
+              error.message ||
+                t('core:message.error.generic', { postProcess: 'capitalize' })
+            );
           });
       });
     } catch (error) {
@@ -52,7 +57,7 @@ export const ListOfThreadPostsWatched = () => {
     }
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     getPosts();
   }, []);
 
@@ -73,14 +78,18 @@ export const ListOfThreadPostsWatched = () => {
           width: '322px',
         }}
       >
-        <Typography // TODO translate
+        <Typography
           sx={{
             fontSize: '13px',
             fontWeight: 600,
           }}
         >
-          New Thread Posts:
+          {t('group:thread_posts', {
+            postProcess: 'capitalize',
+          })}
+          :
         </Typography>
+
         <Spacer height="10px" />
       </Box>
 
@@ -98,9 +107,9 @@ export const ListOfThreadPostsWatched = () => {
         {loading && posts.length === 0 && (
           <Box
             sx={{
-              width: '100%',
               display: 'flex',
               justifyContent: 'center',
+              width: '100%',
             }}
           >
             <CustomLoader />
@@ -109,11 +118,11 @@ export const ListOfThreadPostsWatched = () => {
         {!loading && posts.length === 0 && (
           <Box
             sx={{
-              width: '100%',
-              display: 'flex',
-              justifyContent: 'center',
               alignItems: 'center',
+              display: 'flex',
               height: '100%',
+              justifyContent: 'center',
+              width: '100%',
             }}
           >
             <Typography
@@ -123,7 +132,9 @@ export const ListOfThreadPostsWatched = () => {
                 color: 'rgba(255, 255, 255, 0.2)',
               }}
             >
-              Nothing to display
+              {t('group:message.generic.no_display', {
+                postProcess: 'capitalize',
+              })}
             </Typography>
           </Box>
         )}
@@ -131,11 +142,11 @@ export const ListOfThreadPostsWatched = () => {
           <List
             className="scrollable-container"
             sx={{
-              width: '100%',
-              maxWidth: 360,
               bgcolor: 'background.paper',
               maxHeight: '300px',
+              maxWidth: 360,
               overflow: 'auto',
+              width: '100%',
             }}
           >
             {posts?.map((post) => {

src/components/Group/ManageMembers.tsx

@@ -1,4 +1,14 @@
-import * as React from 'react';
+import {
+  forwardRef,
+  Fragment,
+  ReactElement,
+  Ref,
+  SyntheticEvent,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+} from 'react';
 import Button from '@mui/material/Button';
 import Dialog from '@mui/material/Dialog';
 import AppBar from '@mui/material/AppBar';
@@ -25,6 +35,7 @@ import { Spacer } from '../../common/Spacer';
 import InsertLinkIcon from '@mui/icons-material/InsertLink';
 import { useSetAtom } from 'jotai';
 import { txListAtom } from '../../atoms/global';
+import { useTranslation } from 'react-i18next';
 
 function a11yProps(index: number) {
   return {
@@ -33,37 +44,35 @@ function a11yProps(index: number) {
   };
 }
 
-const Transition = React.forwardRef(function Transition(
+const Transition = forwardRef(function Transition(
   props: TransitionProps & {
-    children: React.ReactElement;
+    children: ReactElement;
   },
-  ref: React.Ref<unknown>
+  ref: Ref<unknown>
 ) {
   return <Slide direction="up" ref={ref} {...props} />;
 });
 
 export const ManageMembers = ({
-  address,
   open,
   setOpen,
   selectedGroup,
-
   isAdmin,
   isOwner,
 }) => {
-  const [membersWithNames, setMembersWithNames] = React.useState([]);
+  const [membersWithNames, setMembersWithNames] = useState([]);
-  const [tab, setTab] = React.useState('create');
+  const [value, setValue] = useState(0);
-  const [value, setValue] = React.useState(0);
+  const [openSnack, setOpenSnack] = useState(false);
-  const [openSnack, setOpenSnack] = React.useState(false);
+  const [infoSnack, setInfoSnack] = useState(null);
-  const [infoSnack, setInfoSnack] = React.useState(null);
+  const [isLoadingMembers, setIsLoadingMembers] = useState(false);
-  const [isLoadingMembers, setIsLoadingMembers] = React.useState(false);
+  const [isLoadingLeave, setIsLoadingLeave] = useState(false);
-  const [isLoadingLeave, setIsLoadingLeave] = React.useState(false);
+  const [groupInfo, setGroupInfo] = useState(null);
-  const [groupInfo, setGroupInfo] = React.useState(null);
+  const handleChange = (event: SyntheticEvent, newValue: number) => {
-  const handleChange = (event: React.SyntheticEvent, newValue: number) => {
     setValue(newValue);
   };
   const theme = useTheme();
-  const { show } = React.useContext(MyContext);
+  const { t } = useTranslation(['core', 'group']);
+  const { show } = useContext(MyContext);
   const setTxList = useSetAtom(txListAtom);
 
   const handleClose = () => {
@@ -73,7 +82,7 @@ export const ManageMembers = ({
   const handleLeaveGroup = async () => {
     try {
       setIsLoadingLeave(true);
-      const fee = await getFee('LEAVE_GROUP'); // TODO translate
+      const fee = await getFee('LEAVE_GROUP');
       await show({
         message: t('group:question.perform_transaction', {
           action: 'LEAVE_GROUP',
@@ -93,8 +102,14 @@ export const ManageMembers = ({
                 {
                   ...response,
                   type: 'leave-group',
-                  label: `Left Group ${selectedGroup?.groupName}: awaiting confirmation`,
+                  label: t('group:message.success.group_leave_name', {
-                  labelDone: `Left Group ${selectedGroup?.groupName}: success!`,
+                    group_name: selectedGroup?.groupName,
+                    postProcess: 'capitalize',
+                  }),
+                  labelDone: t('group:message.success.group_leave_label', {
+                    group_name: selectedGroup?.groupName,
+                    postProcess: 'capitalize',
+                  }),
                   done: false,
                   groupId: selectedGroup?.groupId,
                 },
@@ -103,8 +118,9 @@ export const ManageMembers = ({
               res(response);
               setInfoSnack({
                 type: 'success',
-                message:
+                message: t('group:message.success.group_leave', {
-                  'Successfully requested to leave group. It may take a couple of minutes for the changes to propagate',
+                  postProcess: 'capitalize',
+                }),
               });
               setOpenSnack(true);
               return;
@@ -112,7 +128,10 @@ export const ManageMembers = ({
             rej(response.error);
           })
           .catch((error) => {
-            rej(error.message || 'An error occurred');
+            rej(
+              error.message ||
+                t('core:message.error.generic', { postProcess: 'capitalize' })
+            );
           });
       });
     } catch (error) {
@@ -122,7 +141,7 @@ export const ManageMembers = ({
     }
   };
 
-  const getMembersWithNames = React.useCallback(async (groupId) => {
+  const getMembersWithNames = useCallback(async (groupId) => {
     try {
       setIsLoadingMembers(true);
       const res = await getGroupMembers(groupId);
@@ -153,7 +172,7 @@ export const ManageMembers = ({
     }
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (selectedGroup?.groupId) {
       getMembers(selectedGroup?.groupId);
       getGroupInfo(selectedGroup?.groupId);
@@ -164,7 +183,7 @@ export const ManageMembers = ({
     setValue(4);
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     subscribeToEvent('openGroupJoinRequest', openGroupJoinRequestFunc);
 
     return () => {
@@ -173,7 +192,7 @@ export const ManageMembers = ({
   }, []);
 
   return (
-    <React.Fragment>
+    <Fragment>
       <Dialog
         fullScreen
         open={open}
@@ -188,18 +207,20 @@ export const ManageMembers = ({
         >
           <Toolbar>
             <Typography sx={{ ml: 2, flex: 1 }} variant="h4" component="div">
-              Manage Members
+              {t('group:action.manage_members', { postProcess: 'capitalize' })}
             </Typography>
+
             <IconButton
-              edge="start"
-              color="inherit"
-              onClick={handleClose}
               aria-label="close"
+              color="inherit"
+              edge="start"
+              onClick={handleClose}
             >
               <CloseIcon />
             </IconButton>
           </Toolbar>
         </AppBar>
+
         <Box
           sx={{
             bgcolor: theme.palette.background.default,
@@ -288,12 +309,19 @@ export const ManageMembers = ({
             }}
           >
             <Box>
-              <Typography>GroupId: {groupInfo?.groupId}</Typography>
+              <Typography>
-
+                {t('group:group.id', { postProcess: 'capitalize' })}:{' '}
-              <Typography>GroupName: {groupInfo?.groupName}</Typography>
+                {groupInfo?.groupId}
+              </Typography>
 
               <Typography>
-                Number of members: {groupInfo?.memberCount}
+                {t('group:group.name', { postProcess: 'capitalize' })}:{' '}
+                {groupInfo?.groupName}
+              </Typography>
+
+              <Typography>
+                {t('group:group.member_number', { postProcess: 'capitalize' })}:{' '}
+                {groupInfo?.memberCount}
               </Typography>
 
               <ButtonBase
@@ -305,7 +333,11 @@ export const ManageMembers = ({
                   await navigator.clipboard.writeText(link);
                 }}
               >
-                <InsertLinkIcon /> <Typography>Join Group Link</Typography>
+                <InsertLinkIcon />
+
+                <Typography>
+                  {t('group:join_link', { postProcess: 'capitalize' })}
+                </Typography>
               </ButtonBase>
             </Box>
 
@@ -319,10 +351,11 @@ export const ManageMembers = ({
                 variant="contained"
                 onClick={handleLeaveGroup}
               >
-                Leave Group
+                {t('group:action.leave_group', { postProcess: 'capitalize' })}
               </LoadingButton>
             )}
           </Card>
+
           {value === 0 && (
             <Box
               sx={{
@@ -335,7 +368,7 @@ export const ManageMembers = ({
                 variant="contained"
                 onClick={() => getMembersWithNames(selectedGroup?.groupId)}
               >
-                Load members with names
+                {t('group:action.load_members', { postProcess: 'capitalize' })}
               </Button>
 
               <Spacer height="10px" />
@@ -351,6 +384,7 @@ export const ManageMembers = ({
               />
             </Box>
           )}
+
           {value === 1 && (
             <Box
               sx={{
@@ -430,10 +464,12 @@ export const ManageMembers = ({
         <LoadingSnackbar
           open={isLoadingMembers}
           info={{
-            message: 'Loading member list with names... please wait.',
+            message: t('group:message.generic.loading_members', {
+              postProcess: 'capitalize',
+            }),
           }}
         />
       </Dialog>
-    </React.Fragment>
+    </Fragment>
   );
 };