done small list in right bar

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

@@ -107,9 +107,7 @@ const MessagesLeftImage = ({url,updatedAt,color,message,messages,fullType}:IMess
   const classes = useStyles();
   const [watch, setWatch] = useState<boolean>(false)
   const handleOpenWatch = () => !watch&&setWatch(true)
-  const handleCloseWatch = (e:any) => {
-    if (e.target.id === 'overlay' && watch) setWatch(false)
-  }
+  const handleCloseWatch = (e:any) => e.target.id === 'overlay'&&watch&&setWatch(false)
 
   return (watch ?
     <div onClick={handleCloseWatch} id='overlay' className={classes.overlay}>

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

@@ -108,10 +108,7 @@ const MessageRightImage = ({url,updatedAt,color,message,messages,fullType}:IMess
   const classes = useStyles();
   const [watch, setWatch] = useState<boolean>(false)
   const handleOpenWatch = () => !watch&&setWatch(true)
-  const handleCloseWatch = (e:any) => {
-    if (e.target.id === 'overlay' && watch) setWatch(false)
-  }
-
+  const handleCloseWatch = (e:any) => e.target.id === 'overlay'&&watch&&setWatch(false)
   return (watch ?
     <div onClick={handleCloseWatch} id='overlay' className={classes.overlay}>
       <Carousel className={classes.carousel}>

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

@@ -229,7 +229,6 @@ const SendMessage = ({isArrow,isNew,handleScrollTo}:ISendMessage) => {
                 const file = new File([blob], name, {
                     type: 'video/mp4'
                 })
-                console.log(blob,file,name)
                 const formData: any = new FormData()
                 formData.append("video", file)
                 sentVideoMessageById(companionId, formData)
@@ -262,12 +261,11 @@ const SendMessage = ({isArrow,isNew,handleScrollTo}:ISendMessage) => {
         }
         clearMessage()
         playNotification('http://localhost:3000/send.mp3')
-        setTimeout(handleScrollTo, 3000);
+        setTimeout(handleScrollTo, 4000);
     }    
-    const handleTextarea = (e: React.ChangeEvent<HTMLTextAreaElement>) => setValue(e.target.value.trim())
+    const handleTextarea = (e: React.ChangeEvent<HTMLTextAreaElement>) => setValue(e.target.value)
     const handleFocusTextarea = async () => await typingChat(companionId,true)
     const handleBlurTextarea = async () => await typingChat(companionId,false) 
-    const handleKeyPres = (e: any) => e.code === 'Enter'&&  sentMessage()
     const handleOpenFileMenu = () => !isOpenMenu&&setIsOpenMenu(true)
     const handleCloseFileMenu = (e:any) => e.target.id === 'overlay'&&isOpenMenu&&setIsOpenMenu(false) 
     const handleOpenEmoji = () => !isOpenEmoji&&setIsOpenEmoji(true)
@@ -288,7 +286,7 @@ const SendMessage = ({isArrow,isNew,handleScrollTo}:ISendMessage) => {
 
     return (
         <div className={classes.container} style={{borderTop:isArrow?'solid 1px #ffffff':'none'}} >            
-            <div onKeyPress={handleKeyPres} className={classes.inputContainer}>
+            <div className={classes.inputContainer}>
                 <CloseIcon onClick={clearMessage} fontSize="small" className={classes.iconCancel}
                     sx={{width: 56, height: 56, display: file || value || status === 'stopped'
                     || _status === 'stopped' ? 'inline-block' : 'none'}} />

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

@@ -0,0 +1,42 @@
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemText from '@mui/material/ListItemText';
+import ListItemAvatar from '@mui/material/ListItemAvatar';
+import LibraryMusicIcon from '@mui/icons-material/LibraryMusic';
+import { makeStyles } from '@material-ui/core'
+
+import AlertInfo from '../../../../../../../reusableComponents/AlertInfo';
+import { timeStampEU,handleDownload } from '../../../../../../../../helpers'
+import { TMessages } from '../../../../../../../../typescript/redux/messages/types'
+
+const useStyles = makeStyles({
+    folderIcon: {
+      color: '#54b0fc',
+      cursor: 'pointer',
+      '&:hover': {
+        color: '#016cc3'
+      },
+    },
+})
+const AudioList = ({ messagesMemo }: { messagesMemo: TMessages }) => {
+  const classes = useStyles()
+    const filteredMessagesMemo =  messagesMemo.filter(({type}) => type === 'audio')
+    return filteredMessagesMemo.length > 0 ?(
+      <List>
+        {filteredMessagesMemo.map(({message,createdAt,fullType}) => 
+          <ListItem key={createdAt} alignItems="flex-start">
+            <ListItemAvatar>
+              <LibraryMusicIcon onClick={() =>
+                handleDownload(`http://localhost:3000/${message}`, fullType)}
+                className={classes.folderIcon} fontSize='large' />
+            </ListItemAvatar>
+            <ListItemText
+              primary={fullType}
+              secondary={timeStampEU(createdAt)}
+            />
+        </ListItem>)}
+    </List>
+   ): <AlertInfo name='You do not have Audio yet!'/>  
+}
+
+export default AudioList

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

@@ -0,0 +1,42 @@
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemText from '@mui/material/ListItemText';
+import ListItemAvatar from '@mui/material/ListItemAvatar';
+import FolderIcon from '@mui/icons-material/Folder';
+import { makeStyles } from '@material-ui/core'
+
+import AlertInfo from '../../../../../../../reusableComponents/AlertInfo';
+import { timeStampEU,handleDownload } from '../../../../../../../../helpers'
+import { TMessages } from '../../../../../../../../typescript/redux/messages/types'
+
+const useStyles = makeStyles({
+    folderIcon: {
+      color: '#54b0fc',
+      cursor: 'pointer',
+      '&:hover': {
+        color: '#016cc3'
+      },
+    },
+})
+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">
+            <ListItemAvatar>
+              <FolderIcon onClick={() =>
+                handleDownload(`http://localhost:3000/${message}`, fullType)}
+                className={classes.folderIcon} fontSize='large' />
+            </ListItemAvatar>
+            <ListItemText
+              primary={fullType}
+              secondary={timeStampEU(createdAt)}
+            />
+        </ListItem>)}
+    </List>
+   ): <AlertInfo name='You do not have Files yet!'/>  
+}
+
+export default FilesList

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

@@ -0,0 +1,48 @@
+
+import { makeStyles } from '@material-ui/core'
+import { useState } from 'react';
+import ImageListItem from '@mui/material/ImageListItem';
+import { handleDownload } from '../../../../../../../../../helpers'
+
+const useStyles = makeStyles({ 
+  overlay: {
+    position: 'fixed',
+    top: 0,
+    left: 0,
+    width: '100vw',
+    height: '100vh',
+    zIndex: 100,
+    backgroundColor: 'rgba(104, 105, 104, 0.6)',
+    border: 'solid 1px rgba(179, 179, 179, 0.6)',
+    overflowY: 'hidden',
+    boxSizing: 'border-box',
+    display: 'flex',
+    justifyContent: 'center',
+    alignContent: 'center',
+    alignItems: 'center'
+  },
+});
+const MediaListItem = ({ message,fullType }: { message: string,fullType:string }) => {
+  const classes = useStyles();
+  const [watch, setWatch] = useState<boolean>(false)
+  const handleOpenWatch = () => !watch && setWatch(true)
+  const handleCloseWatch = (e:any) => e.target.id === 'overlay'&&watch&&setWatch(false)
+  
+  const url = `http://localhost:3000/${message}`
+  
+  return (watch ?
+    <div onClick={handleCloseWatch} id='overlay' className={classes.overlay}>
+      <img onClick={() => handleDownload(url, fullType)}
+        width='40%' alt='imageItem' src={url} style={{cursor:'pointer'}} />
+    </div> :
+    <ImageListItem>
+      <img onClick={handleOpenWatch} style={{cursor:'pointer'}}
+        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" />
+    </ImageListItem>
+      
+  )
+}
+
+export default MediaListItem

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

@@ -0,0 +1,18 @@
+
+import ImageList from '@mui/material/ImageList';
+import MediaListItem from './MediListItem';
+
+import AlertInfo from '../../../../../../../reusableComponents/AlertInfo';
+import { TMessages } from '../../../../../../../../typescript/redux/messages/types'
+
+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}>
+        {filteredMessagesMemo.map(({message,createdAt,fullType}) => 
+          <MediaListItem key={createdAt} message={message} fullType={fullType}/>)}
+      </ImageList>
+   ): <AlertInfo name='You do not have Media yet!'/>  
+}
+
+export default MediaList

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

