Add translation for chat section

src/components/Chat/AnnouncementDiscussion.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import TipTap from './TipTap';
 import {
   AuthenticatedContainerInnerTop,
@@ -8,7 +8,7 @@ import { Box, CircularProgress, useTheme } from '@mui/material';
 import { objectToBase64 } from '../../qdn/encryption/group-encryption';
 import ShortUniqueId from 'short-unique-id';
 import { LoadingSnackbar } from '../Snackbar/LoadingSnackbar';
-import { getBaseApi, getFee } from '../../background';
+import { getFee } from '../../background';
 import {
   decryptPublishes,
   getTempPublish,
@@ -24,6 +24,7 @@ import {
   pauseAllQueues,
   resumeAllQueues,
 } from '../../App';
+import { useTranslation } from 'react-i18next';
 
 const tempKey = 'accouncement-comment';
 
@@ -39,10 +40,10 @@ export const AnnouncementDiscussion = ({
   isPrivate,
 }) => {
   const theme = useTheme();
+  const { t } = useTranslation(['auth', 'core', 'group']);
   const [isSending, setIsSending] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
   const [isFocusedParent, setIsFocusedParent] = useState(false);
-
   const [comments, setComments] = useState([]);
   const [tempPublishedList, setTempPublishedList] = useState([]);
   const firstMountRef = useRef(false);
@@ -100,7 +101,12 @@ export const AnnouncementDiscussion = ({
             rej(response.error);
           })
           .catch((error) => {
-            rej(error.message || 'An error occurred');
+            rej(
+              error.message ||
+                t('core:message.error.generic', {
+                  postProcess: 'capitalizeFirst',
+                })
+            );
           });
       });
     } catch (error) {
@@ -131,9 +137,13 @@ export const AnnouncementDiscussion = ({
       pauseAllQueues();
       const fee = await getFee('ARBITRARY');
       await show({
-        message: 'Would you like to perform a ARBITRARY transaction?',
+        message: t('core:question.perform_transaction', {
+          action: 'ARBITRARY',
+          postProcess: 'capitalizeFirst',
+        }),
         publishFee: fee.fee + ' QORT',
       });
+
       if (isSending) return;
       if (editorRef.current) {
         const htmlContent = editorRef.current.getHTML();
@@ -155,10 +165,11 @@ export const AnnouncementDiscussion = ({
             : await encryptChatMessage(message64, secretKeyObject);
         const randomUid = uid.rnd();
         const identifier = `cm-${selectedAnnouncement.identifier}-${randomUid}`;
+
         const res = await publishAnc({
           encryptedData: encryptSingle,
           identifier,
-        });
+        }); // TODO remove unused?
 
         const dataToSaveToStorage = {
           name: myName,
@@ -168,12 +179,13 @@ export const AnnouncementDiscussion = ({
           created: Date.now(),
           announcementId: selectedAnnouncement.identifier,
         };
+
         await saveTempPublish({ data: dataToSaveToStorage, key: tempKey });
         setTempData();
 
         clearEditorContent();
       }
-      // send chat message
+      // TODO send chat message
     } catch (error) {
       console.error(error);
     } finally {
@@ -182,14 +194,12 @@ export const AnnouncementDiscussion = ({
     }
   };
 
-  const getComments = React.useCallback(
+  const getComments = useCallback(
     async (selectedAnnouncement, isPrivate) => {
       try {
         setIsLoading(true);
 
         const offset = 0;
-
-        // dispatch(setIsLoadingGlobal(true))
         const identifier = `cm-${selectedAnnouncement.identifier}`;
         const url = `${getBaseApiReact()}${getArbitraryEndpointReact()}?mode=ALL&service=DOCUMENT&identifier=${identifier}&limit=20&includemetadata=false&offset=${offset}&reverse=true&prefix=true`;
         const response = await fetch(url, {
@@ -209,8 +219,6 @@ export const AnnouncementDiscussion = ({
         console.log(error);
       } finally {
         setIsLoading(false);
-
-        // dispatch(setIsLoadingGlobal(false))
       }
     },
     [secretKey]
@@ -259,7 +267,7 @@ export const AnnouncementDiscussion = ({
     return sortedList;
   }, [tempPublishedList, comments]);
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (!secretKey && isPrivate) return;
     if (selectedAnnouncement && !firstMountRef.current && isPrivate !== null) {
       getComments(selectedAnnouncement, isPrivate);
@@ -299,6 +307,7 @@ export const AnnouncementDiscussion = ({
 
         <Spacer height="20px" />
       </div>
+
       <AnnouncementList
         announcementData={data}
         initialMessages={combinedListTempAndReal}
@@ -308,6 +317,7 @@ export const AnnouncementDiscussion = ({
         loadMore={loadMore}
         myName={myName}
       />
+
       <div
         style={{
           backgroundColor: theme.palette.background.default,
@@ -343,6 +353,7 @@ export const AnnouncementDiscussion = ({
             setIsFocusedParent={setIsFocusedParent}
           />
         </div>
+
         <Box
           sx={{
             display: 'flex',
@@ -359,7 +370,7 @@ export const AnnouncementDiscussion = ({
                 if (isSending) return;
                 setIsFocusedParent(false);
                 clearEditorContent();
-                // Unfocus the editor
+                // TODO Unfocus the editor
               }}
               style={{
                 alignSelf: 'center',
@@ -371,7 +382,7 @@ export const AnnouncementDiscussion = ({
                 padding: '5px',
               }}
             >
-              {` Close`}
+              {t('core:action.close', { postProcess: 'capitalizeFirst' })}
             </CustomButton>
           )}
           <CustomButton
@@ -402,7 +413,9 @@ export const AnnouncementDiscussion = ({
                 }}
               />
             )}
-            {` Publish Comment`}
+            {t('core:action.publish_comment', {
+              postProcess: 'capitalizeFirst',
+            })}
           </CustomButton>
         </Box>
       </div>
@@ -410,7 +423,9 @@ export const AnnouncementDiscussion = ({
       <LoadingSnackbar
         open={isLoading}
         info={{
-          message: 'Loading comments... please wait.',
+          message: t('core:loading_comments', {
+            postProcess: 'capitalizeFirst',
+          }),
         }}
       />
     </div>

src/components/Chat/AnnouncementItem.tsx

@@ -1,14 +1,14 @@
-import React, { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { MessageDisplay } from './MessageDisplay';
 import { Avatar, Box, Typography, useTheme } from '@mui/material';
 import { formatTimestamp } from '../../utils/time';
 import ChatBubbleIcon from '@mui/icons-material/ChatBubble';
 import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
-import { getBaseApi } from '../../background';
 import { requestQueueCommentCount } from './GroupAnnouncements';
 import { CustomLoader } from '../../common/CustomLoader';
 import { getArbitraryEndpointReact, getBaseApiReact } from '../../App';
 import { WrapperUserAction } from '../WrapperUserAction';
+import { useTranslation } from 'react-i18next';
 
 export const AnnouncementItem = ({
   message,
@@ -18,12 +18,12 @@ export const AnnouncementItem = ({
   myName,
 }) => {
   const theme = useTheme();
+  const { t } = useTranslation(['auth', 'core', 'group']);
   const [commentLength, setCommentLength] = useState(0);
-  const getNumberOfComments = React.useCallback(async () => {
+
+  const getNumberOfComments = useCallback(async () => {
     try {
       const offset = 0;
-
-      // dispatch(setIsLoadingGlobal(true))
       const identifier = `cm-${message.identifier}`;
       const url = `${getBaseApiReact()}${getArbitraryEndpointReact()}?mode=ALL&service=DOCUMENT&identifier=${identifier}&limit=0&includemetadata=false&offset=${offset}&reverse=true&prefix=true`;
 
@@ -84,6 +84,7 @@ export const AnnouncementItem = ({
             {message?.name?.charAt(0)}
           </Avatar>
         </WrapperUserAction>
+
         <Box
           sx={{
             display: 'flex',
@@ -106,6 +107,7 @@ export const AnnouncementItem = ({
               {message?.name}
             </Typography>
           </WrapperUserAction>
+
           {!messageData?.decryptedData && (
             <Box
               sx={{
@@ -117,6 +119,7 @@ export const AnnouncementItem = ({
               <CustomLoader />
             </Box>
           )}
+
           {messageData?.decryptedData?.message && (
             <>
               {messageData?.type === 'notification' ? (
@@ -150,6 +153,7 @@ export const AnnouncementItem = ({
           </Box>
         </Box>
       </Box>
+
       {!disableComment && (
         <Box
           sx={{
@@ -189,10 +193,13 @@ export const AnnouncementItem = ({
                   fontSize: '14px',
                 }}
               >
-                Leave comment
+                {t('core:action.leave_comment', {
+                  postProcess: 'capitalizeFirst',
+                })}
               </Typography>
             )}
           </Box>
+
           <ArrowForwardIosIcon
             sx={{
               fontSize: '20px',

src/components/Chat/AnnouncementList.tsx

@@ -3,6 +3,7 @@ import { CellMeasurerCache } from 'react-virtualized';
 import { AnnouncementItem } from './AnnouncementItem';
 import { Box } from '@mui/material';
 import { CustomButton } from '../../styles/App-styles';
+import { useTranslation } from 'react-i18next';
 
 const cache = new CellMeasurerCache({
   fixedWidth: true,
@@ -18,8 +19,8 @@ export const AnnouncementList = ({
   loadMore,
   myName,
 }) => {
-  const listRef = useRef(null);
   const [messages, setMessages] = useState(initialMessages);
+  const { t } = useTranslation(['auth', 'core', 'group']);
 
   useEffect(() => {
     cache.clearAll();
@@ -36,9 +37,9 @@ export const AnnouncementList = ({
         flexDirection: 'column',
         flexGrow: 1,
         flexShrink: 1,
+        overflow: 'auto',
         position: 'relative',
         width: '100%',
-        overflow: 'auto',
       }}
     >
       {messages.map((message) => {
@@ -69,19 +70,7 @@ export const AnnouncementList = ({
           </div>
         );
       })}
-      {/* <AutoSizer>
+
-        {({ height, width }) => (
-          <List
-            ref={listRef}
-            width={width}
-            height={height}
-            rowCount={messages.length}
-            rowHeight={cache.rowHeight}
-            rowRenderer={rowRenderer}
-            deferredMeasurementCache={cache}
-          />
-        )}
-      </AutoSizer> */}
       <Box
         sx={{
           display: 'flex',
@@ -92,7 +81,9 @@ export const AnnouncementList = ({
       >
         {showLoadMore && (
           <CustomButton onClick={loadMore}>
-            Load older announcements
+            {t('core:action.load_announcements', {
+              postProcess: 'capitalizeFirst',
+            })}
           </CustomButton>
         )}
       </Box>

src/i18n/locales/en/core.json

@@ -31,6 +31,8 @@
     "import": "import",
     "invite": "invite",
     "join": "join",
+    "leave_comment": "leave comment",
+    "load_announcements": "load older announcements",
     "login": "login",
     "logout": "logout",
     "new": {
@@ -46,6 +48,7 @@
     "post_message": "post message",
     "publish": "publish",
     "publish_app": "publish your app",
+    "publish_comment": "publish comment",
     "register_name": "register name",
     "remove": "remove",
     "return_apps_dashboard": "return to Apps Dashboard",
@@ -104,6 +107,7 @@
     "member": "member list"
   },
   "loading": "loading...",
+  "loading_comments": "loading comments... please wait.",
   "loading_posts": "loading posts... please wait.",
   "message_us": "please message us on Telegram or Discord if you need 4 QORT to start chatting without any limitations",
   "message": {