done edite mode

package-lock.json

@@ -61,6 +61,7 @@
       },
       "devDependencies": {
         "@types/file-saver": "^2.0.5",
+        "@types/react-copy-to-clipboard": "^5.0.2",
         "@types/react-redux": "^7.1.18",
         "@types/react-router-dom": "^5.1.8",
         "@types/shortid": "^0.0.29",
@@ -3398,6 +3399,15 @@
         "csstype": "^3.0.2"
       }
     },
+    "node_modules/@types/react-copy-to-clipboard": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/@types/react-copy-to-clipboard/-/react-copy-to-clipboard-5.0.2.tgz",
+      "integrity": "sha512-O29AThfxrkUFRsZXjfSWR2yaWo0ppB1yLEnHA+Oh24oNetjBAwTDu1PmolIqdJKzsZiO4J1jn6R6TmO96uBvGg==",
+      "dev": true,
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/react-dom": {
       "version": "17.0.9",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.9.tgz",
@@ -26459,6 +26469,15 @@
         "csstype": "^3.0.2"
       }
     },
+    "@types/react-copy-to-clipboard": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/@types/react-copy-to-clipboard/-/react-copy-to-clipboard-5.0.2.tgz",
+      "integrity": "sha512-O29AThfxrkUFRsZXjfSWR2yaWo0ppB1yLEnHA+Oh24oNetjBAwTDu1PmolIqdJKzsZiO4J1jn6R6TmO96uBvGg==",
+      "dev": true,
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/react-dom": {
       "version": "17.0.9",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.9.tgz",

package.json

@@ -83,6 +83,7 @@
   },
   "devDependencies": {
     "@types/file-saver": "^2.0.5",
+    "@types/react-copy-to-clipboard": "^5.0.2",
     "@types/react-redux": "^7.1.18",
     "@types/react-router-dom": "^5.1.8",
     "@types/shortid": "^0.0.29",

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

@@ -5,8 +5,6 @@ import Avatar from '@mui/material/Avatar';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 import PersonIcon from '@mui/icons-material/Person';
-import GroupIcon from '@mui/icons-material/Group';
-import GroupsIcon from '@mui/icons-material/Groups';
 import ModeEditOutlineOutlinedIcon from '@mui/icons-material/ModeEditOutlineOutlined';
 import CloseIcon from '@mui/icons-material/Close';
 import PersonAddAltIcon from '@mui/icons-material/PersonAddAlt';
@@ -89,30 +87,16 @@ const  SmallMenuBar = ({handleSelectedMenu,setIsMenuSm}:ISmallMenuBar) => {
         open={open}
         onClose={handleClose}
       >
-        <MenuItem onClick={() => {
-          handleClose(0);
-          handleSelectedMenu(11)
-        }}>
-            <GroupsIcon />
-            New Channel
-          </MenuItem>
-        <MenuItem onClick={() => {
-          handleClose(1);
-          handleSelectedMenu(12)
-        }}>
-            <GroupIcon />
-            New Group
-          </MenuItem>
         <MenuItem  onClick={() => {
           handleClose(2);
-          handleSelectedMenu(13)
+          handleSelectedMenu(11)
         }}>
             <PersonIcon/>
             New Message
         </MenuItem>
         <MenuItem  onClick={() => {
           handleClose(2);
-          handleSelectedMenu(14)
+          handleSelectedMenu(12)
         }}>
             <PersonAddAltIcon/>
             New Contact

src/components/HomePage/LeftBar/index.tsx

@@ -83,10 +83,8 @@ const LeftBar = () => {
         {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 && <NotDone name='New Channel' />}
-        {iMenu === 12 && <NotDone name='New Group' />}
-        {iMenu === 13 && <ChatsList />}
-        {iMenu === 14 && <AddContact setIMenu={setIMenu}/>}
+        {iMenu === 11 && <ChatsList />}
+        {iMenu === 12 && <AddContact setIMenu={setIMenu}/>}
     </Grid>
     )
 }

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

@@ -84,13 +84,13 @@ const useStyles = makeStyles({
     border: 'solid 1px rgba(179, 179, 179, 0.6)',
     overflowY: 'hidden',
     boxSizing: 'border-box',
-    display: 'flex',
-    justifyContent: 'center',
-    alignContent: 'center',
-    alignItems: 'center'
   },
   carousel: {
-    width:'40%'
+    position: "absolute",
+    left: '35%',
+    top:'2%',
+    width: '30%',
+    height:'80%',
   }
 });
 

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