@@ -0,0 +1,42 @@
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemText from '@mui/material/ListItemText';
+import ListItemAvatar from '@mui/material/ListItemAvatar';
+import Avatar from '@mui/material/Avatar';
+import { makeStyles } from '@material-ui/core'
+
+import AlertInfo from '../../../../../../../reusableComponents/AlertInfo';
+import { timeStampEU,firstLetter } from '../../../../../../../../helpers'
+import { TMessages } from '../../../../../../../../typescript/redux/messages/types'
+
+const useStyles = makeStyles({
+    folderIcon: {
+      color: '#54b0fc',
+      cursor: 'pointer',
+      '&:hover': {
+        color: '#016cc3'
+      },
+    },
+})
+const TextList = ({ messagesMemo }: { messagesMemo: TMessages }) => {
+    const classes = useStyles()
+    const filteredMessagesMemo =  messagesMemo.filter(({type}) => type === 'text')
+    return filteredMessagesMemo.length > 0 ?(
+      <List>
+        {filteredMessagesMemo.map(({message,createdAt,lastName,name,color}) => 
+          <ListItem key={createdAt} alignItems="flex-start">
+            <ListItemAvatar>
+              <Avatar alt="Credentials" style={{background: color}}>
+                {`${firstLetter(name)}${firstLetter(lastName)}`}
+              </Avatar>
+            </ListItemAvatar>
+            <ListItemText
+              primary={message}
+              secondary={timeStampEU(createdAt)}
+            />
+        </ListItem>)}
+    </List>
+   ): <AlertInfo name='You do not have Text yet!'/>  
+}
+
+export default TextList

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

