add few small menues

src/components/HomePage/LeftBar/ChatsList/ContextMenuBar/index.tsx

@@ -0,0 +1,72 @@
+import { styled } from '@mui/material/styles';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import NotificationsNoneIcon from '@mui/icons-material/NotificationsNone';
+import VolumeOffIcon from '@mui/icons-material/VolumeOff';
+import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
+import { useDispatch } from 'react-redux';
+import { muteChat,removeChatForBoth } from '../../../../../api-data';
+import { actionIsOpen } from '../../../../../redux/control/action';
+
+const StyledMenu = styled((props:any) => (
+  <Menu
+    elevation={0}
+    {...props}
+  />
+))(({ theme }:any) => ({
+  '& .MuiPaper-root': {
+    borderRadius: 10,
+    marginTop: theme.spacing(-2),
+    minWidth: 220,
+    color:
+      theme.palette.mode === 'light' ? 'rgb(55, 65, 81)' : theme.palette.grey[500],
+    boxShadow:
+      'rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px',
+    '& .MuiMenu-list': {
+      padding: '14px 14px',
+    },
+    '& .MuiMenuItem-root': {
+      marginBottom: theme.spacing(1),
+      '& .MuiSvgIcon-root': {
+        fontSize: 21,
+        color: theme.palette.text.secondary,
+        marginRight: theme.spacing(4),
+      }
+    },
+  },
+}));
+
+interface IContextMenuBar {
+  setModal: any,
+  mute: boolean,
+  companionId:string,
+}
+const ContextMenuBar = ({ setModal, mute, companionId }: IContextMenuBar) => {
+  const dispatch = useDispatch()
+  const handleClose = (i: number | undefined): void => {
+    if (i === 0) muteChat(companionId)
+    if (i === 1) {
+      removeChatForBoth(companionId)
+      dispatch(actionIsOpen(''))
+    }
+    setModal(false)
+  }
+  return (
+      <StyledMenu
+        id="demo-positioned-menu"
+        aria-labelledby="demo-positioned-button"
+        open={true}
+        onClose={handleClose}
+      >
+        <MenuItem onClick={() => handleClose(0)}>
+          {mute ? <NotificationsNoneIcon /> : <VolumeOffIcon />}
+          {mute ? 'Unmute chat':'Mute chat'}
+        </MenuItem>
+        <MenuItem style={{color:'#f02a2a'}} onClick={() => handleClose(1)}>
+            <DeleteOutlineIcon style={{color:'#f02a2a'}}/>
+            Delete chat
+         </MenuItem>        
+       </StyledMenu>    
+  );
+}
+export default ContextMenuBar

src/components/HomePage/LeftBar/ChatsList/index.tsx

@@ -11,6 +11,7 @@ import { useState,useEffect,useRef } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 
 import AlertInfo from '../../../reusableComponents/AlertInfo'
+import ContextMenuBar from './ContextMenuBar';
 import DoneAllIcon from '@mui/icons-material/DoneAll';
 import { firstLetter, slicedWord, timeStampEU,notification,playNotificationWithoutPermission } from '../../../../helpers'
 import { getState } from '../../../../redux/chats/selector'
@@ -18,7 +19,7 @@ import { getChatMemo } from '../../../../redux/chat/selector'
 import { asyncGetChats } from '../../../../redux/chats/operations'
 import { asyncStartChatById } from '../../../../redux/chat/operations'
 import { actionRemoveChat } from '../../../../redux/chat/action'
