finished with scroll to the message

src/components/HomePage/CentralBar/ChatBar/Messages/MessageTime/index.tsx

@@ -2,9 +2,9 @@ import { makeStyles } from "@material-ui/core/styles";
 
 const useStyles = makeStyles({
   container: {
-      display: "flex",
-      justifyContent: "center",
-      marginBottom:15
+    display: "flex",
+    justifyContent: "center",
+    marginBottom:15
   },
   wrapper: {
     textAlign: 'center',

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

@@ -150,7 +150,7 @@ const ChatBar = ({divRef,selectedArr,setSelectedArr,isSomeSelected,setIsSomeSele
   return (
     <div className={classes.container} >
       <ArrowBack isArrow={isArrow} isNew={isNew} handleScrollTo={handleScrollTo}/>
-      <div ref={divRef} onScroll={debouncedHandleScroll}
+      <div id={companionId} ref={divRef} onScroll={debouncedHandleScroll}
         className={messages.length > 0 ? classes.messagesScroll : classes.messagesEmpty}>
         <div className={classes.messagesBody}>
         {messages.length > 0 ? messages.map(({ message, name, lastName, color,pinned,

src/components/HomePage/CentralBar/HeaderBar/PinnedBar/index.tsx

@@ -82,7 +82,7 @@ const PinnedBar = ({divRef}:{divRef: any | null}) => {
   
   const handleActivePin = () => {
     const childNodes = divRef.current.childNodes[0].childNodes
-    let toScrollNode:any
+    let toScrollNode: any
     if (pinnedArr.length - 1 === openedIndex) {
       setOpenedIndex(0)
       toScrollNode = [ ...childNodes ].find((el:any) => el.id === pinnedArr[0]._id)
@@ -90,11 +90,14 @@ const PinnedBar = ({divRef}:{divRef: any | null}) => {
       setOpenedIndex(prevState => prevState + 1)
       toScrollNode = [...childNodes].find((el: any) => el.id === pinnedArr[openedIndex + 1]._id)
     }
-    toScrollNode.style.boxShadow = '0px 0px 6px 0px #555555'
-    toScrollNode.scrollIntoView()
-    setTimeout(() => {
-      toScrollNode.style.boxShadow = 'unset'
-    }, 2000)
+    if (toScrollNode) {
+      toScrollNode = [...toScrollNode.childNodes].slice(-1)[0]
+      toScrollNode.style.boxShadow = '0px 0px 6px 0px #555555'
+      toScrollNode.scrollIntoView({ behavior: 'smooth' })
+      setTimeout(() => {
+        toScrollNode.style.boxShadow = 'unset'
+      }, 2000)
+    }
   }
   const handleUnpin = (e: any) => {
     const id = e.target.id
@@ -112,7 +115,7 @@ const PinnedBar = ({divRef}:{divRef: any | null}) => {
   
   useEffect(() => {
     const messages = messagesMemo.filter((el) => el.pinned === true)
-    setPinnedArr(handleSort('updatedAt', messages, false))
+    setPinnedArr(handleSort('updatedAt', messages, true))
   }, [messagesMemo])
 
   useEffect(() => {

src/components/HomePage/CentralBar/index.tsx

@@ -12,9 +12,8 @@ const useStyles = makeStyles({
   },
 })
 
-const CentralBar = ({rightIsOpen}:{rightIsOpen:TRightIsOpen}) => {
+const CentralBar = ({rightIsOpen,divRef}:{rightIsOpen:TRightIsOpen,divRef: any | null,}) => {
   const classes = useStyles()
-  const divRef = useRef<any | null>(null)
   const [selectedArr, setSelectedArr] = useState<string[] | []>([])
   const [isSomeSelected, setIsSomeSelected] = useState<boolean>(false)
   const handleClearSelect = () => {

src/components/HomePage/LeftBar/SearchLists/AudioList/index.tsx

@@ -42,6 +42,7 @@ const useStyles = makeStyles({
       },
   },
   listItem: {
+    cursor:'pointer',
     '&:hover': {
       backgroundColor: '#f0f0f0',
     }
@@ -53,10 +54,11 @@ interface IAudioList {
   value: string,
   date: any,
   setDisabled: React.Dispatch<boolean>,
-  sort: boolean
+  sort: boolean,
+  handleScrollToTheMessage:(_id:string,companionId:string)  => void
 }
 
-const AudioList = ({ messagesMemo,value,date,sort,setDisabled }: IAudioList) => {
+const AudioList = ({ messagesMemo,value,date,sort,setDisabled,handleScrollToTheMessage }: IAudioList) => {
   const classes = useStyles()
   const filtered =  messagesMemo.filter(({type}) => type === 'audio')
   const filteredAndSorted = filteredMessages(handleSort('createdAt', filtered, sort), date,value)
@@ -69,9 +71,10 @@ const AudioList = ({ messagesMemo,value,date,sort,setDisabled }: IAudioList) =>
     <>
       {filteredAndSorted.length > 0 &&
         <List className={classes.container}>
-        {filteredAndSorted.map(({ message, createdAt, fullType }) =>
+        {filteredAndSorted.map(({ message, createdAt, fullType,_id,companionId }) =>
           <div key={createdAt}>
-            <ListItem alignItems="flex-start" className={classes.listItem}>
+            <ListItem onClick={() => handleScrollToTheMessage(_id,companionId)}
+              alignItems="flex-start" className={classes.listItem}>
               <ListItemAvatar>
                 <LibraryMusicIcon onClick={() =>
                   handleDownload(`${prodAwsS3}/${message}`, fullType)}

src/components/HomePage/LeftBar/SearchLists/FilesList/index.tsx

@@ -42,6 +42,7 @@ const useStyles = makeStyles({
     },
   },
   listItem: {
+    cursor:'pointer',
     '&:hover': {
       backgroundColor: '#f0f0f0',
     }
@@ -53,10 +54,11 @@ interface IFilesList {
   value: string,
   date: any,
   setDisabled: React.Dispatch<boolean>,
-  sort: boolean
+  sort: boolean,
+  handleScrollToTheMessage:(_id:string,companionId:string)  => void
 }
 
-const FilesList = ({ messagesMemo,value,date,sort,setDisabled }: IFilesList) => {
+const FilesList = ({ messagesMemo,value,date,sort,setDisabled,handleScrollToTheMessage }: IFilesList) => {
   const classes = useStyles()
   const filtered =  messagesMemo.filter(({type}) => type !== 'text')
   const filteredAndSorted = filteredMessages(handleSort('createdAt', filtered, sort),date,value)
@@ -69,9 +71,10 @@ const FilesList = ({ messagesMemo,value,date,sort,setDisabled }: IFilesList) =>
     <>
       {filteredAndSorted.length > 0 &&
         <List className={classes.container}>
-        {filteredAndSorted.map(({ message, createdAt, fullType }) =>
+        {filteredAndSorted.map(({ message, createdAt, fullType,_id,companionId }) =>
           <div key={createdAt}>
-            <ListItem alignItems="flex-start" className={classes.listItem}>
+            <ListItem onClick={() => handleScrollToTheMessage(_id,companionId)}
+              alignItems="flex-start" className={classes.listItem}>
               <ListItemAvatar>
                 <FolderIcon onClick={() =>
                   handleDownload(`${prodAwsS3}/${message}`, fullType)}

src/components/HomePage/LeftBar/SearchLists/MediaList/MediaListItem/index.tsx

@@ -58,7 +58,18 @@ const useStyles = makeStyles({
     backgroundColor:'#707070'
   }
 });
-const MediaListItem = ({ message,fullType,updatedAt }: { message: string,fullType:string,updatedAt:string }) => {
+
+interface IMediaListItem {
+  message: string,
+  fullType: string,
+  updatedAt: string,
+  handleScrollToTheMessage: (_id: string,companionId:string) => void,
+  id: string,
+  companionId: string
+}
+
+
+const MediaListItem = ({ message,fullType,updatedAt,handleScrollToTheMessage,id,companionId }: IMediaListItem) => {
   const classes = useStyles();
   const [watch, setWatch] = useState<boolean>(false)
   const handleOpenWatch = () => !watch && setWatch(true)
@@ -67,7 +78,10 @@ const MediaListItem = ({ message,fullType,updatedAt }: { message: string,fullTyp
   const url = `${prodAwsS3}/${message}`
   
   return (watch ?
-    <div onClick={handleCloseWatch} id='overlay' className={classes.overlay}>
+    <div onClick={(e) => {
+      handleCloseWatch(e)
+      handleScrollToTheMessage(id,companionId)
+    }} id='overlay' className={classes.overlay}>
       <div className={classes.wrapper}>
         <span className={classes.time}>{timeStampEU(updatedAt)}</span>
         <DownloadForOfflineIcon className={classes.downloadIcon} fontSize='large'

src/components/HomePage/LeftBar/SearchLists/MediaList/index.tsx

@@ -37,10 +37,11 @@ interface IMediaList {
   value: string,
   date: any,
   setDisabled: React.Dispatch<boolean>,
-  sort: boolean
+  sort: boolean,
+  handleScrollToTheMessage:(_id:string,companionId:string)  => void
 }
 
-const MediaList = ({ messagesMemo,value,date,sort,setDisabled }: IMediaList) => {
+const MediaList = ({ messagesMemo,value,date,sort,setDisabled,handleScrollToTheMessage }: IMediaList) => {
   const classes = useStyles()
   const filtered =  messagesMemo.filter(({type}) => type === 'image')
   const filteredAndSorted = filteredMessages(handleSort('createdAt', filtered, sort), date, value)
@@ -53,8 +54,9 @@ const MediaList = ({ messagesMemo,value,date,sort,setDisabled }: IMediaList) =>
     <>
       {filteredAndSorted.length > 0 &&
         <ImageList className={classes.container} cols={3} rowHeight={164}>
-        {filteredAndSorted.map(({message,createdAt,fullType,updatedAt}) => 
-          <MediaListItem key={createdAt} message={message} fullType={fullType} updatedAt={updatedAt}/>)}
+        {filteredAndSorted.map(({message,createdAt,fullType,updatedAt,_id,companionId}) => 
+          <MediaListItem key={createdAt} message={message} fullType={fullType}
+            updatedAt={updatedAt} handleScrollToTheMessage={handleScrollToTheMessage} id={_id} companionId={companionId}/>)}
       </ImageList>}
       {(value || date) &&  filteredAndSorted.length === 0 && <AlertInfo name={`Can not find Media by request: ${value}`} />}
       {!value && !date && filteredAndSorted.length === 0 && <AlertInfo name='You do not have Media yet!'/>}

src/components/HomePage/LeftBar/SearchLists/TextList/index.tsx

@@ -37,6 +37,7 @@ const useStyles = makeStyles({
     },
   },   
   listItem: {
+    cursor:'pointer',
     '&:hover': {
       backgroundColor: '#f0f0f0',
     }
@@ -55,10 +56,11 @@ interface ITextList {
   value: string,
   date: any,
   setDisabled: React.Dispatch<boolean>,
-  sort: boolean
+  sort: boolean,
+  handleScrollToTheMessage:(_id:string,companionId:string)  => void
 }
 
-const TextList = ({ messagesMemo,value,date,sort,setDisabled }: ITextList) => {
+const TextList = ({ messagesMemo,value,date,sort,setDisabled,handleScrollToTheMessage }: ITextList) => {
   const classes = useStyles()
   const filtered =  messagesMemo.filter(({type}) => type === 'text')
   const filteredAndSorted = filteredMessages(handleSort('createdAt', filtered, sort),date,value)
@@ -71,9 +73,10 @@ const TextList = ({ messagesMemo,value,date,sort,setDisabled }: ITextList) => {
   <>
       {filteredAndSorted.length > 0 &&
         <List className={classes.container}>
-       {filteredAndSorted.map(({ message, createdAt, lastName, name, color, avatarUrl }) =>
+       {filteredAndSorted.map(({ message, createdAt, lastName, name, color, avatarUrl,_id,companionId }) =>
       <div key={createdAt}>
-          <ListItem alignItems="flex-start" className={classes.listItem}>
+           <ListItem onClick={() => handleScrollToTheMessage(_id,companionId)}
+             alignItems="flex-start" className={classes.listItem}>
             <ListItemAvatar>
               <Avatar alt={name} src={avatarUrl?`${prodAwsS3}/${avatarUrl}`:undefined}
                   sx={{ background: color, width: 38, height: 38}}>

src/components/HomePage/LeftBar/SearchLists/VideoList/index.tsx

@@ -42,6 +42,7 @@ const useStyles = makeStyles({
       },
   },
   listItem: {
+    cursor:'pointer',
     '&:hover': {
       backgroundColor: '#f0f0f0',
     }
@@ -53,10 +54,11 @@ interface IVideoList {
   value: string,
   date: any,
   setDisabled: React.Dispatch<boolean>,
-  sort: boolean
+  sort: boolean,
+  handleScrollToTheMessage:(_id:string,companionId:string)  => void
 }
 
-const VideoList = ({ messagesMemo,value,date,sort,setDisabled }: IVideoList) => {
+const VideoList = ({ messagesMemo,value,date,sort,setDisabled,handleScrollToTheMessage }: IVideoList) => {
   const classes = useStyles()
   const filtered =  messagesMemo.filter(({type}) => type === 'video')
   const filteredAndSorted = filteredMessages(handleSort('createdAt', filtered, sort),date,value)
@@ -68,9 +70,10 @@ const VideoList = ({ messagesMemo,value,date,sort,setDisabled }: IVideoList) =>
     <>
       {filteredAndSorted.length > 0 &&
         <List className={classes.container}>
-        {filteredAndSorted.map(({ message, createdAt, fullType }) =>
+        {filteredAndSorted.map(({ message, createdAt, fullType,_id,companionId }) =>
           <div key={createdAt}>
-            <ListItem key={createdAt} alignItems="flex-start" className={classes.listItem}>
+            <ListItem onClick={() => handleScrollToTheMessage(_id,companionId)}
+              key={createdAt} alignItems="flex-start" className={classes.listItem}>
               <ListItemAvatar>
                 <VideoLibraryIcon onClick={() =>
                   handleDownload(`${prodAwsS3}/${message}`, fullType)}

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

@@ -57,9 +57,10 @@ interface ISearchLists {
   date: any,
   setDate: React.Dispatch<any>,
   setDisabled: React.Dispatch<boolean>,
+  divRef: any | null
 }
 
-const SearchLists = ({ value,setValue,sort,date,setDate,setDisabled }: ISearchLists) => {
+const SearchLists = ({ value,setValue,sort,date,setDate,setDisabled,divRef}: ISearchLists) => {
     const classes = useStyles()
     const dispatch = useDispatch()
     const { chats, total } = useSelector(getStateMemo)
@@ -76,6 +77,37 @@ const SearchLists = ({ value,setValue,sort,date,setDate,setDisabled }: ISearchLi
       rightIsOpen&&dispatch(actionRightIsOpen(''))
       dispatch(asyncStartChatById(companionId))
     }
+  
+    const scrollTo = (nodeRef: any,id:string) => {
+      const childNodes = nodeRef.current.childNodes[0].childNodes
+      let toScrollNode = [...childNodes].find((el: any) => el.id === id)
+      if (toScrollNode) {
+        toScrollNode = [...toScrollNode.childNodes].slice(-1)[0]
+        toScrollNode.style.boxShadow = '0px 0px 6px 0px #555555'
+        toScrollNode.scrollIntoView({ behavior: 'smooth' })
+        setTimeout(() => {
+          toScrollNode.style.boxShadow = 'unset'
+        }, 2000)
+      }
+    }
+  
+    const handleScrollToTheMessage = (_id: string, companionId: string) => {
+      if (divRef.current && divRef.current.id === companionId) {
+         scrollTo(divRef,_id)
+      } else if (divRef.current && divRef.current.id !== companionId) {
+        rightIsOpen&&dispatch(actionRightIsOpen(''))
+        dispatch(asyncStartChatById(companionId))
+        setTimeout(() => {
+          if(divRef.current) scrollTo(divRef,_id)
+        }, 3000)        
+      } else if (!divRef.current) {
+        rightIsOpen&&dispatch(actionRightIsOpen(''))
+        dispatch(asyncStartChatById(companionId))
+        setTimeout(() => {
+          if(divRef.current) scrollTo(divRef,_id)
+      }, 3000)
+      }
+    }  
     const filteredChats = (arr: TChats) => arr.filter((el) => {
       const credentials = el.name + ' ' + el.lastName
       if (!date) {
@@ -154,11 +186,11 @@ const SearchLists = ({ value,setValue,sort,date,setDate,setDisabled }: ISearchLi
       </div>
             {isActive === 0 && <ChatListRecent value={value} date={date}
               filteredAndSorted={filteredAndSorted} handleListItemClick={handleListItemClick} />}
-            {isActive === 1 && <FilesList messagesMemo={messagesMemo} value={value} date={date} sort={sort} setDisabled={setDisabled}/>}
-            {isActive === 2 && <MediaList messagesMemo={messagesMemo} value={value} date={date} sort={sort} setDisabled={setDisabled}/>}
-            {isActive === 3 && <TextList  messagesMemo={messagesMemo} value={value} date={date} sort={sort} setDisabled={setDisabled}/>}
-            {isActive === 4 && <AudioList messagesMemo={messagesMemo} value={value} date={date} sort={sort} setDisabled={setDisabled}/>}
-            {isActive === 5 && <VideoList messagesMemo={messagesMemo} value={value} date={date} sort={sort} setDisabled={setDisabled}/>}
+            {isActive === 1 && <FilesList messagesMemo={messagesMemo} value={value} date={date} sort={sort} setDisabled={setDisabled} handleScrollToTheMessage={handleScrollToTheMessage}/>}
+            {isActive === 2 && <MediaList messagesMemo={messagesMemo} value={value} date={date} sort={sort} setDisabled={setDisabled} handleScrollToTheMessage={handleScrollToTheMessage}/>}
+            {isActive === 3 && <TextList  messagesMemo={messagesMemo} value={value} date={date} sort={sort} setDisabled={setDisabled} handleScrollToTheMessage={handleScrollToTheMessage}/>}
+            {isActive === 4 && <AudioList messagesMemo={messagesMemo} value={value} date={date} sort={sort} setDisabled={setDisabled} handleScrollToTheMessage={handleScrollToTheMessage}/>}
+            {isActive === 5 && <VideoList messagesMemo={messagesMemo} value={value} date={date} sort={sort} setDisabled={setDisabled} handleScrollToTheMessage={handleScrollToTheMessage}/>}
     </>      
     )
 }

src/components/HomePage/LeftBar/index.tsx

@@ -16,7 +16,7 @@ import { getAuthorizationState } from '../../../redux/authorization/selector';
 import { getLeftIsOpen } from '../../../redux/control/selector';
 import { actionLeftIsOpen } from '../../../redux/control/action';
 
-const LeftBar = () => {
+const LeftBar = ({divRef}:{divRef: any | null}) => {
   const dispatch = useDispatch()
   const { sort, nightMode } = useSelector(getAuthorizationState)
   const leftIsOpen = useSelector(getLeftIsOpen)
@@ -77,7 +77,7 @@ const LeftBar = () => {
             handleSearch={handleSearch} leftIsOpen={leftIsOpen} value={value} setDate={setDate}
             date={date} disabled={disabled} />:null}
         {leftIsOpen === 'searchChats' || leftIsOpen === 'searchAllMessages' ?<SearchLists value={value} setValue={setValue}
-          sort={sort} date={date} setDate={setDate} setDisabled={setDisabled}/>:null}
+          sort={sort} date={date} setDate={setDate} setDisabled={setDisabled} divRef={divRef}/>:null}
         {leftIsOpen === ''&&<ChatsList sort={sort}/>}
         {leftIsOpen === '' && popup && <SmallMenuBar setPopup={setPopup} />}
         {modal && modalRoot.current &&

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

@@ -19,19 +19,27 @@ const useStyles = makeStyles({
       },
   },
   listItem: {
+    cursor:'pointer',
     '&:hover': {
       backgroundColor: '#f0f0f0',
     }
   },  
 })
-const AudioList = ({ filteredAndSorted }: { filteredAndSorted: TMessages }) => {
+
+interface IAudioList {
+  filteredAndSorted: TMessages,
+  handleScrollToTheMessage: (_id:string) => void,
+}
+
+const AudioList = ({ filteredAndSorted,handleScrollToTheMessage }: IAudioList) => {
   const classes = useStyles()
   
     return filteredAndSorted.length > 0 ?(
       <List>
-        {filteredAndSorted.map(({ message, createdAt, fullType }) =>
+        {filteredAndSorted.map(({ message, createdAt, fullType,_id }) =>
           <div key={createdAt}>
-            <ListItem alignItems="flex-start" className={classes.listItem}>
+            <ListItem onClick={() => handleScrollToTheMessage(_id)}
+              alignItems="flex-start" className={classes.listItem}>
               <ListItemAvatar>
                 <LibraryMusicIcon onClick={() =>
                   handleDownload(`${prodAwsS3}/${message}`, fullType)}

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

@@ -11,28 +11,35 @@ import { timeStampEU,handleDownload,prodAwsS3 } from '../../../../../../helpers'
 import { TMessages } from '../../../../../../typescript/redux/messages/types'
 
 const useStyles = makeStyles({
-    folderIcon: {
-      color: '#54b0fc',
-      cursor: 'pointer',
-      '&:hover': {
+  folderIcon: {
+    color: '#54b0fc',
+    cursor: 'pointer',
+    '&:hover': {
         color: '#016cc3'
       },
   },
   listItem: {
+    cursor:'pointer',
     '&:hover': {
       backgroundColor: '#f0f0f0',
     }
   },  
 })
 
-const FilesList = ({ filteredAndSorted }: { filteredAndSorted: TMessages }) => {
+interface IFilesList {
+  filteredAndSorted: TMessages,
+  handleScrollToTheMessage: (_id:string) => void,
+}
+
+const FilesList = ({ filteredAndSorted,handleScrollToTheMessage }: IFilesList) => {
   const classes = useStyles()
   
     return filteredAndSorted.length > 0 ?(
       <List>
-        {filteredAndSorted.map(({ message, createdAt, fullType }) =>
+        {filteredAndSorted.map(({ message, createdAt, fullType,_id }) =>
           <div key={createdAt}>
-            <ListItem alignItems="flex-start" className={classes.listItem}>
+            <ListItem onClick={() => handleScrollToTheMessage(_id)}
+              alignItems="flex-start" className={classes.listItem}>
               <ListItemAvatar>
                 <FolderIcon onClick={() =>
                   handleDownload(`${prodAwsS3}/${message}`, fullType)}

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

@@ -58,7 +58,16 @@ const useStyles = makeStyles({
     backgroundColor:'#707070'
   }
 });
-const MediaListItem = ({ message,fullType,updatedAt }: { message: string,fullType:string,updatedAt:string }) => {
+
+interface IMediaListItem {
+  message: string,
+  fullType: string,
+  updatedAt: string,
+  handleScrollToTheMessage: (_id: string) => void,
+  id: string,
+}
+
+const MediaListItem = ({ message,fullType,updatedAt,handleScrollToTheMessage,id }:IMediaListItem) => {
   const classes = useStyles();
   const [watch, setWatch] = useState<boolean>(false)
   const handleOpenWatch = () => !watch && setWatch(true)
@@ -67,7 +76,10 @@ const MediaListItem = ({ message,fullType,updatedAt }: { message: string,fullTyp
   const url = `${prodAwsS3}/${message}`
   
   return (watch ?
-    <div onClick={handleCloseWatch} id='overlay' className={classes.overlay}>
+    <div onClick={(e) => {
+      handleCloseWatch(e)
+      handleScrollToTheMessage(id)
+    }} id='overlay' className={classes.overlay}>
       <div className={classes.wrapper}>
         <span className={classes.time}>{timeStampEU(updatedAt)}</span>
         <DownloadForOfflineIcon className={classes.downloadIcon} fontSize='large'

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

@@ -4,12 +4,18 @@ import MediaListItem from './MediaListItem';
 import AlertInfo from '../../../../../reusableComponents/AlertInfo';
 import { TMessages } from '../../../../../../typescript/redux/messages/types'
 
-const MediaList = ({ filteredAndSorted }: { filteredAndSorted: TMessages }) => {
+interface IMediaList {
+  filteredAndSorted: TMessages,
+  handleScrollToTheMessage: (_id:string) => void,
+}
+
+const MediaList = ({ filteredAndSorted,handleScrollToTheMessage }: IMediaList) => {
   
   return filteredAndSorted.length > 0 ?(
       <ImageList sx={{ width: '100%', height: 'auto',overflow:'hidden' }} cols={3} rowHeight={164}>
-        {filteredAndSorted.map(({message,createdAt,fullType,updatedAt}) => 
-          <MediaListItem key={createdAt} message={message} fullType={fullType} updatedAt={updatedAt}/>)}
+        {filteredAndSorted.map(({message,createdAt,fullType,updatedAt,_id}) => 
+          <MediaListItem key={createdAt} message={message} fullType={fullType}
+            updatedAt={updatedAt} handleScrollToTheMessage={handleScrollToTheMessage} id={_id} />)}
       </ImageList>
    ): <AlertInfo name='You do not have Media yet!'/>  
 }

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

@@ -14,6 +14,7 @@ import { TMessages } from '../../../../../../typescript/redux/messages/types'
 
 const useStyles = makeStyles({
   listItem: {
+    cursor:'pointer',
     '&:hover': {
       backgroundColor: '#f0f0f0',
     }
@@ -27,14 +28,20 @@ const useStyles = makeStyles({
   },  
 })
 
-const TextList = ({ filteredAndSorted }: { filteredAndSorted: TMessages }) => {
+interface ITextList {
+  filteredAndSorted: TMessages,
+  handleScrollToTheMessage: (_id:string) => void,
+}
+
+const TextList = ({ filteredAndSorted,handleScrollToTheMessage }: ITextList) => {
   const classes = useStyles()
   
    return filteredAndSorted.length > 0 ?(
     <List>
-       {filteredAndSorted.map(({ message, createdAt, lastName, name, color, avatarUrl }) =>
+       {filteredAndSorted.map(({ message, createdAt, lastName, name, color, avatarUrl,_id }) =>
       <div key={createdAt}>
-          <ListItem alignItems="flex-start" className={classes.listItem}>
+           <ListItem onClick={() => handleScrollToTheMessage(_id)}
+             alignItems="flex-start" className={classes.listItem}>
             <ListItemAvatar>
               <Avatar alt={name} src={avatarUrl?`${prodAwsS3}/${avatarUrl}`:undefined}
                   sx={{ background: color, width: 38, height: 38}}>

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

@@ -11,27 +11,35 @@ import { timeStampEU,handleDownload,prodAwsS3 } from '../../../../../../helpers'
 import { TMessages } from '../../../../../../typescript/redux/messages/types'
 
 const useStyles = makeStyles({
-    folderIcon: {
-      color: '#54b0fc',
-      cursor: 'pointer',
-      '&:hover': {
-        color: '#016cc3'
-      },
+  folderIcon: {
+    color: '#54b0fc',
+    cursor: 'pointer',
+    '&:hover': {
+      color: '#016cc3'
+    },
   },
   listItem: {
+    cursor:'pointer',
     '&:hover': {
       backgroundColor: '#f0f0f0',
     }
   },  
 })
-const VideoList = ({ filteredAndSorted }: { filteredAndSorted: TMessages }) => {
+
+interface IVideoList {
+  filteredAndSorted: TMessages,
+  handleScrollToTheMessage: (_id:string) => void,
+}
+
+const VideoList = ({ filteredAndSorted,handleScrollToTheMessage }: IVideoList) => {
   const classes = useStyles()
 
     return filteredAndSorted.length > 0 ?(
       <List>
-        {filteredAndSorted.map(({ message, createdAt, fullType }) =>
+        {filteredAndSorted.map(({ message, createdAt, fullType,_id }) =>
           <div key={createdAt}>
-            <ListItem key={createdAt} alignItems="flex-start" className={classes.listItem}>
+            <ListItem onClick={() => handleScrollToTheMessage(_id)}
+              key={createdAt} alignItems="flex-start" className={classes.listItem}>
               <ListItemAvatar>
                 <VideoLibraryIcon onClick={() =>
                   handleDownload(`${prodAwsS3}/${message}`, fullType)}

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

@@ -44,12 +44,24 @@ underline: {
   },
 })
 
-const ProfileLists = ({setDisabled}:{setDisabled: React.Dispatch<boolean>,}) => {
+const ProfileLists = ({setDisabled,divRef}:{setDisabled: React.Dispatch<boolean>,divRef: any | null}) => {
     const classes = useStyles()
     const { sort } = useSelector(getChat)
     const messagesMemo = useSelector(getMessagesMemo)
     const [isActive, setIsActive] = useState<number>(0)
     const handleIsActive = (newValue: number): void => setIsActive(newValue)
+    const handleScrollToTheMessage = (_id: string) => {
+      const childNodes = divRef.current.childNodes[0].childNodes
+      let toScrollNode = [...childNodes].find((el: any) => el.id === _id)
+      if (toScrollNode) {
+        toScrollNode = [...toScrollNode.childNodes].slice(-1)[0]
+        toScrollNode.style.boxShadow = '0px 0px 6px 0px #555555'
+        toScrollNode.scrollIntoView({ behavior: 'smooth' })
+        setTimeout(() => {
+          toScrollNode.style.boxShadow = 'unset'
+        }, 2000)
+      }
+    }
     const filterBy = ['text', 'image', 'text', 'audio', 'video']
   
     const sorted: TMessages = handleSort('createdAt', messagesMemo, sort)
@@ -94,11 +106,11 @@ const ProfileLists = ({setDisabled}:{setDisabled: React.Dispatch<boolean>,}) =>
             <span className={classes.underline}>___</span>
           </div>
       </div>
-            {isActive === 0 && <FilesList filteredAndSorted={filteredAndSorted}/>}            
-            {isActive === 1 && <MediaList filteredAndSorted={filteredAndSorted}/>}
-            {isActive === 2 && <TextList filteredAndSorted={filteredAndSorted}/>}
-            {isActive === 3 && <AudioList filteredAndSorted={filteredAndSorted} />}
-            {isActive === 4 && <VideoList filteredAndSorted={filteredAndSorted}/>}
+            {isActive === 0 && <FilesList filteredAndSorted={filteredAndSorted} handleScrollToTheMessage={handleScrollToTheMessage}/>}            
+            {isActive === 1 && <MediaList filteredAndSorted={filteredAndSorted} handleScrollToTheMessage={handleScrollToTheMessage}/>}
+            {isActive === 2 && <TextList filteredAndSorted={filteredAndSorted} handleScrollToTheMessage={handleScrollToTheMessage}/>}
+            {isActive === 3 && <AudioList filteredAndSorted={filteredAndSorted} handleScrollToTheMessage={handleScrollToTheMessage}/>}
+            {isActive === 4 && <VideoList filteredAndSorted={filteredAndSorted} handleScrollToTheMessage={handleScrollToTheMessage}/>}
     </>      
     )
 }

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

@@ -40,7 +40,7 @@ const useStyles = makeStyles({
   },
 })
 
-const CredentialsList = () => {
+const CredentialsList = ({divRef}:{divRef: any | null}) => {
   const classes = useStyles()
   const dispatch = useDispatch()
   const leftIsOpen  = useSelector(getLeftIsOpen)
@@ -59,7 +59,7 @@ const CredentialsList = () => {
       <div className={classes.scrollContainer}>
         <ProfilePicture />
         <ProfileMenu disabled={disabled}/>
-        <ProfileLists setDisabled={setDisabled}/>
+        <ProfileLists setDisabled={setDisabled} divRef={divRef}/>
       </div>
     </div>
   )

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

@@ -42,19 +42,32 @@ const useStyles = makeStyles({
     },    
   },
   listItem: {
+    cursor:'pointer',
     '&:hover': {
       backgroundColor: '#f0f0f0',
     }
   },
 })
 
-const SearchList= () => {
+const SearchList= ({divRef}:{divRef: any | null}) => {
     const classes = useStyles()
     const { sort } = useSelector(getChat)
     const messages = useSelector(getMessages)
     const [value, setValue] = useState<string>('')
     const [date, setDate] = useState<any>('');
     const handleSearch = (e: React.ChangeEvent<HTMLInputElement>): void => setValue(e.target.value)
+    const handleScrollToTheMessage = (_id: string) => {
+      const childNodes = divRef.current.childNodes[0].childNodes
+      let toScrollNode = [...childNodes].find((el: any) => el.id === _id)
+      if (toScrollNode) {
+        toScrollNode = [...toScrollNode.childNodes].slice(-1)[0]
+        toScrollNode.style.boxShadow = '0px 0px 6px 0px #555555'
+        toScrollNode.scrollIntoView({ behavior: 'smooth' })
+        setTimeout(() => {
+          toScrollNode.style.boxShadow = 'unset'
+        }, 2000)
+      }
+    }
 
     const filteredMessages = (arr:TMessages) => arr.filter((el) => {
       if (!date) {
@@ -74,9 +87,10 @@ return (
      <div className={messages.length > 0 ?classes.list:undefined}>
       {messages.length > 0 ? arr.length > 0 ?
         <List sx={{ width: '100%' }}>
-          {arr.map(({ name, lastName, avatarUrl, color, message, createdAt }) =>
+          {arr.map(({ name, lastName, avatarUrl, color, message, createdAt,_id }) =>
           <div key={createdAt}>
-              <ListItem alignItems="flex-start" className={classes.listItem}>
+              <ListItem onClick={() => handleScrollToTheMessage(_id)}
+                alignItems="flex-start" className={classes.listItem}>
                      <ListItemAvatar>
                         <Avatar alt={name} src={avatarUrl?`${prodAwsS3}/${avatarUrl}`:undefined}
                           sx={{ background: color, width: 44, height: 44, marginRight:2 }}>

src/components/HomePage/RightBar/index.tsx

@@ -4,11 +4,11 @@ import CredentialsList from './CredentialsList'
 import EditBar from './EditBar'
 import { TRightIsOpen } from '../../../typescript/redux/control/types'
 
-const RightBar = ({rightIsOpen}:{rightIsOpen:TRightIsOpen}) => {
+const RightBar = ({rightIsOpen,divRef}:{rightIsOpen:TRightIsOpen,divRef: any | null}) => {
   return (
     <Grid item lg={rightIsOpen?4:0}>
-      {rightIsOpen === 'credentials' && <CredentialsList />}
-      {rightIsOpen === 'search' && <SearchList />}
+      {rightIsOpen === 'credentials' && <CredentialsList divRef={divRef} />}
+      {rightIsOpen === 'search' && <SearchList divRef={divRef}/>}
       {rightIsOpen === 'edit' && <EditBar/>}
     </Grid>
    )

src/components/HomePage/index.tsx

@@ -1,6 +1,7 @@
 import Grid from '@mui/material/Grid'
 import { makeStyles } from '@material-ui/core'
 import { useSelector } from 'react-redux'
+import { useRef } from 'react'
 import LeftBar from './LeftBar'
 import CentralBar from './CentralBar'
 import RightBar from './RightBar'
@@ -24,15 +25,16 @@ const useStyles = makeStyles({
 const HomePage = () => {
   const classes = useStyles()
   const rightIsOpen = useSelector(getRightIsOpen)
+  const divRef = useRef<any | null>(null)
   const { companionId } = useSelector(getChatMemo)
  
 return (
     <Grid className={classes.container} container spacing={0} >
-      <LeftBar />
+      <LeftBar divRef={divRef} />
       {companionId ?
       <Grid item lg={9} className={classes.centralAndRight}>
-        <CentralBar rightIsOpen={rightIsOpen}/>
-        <RightBar rightIsOpen={rightIsOpen}/>
+        <CentralBar rightIsOpen={rightIsOpen} divRef={divRef}/>
+        <RightBar rightIsOpen={rightIsOpen} divRef={divRef}/>
       </Grid> :
       <Grid item lg={9} className={classes.centralBar}/>}
     </Grid>