@@ -1,9 +1,14 @@
 import BottomNavigation from '@mui/material/BottomNavigation';
 import BottomNavigationAction from '@mui/material/BottomNavigationAction';
-import React, { useState } from 'react';
+import { useState } from 'react';
+import { useSelector } from 'react-redux';
 import { makeStyles } from '@material-ui/core'
 
-import NotDoneList from '../../../../../../reusableComponents/NotDoneList'
+import AudioList from './AudioList';
+import MediaList from './MediaList';
+import FilesList from './FilesList';
+import TextList from './TextList';
+import { getMessagesMemo } from '../../../../../../../redux/messages/selector'
 
 const useStyles = makeStyles({
     bottomNavigation: {
@@ -20,9 +25,10 @@ const useStyles = makeStyles({
 })
 
 const ProfileLists = () => {
+    const classes = useStyles()
+    const messagesMemo = useSelector(getMessagesMemo)
     const [isActive, setIsActive] = useState<number>(0)
     const handleIsActive = (_e: React.SyntheticEvent<Element, Event>, newValue: number): void => setIsActive(newValue)
-    const classes = useStyles()
     const Icon = ({ name }: { name: string }) => <span className={classes.icon}>{name}</span>
     const Label = () => <span className={classes.underline}>__</span>
     return (
@@ -35,17 +41,14 @@ const ProfileLists = () => {
       >
             <BottomNavigationAction label={<Label/>} icon={<Icon name='Media' />} />
             <BottomNavigationAction label={<Label/>} icon={<Icon name='Files' />} />
-            <BottomNavigationAction label={<Label/>} icon={<Icon name='Links' />} />
+            <BottomNavigationAction label={<Label/>} icon={<Icon name='Text' />} />
             <BottomNavigationAction label={<Label/>} icon={<Icon name='Music' />} />
-            <BottomNavigationAction label={<Label/>} icon={<Icon name='Voice' />}  />
-            <BottomNavigationAction label={<Label/>} icon={<Icon name='Groups' />}  />
+
         </BottomNavigation>
-            {isActive === 0 && <NotDoneList name='Media'/>}
-            {isActive === 1 && <NotDoneList name='Files'/>}
-            {isActive === 2 && <NotDoneList name='Links'/>}
-            {isActive === 3 && <NotDoneList name='Music'/>}
-            {isActive === 4 && <NotDoneList name='Voice'/>}
-            {isActive === 5 && <NotDoneList name='Groups'/>}
+            {isActive === 0 && <MediaList messagesMemo={messagesMemo}/>}
+            {isActive === 1 && <FilesList messagesMemo={messagesMemo}/>}
+            {isActive === 2 && <TextList messagesMemo={messagesMemo}/>}
+            {isActive === 3 && <AudioList messagesMemo={messagesMemo}/>}
     </>      
     )
 }

src/helpers/index.ts

@@ -16,6 +16,14 @@ const timeStamp = (updatedAt: string) => new Date(updatedAt).toLocaleString("en-
     minute: '2-digit',
 })
 
+const timeStampEU = (updatedAt: string) => new Date(updatedAt).toLocaleString('en-GB', {
+    year:'numeric',
+    month: 'short',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: '2-digit',
+})
+
 const timeStampMessage = (updatedAt: string) => new Date(updatedAt).toLocaleString('en-GB',{
     timeZone: 'UTC',
     hour: 'numeric',
@@ -29,6 +37,7 @@ const timeStampFilter = (updatedAt: string) => new Date(updatedAt).toLocaleStrin
     day: 'numeric',
 })
 
+
 const playNotification = (url:string) => {
   const audio = new Audio(url);
   audio.play();
@@ -87,6 +96,7 @@ export {
   firstLetter,
   slicedWord,
   timeStamp,
+  timeStampEU,
   timeStampMessage,
   timeStampFilter,
   playNotification,