Refactor loading translations

src/components/Chat/AnnouncementDiscussion.tsx

@@ -423,7 +423,7 @@ export const AnnouncementDiscussion = ({
       <LoadingSnackbar
         open={isLoading}
         info={{
-          message: t('core:loading_comments', {
+          message: t('core:loading.comments', {
             postProcess: 'capitalizeFirst',
           }),
         }}

src/components/Chat/ChatDirect.tsx

@@ -1,12 +1,4 @@
-import React, {
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-  useCallback,
-  useEffect,
-  useMemo,
-  useReducer,
-  useRef,
-  useState,
-} from 'react';
-
 import { ChatList } from './ChatList';
 import Tiptap from './TipTap';
 import { CustomButton } from '../../styles/App-styles';
@@ -31,9 +23,9 @@ import {
 } from '../../utils/events';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import ShortUniqueId from 'short-unique-id';
-import { ReturnIcon } from '../../assets/Icons/ReturnIcon';
 import { ExitIcon } from '../../assets/Icons/ExitIcon';
 import { ReplyPreview } from './MessageItem';
+import { useTranslation } from 'react-i18next';
 
 const uid = new ShortUniqueId({ length: 5 });
 
@@ -50,21 +42,20 @@ export const ChatDirect = ({
   setMobileViewModeKeepOpen,
 }) => {
   const theme = useTheme();
+  const { t } = useTranslation(['auth', 'core', 'group']);
   const { queueChats, addToQueue, processWithNewMessages } = useMessageQueue();
   const [isFocusedParent, setIsFocusedParent] = useState(false);
   const [onEditMessage, setOnEditMessage] = useState(null);
-
   const [messages, setMessages] = useState([]);
   const [isSending, setIsSending] = useState(false);
   const [directToValue, setDirectToValue] = useState('');
   const hasInitialized = useRef(false);
   const [isLoading, setIsLoading] = useState(false);
-  const [openSnack, setOpenSnack] = React.useState(false);
+  const [openSnack, setOpenSnack] = useState(false);
-  const [infoSnack, setInfoSnack] = React.useState(null);
+  const [infoSnack, setInfoSnack] = useState(null);
-  const [publicKeyOfRecipient, setPublicKeyOfRecipient] = React.useState('');
+  const [publicKeyOfRecipient, setPublicKeyOfRecipient] = useState('');
   const hasInitializedWebsocket = useRef(false);
   const [chatReferences, setChatReferences] = useState({});
-
   const editorRef = useRef(null);
   const socketRef = useRef(null);
   const timeoutIdRef = useRef(null);
@@ -74,12 +65,8 @@ export const ChatDirect = ({
   const setEditorRef = (editorInstance) => {
     editorRef.current = editorInstance;
   };
-  const [, forceUpdate] = useReducer((x) => x + 1, 0);
-
-  const triggerRerender = () => {
-    forceUpdate(); // Trigger re-render by updating the state
-  };
   const publicKeyOfRecipientRef = useRef(null);
+
   const getPublicKeyFunc = async (address) => {
     try {
       const publicKey = await getPublicKey(address);
@@ -229,7 +216,12 @@ export const ChatDirect = ({
             rej(response.error);
           })
           .catch((error) => {
-            rej(error.message || 'An error occurred');
+            rej(
+              error.message ||
+                t('core:message.error.generic', {
+                  postProcess: 'capitalizeFirst',
+                })
+            );
           });
       });
     } catch (error) {
@@ -397,11 +389,20 @@ export const ChatDirect = ({
             rej(response.error);
           })
           .catch((error) => {
-            rej(error.message || 'An error occurred');
+            rej(
+              error.message ||
+                t('core:message.error.generic', {
+                  postProcess: 'capitalizeFirst',
+                })
+            );
           });
       });
     } catch (error) {
-      throw new Error(error);
+      if (error instanceof Error) {
+        throw new Error(error.message);
+      } else {
+        throw new Error(String(error));
+      }
     }
   };
   const clearEditorContent = () => {
@@ -432,8 +433,14 @@ export const ChatDirect = ({
     try {
       if (messageSize > 4000) return;
 
+      // TODO set magic number in a proper file
       if (+balance < 4)
-        throw new Error('You need at least 4 QORT to send a message');
+        throw new Error(
+          t('group:message.error.qortals_required', {
+            quantity: 4,
+            postProcess: 'capitalizeFirst',
+          })
+        );
       if (isSending) return;
       if (editorRef.current) {
         const htmlContent = editorRef.current.getHTML();
@@ -500,7 +507,10 @@ export const ChatDirect = ({
         type: 'error',
         message:
           errorMsg === 'invalid signature'
-            ? 'You need at least 4 QORT to send a message'
+            ? t('group:message.error.qortals_required', {
+                quantity: 4,
+                postProcess: 'capitalizeFirst',
+              })
             : errorMsg,
       });
       setOpenSnack(true);
@@ -566,13 +576,14 @@ export const ChatDirect = ({
             fontSize: '14px',
           }}
         >
-          Close Direct Chat
+          {t('core:action.close_chat', { postProcess: 'capitalizeFirst' })}
         </Typography>
       </Box>
 
       {isNewChat && (
         <>
           <Spacer height="30px" />
+
           <Input
             sx={{
               fontSize: '18px',
@@ -686,13 +697,19 @@ export const ChatDirect = ({
                 width: '100%',
               }}
             >
-              <Typography
+              <Typography // TODO set magic number in a proper file
                 sx={{
                   fontSize: '12px',
                   color:
                     messageSize > 4000 ? theme.palette.other.danger : 'unset',
                 }}
-              >{`Your message size is of ${messageSize} bytes out of a maximum of 4000`}</Typography>
+              >
+                {t('core:message.error.message_size', {
+                  maximum: 4000,
+                  size: messageSize,
+                  postProcess: 'capitalizeFirst',
+                })}
+              </Typography>
             </Box>
           )}
         </div>
@@ -746,7 +763,7 @@ export const ChatDirect = ({
       <LoadingSnackbar
         open={isLoading}
         info={{
-          message: 'Loading chat... please wait.',
+          message: t('core:loading.chat', { postProcess: 'capitalizeFirst' }),
         }}
       />
 

src/components/Group/Forum/Thread.tsx

@@ -1073,7 +1073,7 @@ export const Thread = ({
       <LoadingSnackbar
         open={isLoading}
         info={{
-          message: t('core:loading_posts', { postProcess: 'capitalizeFirst' }),
+          message: t('core:loading.posts', { postProcess: 'capitalizeFirst' }),
         }}
       />
     </GroupContainer>

src/components/Group/ThingsToDoInitial.tsx

@@ -76,7 +76,7 @@ export const ThingsToDoInitial = ({
           }}
         >
           {!isLoaded
-            ? t('core:loading', { postProcess: 'capitalizeFirst' })
+            ? t('core:loading.generic', { postProcess: 'capitalizeFirst' })
             : t('tutorial:initial.getting_started', {
                 postProcess: 'capitalizeFirst',
               })}

src/i18n/locales/en/core.json

@@ -14,6 +14,7 @@
     "choose": "choose",
     "choose_file": "choose file",
     "close": "close",
+    "close_chat": "close Direct Chat",
     "continue": "continue",
     "continue_logout": "continue to logout",
     "copy_link": "copy link",
@@ -106,9 +107,12 @@
     "join_request": "join request list",
     "member": "member list"
   },
-  "loading": "loading...",
+  "loading": {
-  "loading_comments": "loading comments... please wait.",
+    "generic": "loading...",
-  "loading_posts": "loading posts... please wait.",
+    "chat": "loading chat... please wait.",
+    "comments": "loading comments... please wait.",
+    "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": {
     "error": {
@@ -116,7 +120,9 @@
       "app_need_name": "your app needs a name",
       "file_too_large": "file {{ filename }} is too large. Max size allowed is {{ size }} MB.",
       "generic": "an error occurred",
+      "invalid_signature": "invalid signature",
       "invalid_zip": "invalid zip",
+      "message_size": "your message size is of {{ size }} bytes out of a maximum of {{ maximum }}",
       "minting_account_add": "unable to add minting account",
       "minting_account_remove": "unable to remove minting account",
       "missing_fields": "missing: {{ fields }}",

src/i18n/locales/en/group.json

@@ -94,6 +94,7 @@
       "group_secret_key": "cannot get group secret key",
       "name_required": "please provide a name",
       "notify_admins": "try notifying an admin from the list of admins below:",
+      "qortals_required": "you need at least {{ quantity }} QORT to send a message",
       "timeout_reward": "timeout waiting for reward share confirmation",
       "thread_id": "unable to locate thread Id",
       "unable_minting": "unable to start minting"