@@ -1,6 +1,7 @@
 import { makeStyles } from "@material-ui/core/styles";
 import ListItemText from '@mui/material/ListItemText';
-import { firstLetter,slicedWord,timeStampMessage } from '../../../../../../helpers'
+import { CopyToClipboard } from 'react-copy-to-clipboard';
+import { firstLetter,slicedWord,timeStampMessage,copied } from '../../../../../../helpers'
 
 const useStyles = makeStyles({
     container: {
@@ -71,16 +72,18 @@ interface IMessageLeftText {
 const MessageLeftText = ({message,name,lastName,updatedAt}:IMessageLeftText) => {
   const classes = useStyles();
   return (
-  <div className={classes.container}>
-      <div className={classes.wrapper}>
-        <ListItemText className={classes.message}
-          primary={`${firstLetter(name)}${slicedWord(name, 15, 1)} 
-          ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}
-          primaryTypographyProps={{color: "#0379af"}}
-          secondary={message}
-          secondaryTypographyProps={{color: "#0e0d0d"}}/>
-        <div className={classes.time}>{timeStampMessage(updatedAt)}</div>
-      </div>
+    <div className={classes.container}>
+      <CopyToClipboard onCopy={() => copied()} text={message}>
+        <div className={classes.wrapper}>
+          <ListItemText className={classes.message}
+            primary={`${firstLetter(name)}${slicedWord(name, 15, 1)} 
+            ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}
+            primaryTypographyProps={{color: "#0379af"}}
+            secondary={message}
+            secondaryTypographyProps={{color: "#0e0d0d"}}/>
+          <div className={classes.time}>{timeStampMessage(updatedAt)}</div>
+        </div>
+      </CopyToClipboard>
     </div>
   );
 };

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

@@ -85,13 +85,13 @@ const useStyles = makeStyles({
     border: 'solid 1px rgba(179, 179, 179, 0.6)',
     overflowY: 'hidden',
     boxSizing: 'border-box',
-    display: 'flex',
-    justifyContent: 'center',
-    alignContent: 'center',
-    alignItems: 'center'
   },
   carousel: {
-    width:'40%'
+    position: "absolute",
+    left: '35%',
+    top:'2%',
+    width: '30%',
+    height:'80%',
   }
 });
 

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

@@ -1,6 +1,7 @@
 import { makeStyles } from "@material-ui/core/styles";
 import ListItemText from '@mui/material/ListItemText';
-import { firstLetter, slicedWord, timeStampMessage } from '../../../../../../helpers'
+import { CopyToClipboard } from 'react-copy-to-clipboard';
+import { firstLetter, slicedWord, timeStampMessage,copied } from '../../../../../../helpers'
 
 const useStyles = makeStyles({
     container: {
@@ -72,6 +73,7 @@ const MessageRightText = ({message,name,lastName,updatedAt}:IMessageRightText) =
 
   return (
   <div className={classes.container}>
+    <CopyToClipboard onCopy={() => copied()} text={message}>
       <div className={classes.wrapper}>
         <ListItemText className={classes.message}
           primary={`${firstLetter(name)}${slicedWord(name, 15, 1)} 
@@ -81,6 +83,7 @@ const MessageRightText = ({message,name,lastName,updatedAt}:IMessageRightText) =
           secondaryTypographyProps={{ color: "#0e0d0d" }} />
         <div className={classes.time}>{timeStampMessage(updatedAt)}</div>
       </div>
+    </CopyToClipboard>
   </div>    
 )};
 

src/components/HomePage/RightBar/HeaderBar/RightLists/CredentialsList/ProfileLists/AudioList/index.tsx

@@ -17,7 +17,12 @@ const useStyles = makeStyles({
       '&:hover': {
         color: '#016cc3'
       },
-    },
+  },
+  listItem: {
+    '&:hover': {
+      backgroundColor: '#f0f0f0',
+    }
+  },  
 })
 const AudioList = ({ messagesMemo }: { messagesMemo: TMessages }) => {
   const classes = useStyles()
@@ -25,8 +30,8 @@ const AudioList = ({ messagesMemo }: { messagesMemo: TMessages }) => {
     return filteredMessagesMemo.length > 0 ?(
       <List>
         {filteredMessagesMemo.map(({ message, createdAt, fullType }) =>
-          <>
-            <ListItem key={createdAt} alignItems="flex-start">
+          <div key={createdAt}>
+            <ListItem alignItems="flex-start" className={classes.listItem}>
               <ListItemAvatar>
                 <LibraryMusicIcon onClick={() =>
                   handleDownload(`http://localhost:3000/${message}`, fullType)}
@@ -37,8 +42,8 @@ const AudioList = ({ messagesMemo }: { messagesMemo: TMessages }) => {
                 secondary={timeStampEU(createdAt)}
                />
             </ListItem>
-            <Divider/>
-        </>)}
+            <Divider variant="inset"/>
+        </div>)}
     </List>
    ): <AlertInfo name='You do not have Audio yet!'/>  
 }

src/components/HomePage/RightBar/HeaderBar/RightLists/CredentialsList/ProfileLists/FilesList/index.tsx

@@ -17,16 +17,22 @@ const useStyles = makeStyles({
       '&:hover': {
         color: '#016cc3'
       },
-    },
+  },
+  listItem: {
+    '&:hover': {
+      backgroundColor: '#f0f0f0',
+    }
+  },  
 })
+
 const FilesList = ({ messagesMemo }: { messagesMemo: TMessages }) => {
   const classes = useStyles()
     const filteredMessagesMemo =  messagesMemo.filter(({type}) => type !== 'text')
     return filteredMessagesMemo.length > 0 ?(
       <List>
         {filteredMessagesMemo.map(({ message, createdAt, fullType }) =>
-          <>
-            <ListItem key={createdAt} alignItems="flex-start">
+          <div key={createdAt}>
+            <ListItem alignItems="flex-start" className={classes.listItem}>
               <ListItemAvatar>
                 <FolderIcon onClick={() =>
                   handleDownload(`http://localhost:3000/${message}`, fullType)}
@@ -37,8 +43,8 @@ const FilesList = ({ messagesMemo }: { messagesMemo: TMessages }) => {
                 secondary={timeStampEU(createdAt)}
               />
             </ListItem>
-            <Divider/>
-        </>)}
+            <Divider variant="inset"/>
+        </div>)}
     </List>
    ): <AlertInfo name='You do not have Files yet!'/>  
 }