-import { actionScroll } from '../../../../redux/control/action'
+import { actionScroll,actionIsOpen } from '../../../../redux/control/action'
 
 const StyledBadge = styled(Badge)(({ theme }) => ({
   '& .MuiBadge-badge': {
@@ -180,12 +181,14 @@ const ChatsList = () => {
   const dispatch = useDispatch()
   const ref = useRef<any>(null)
   const [selectedIndex, setSelectedIndex] = useState<number>(1);
+  const [modal, setModal] = useState<any>(false);
   const { total, chats } = useSelector(getState)
   const chat = useSelector(getChatMemo)
 
   const handleListItemClick = (i: number, companionId: string) => {
     dispatch(asyncStartChatById(companionId))
     dispatch(actionScroll(false))
+    dispatch(actionIsOpen(''))
     setSelectedIndex(i);
   }
 
@@ -195,6 +198,12 @@ const ChatsList = () => {
     dispatch(actionScroll(true))
   }
 
+  const handleContextMenu = (e: any) => {
+    e.preventDefault()
+    const companionId = e.currentTarget.id
+    const isChat = chats.find((el) => el.companionId === companionId)
+    if (isChat) setModal(isChat)
+  }
   useEffect(() => {
     dispatch(asyncGetChats())
     const handleReset = () => dispatch(asyncGetChats())
@@ -232,9 +241,12 @@ const ChatsList = () => {
         watched, typing, number, online, lastMessage,lastMessageCreatedAt,createdAt }, i: number) =>
           <ListItemButton
           key={number}
+          id={companionId}
           selected={selectedIndex === i}
-          onClick={() => handleListItemClick(i,companionId)}
-          >
+          onClick={() => handleListItemClick(i, companionId)}
+          onContextMenu={handleContextMenu}
+        >
+          {modal&&modal.companionId === companionId&&<ContextMenuBar setModal={setModal} mute={mute} companionId={companionId}/>}
           <ListItemIcon className={classes.listItem_iconAvatar}>
             <StyledBadge overlap="circular"  variant={online === 'true'?'dot':'standard'}
                   anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}>

src/components/HomePage/LeftBar/ContactsList/ContextMenuBar/index.tsx

@@ -0,0 +1,74 @@
+import { styled } from '@mui/material/styles';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
+import { useDispatch } from 'react-redux';
+import { removeContact } from '../../../../../api-data';
+import { actionIsOpen } from '../../../../../redux/control/action';
+import { copied } from '../../../../../helpers';
+
+const StyledMenu = styled((props:any) => (
+  <Menu
+    elevation={0}
+    {...props}
+  />
+))(({ theme }:any) => ({
+  '& .MuiPaper-root': {
+    borderRadius: 10,
+    marginTop: theme.spacing(-2),
+    minWidth: 220,
+    color:
+      theme.palette.mode === 'light' ? 'rgb(55, 65, 81)' : theme.palette.grey[500],
+    boxShadow:
+      'rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px',
+    '& .MuiMenu-list': {
+      padding: '14px 14px',
+    },
+    '& .MuiMenuItem-root': {
+      marginBottom: theme.spacing(1),
+      '& .MuiSvgIcon-root': {
+        fontSize: 21,
+        color: theme.palette.text.secondary,
+        marginRight: theme.spacing(4),
+      }
+    },
+  },
+}));
+
+interface IContextMenuBar {
+  setModal: any,
+  number: string,
+  _id:string,
+}
+const ContextMenuBar = ({ setModal, number, _id }: IContextMenuBar) => {
+  const dispatch = useDispatch()
+  const handleClose = (i: number | undefined): void => {
+    if(i === 0 ) copied('Number')
+    if(i === 1) {
+      removeContact(_id)
+      dispatch(actionIsOpen(''))
+    }
+    setModal(false)
+  }
+  return (
+      <StyledMenu
+        id="demo-positioned-menu"
+        aria-labelledby="demo-positioned-button"
+        open={true}
+        onClose={handleClose}
+      > <CopyToClipboard onCopy={() => handleClose(0)} text={number}>
+          <MenuItem>
+             <ContentCopyIcon />
+             Copy number
+          </MenuItem>
+        </CopyToClipboard>
+        <MenuItem style={{color:'#f02a2a'}} onClick={() => handleClose(1)}>
+            <DeleteOutlineIcon style={{color:'#f02a2a'}}/>
+            Delete contact
+         </MenuItem>        
+       </StyledMenu>    
+  );
+}
+export default ContextMenuBar

src/components/HomePage/LeftBar/ContactsList/index.tsx

@@ -4,14 +4,16 @@ import Avatar from '@mui/material/Avatar';
 import ListItemText from '@mui/material/ListItemText';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import { makeStyles } from '@material-ui/core'
-import { useState,useEffect } from 'react';
+import { useEffect,useState } from 'react';
 import { useSelector,useDispatch } from 'react-redux';
 
 import AlertInfo from '../../../reusableComponents/AlertInfo'
+import ContextMenuBar from './ContextMenuBar';
 import { getState } from '../../../../redux/contacts/selector'
 import { asyncGetContacts } from '../../../../redux/contacts/operations'
 import { firstLetter, slicedWord, timeStampEU } from '../../../../helpers'
 import { asyncStartChatById } from '../../../../redux/chat/operations'
+import { getIsOpen } from '../../../../redux/control/selector'
 
 const useStyles = makeStyles({
   list: {
@@ -48,12 +50,22 @@ interface IContactList {
 const  ContactsList = ({value,handleClick} : IContactList) => {
   const classes = useStyles()
   const dispatch = useDispatch()
-  const { total, contacts } = useSelector(getState) 
+  const { total, contacts } = useSelector(getState)
+  const isOpen = useSelector(getIsOpen)
+  const [modal, setModal] = useState<any>(false);
+
   const handleListItemClick = ( companionId:string) => {
      handleClick()
      dispatch(asyncStartChatById(companionId))
   }
 
+  const handleContextMenu = (e: any) => {
+    e.preventDefault()
+    const _id = e.currentTarget.id
+    const isContact= contacts.find((el) => el._id === _id)
+    if (isContact) setModal(isContact)
+  }
+
   const filteredContacts = () => contacts.filter((el) => {
     const credentials = el.name + ' ' + el.lastName
     if(credentials.toLowerCase().includes(value.toLowerCase())) return el
@@ -61,10 +73,10 @@ const  ContactsList = ({value,handleClick} : IContactList) => {
 
   useEffect(() => {
     dispatch(asyncGetContacts())
-    const handleReset = () => dispatch(asyncGetContacts())
+    const handleReset = () => isOpen === '' &&dispatch(asyncGetContacts())
     const idInterval = setInterval(handleReset, 3000);
     return () => clearInterval(idInterval);
-  }, [dispatch]);
+  }, [dispatch,isOpen]);
 
   const arr = filteredContacts()
   
@@ -72,8 +84,10 @@ const  ContactsList = ({value,handleClick} : IContactList) => {
     <List
       className={classes.list} component="nav"
       aria-label="main mailbox folders">
-      {arr.length > 0? arr.map(({name,lastName,avatarUrl,color,createdAt,companionId,number }, i: number) => 
-        <ListItemButton onClick={() => handleListItemClick(companionId)} key={number}>
+      {arr.length > 0? arr.map(({name,lastName,avatarUrl,color,createdAt,companionId,number,_id }) => 
+        <ListItemButton onClick={() => handleListItemClick(companionId)}
+          onContextMenu={handleContextMenu} id={_id} key={number}>
+          {modal&&modal._id === _id&&<ContextMenuBar setModal={setModal} number={number} _id={_id}/>}
           <ListItemIcon className={classes.listItem_iconAvatar}>
             <Avatar alt={name} src={avatarUrl?`http://localhost:3000/${avatarUrl}`:undefined}
                  sx={{ background: color, width: 54, height: 54 }}>

src/components/HomePage/LeftBar/MenuBar/index.tsx

@@ -4,18 +4,14 @@ import MenuList from '@mui/material/MenuList';
 import MenuItem from '@mui/material/MenuItem';
 import ListItemText from '@mui/material/ListItemText';
 import ListItemIcon from '@mui/material/ListItemIcon';
-import BookmarkBorderIcon from '@mui/icons-material/BookmarkBorder';
-import ArchiveIcon from '@mui/icons-material/Archive';
 import PermContactCalendarIcon from '@mui/icons-material/PermContactCalendar';
 import SettingsIcon from '@mui/icons-material/Settings';
-import Brightness3Icon from '@mui/icons-material/Brightness3';
-import AnimationIcon from '@mui/icons-material/Animation';
+import Brightness3Icon from '@mui/icons-material/Brightness3'; 
 import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
 import BugReportIcon from '@mui/icons-material/BugReport';
 import Switch from '@mui/material/Switch';
 import { makeStyles } from '@material-ui/core'
 
-
 const useStyles = makeStyles({
     overlay: {
       position: 'fixed',
@@ -65,70 +61,51 @@ const MenuBar = ({handleSelectedMenu}:IContactsList) => {
     <div className={classes.overlay} id='overlay'>
       <Paper className={classes.container}>
       <MenuList className={classes.list}>
-        <MenuItem onClick={() => handleSelectedMenu(0)}>
-          <ListItemIcon className={classes.listIcon}>
-            <BookmarkBorderIcon fontSize="medium" />
-          </ListItemIcon>
-          <ListItemText>Saved Messages</ListItemText>
-        </MenuItem>
-        <MenuItem onClick={() => handleSelectedMenu(1)}>
-          <ListItemIcon className={classes.listIcon}>
-            <ArchiveIcon fontSize="medium" />
-          </ListItemIcon>
-          <ListItemText>Archived Chats</ListItemText>
-        </MenuItem>
-        <MenuItem  onClick={() => handleSelectedMenu(2)}>
+        <MenuItem  onClick={() => handleSelectedMenu(1)}>
           <ListItemIcon className={classes.listIcon}>
             <PermContactCalendarIcon fontSize="medium" />
           </ListItemIcon>
           <ListItemText>Contacts</ListItemText>
         </MenuItem>        
-        <MenuItem onClick={() => handleSelectedMenu(3)}>
+        <MenuItem onClick={() => handleSelectedMenu(2)}>
           <ListItemIcon className={classes.listIcon}>
             <SettingsIcon fontSize="medium" />
           </ListItemIcon>
           <ListItemText>Settings</ListItemText>
         </MenuItem>
-        <MenuItem onClick={() => handleSelectedMenu(4)}>
+        <MenuItem onClick={() => handleSelectedMenu(3)}>
           <ListItemIcon className={classes.listIcon}>
             <Brightness3Icon fontSize="medium" />
           </ListItemIcon>
           <ListItemText>Night Mode</ListItemText>
           <Switch onClick={handleSwitch} {...label} />
         </MenuItem>
-        <MenuItem onClick={() => handleSelectedMenu(5)}>
-          <ListItemIcon className={classes.listIcon}>
-            <AnimationIcon fontSize="medium" />
-          </ListItemIcon>
-          <ListItemText>Animations</ListItemText>
-          <Switch onClick={handleSwitch} {...label} defaultChecked />
-        </MenuItem>
-        <MenuItem onClick={() => handleSelectedMenu(6)}>
+        <MenuItem onClick={() => handleSelectedMenu(4)}>
           <ListItemIcon className={classes.listIcon}>
             <HelpOutlineIcon fontSize="medium" />
           </ListItemIcon>
           <ListItemText>Telegram Features</ListItemText>
         </MenuItem>              
-        <MenuItem onClick={() => handleSelectedMenu(7)}>
+        <MenuItem onClick={() => handleSelectedMenu(5)}>
           <ListItemIcon className={classes.listIcon}>
             <BugReportIcon fontSize="medium" />
           </ListItemIcon>
           <ListItemText>Report bug</ListItemText>
         </MenuItem>
-        <MenuItem onClick={() => handleSelectedMenu(8)}>
+        <MenuItem onClick={() => handleSelectedMenu(6)}>
           <ListItemIcon className={classes.listIconText}>
             K
           </ListItemIcon>
           <ListItemText>Switch to K Version</ListItemText>
         </MenuItem>
-        <MenuItem onClick={() => handleSelectedMenu(9)}>
+        <MenuItem onClick={() => handleSelectedMenu(7)}>
           <ListItemIcon className={classes.listIconText}>
              W
           </ListItemIcon>
           <ListItemText>Switch to Old Version</ListItemText>
         </MenuItem >
         <Divider />
-        <MenuItem onClick={() => handleSelectedMenu(10)}>
+        <MenuItem onClick={() => handleSelectedMenu(8)}>
           <ListItemText secondary='Telegram WebZ 1.32.3' className={classes.listItemLast}/>
         </MenuItem>
       </MenuList>

src/components/HomePage/LeftBar/SmallMenuBar/index.tsx

@@ -67,8 +67,7 @@ const  SmallMenuBar = ({handleSelectedMenu,setIsMenuSm}:ISmallMenuBar) => {
   const open = Boolean(anchorEl);
   const handleClick = (e: React.MouseEvent<HTMLDivElement>):void => setAnchorEl(e.currentTarget)
 
-  const handleClose = (i:number|null):void => {
-    console.log('chosen one element from small menu by id', i)
+  const handleClose = ():void => {
     setIsMenuSm(false)
     setAnchorEl(null)
   }
@@ -88,15 +87,15 @@ const  SmallMenuBar = ({handleSelectedMenu,setIsMenuSm}:ISmallMenuBar) => {
         onClose={handleClose}
       >
         <MenuItem  onClick={() => {
-          handleClose(2);
-          handleSelectedMenu(11)
+          handleClose();
+          handleSelectedMenu(9)
         }}>
             <PersonIcon/>
             New Message
         </MenuItem>
         <MenuItem  onClick={() => {
-          handleClose(2);
-          handleSelectedMenu(12)
+          handleClose();
+          handleSelectedMenu(10)
         }}>
             <PersonAddAltIcon/>
             New Contact

src/components/HomePage/LeftBar/index.tsx

@@ -72,19 +72,16 @@ const LeftBar = () => {
           setIsMenuSm={setIsMenuSm} />}
         {isMenu && modalRoot.current &&
           createPortal(<MenuBar handleSelectedMenu={handleSelectedMenu} />, modalRoot.current)}
-        {iMenu === 0 && <NotDone name='Saved Messages' />}
-        {iMenu === 1 && <NotDone name='Archive Chats' />}
-        {iMenu === 2 && <ContactsList handleClick={handleClick} value={value}/>}
-        {iMenu === 3 && <NotDone name='Settings' />}
-        {iMenu === 4 && <NotDone name='Night Mode' />}
-        {iMenu === 5 && <NotDone name='Animations' />}
-        {iMenu === 6 && <NotDone name='Telegram Feature' />}
-        {iMenu === 7 && <NotDone name='Report Bag' />}
-        {iMenu === 8 && <NotDone name='Switch to K Version' />}
-        {iMenu === 9 && <NotDone name='Switch to Old Version' />}
-        {iMenu === 10 && <NotDone name='Telegram WebZ 1.33.4' />}
-        {iMenu === 11 && <ChatsList />}
-        {iMenu === 12 && <AddContact setIMenu={setIMenu}/>}
+        {iMenu === 1 && <ContactsList handleClick={handleClick} value={value}/>}
+        {iMenu === 2 && <NotDone name='Settings' />}
+        {iMenu === 3 && <NotDone name='Night Mode' />}
+        {iMenu === 4 && <NotDone name='Telegram Feature' />}
+        {iMenu === 5 && <NotDone name='Report Bag' />}
+        {iMenu === 6 && <NotDone name='Switch to K Version' />}
+        {iMenu === 7 && <NotDone name='Switch to Old Version' />}
+        {iMenu === 8 && <NotDone name='Telegram WebZ 1.33.4' />}
+        {iMenu === 9 && <ContactsList handleClick={handleClick} value={value}/>}
+        {iMenu === 10 && <AddContact setIMenu={setIMenu}/>}
     </Grid>
     )
 }

src/components/HomePage/RightBar/ChatBar/Messages/MessageLeftText/index.tsx

@@ -73,7 +73,7 @@ const MessageLeftText = ({message,name,lastName,updatedAt}:IMessageLeftText) =>
   const classes = useStyles();
   return (
     <div className={classes.container}>
-      <CopyToClipboard onCopy={() => copied()} text={message}>
+      <CopyToClipboard onCopy={() => copied('Text')} text={message}>
         <div className={classes.wrapper}>
           <ListItemText className={classes.message}
             primary={`${firstLetter(name)}${slicedWord(name, 15, 1)} 

src/components/HomePage/RightBar/ChatBar/Messages/MessageRightText/index.tsx

@@ -73,7 +73,7 @@ const MessageRightText = ({message,name,lastName,updatedAt}:IMessageRightText) =
 
   return (
   <div className={classes.container}>
-    <CopyToClipboard onCopy={() => copied()} text={message}>
+    <CopyToClipboard onCopy={() => copied('Text')} text={message}>
       <div className={classes.wrapper}>
         <ListItemText className={classes.message}
           primary={`${firstLetter(name)}${slicedWord(name, 15, 1)} 

src/components/HomePage/RightBar/ChatBar/index.tsx

@@ -50,9 +50,10 @@ const ChatBar = () => {
   const dispatch = useDispatch()
   const messages = useSelector(getMessagesMemo)
   const userNumber = useSelector(getNumber)
-  const { companionId } = useSelector(getChat)
+  const { companionId,total } = useSelector(getChat)
   const scroll = useSelector(getScroll)
   const [isArrow, setIsArrow] = useState<boolean>(false)
+  const [isScroll, setIsScroll] = useState<boolean>(true)
   const [isNew, setIsNew] = useState<{new:number,mute:boolean}>({new:0,mute:false})
   const divRef = useRef<any | null>(null)
   let time:any
@@ -64,6 +65,7 @@ const ChatBar = () => {
   }
 
   const handleScroll = ({ target }: any) => {
+    isScroll&&setIsScroll(false)
     const different = target.scrollHeight - target.scrollTop
     if (different < 900) seenChat(companionId)
     setIsArrow(different < 1500 ? false : true)
@@ -72,13 +74,11 @@ const ChatBar = () => {
 
   useEffect(() => {
     if (scroll) {
-      seenChat(companionId)
       dispatch(asyncGetMessagesById(companionId, handleScrollTo))
       dispatch(actionScroll(false))
     }
   }, [dispatch,scroll, companionId])  
-  // () =>
-  //       divRef.current.scrollHeight < 900 && !watched&& seenChat(companionId))
+
   useEffect(() => {
     dispatch(asyncGetMessagesById(companionId, handleScrollTo))
     const handleReset = () => {
@@ -90,6 +90,12 @@ const ChatBar = () => {
     return () => clearInterval(idInterval);
   }, [dispatch, companionId]);
 
+  useEffect(() => {
+    const scrollHeight = divRef.current.scrollHeight
+    const clientHeight = divRef.current.clientHeight
+    if(isScroll&&scrollHeight === clientHeight) seenChat(companionId)
+  }, [isScroll, companionId, total]);
+
   return (
       <div ref={divRef} className={classes.container} onScroll={debouncedHandleScroll}>
         <div  className={classes.messagesBody}>

src/components/HomePage/RightBar/HeaderBar/Buttons/MenuList/index.tsx

@@ -83,7 +83,7 @@ const MenuList = ({setModal}:{setModal:any}) => {
         <MenuItem onClick={() => handleClose(0)}>
           {mute ? <NotificationsNoneIcon /> : <VolumeOffIcon />}
           {mute ? 'Unmute':'Mute'}
-          </MenuItem>
+        </MenuItem>
         <MenuItem onClick={() =>  handleClose(1)}>
             <CheckBoxIcon/>
             Select messages

src/components/HomePage/RightBar/HeaderBar/RightListsAndBars/CredentialsList/ProfileLists/TextList/index.tsx

@@ -26,7 +26,7 @@ const TextList = ({ messagesMemo }: { messagesMemo: TMessages }) => {
     <List>
        {filteredMessagesMemo.map(({ message, createdAt, lastName, name, color, avatarUrl }) =>
       <div key={createdAt}>
-        <CopyToClipboard onCopy={() => copied()} text={message}>
+        <CopyToClipboard onCopy={() => copied('Text')} text={message}>
           <ListItem alignItems="flex-start" className={classes.listItem}>
             <ListItemAvatar>
               <Avatar alt={name} src={avatarUrl?`http://localhost:3000/${avatarUrl}`:undefined}

src/components/HomePage/RightBar/HeaderBar/RightListsAndBars/CredentialsList/ProfileMenu/index.tsx

@@ -38,7 +38,7 @@ const ProfileMenu = () => {
   return (
     <Paper className={classes.container}>
       <MenuList className={classes.list}>
-        <CopyToClipboard onCopy={() => copied()} text={number}>
+        <CopyToClipboard onCopy={() => copied('Number')} text={number}>
            <MenuItem>
               <ListItemIcon className={classes.listIcon}>
                 <PhoneIcon fontSize="medium" />
@@ -47,7 +47,7 @@ const ProfileMenu = () => {
             </MenuItem>
           </CopyToClipboard>
         <Divider variant="inset"/>
-        <MenuItem onClick={() => console.log('clicked Notification')}>
+        <MenuItem>
           <ListItemIcon className={classes.listIcon}>
             <NotificationsIcon fontSize="medium" />
           </ListItemIcon>
@@ -55,7 +55,7 @@ const ProfileMenu = () => {
           <Switch onClick={handleMute} {...label} defaultChecked={!mute} />
         </MenuItem>
         <Divider variant="inset"/>
-        <MenuItem onClick={() => console.log('clicked Notification')}>
+        <MenuItem>
           <ListItemIcon className={classes.listIcon}>
             <SortIcon fontSize="medium" />
           </ListItemIcon>

src/components/HomePage/RightBar/HeaderBar/RightListsAndBars/SearchList/index.tsx

@@ -8,11 +8,10 @@ import ListItemAvatar from '@mui/material/ListItemAvatar';
 import Avatar from '@mui/material/Avatar';
 import Typography from '@mui/material/Typography';
 import Divider from '@mui/material/Divider';
-import { CopyToClipboard } from 'react-copy-to-clipboard';
 import Search from './Search'
 import AlertInfo from "../../../../../reusableComponents/AlertInfo";
 import { getMessages } from '../../../../../../redux/messages/selector'
-import { timeStamp,timeStampFilter,firstLetter,slicedWord,copied } from '../../../../../../helpers'
+import { timeStamp,timeStampFilter,firstLetter,slicedWord } from '../../../../../../helpers'
 
 const useStyles = makeStyles({
   containerAbsolute: {
@@ -57,7 +56,6 @@ return (
         <List sx={{ width: '100%' }}>
           {arr.map(({ name, lastName, avatarUrl, color, message, createdAt }) =>
           <div key={createdAt}>
-            <CopyToClipboard onCopy={() => copied()} text={message}>
               <ListItem alignItems="flex-start" className={classes.listItem}>
                      <ListItemAvatar>
                         <Avatar alt={name} src={avatarUrl?`http://localhost:3000/${avatarUrl}`:undefined}
@@ -81,7 +79,6 @@ return (
                          </>}
                      />
                 </ListItem>
-              </CopyToClipboard>
               <Divider variant="inset"/>
             </div>)}
           </List> :

src/helpers/index.ts

@@ -55,8 +55,8 @@ const notification = (name: string, onClick: () => void) => {
   });
 }
 
-const copied = () => {
-    toast.success('Copied', {
+const copied = (text:string) => {
+    toast.success(`${text} Copied`, {
     position: "bottom-right",
     autoClose: 1000,
     hideProgressBar: false,