Refactor imports

public/locales/en/group.json

@@ -42,6 +42,7 @@
   "invitees_list": "invitees list",
   "join_link": "join group link",
   "join_requests": "join requests",
+  "last_message": "last message",
   "latest_mails": "latest Q-Mails",
   "message": {
     "generic": {

src/components/Apps/AppsCategoryDesktop.tsx

@@ -56,7 +56,7 @@ export const AppsCategoryDesktop = ({
   isShow,
 }) => {
   const [searchValue, setSearchValue] = useState('');
-  const virtuosoRef = useRef();
+  const virtuosoRef = useRef(null);
   const theme = useTheme();
 
   const categoryList = useMemo(() => {

src/components/Apps/AppsLibraryDesktop.tsx

@@ -102,7 +102,7 @@ export const AppsLibraryDesktop = ({
   getQapps,
 }) => {
   const [searchValue, setSearchValue] = useState('');
-  const virtuosoRef = useRef();
+  const virtuosoRef = useRef(null);
   const theme = useTheme();
 
   const officialApps = useMemo(() => {

src/components/Chat/AnnouncementList.tsx

@@ -18,7 +18,7 @@ export const AnnouncementList = ({
   loadMore,
   myName,
 }) => {
-  const listRef = useRef();
+  const listRef = useRef(null);
   const [messages, setMessages] = useState(initialMessages);
 
   useEffect(() => {

src/components/Chat/ChatList.tsx

@@ -23,7 +23,7 @@ export const ChatList = ({
   hasSecretKey,
   isPrivate,
 }) => {
-  const parentRef = useRef();
+  const parentRef = useRef(null);
   const [messages, setMessages] = useState(initialMessages);
   const [showScrollButton, setShowScrollButton] = useState(false);
   const [showScrollDownButton, setShowScrollDownButton] = useState(false);

src/components/Chat/ChatOptions.tsx

@@ -60,8 +60,8 @@ export const ChatOptions = ({
   const [searchValue, setSearchValue] = useState('');
   const [selectedMember, setSelectedMember] = useState(0);
   const theme = useTheme();
-  const parentRef = useRef();
+  const parentRef = useRef(null);
-  const parentRefMentions = useRef();
+  const parentRefMentions = useRef(null);
   const [lastMentionTimestamp, setLastMentionTimestamp] = useState(null);
   const [debouncedValue, setDebouncedValue] = useState(''); // Debounced value
   const messages = useMemo(() => {

src/components/Group/AddGroup.tsx

@@ -452,6 +452,7 @@ export const AddGroup = ({ address, open, setOpen }) => {
                       <MenuItem value={100}>100%</MenuItem>
                     </Select>
                   </Box>
+
                   <Box
                     sx={{
                       display: 'flex',
@@ -464,6 +465,7 @@ export const AddGroup = ({ address, open, setOpen }) => {
                         postProcess: 'capitalize',
                       })}
                     </Label>
+
                     <Select
                       labelId="demo-simple-select-label"
                       id="demo-simple-select"
@@ -509,6 +511,7 @@ export const AddGroup = ({ address, open, setOpen }) => {
                       </MenuItem>
                     </Select>
                   </Box>
+
                   <Box
                     sx={{
                       display: 'flex',
@@ -521,6 +524,7 @@ export const AddGroup = ({ address, open, setOpen }) => {
                         postProcess: 'capitalize',
                       })}
                     </Label>
+
                     <Select
                       labelId="demo-simple-select-label"
                       id="demo-simple-select"
@@ -564,6 +568,7 @@ export const AddGroup = ({ address, open, setOpen }) => {
                     </Select>
                   </Box>
                 </Collapse>
+
                 <Box
                   sx={{
                     display: 'flex',

src/components/Group/AddGroupList.tsx

@@ -48,7 +48,7 @@ export const AddGroupList = ({ setInfoSnack, setOpenSnack }) => {
   const [groups, setGroups] = useState([]);
   const [popoverAnchor, setPopoverAnchor] = useState(null); // Track which list item the popover is anchored to
   const [openPopoverIndex, setOpenPopoverIndex] = useState(null); // Track which list item has the popover open
-  const listRef = useRef();
+  const listRef = useRef(null);
   const [inputValue, setInputValue] = useState('');
   const [filteredItems, setFilteredItems] = useState(groups);
   const [isLoading, setIsLoading] = useState(false);

src/components/Group/Forum/GroupMail.tsx

@@ -1,26 +1,17 @@
-import React, {
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
 import { Avatar, Box, Popover, Typography, useTheme } from '@mui/material';
-// import { MAIL_SERVICE_TYPE, THREAD_SERVICE_TYPE } from "../../constants/mail";
 import { Thread } from './Thread';
 import {
   AllThreadP,
   ArrowDownIcon,
   ComposeContainer,
   ComposeContainerBlank,
-  ComposeIcon,
   ComposeP,
   GroupContainer,
   InstanceFooter,
   InstanceListContainer,
   InstanceListContainerRow,
   InstanceListContainerRowCheck,
-  InstanceListContainerRowCheckIcon,
   InstanceListContainerRowMain,
   InstanceListContainerRowMainP,
   InstanceListHeader,
@@ -48,7 +39,6 @@ import {
   getTempPublish,
   handleUnencryptedPublishes,
 } from '../../Chat/GroupAnnouncements';
-import CheckSVG from '../../../assets/svgs/Check.svg';
 import ArrowDownSVG from '../../../assets/svgs/ArrowDown.svg';
 import { LoadingSnackbar } from '../../Snackbar/LoadingSnackbar';
 import { executeEvent } from '../../../utils/events';
@@ -73,9 +63,9 @@ export const GroupMail = ({
   hide,
   isPrivate,
 }) => {
-  const [viewedThreads, setViewedThreads] = React.useState<any>({});
+  const [viewedThreads, setViewedThreads] = useState<any>({});
   const [filterMode, setFilterMode] = useState<string>('Recently active');
-  const [currentThread, setCurrentThread] = React.useState(null);
+  const [currentThread, setCurrentThread] = useState(null);
   const [recentThreads, setRecentThreads] = useState<any[]>([]);
   const [allThreads, setAllThreads] = useState<any[]>([]);
   const [members, setMembers] = useState<any>(null);
@@ -178,7 +168,10 @@ export const GroupMail = ({
             rej(response.error);
           })
           .catch((error) => {
-            rej(error.message || 'An error occurred');
+            rej(
+              error.message ||
+                t('core:message.error.generic', { postProcess: 'capitalize' })
+            );
           });
       });
     } catch (error) {
@@ -186,7 +179,7 @@ export const GroupMail = ({
     }
   };
 
-  const getAllThreads = React.useCallback(
+  const getAllThreads = useCallback(
     async (groupId: string, mode: string, isInitial?: boolean) => {
       try {
         setIsLoading(true);
@@ -206,7 +199,7 @@ export const GroupMail = ({
         });
         const responseData = await response.json();
 
-        let fullArrayMsg = isInitial ? [] : [...allThreads];
+        const fullArrayMsg = isInitial ? [] : [...allThreads];
         const getMessageForThreads = responseData.map(async (message: any) => {
           let fullObject: any = null;
           if (message?.metadata?.description) {
@@ -271,13 +264,12 @@ export const GroupMail = ({
       } finally {
         if (isInitial) {
           setIsLoading(false);
-          // dispatch(setIsLoadingCustom(null));
         }
       }
     },
     [allThreads, isPrivate]
   );
-  const getMailMessages = React.useCallback(
+  const getMailMessages = useCallback(
     async (groupId: string, members: any) => {
       try {
         setIsLoading(true);
@@ -315,7 +307,7 @@ export const GroupMail = ({
           .sort((a, b) => b.created - a.created)
           .slice(0, 10);
 
-        let fullThreadArray: any = [];
+        const fullThreadArray: any = [];
         const getMessageForThreads = newArray.map(async (message: any) => {
           try {
             const identifierQuery = message.threadId;
@@ -327,6 +319,7 @@ export const GroupMail = ({
               },
             });
             const responseData = await response.json();
+
             if (responseData.length > 0) {
               const thread = responseData[0];
               if (thread?.metadata?.description) {
@@ -342,7 +335,7 @@ export const GroupMail = ({
                 };
                 fullThreadArray.push(fullObject);
               } else {
-                let threadRes = await Promise.race([
+                const threadRes = await Promise.race([
                   getEncryptedResource(
                     {
                       name: thread.name,
@@ -377,13 +370,12 @@ export const GroupMail = ({
         console.log(error);
       } finally {
         setIsLoading(false);
-        // dispatch(setIsLoadingCustom(null));
       }
     },
     [secretKey, isPrivate]
   );
 
-  const getMessages = React.useCallback(async () => {
+  const getMessages = useCallback(async () => {
     // if ( !groupId || members?.length === 0) return;
     if (!groupId || isPrivate === null) return;
 
@@ -400,7 +392,6 @@ export const GroupMail = ({
     if (filterModeRef.current !== filterMode) {
       firstMount.current = false;
     }
-    // if (groupId && !firstMount.current && members.length > 0) {
     if (groupId && !firstMount.current && isPrivate !== null) {
       if (filterMode === 'Recently active') {
         getMessages();
@@ -427,11 +418,6 @@ export const GroupMail = ({
       if (groupData && Array.isArray(groupData?.members)) {
         for (const member of groupData.members) {
           if (member.member) {
-            // const res = await getNameInfo(member.member);
-            // const resAddress = await qortalRequest({
-            //   action: "GET_ACCOUNT_DATA",
-            //   address: member.member,
-            // });
             const name = res;
             const publicKey = resAddress.publicKey;
             if (name) {
@@ -465,16 +451,6 @@ export const GroupMail = ({
     [filterMode]
   );
 
-  // useEffect(()=> {
-  //   if(user?.name){
-  //     const threads = JSON.parse(
-  //       localStorage.getItem(`qmail_threads_viewedtimestamp_${user.name}`) || "{}"
-  //     );
-  //     setViewedThreads(threads)
-
-  //   }
-  // }, [user?.name, currentThread])
-
   const handleCloseThreadFilterList = () => {
     setIsOpenFilterList(false);
   };
@@ -596,7 +572,7 @@ export const GroupMail = ({
             padding: '0px',
           }}
         >
-          <InstanceListHeader></InstanceListHeader>
+          <InstanceListHeader />
           <InstanceListContainer>
             {filterOptions?.map((filter) => {
               return (
@@ -621,6 +597,7 @@ export const GroupMail = ({
                       />
                     )}
                   </InstanceListContainerRowCheck>
+
                   <InstanceListContainerRowMain>
                     <InstanceListContainerRowMainP>
                       {filter}
@@ -630,9 +607,10 @@ export const GroupMail = ({
               );
             })}
           </InstanceListContainer>
-          <InstanceFooter></InstanceFooter>
+          <InstanceFooter />
         </InstanceListParent>
       </Popover>
+
       <ThreadContainerFullWidth>
         <ThreadContainer>
           <Box
@@ -674,7 +652,9 @@ export const GroupMail = ({
               )}
             </ComposeContainerBlank>
           </Box>
+
           <Spacer height="30px" />
+
           <Box
             sx={{
               alignItems: 'center',
@@ -700,10 +680,12 @@ export const GroupMail = ({
               viewedThreads[
                 `qmail_threads_${thread?.threadData?.groupId}_${thread?.threadId}`
               ];
+
             const shouldAppearLighter =
               hasViewedRecent &&
               filterMode === 'Recently active' &&
               thread?.threadData?.createdAt < hasViewedRecent?.timestamp;
+
             return (
               <SingleThreadParent
                 sx={{
@@ -771,13 +753,17 @@ export const GroupMail = ({
                     >
                       <ThreadSingleLastMessageP>
                         <ThreadSingleLastMessageSpanP>
-                          last message:{' '}
+                          {t('group:last_message', {
+                            postProcess: 'capitalize',
+                          })}
+                          :{' '}
                         </ThreadSingleLastMessageSpanP>
                         {formatDate(thread?.created)}
                       </ThreadSingleLastMessageP>
                     </div>
                   )}
                 </div>
+
                 <CustomButton
                   onClick={() => {
                     setTimeout(() => {
@@ -834,6 +820,7 @@ export const GroupMail = ({
           </Box>
         </ThreadContainer>
       </ThreadContainerFullWidth>
+
       <LoadingSnackbar
         open={isLoading}
         info={{

src/components/Group/Forum/NewThread.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+import { useContext, useEffect, useRef, useState } from 'react';
 import { Box, CircularProgress, Input, useTheme } from '@mui/material';
 import ShortUniqueId from 'short-unique-id';
 import {
@@ -8,7 +8,6 @@ import {
   InstanceFooter,
   InstanceListContainer,
   InstanceListHeader,
-  NewMessageCloseImg,
   NewMessageHeaderP,
   NewMessageInputRow,
   NewMessageSendButton,
@@ -143,13 +142,13 @@ export const NewThread = ({
   isPrivate,
 }: NewMessageProps) => {
   const { t } = useTranslation(['core', 'group']);
-  const { show } = React.useContext(MyContext);
+  const { show } = useContext(MyContext);
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const [value, setValue] = useState('');
   const [isSending, setIsSending] = useState(false);
   const [threadTitle, setThreadTitle] = useState<string>('');
-  const [openSnack, setOpenSnack] = React.useState(false);
+  const [openSnack, setOpenSnack] = useState(false);
-  const [infoSnack, setInfoSnack] = React.useState(null);
+  const [infoSnack, setInfoSnack] = useState(null);
   const editorRef = useRef(null);
   const theme = useTheme();
   const setEditorRef = (editorInstance) => {

src/components/Group/Forum/ReadOnlySlate.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { FC, useCallback, useEffect, useMemo, useState } from 'react';
 import { createEditor } from 'slate';
 import {
   withReact,
@@ -96,7 +96,7 @@ interface ReadOnlySlateProps {
   content: any;
   mode?: string;
 }
-const ReadOnlySlate: React.FC<ReadOnlySlateProps> = ({ content, mode }) => {
+const ReadOnlySlate: FC<ReadOnlySlateProps> = ({ content, mode }) => {
   const [load, setLoad] = useState(false);
   const editor = useMemo(() => withReact(createEditor()), []);
   const value = useMemo(() => content, [content]);

src/components/Group/Forum/ReusableModal.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { FC } from 'react';
 import { Box, Modal, useTheme } from '@mui/material';
 
 interface MyModalProps {
@@ -9,7 +9,7 @@ interface MyModalProps {
   customStyles?: any;
 }
 
-export const ReusableModal: React.FC<MyModalProps> = ({
+export const ReusableModal: FC<MyModalProps> = ({
   open,
   onClose,
   onSubmit,

src/components/Group/Forum/ShowMessageWithoutModal.tsx

@@ -118,27 +118,6 @@ export const ShowMessage = ({ message, openNewPostWithQuote, myName }: any) => {
                           width: 'auto',
                         }}
                       >
-                        {/* <FileElement
-                        fileInfo={{ ...file, mimeTypeSaved: file?.type }}
-                        title={file?.filename}
-                        mode="mail"
-                        otherUser={message?.user}
-                      >
-                        <MailAttachmentImg src={AttachmentMailSVG} />
-
-                        <Typography
-                          sx={{
-                            fontSize: "16px",
-                            transition: '0.2s all',
-                            "&:hover": {
-                              color: 'rgba(255, 255, 255, 0.90)',
-                              textDecoration: 'underline'
-                            }
-                          }}
-                        >
-                          {file?.originalFilename || file?.filename}
-                        </Typography>
-                      </FileElement> */}
                         {message?.attachments?.length > 1 && isFirst && (
                           <Box
                             sx={{

src/components/Group/Forum/Thread.tsx

@@ -1,10 +1,4 @@
-import React, {
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
 import {
   Avatar,
   Box,
@@ -18,7 +12,6 @@ import {
   ComposeP,
   GroupContainer,
   GroupNameP,
-  MailIconImg,
   ShowMessageReturnButton,
   SingleThreadParent,
   ThreadContainer,
@@ -222,7 +215,7 @@ export const Thread = ({
     }
   };
 
-  const getMailMessages = React.useCallback(
+  const getMailMessages = useCallback(
     async (groupInfo: any, before, after, isReverse, groupId) => {
       try {
         setTempPublishedList([]);
@@ -328,7 +321,7 @@ export const Thread = ({
     },
     [messages, secretKey]
   );
-  const getMessages = React.useCallback(async () => {
+  const getMessages = useCallback(async () => {
     if (
       !currentThread ||
       (!secretKey && isPrivate) ||
@@ -410,7 +403,7 @@ export const Thread = ({
 
   const interval = useRef<any>(null);
 
-  const checkNewMessages = React.useCallback(
+  const checkNewMessages = useCallback(
     async (groupInfo: any) => {
       try {
         let threadId = groupInfo.threadId;
@@ -494,7 +487,7 @@ export const Thread = ({
     firstMount.current = true;
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     subscribeToEvent('threadFetchMode', threadFetchModeFunc);
 
     return () => {
@@ -656,6 +649,7 @@ export const Thread = ({
         <div ref={threadBeginningRef} />
         <ThreadContainer>
           <Spacer height={'30px'} />
+
           <Box
             sx={{
               alignItems: 'center',
@@ -715,6 +709,7 @@ export const Thread = ({
             >
               {t('core:page.previous', { postProcess: 'capitalize' })}
             </Button>
+
             <Button
               sx={{
                 textTransformation: 'capitalize',
@@ -733,6 +728,7 @@ export const Thread = ({
             >
               {t('core:page.next', { postProcess: 'capitalize' })}
             </Button>
+
             <Button
               sx={{
                 textTransformation: 'capitalize',
@@ -1006,6 +1002,7 @@ export const Thread = ({
               >
                 {t('core:page.first', { postProcess: 'capitalize' })}
               </Button>
+
               <Button
                 sx={{
                   textTransformation: 'capitalize',
@@ -1024,6 +1021,7 @@ export const Thread = ({
               >
                 {t('core:page.previous', { postProcess: 'capitalize' })}
               </Button>
+
               <Button
                 sx={{
                   textTransformation: 'capitalize',
@@ -1042,6 +1040,7 @@ export const Thread = ({
               >
                 {t('core:page.next', { postProcess: 'capitalize' })}
               </Button>
+
               <Button
                 sx={{
                   textTransformation: 'capitalize',
@@ -1061,12 +1060,14 @@ export const Thread = ({
                 {t('core:page.last', { postProcess: 'capitalize' })}
               </Button>
             </Box>
+
             <Spacer height="30px" />
           </Box>
 
           <div ref={containerRef} />
         </ThreadContainer>
       </ThreadContainerFullWidth>
+
       <LoadingSnackbar
         open={isLoading}
         info={{

src/components/Group/ListOfBans.tsx

@@ -54,7 +54,7 @@ export const ListOfBans = ({ groupId, setInfoSnack, setOpenSnack, show }) => {
   const [bans, setBans] = useState([]);
   const [popoverAnchor, setPopoverAnchor] = useState(null); // Track which list item the popover is anchored to
   const [openPopoverIndex, setOpenPopoverIndex] = useState(null); // Track which list item has the popover open
-  const listRef = useRef();
+  const listRef = useRef(null);
   const [isLoadingUnban, setIsLoadingUnban] = useState(false);
   const { t } = useTranslation(['core', 'group']);
 

src/components/Group/ListOfGroupPromotions.tsx

@@ -102,7 +102,7 @@ export const ListOfGroupPromotions = () => {
 
   const theme = useTheme();
   const { t } = useTranslation(['core', 'group']);
-  const listRef = useRef();
+  const listRef = useRef(null);
   const rowVirtualizer = useVirtualizer({
     count: promotions.length,
     getItemKey: React.useCallback(

src/components/Group/Settings.tsx

@@ -228,7 +228,6 @@ const ExportPrivateKey = ({ rawWallet }) => {
   const [password, setPassword] = useState('');
   const [privateKey, setPrivateKey] = useState('');
   const [isOpen, setIsOpen] = useState(false);
-  const [isLoading, setIsLoading] = useState(false);
   const { setOpenSnackGlobal, setInfoSnackCustom } = useContext(MyContext);
   const { t } = useTranslation(['core', 'group']);
 

src/components/Group/ThingsToDoInitial.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
 import ListItemButton from '@mui/material/ListItemButton';
@@ -17,27 +17,27 @@ export const ThingsToDoInitial = ({
   balance,
   userInfo,
 }) => {
-  const [checked1, setChecked1] = React.useState(false);
+  const [checked1, setChecked1] = useState(false);
-  const [checked2, setChecked2] = React.useState(false);
+  const [checked2, setChecked2] = useState(false);
   const { t } = useTranslation(['core', 'tutorial']);
   const theme = useTheme();
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (balance && +balance >= 6) {
       setChecked1(true);
     }
   }, [balance]);
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (name) setChecked2(true);
   }, [name]);
 
-  const isLoaded = React.useMemo(() => {
+  const isLoaded = useMemo(() => {
     if (userInfo !== null) return true;
     return false;
   }, [userInfo]);
 
-  const hasDoneNameAndBalanceAndIsLoaded = React.useMemo(() => {
+  const hasDoneNameAndBalanceAndIsLoaded = useMemo(() => {
     if (isLoaded && checked1 && checked2) return true;
     return false;
   }, [checked1, isLoaded, checked2]);

src/components/Group/UserListOfInvites.tsx

@@ -64,7 +64,7 @@ export const UserListOfInvites = ({
   const { t } = useTranslation(['core', 'group']);
   const [popoverAnchor, setPopoverAnchor] = useState(null); // Track which list item the popover is anchored to
   const [openPopoverIndex, setOpenPopoverIndex] = useState(null); // Track which list item has the popover open
-  const listRef = useRef();
+  const listRef = useRef(null);
 
   const getRequests = async () => {
     try {

src/components/Group/WalletsAppWrapper.tsx

@@ -1,5 +1,5 @@
-import { Box, ButtonBase, Divider, Typography, useTheme } from '@mui/material';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Box, ButtonBase, Divider, Typography, useTheme } from '@mui/material';
 import CloseIcon from '@mui/icons-material/Close';
 import AppViewerContainer from '../Apps/AppViewerContainer';
 import {