src/components/HomePage/RightBar/HeaderBar/RightLists/CredentialsList/ProfileLists/MediaList/MediaListItem/index.tsx

@@ -24,8 +24,9 @@ const useStyles = makeStyles({
   },
   wrapper: {
     width: '40%',
-    height: 'auto',
-    position: 'relative'
+    maxHeight: '80%',
+    position: 'relative',
+    display: 'flex',
   },
   downloadIcon: {
     position: 'absolute',
@@ -41,6 +42,12 @@ const useStyles = makeStyles({
       color: '#b8b7b7',
     }
   },
+  img: {
+    cursor:'pointer',
+    '&:hover': {
+      scale:0.98
+    }
+  },
   time: {
     position: 'absolute',
     content: '',    
@@ -70,7 +77,7 @@ const MediaListItem = ({ message,fullType,updatedAt }: { message: string,fullTyp
        </div>
     </div> :
     <ImageListItem>
-      <img onClick={handleOpenWatch} style={{cursor:'pointer'}}
+      <img onClick={handleOpenWatch} className={classes.img}
         src={`${url}?w=164&h=164&fit=crop&auto=format`}
         srcSet={`${url}?w=164&h=164&fit=crop&auto=format&dpr=2 2x`}
         alt='imageItem' loading="lazy" />

src/components/HomePage/RightBar/HeaderBar/RightLists/CredentialsList/ProfileLists/MediaList/index.tsx

@@ -7,7 +7,7 @@ import { TMessages } from '../../../../../../../../typescript/redux/messages/typ
 const MediaList = ({ messagesMemo }: { messagesMemo: TMessages }) => {
   const filteredMessagesMemo =  messagesMemo.filter(({ type }) => type === 'image')
   return filteredMessagesMemo.length > 0 ?(
-      <ImageList sx={{ width: '100%', height: 'auto' }} cols={3} rowHeight={164}>
+      <ImageList sx={{ width: '100%', height: 'auto',overflow:'hidden' }} cols={3} rowHeight={164}>
         {filteredMessagesMemo.map(({message,createdAt,fullType,updatedAt}) => 
           <MediaListItem key={createdAt} message={message} fullType={fullType} updatedAt={updatedAt}/>)}
       </ImageList>

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

@@ -4,19 +4,30 @@ import ListItemText from '@mui/material/ListItemText';
 import ListItemAvatar from '@mui/material/ListItemAvatar';
 import Avatar from '@mui/material/Avatar';
 import Divider from '@mui/material/Divider';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
+import { makeStyles } from '@material-ui/core'
 
 import AlertInfo from '../../../../../../../reusableComponents/AlertInfo';
-import { timeStampEU,firstLetter } from '../../../../../../../../helpers'
+import { timeStampEU,firstLetter,copied } from '../../../../../../../../helpers'
 import { TMessages } from '../../../../../../../../typescript/redux/messages/types'
 
-const TextList = ({ messagesMemo }: { messagesMemo: TMessages }) => {
+const useStyles = makeStyles({
+  listItem: {
+    '&:hover': {
+      backgroundColor: '#f0f0f0',
+    }
+  },  
+})
 
+const TextList = ({ messagesMemo }: { messagesMemo: TMessages }) => {
+  const classes = useStyles()
   const filteredMessagesMemo =  messagesMemo.filter(({type}) => type === 'text')
    return filteredMessagesMemo.length > 0 ?(
-      <List>
+    <List>
        {filteredMessagesMemo.map(({ message, createdAt, lastName, name, color, avatarUrl }) =>
-         <>
-          <ListItem key={createdAt} alignItems="flex-start">
+      <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}
                   sx={{ background: color, width: 38, height: 38,marginRight:2}}>
@@ -27,8 +38,9 @@ const TextList = ({ messagesMemo }: { messagesMemo: TMessages }) => {
                secondary={timeStampEU(createdAt)} secondaryTypographyProps={{color: '#020202',paddingTop:0.5}}
             />
           </ListItem>
-          <Divider />
-        </>)}
+        </CopyToClipboard>
+          <Divider variant="inset" />
+      </div>)}
     </List>
    ): <AlertInfo name='You do not have Text yet!'/>  
 }

src/components/HomePage/RightBar/HeaderBar/RightLists/CredentialsList/ProfileLists/VideoList/index.tsx

@@ -17,7 +17,12 @@ const useStyles = makeStyles({
       '&:hover': {
         color: '#016cc3'
       },
-    },
+  },
+  listItem: {
+    '&:hover': {
+      backgroundColor: '#f0f0f0',
+    }
+  },  
 })
 const VideoList = ({ messagesMemo }: { messagesMemo: TMessages }) => {
   const classes = useStyles()
@@ -25,8 +30,8 @@ const VideoList = ({ messagesMemo }: { messagesMemo: TMessages }) => {
     return filteredMessagesMemo.length > 0 ?(
       <List>
         {filteredMessagesMemo.map(({ message, createdAt, fullType }) =>
-          <>
-            <ListItem key={createdAt} alignItems="flex-start">
+          <div key={createdAt}>
+            <ListItem key={createdAt} alignItems="flex-start" className={classes.listItem}>
               <ListItemAvatar>
                 <VideoLibraryIcon onClick={() =>
                   handleDownload(`http://localhost:3000/${message}`, fullType)}
@@ -37,8 +42,8 @@ const VideoList = ({ messagesMemo }: { messagesMemo: TMessages }) => {
                 secondary={timeStampEU(createdAt)}
                />
             </ListItem>
-            <Divider/>
-        </>)}
+            <Divider variant="inset"/>
+        </div>)}
     </List>
    ): <AlertInfo name='You do not have Audio yet!'/>  
 }

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

@@ -9,10 +9,12 @@ import NotificationsIcon from '@mui/icons-material/Notifications';
 import SortIcon from '@mui/icons-material/Sort';
 import Switch from '@mui/material/Switch';
 import Divider from '@mui/material/Divider';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { makeStyles } from '@material-ui/core'
 
 import { getChat } from '../../../../../../../redux/chat/selector'
 import { muteChat } from '../../../../../../../api-data'
+import { copied } from '../../../../../../../helpers';
 
 const useStyles = makeStyles({
     container: {
@@ -35,12 +37,14 @@ const ProfileMenu = ({sort,handleSort}:{sort:boolean,handleSort: () => void}) =>
   return (
     <Paper className={classes.container}>
       <MenuList className={classes.list}>
-        <MenuItem onClick={() => console.log('clicked Phone')}>
-          <ListItemIcon className={classes.listIcon}>
-            <PhoneIcon fontSize="medium" />
-          </ListItemIcon>
-          <ListItemText primary={number} secondary='Phone'/>
-        </MenuItem>
+        <CopyToClipboard onCopy={() => copied()} text={number}>
+           <MenuItem>
+              <ListItemIcon className={classes.listIcon}>
+                <PhoneIcon fontSize="medium" />
+              </ListItemIcon>
+              <ListItemText primary={number} secondary='Phone' />
+            </MenuItem>
+          </CopyToClipboard>
         <Divider variant="inset"/>
         <MenuItem onClick={() => console.log('clicked Notification')}>
           <ListItemIcon className={classes.listIcon}>

src/components/HomePage/RightBar/HeaderBar/RightLists/CredentialsList/ToolBar/index.tsx

@@ -1,31 +1,53 @@
 import Stack from '@mui/material/Stack';
 import IconButton from '@mui/material/IconButton';
 import PersonAddAltIcon from '@mui/icons-material/PersonAddAlt';
+import EditIcon from '@mui/icons-material/Edit';
 import CloseIcon from '@mui/icons-material/Close';
 import { makeStyles, Typography } from '@material-ui/core'
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
+import { useState,useEffect } from 'react';
 import { actionIsOpen } from '../../../../../../../redux/control/action'
+import { getContacts } from '../../../../../../../redux/contacts/selector'
+import { getChat } from '../../../../../../../redux/chat/selector'
+import { asyncGetContacts,asyncAddContact } from '../../../../../../../redux/contacts/operations';
 
 const useStyles = makeStyles({
   container: {
     borderLeft: 'solid 0.5px #9c9c9c',
     paddingLeft: 10,
     paddingBottom: 3,
-    width:482
+    width: 482,
+    display: 'flex',
+    alignContent: 'center',
+    alignItems: 'center',    
   },
 })
 
 const ToolBar = () => {
   const dispatch = useDispatch()
   const classes = useStyles()
+  const contacts = useSelector(getContacts)
+  const { number } = useSelector(getChat)
+  const [isContact, setIsContact] = useState<boolean>(false)
+
+  useEffect(() => {
+    dispatch(asyncGetContacts())
+  }, [dispatch])
+
+  useEffect(() => {
+    const isExist = contacts.some((el) => el.number === number)
+    isExist&&setIsContact(true)
+  }, [contacts,number])
+
   return (
-    <Stack className={classes.container} direction="row" spacing={22}>
+    <Stack className={classes.container} direction="row" spacing={40}>
       <IconButton onClick={() => dispatch(actionIsOpen(''))} aria-label="delete" size="medium">
         <CloseIcon fontSize='medium'/>
       </IconButton>
-      <Typography variant="h6" color="initial">Profile</Typography>
+      <Typography variant="h6" color="initial" style={{marginLeft:20}}>Profile</Typography>
       <IconButton  aria-label="delete" size="medium">
-        <PersonAddAltIcon fontSize='medium'/>
+        {isContact ? <EditIcon onClick={() => dispatch(actionIsOpen('edit'))} fontSize='medium' /> :
+          <PersonAddAltIcon onClick={() => dispatch(asyncAddContact(number))} fontSize='medium' />}
       </IconButton>
     </Stack>
     )

src/components/HomePage/RightBar/HeaderBar/RightLists/EditList/ToolBar/index.tsx

@@ -0,0 +1,57 @@
+import Stack from '@mui/material/Stack';
+import IconButton from '@mui/material/IconButton';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import CloseIcon from '@mui/icons-material/Close';
+import { makeStyles, Typography } from '@material-ui/core'
+import { useDispatch, useSelector } from 'react-redux';
+import { useState,useEffect } from 'react';
+import { actionIsOpen } from '../../../../../../../redux/control/action'
+import { getContacts } from '../../../../../../../redux/contacts/selector'
+import { getChat } from '../../../../../../../redux/chat/selector'
+import { asyncGetContacts,asyncAddContact } from '../../../../../../../redux/contacts/operations';
+
+const useStyles = makeStyles({
+  container: {
+    borderLeft: 'solid 0.5px #9c9c9c',
+    paddingLeft: 10,
+    paddingBottom: 3,
+    width: 482,
+    display: 'flex',
+    alignContent: 'center',
+    alignItems: 'center',
+  },
+  iconArrow: {
+    '&:hover': {
+      transform: 'rotate(360deg)',
+      transition: 'all 250ms ease-out ',
+    }
+  },
+})
+
+const ToolBar = () => {
+  const dispatch = useDispatch()
+  const classes = useStyles()
+  const contacts = useSelector(getContacts)
+  const { number } = useSelector(getChat)
+  const [isContact, setIsContact] = useState<boolean>(false)
+
+  useEffect(() => {
+    dispatch(asyncGetContacts())
+  }, [dispatch])
+
+  useEffect(() => {
+    const isExist = contacts.some((el) => el.number === number)
+    isExist&&setIsContact(true)
+  }, [contacts,number])
+
+  return (
+    <Stack className={classes.container} direction="row" spacing={21}>
+      <IconButton onClick={() => dispatch(actionIsOpen('credentials'))} aria-label="delete" size="medium">
+        <ArrowBackIcon className={classes.iconArrow} fontSize='medium'/>
+      </IconButton>
+      <Typography variant="h6" color="initial" style={{marginLeft:20}}>Edit</Typography>
+    </Stack>
+    )
+}
+
+export default ToolBar

src/components/HomePage/RightBar/HeaderBar/RightLists/EditList/index.tsx

@@ -0,0 +1,32 @@
+import { makeStyles } from '@material-ui/core'
+import ToolBar from './ToolBar'
+
+
+const useStyles = makeStyles({
+    containerAbsolute: {
+        position: 'absolute',
+        top: 58,
+        width: 506,
+        borderLeft: 'solid 0.5px #9c9c9c',
+        maxHeight: '905px',
+        minHeight: '905px',
+        overflowY: 'scroll',
+        overflowX: 'hidden',
+        backgroundColor:'#ffffff'
+    }
+})
+
+const EditList= () => {
+  const classes = useStyles()
+
+    return (
+    <div>
+      <ToolBar />
+      <div className={classes.containerAbsolute}>
+        Edit
+      </div>
+   </div>
+  )
+}
+
+export default EditList

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

@@ -7,11 +7,12 @@ import ListItemText from '@mui/material/ListItemText';
 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 } from '../../../../../../helpers'
-
+import { timeStamp,timeStampFilter,firstLetter,slicedWord,copied } from '../../../../../../helpers'
 
 const useStyles = makeStyles({
   containerAbsolute: {
@@ -26,9 +27,8 @@ const useStyles = makeStyles({
     backgroundColor: '#ffffff'
   },
   listItem: {
-    borderBottom: 'solid 1px #e6e6e6',
     '&:hover': {
-      backgroundColor: '#e6e6e6',
+      backgroundColor: '#f0f0f0',
     }
   },
 })
@@ -56,31 +56,35 @@ return (
      <div className={classes.containerAbsolute}>
       {messages.length > 0 ? arr.length > 0 ?
         <List sx={{ width: '100%' }}>
-          {arr.map(({ name, lastName, avatarUrl, color, message, createdAt }) => 
-            <ListItem alignItems="flex-start" className={classes.listItem} key={createdAt}
-              onClick={() => console.log('clicked message in rightList')}>
-                   <ListItemAvatar>
-                      <Avatar alt={name} src={avatarUrl?`http://localhost:3000/${avatarUrl}`:undefined}
-                       sx={{ background: color, width: 44, height: 44, marginRight:2 }}>
-                            {!avatarUrl&&`${firstLetter(name)}${firstLetter(lastName)}`}
+          {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}
+                          sx={{ background: color, width: 44, height: 44, marginRight:2 }}>
+                          {!avatarUrl&&`${firstLetter(name)}${firstLetter(lastName)}`}
                         </Avatar>
-                   </ListItemAvatar>
-                   <ListItemText
-                     primary={`${firstLetter(name)}${slicedWord(name, 15, 1)} 
-                      ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}
-                     secondary={<>
-                         <Typography
-                           sx={{ display: 'block',wordBreak:'break-word' }}
-                           component="span"
-                           variant="body2"
-                           color="text.primary"
-                         >
-                           {message}
-                         </Typography>
-                         {timeStamp(createdAt)}
-                       </>}
-                   />
-                 </ListItem>)}
+                     </ListItemAvatar>
+                     <ListItemText
+                       primary={`${firstLetter(name)}${slicedWord(name, 15, 1)} 
+                        ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}
+                       secondary={<>
+                           <Typography
+                             sx={{ display: 'block',wordBreak:'break-word' }}
+                             component="span"
+                             variant="body2"
+                             color="text.primary"
+                           >
+                             {message}
+                           </Typography>
+                           {timeStamp(createdAt)}
+                         </>}
+                     />
+                </ListItem>
+              </CopyToClipboard>
+              <Divider variant="inset"/>
+            </div>)}
           </List> :
         <AlertInfo name={!date&&value ? `Can not find message by request: ${value}`:
         `Can not find message by request: ${value} and DataPicker: ${timeStampFilter(date)}`} />:

src/components/HomePage/RightBar/HeaderBar/RightLists/index.tsx

@@ -1,6 +1,7 @@
 import { useSelector } from 'react-redux'
 import SearchList from './SearchList'
 import CredentialsList from './CredentialsList'
+import EditList from './EditList'
 import { getIsOpen } from '../../../../../redux/control/selector'
 
 
@@ -8,8 +9,9 @@ const RightLists = () => {
   const isOpen = useSelector(getIsOpen)
   return (
     <div>
-      {isOpen === 'credentials' &&<CredentialsList/>}
-      {isOpen === 'search' && <SearchList/>}
+      {isOpen === 'credentials' && <CredentialsList />}
+      {isOpen === 'search' && <SearchList />}
+      {isOpen === 'edit' && <EditList/>}
   </div>
    )
 }

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

@@ -20,7 +20,7 @@ const HeaderBar = () => {
     return (
       <AppBar position="static">
         <Toolbar  className={classes.toolBar}>
-        <Credentials/>
+          <Credentials/>
           <Buttons/>
           <RightLists/>
         </Toolbar>

src/helpers/index.ts

@@ -56,6 +56,18 @@ const notification = (name: string, onClick: () => void) => {
   });
 }
 
+const copied = () => {
+    toast.success('Copied', {
+    position: "bottom-right",
+    autoClose: 1000,
+    hideProgressBar: false,
+    closeOnClick: true,
+    pauseOnHover: true,
+    draggable: true,
+    progress: undefined,
+  });
+}
+
 const playNotificationWithoutPermission = (url: string) => {
   const w:any = window
   const audioContext: any = new (w.AudioContext || w.webkitAudioContext)();
@@ -112,6 +124,7 @@ export {
   timeStampFilter,
   playNotification,
   notification,
+  copied,
   playNotificationWithoutPermission,
   handleDownload,
   handleSort

src/typescript/redux/control/types.ts

@@ -1,3 +1,3 @@
-export type TIsOpen = ('' | 'credentials' | 'search' | 'menu')
+export type TIsOpen = ('' | 'credentials' | 'search' | 'menu' | 'edit')
 
 export type TScroll = boolean