change visual menus

src/components/HomePage/CentralBar/ChatBar/SendMessage/ForwardSearchList/ForwardList/ForwardItem/index.tsx

@@ -6,7 +6,7 @@ import ListItemText from '@mui/material/ListItemText';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import Badge from '@mui/material/Badge';
 
-import { firstLetter, slicedWord, timeStampEU,prodAwsS3 } from '../../../../../../../../helpers';
+import { firstLetter, slicedWord, timeStampEU,prodAwsS3 } from '../../../../../../../helpers';
 
 const StyledBadge = styled(Badge)(({ theme }) => ({
   '& .MuiBadge-badge': {

src/components/HomePage/CentralBar/ChatBar/SendMessage/ForwardSearchList/ForwardList/index.tsx

@@ -1,9 +1,9 @@
 import List from '@mui/material/List';
 import { makeStyles } from '@material-ui/core'
 
-import AlertInfo from '../../../../../../reusableComponents/AlertInfo'
+import AlertInfo from '../../../../../reusableComponents/AlertInfo'
 import ForwardItem from './ForwardItem'
-import { TChats } from '../../../../../../../typescript/redux/chats/types';
+import { TChats } from '../../../../../../typescript/redux/chats/types';
 
 
 const useStyles = makeStyles({

src/components/HomePage/CentralBar/ChatBar/SendMessage/ForwardSearchList/ForwardSearch/index.tsx

@@ -1,5 +1,4 @@
 import InputBase from '@mui/material/InputBase';
-import Toolbar from '@mui/material/Toolbar'
 import SearchIcon from '@mui/icons-material/Search';
 import CloseIcon from '@mui/icons-material/Close';
 import IconButton from '@mui/material/IconButton';
@@ -10,15 +9,15 @@ import { makeStyles } from '@material-ui/core'
 import { useDispatch } from 'react-redux';
 
 import StaticDatePicker from "./StaticDatePicker";
-import { updateUser } from '../../../../../../../api-data';
-import { asyncCurrentUser } from '../../../../../../../redux/authorization/operations';
+import { updateUser } from '../../../../../../api-data';
+import { asyncCurrentUser } from '../../../../../../redux/authorization/operations';
 
 const SearchBar = styled('div')(() => ({
   position: 'relative',
   borderRadius: '20px',
   backgroundColor: '#f1f0f0', 
   width: '100%',
-  marginLeft: 5,
+  margin: '0px 5px',
 }));
 
 const SearchIconWrapper = styled('div')(({ theme }) => ({
@@ -48,6 +47,11 @@ const useStyles = makeStyles({
     color: '#b1aeae',
     height: '7vh',
     width: '100%',
+    display: 'flex',
+    flexWrap:'nowrap',
+    alignItems: 'center',
+    alignContent: 'center',
+    padding: '0px 5px',
   },
   searchBarActive: {
     outline: '2px solid  #2184f7',
@@ -85,7 +89,7 @@ const ForwardSearch = ({handleSearch,value,total,sort,setDate,date}:IForwardSear
   const handleOnOpen = () => setDate('')
  
   return (
-    <Toolbar className={classes.toolBar} >
+    <div className={classes.toolBar} >
       <IconButton aria-label="delete" size="medium">
         <CloseIcon id='cancel' className={classes.iconClose} fontSize='medium'/>
       </IconButton>
@@ -107,7 +111,7 @@ const ForwardSearch = ({handleSearch,value,total,sort,setDate,date}:IForwardSear
           <CalendarTodayIcon fontSize='medium' style={{color:date?'#2184f7':'#b1aeae'}}/>
       </IconButton>
       <Switch onClick={handleSort} checked={sort} {...label} disabled={disabled} />
-    </Toolbar>
+    </div>
     )
 }
 

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

@@ -4,12 +4,12 @@ import { useSelector,useDispatch } from 'react-redux'
 
 import ForwardSearch from './ForwardSearch'
 import ForwardList from './ForwardList'
-import { asyncGetChatById } from '../../../../../../redux/chat/operations'
-import { actionRightIsOpen,actionScrollChat,actionOpenPinned } from '../../../../../../redux/control/action'
-import { getStateMemo } from '../../../../../../redux/chats/selector'
-import { getSort } from '../../../../../../redux/authorization/selector'
-import { TMessage } from '../../../../../../typescript/redux/messages/types'
-import { sortByRecent,timeStampFilter } from '../../../../../../helpers'
+import { asyncGetChatById } from '../../../../../redux/chat/operations'
+import { actionRightIsOpen,actionScrollChat,actionOpenPinned } from '../../../../../redux/control/action'
+import { getStateMemo } from '../../../../../redux/chats/selector'
+import { getSort } from '../../../../../redux/authorization/selector'
+import { TMessage } from '../../../../../typescript/redux/messages/types'
+import { sortByRecent,timeStampFilter } from '../../../../../helpers'
 
 const useStyles = makeStyles({
   overlay: {

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

@@ -3,7 +3,6 @@ import { styled } from '@mui/material/styles';
 import { useState, useRef } from "react";
 import Typography from '@mui/material/Typography';
 import ListItemText from '@mui/material/ListItemText';
-import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile';
 import Button from '@mui/material/Button';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
@@ -78,7 +77,7 @@ const useStyles = makeStyles({
     alignContent: 'start',
     flexDirection: 'column',
     maxWidth: 450,
-    minWidth:200,
+    minWidth:300,
     padding: 5,
     borderRadius: 7, 
   },

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

@@ -5,7 +5,7 @@ import Typography from '@mui/material/Typography';
 import ListItemText from '@mui/material/ListItemText';
 import Button from '@mui/material/Button';
 import LibraryMusicIcon from '@mui/icons-material/LibraryMusic';
-import FolderIcon from '@mui/icons-material/Folder';
+import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile';
 import ImageIcon from '@mui/icons-material/Image';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import VideoLibraryIcon from '@mui/icons-material/VideoLibrary';
@@ -321,7 +321,7 @@ const MessageLeftForward = ({url,companionIdForwardToAndFrom,oldId,tongue,watche
            className={classes.folderIcon} fontSize='large' />}
           {fullType&&fullType.includes('image') &&<ImageIcon onClick={handleClickIcon}
            className={classes.folderIcon} fontSize='large' />}
-          {fullType && fullType.includes('application') && <FolderIcon onClick={handleClickIcon}
+          {fullType && fullType.includes('application') && <InsertDriveFileIcon onClick={handleClickIcon}
             className={classes.folderIcon} fontSize='large' />}
           <div className={classes.column}></div>
           <div className={classes.wrapperInnerMessage} onClick={() => handleScrollToTheChat(companionIdForwardToAndFrom,oldId)}>

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

@@ -14,7 +14,7 @@ import PushPinIcon from '@mui/icons-material/PushPin';
 import CloseIcon from '@mui/icons-material/Close';
 import ReplyIcon from '@mui/icons-material/Reply';
 import LibraryMusicIcon from '@mui/icons-material/LibraryMusic';
-import FolderIcon from '@mui/icons-material/Folder';
+import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile';
 import ImageIcon from '@mui/icons-material/Image';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import VideoLibraryIcon from '@mui/icons-material/VideoLibrary';
@@ -335,7 +335,7 @@ const MessageLeftReply = ({url,tongue,watched,edited,avatarUrl,color,replyMessag
             className={classes.folderIcon} fontSize='large' />}
           {fullType&&fullType.includes('image') &&<ImageIcon onClick={handleClickIcon}
             className={classes.folderIcon} fontSize='large' />}
-          {fullType&&fullType.includes('application') && <FolderIcon onClick={handleClickIcon}
+          {fullType&&fullType.includes('application') && <InsertDriveFileIcon onClick={handleClickIcon}
             className={classes.folderIcon} fontSize='large' />}
           <div className={classes.column}></div>
           <div className={classes.wrapperInnerMessage} onClick={() => handleScrollToTheMessage(oldId)}>

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

@@ -3,7 +3,6 @@ import { styled } from '@mui/material/styles';
 import { useState,useRef } from "react";
 import Typography from '@mui/material/Typography';
 import ListItemText from '@mui/material/ListItemText';
-import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile';
 import Button from '@mui/material/Button';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
@@ -80,7 +79,7 @@ const useStyles = makeStyles({
     alignContent: 'start',
     flexDirection: 'column',
     maxWidth: 450,
-    minWidth:200,
+    minWidth:300,
     padding: 5,
     borderRadius: 7,
   },  

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

@@ -5,7 +5,7 @@ import Typography from '@mui/material/Typography';
 import ListItemText from '@mui/material/ListItemText';
 import Button from '@mui/material/Button';
 import LibraryMusicIcon from '@mui/icons-material/LibraryMusic';
-import FolderIcon from '@mui/icons-material/Folder';
+import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile';
 import ImageIcon from '@mui/icons-material/Image';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import VideoLibraryIcon from '@mui/icons-material/VideoLibrary';
@@ -322,7 +322,7 @@ const MessageRightForward = ({url,oldId,companionIdForwardToAndFrom,tongue,watch
             className={classes.folderIcon} fontSize='large' />}
           {fullType&&fullType.includes('image') &&<ImageIcon onClick={handleClickIcon}
             className={classes.folderIcon} fontSize='large' />}
-          {fullType && fullType.includes('application') && <FolderIcon onClick={handleClickIcon}
+          {fullType && fullType.includes('application') && <InsertDriveFileIcon onClick={handleClickIcon}
            className={classes.folderIcon} fontSize='large' />}
           <div className={classes.column}></div>
           <div className={classes.wrapperInnerMessage} onClick={() => handleScrollToTheChat(companionIdForwardToAndFrom,oldId)}>

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

@@ -14,7 +14,7 @@ import PushPinIcon from '@mui/icons-material/PushPin';
 import CloseIcon from '@mui/icons-material/Close';
 import ReplyIcon from '@mui/icons-material/Reply';
 import LibraryMusicIcon from '@mui/icons-material/LibraryMusic';
-import FolderIcon from '@mui/icons-material/Folder';
+import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile';
 import ImageIcon from '@mui/icons-material/Image';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import VideoLibraryIcon from '@mui/icons-material/VideoLibrary';
@@ -321,7 +321,7 @@ const MessageRightReply = ({url,tongue,watched,edited,avatarUrl,color,replyMessa
             className={classes.folderIcon} fontSize='large' />}
           {fullType&&fullType.includes('image') &&<ImageIcon onClick={handleClickIcon}
             className={classes.folderIcon} fontSize='large' />}
-          {fullType&&fullType.includes('application') && <FolderIcon onClick={handleClickIcon}
+          {fullType&&fullType.includes('application') && <InsertDriveFileIcon onClick={handleClickIcon}
             className={classes.folderIcon} fontSize='large' />}
           <div className={classes.column}></div>
           <div className={classes.wrapperInnerMessage} onClick={() => handleScrollToTheMessage(oldId)}>

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

@@ -86,8 +86,8 @@ const useStyles = makeStyles({
     alignItems: 'center',
     alignContent: 'center',
     justifyContent: 'flex-end',
-    zIndex: 2,
-    width:'100%',
+    width: '100%',
+    paddingRight:3,
   },
   time: {
     fontSize: ".65em",
@@ -186,7 +186,6 @@ const useStyles = makeStyles({
   borderLeft: "15px solid transparent",
   bottom: '0px',
   right: "-15px",
-  zIndex:1
 },
 tongueTwo: {
   content: "''",
@@ -197,7 +196,6 @@ tongueTwo: {
   borderLeft: "16px solid transparent",
   bottom: "0px",
   right: "-17px",
-  zIndex:1
  },    
 });
 

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

@@ -23,7 +23,6 @@ import FilesMenu from "./FilesMenu";
 import ReplyBar from './ReplyBar'
 import ForwardBar from "./ForwardBar";
 import EditBar from "./EditBar";
-import ForwardSearchList from "./ForwardSearchList";
 import {
     sentMessageById, sentImgMessageById, sentAudioMessageById,
     sentVideoMessageById,sentFileMessageById,sentMessageReplyById,sentMessageForwardById
@@ -282,11 +281,10 @@ interface ISendMessage{
   isEdit: TMessage | undefined, 
   setIsEdit: React.Dispatch<React.SetStateAction<TMessage | undefined>>,
   modalForward: boolean,
-  setModalForward: React.Dispatch<React.SetStateAction<boolean>>,
   handleScrollToTheMessage: (_id: string) => void,
 }
 
-const SendMessage = ({isArrow,silentMode,isReply,setIsReply,isForward,setIsForward,isEdit,setIsEdit,modalForward,setModalForward,handleScrollToTheMessage }:ISendMessage) => {
+const SendMessage = ({isArrow,silentMode,isReply,setIsReply,isForward,setIsForward,isEdit,setIsEdit,modalForward,handleScrollToTheMessage }:ISendMessage) => {
     const classes = useStyles();
     const { companionId } = useSelector(getChat)
     const rightIsOpen = useSelector(getRightIsOpen)
@@ -532,8 +530,6 @@ const SendMessage = ({isArrow,silentMode,isReply,setIsReply,isForward,setIsForwa
           {isArrow && <div className={classes.borderTop}></div>}
           {isReply && <ReplyBar isReply={isReply} handleCloseReply={handleCloseReply}
             handleScrollToTheMessage={handleScrollToTheMessage} />}
-          {isForward && modalForward && <ForwardSearchList setModalForward={setModalForward}
-            setIsForward={setIsForward} companionId={companionId}/>}
           {isEdit && <EditBar isEdit={isEdit} handleCloseEdit={handleCloseEdit}
             handleScrollToTheMessage={handleScrollToTheMessage} />}  
           {isForward && !modalForward && <ForwardBar companionId={companionId} 

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

@@ -21,6 +21,7 @@ import MessageRightVideo from './Messages/MessageRightVideo'
 import MessageRightFile from "./Messages/MessageRightFile";
 import MessageDivider from "./Messages/MessageDivider";
 import AlertInfo from "../../../reusableComponents/AlertInfo";
+import ForwardSearchList from "./ForwardSearchList";
 import { getMessagesMemo } from '../../../../redux/messages/selector'
 import { getAuthorizationState } from '../../../../redux/authorization/selector'
 import { getChat } from '../../../../redux/chat/selector'
@@ -222,14 +223,17 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
   return (
     <div className={classes.container} >
       <ArrowBack isArrow={isArrow} isNew={isNew} handleScrollTo={handleScrollTo} openPinned={openPinned}/>
+      {isForward && modalForward && <ForwardSearchList setModalForward={setModalForward}
+            setIsForward={setIsForward} companionId={companionId}/>}
       <div id={companionId} ref={chatDivRef} onScroll={debouncedHandleScroll}
         className={messagesMemo.length > 0 ? classes.messagesScroll : classes.messagesEmpty}>
         <div className={classes.messagesBody}>
         {messagesMemo.length > 0 ? renderArr.map(({ replyMessage,message, name, lastName,avatarUrl,color,pinned,
           createdAt, number, type, fullType, replyName, replyLastName, replyCaption, caption, emoji, emojiCompanion,
-          _id, oldId, forwardName, forwardLastName, companionIdForwardToAndFrom,forwardMessage,forwardCaption,edited},i) => {
+          _id, oldId, forwardName, forwardLastName, companionIdForwardToAndFrom,forwardMessage,forwardCaption,edited:editedr},i) => {
           const watched = seenCompanion - (i + 1) < 0 ? false : true
-          let isUnread 
+          const edited = !editedr
+          let isUnread
           let isTime
           let isTongue = false
           const nextTongue = renderArr[i + 1]
@@ -686,8 +690,7 @@ const ChatBar = ({chatDivRef,selectedArr,setSelectedArr,isSomeSelected,setIsSome
       {!openPinned && !isSomeSelected && <SendMessage isArrow={isArrow} silentMode={silentMode} isReply={isReply} setIsReply={setIsReply}
         isForward={isForward} setIsForward={setIsForward}
         isEdit={isEdit} setIsEdit={setIsEdit}
-        modalForward={modalForward} setModalForward={setModalForward}
-        handleScrollToTheMessage={handleScrollToTheMessage}/>}
+        modalForward={modalForward} handleScrollToTheMessage={handleScrollToTheMessage}/>}
       {openPinned&&!isSomeSelected&&<UnpinBar pinnedMessagesMemo={pinnedMessagesMemo} handleUnpinAll={handleUnpinAll} />}
     </div>
   );

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

@@ -6,7 +6,7 @@ import CloseIcon from '@mui/icons-material/Close';
 import MenuOpenIcon from '@mui/icons-material/MenuOpen';
 import Button from '@mui/material/Button';
 import LibraryMusicIcon from '@mui/icons-material/LibraryMusic';
-import FolderIcon from '@mui/icons-material/Folder';
+import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile';
 import ImageIcon from '@mui/icons-material/Image';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import VideoLibraryIcon from '@mui/icons-material/VideoLibrary';
@@ -164,10 +164,10 @@ const PinnedBar = ({chatDivRef,handleOpenPinned}:IPinnedBar) => {
         {openedPin.type === 'image' &&<ImageIcon onClick={() =>
           handleDownload(`${prodAwsS3}/${openedPin.message}`, openedPin.fullType)}
           className={classes.folderIcon} fontSize='large' />}
-        {openedPin.type === 'pdf' ?<FolderIcon onClick={() =>
+        {openedPin.type === 'pdf' ?<InsertDriveFileIcon onClick={() =>
           handleDownload(`${prodAwsS3}/${openedPin.message}`, openedPin.fullType)}
           className={classes.folderIcon} fontSize='large' />:null}         
-        {openedPin.type === 'docx' ?<FolderIcon onClick={() =>
+        {openedPin.type === 'docx' ?<InsertDriveFileIcon onClick={() =>
           handleDownload(`${prodAwsS3}/${openedPin.message}`, openedPin.fullType)}
           className={classes.folderIcon} fontSize='large' />:null}        
       </ListItemAvatar>

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

@@ -4,6 +4,7 @@ import SearchIcon from '@mui/icons-material/Search';
 import InputBase from '@mui/material/InputBase';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import Switch from '@mui/material/Switch';
+import Toolbar from '@mui/material/Toolbar'
 import CalendarTodayIcon from '@mui/icons-material/CalendarToday';
 import StaticDatePicker from "./StaticDatePicker";
 import { styled } from '@mui/material/styles';
@@ -99,7 +100,7 @@ const SearchBar = ({ handleClick, handleOpenIsSearch, handleSearch, leftIsOpen,
   
   const classes = useStyles()
     return (
-      <div className={classes.toolBar}>
+      <Toolbar className={classes.toolBar}>
         <IconButton  onClick={handleClick}>
                 {leftIsOpen ? <ArrowBackIcon className={classes.iconArrow} /> : <MenuIcon className={classes.iconBtn} />}
         </IconButton>
@@ -124,7 +125,7 @@ const SearchBar = ({ handleClick, handleOpenIsSearch, handleSearch, leftIsOpen,
            </IconButton>
           <Switch id='sort' onClick={handleSort} checked={sort} {...label} disabled={disabled} />
         </div>
-    </div>
+    </Toolbar>
     )
 }
 

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

@@ -6,17 +6,20 @@ import Avatar from '@mui/material/Avatar';
 import LibraryMusicIcon from '@mui/icons-material/LibraryMusic';
 import Divider from '@mui/material/Divider';
 import { makeStyles } from '@material-ui/core'
-import { useEffect, useMemo } from 'react';
 
 import AlertInfo from '../../../../reusableComponents/AlertInfo';
-import { timeStampEU,firstLetter,filteredMessages,handleSort,prodAwsS3 } from '../../../../../helpers'
+import { timeStampEU,firstLetter,prodAwsS3 } from '../../../../../helpers'
 import { TAllMessages } from '../../../../../typescript/redux/allMessages/types'
 
 const useStyles = makeStyles({
   container: {
     width: '100%',
-    maxHeight: '86vh',
+    maxHeight: '88vh',
     overflowY: 'scroll',
+    position: 'absolute',
+    animationDuration: '0.2s',
+    animationDirection: 'normal',
+    animation: `$moveElement`,   
   '&::-webkit-scrollbar': {
     width: '0.4em'
   },
@@ -44,37 +47,28 @@ const useStyles = makeStyles({
     '&:hover': {
       backgroundColor: '#f0f0f0',
     }
-  },  
+  },
+  '@keyframes moveElement': {
+   '0%': { left: '-100%'},
+   '100%': { left: '0%'},
+  },    
 })
 
 interface IAudioList {
-  messagesMemo: TAllMessages,
+  filteredAndSortedMessages: TAllMessages,
   value: string,
   date: any,
-  setDisabled: React.Dispatch<boolean>,
-  sort: boolean,
   handleScrollToTheMessage:(_id:string,companionId:string)  => void
 }
 
-const AudioList = ({ messagesMemo,value,date,sort,setDisabled,handleScrollToTheMessage }: IAudioList) => {
+const AudioList = ({ filteredAndSortedMessages,value,date,handleScrollToTheMessage }: IAudioList) => {
   const classes = useStyles()
-
-  const filtered =  useMemo(() => {
-    return messagesMemo.filter(({type}:{type:string}) => type === 'audio')
-    }, [messagesMemo])
-  const filteredAndSorted = useMemo(() => {
-    return filteredMessages(handleSort('createdAt', filtered, sort),date,value)
-  },[filtered,sort,date,value])  
-  
-  useEffect(() => {
-    setDisabled(filtered.length > 0?false:true)
-  }, [filtered, setDisabled])
   
   return(
     <>
-      {filteredAndSorted.length > 0 &&
+      {filteredAndSortedMessages.length > 0 &&
         <List className={classes.container}>
-        {filteredAndSorted.map(({ createdAt, fullType,_id,companionId,name,avatarUrl,lastName,color }) =>
+        {filteredAndSortedMessages.map(({ createdAt, fullType,_id,companionId,name,avatarUrl,lastName,color }) =>
           <div key={createdAt}>
             <ListItem onClick={() => handleScrollToTheMessage(_id,companionId)}
               alignItems="flex-start" className={classes.listItem}>
@@ -93,8 +87,8 @@ const AudioList = ({ messagesMemo,value,date,sort,setDisabled,handleScrollToTheM
             <Divider variant="inset"/>
         </div>)}
       </List>}
-      {(value || date) &&  filteredAndSorted.length === 0 && <AlertInfo name={`Can not find Audio by request: ${value}`} />}
-      {!value && !date && filteredAndSorted.length === 0 && <AlertInfo name='You do not have Audio yet!'/>}
+      {(value || date) &&  filteredAndSortedMessages.length === 0 && <AlertInfo name={`Can not find Audio by request: ${value}`} />}
+      {!value && !date && filteredAndSortedMessages.length === 0 && <AlertInfo name='You do not have Audio yet!'/>}
    </>)
 }
 export default AudioList

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

@@ -15,8 +15,12 @@ const useStyles = makeStyles({
   },
   container: {
     width: '100%',
-    maxHeight: '86vh',
+    maxHeight: '88vh',
     overflowY: 'scroll',
+    position: 'absolute',
+    animationDuration: '0.2s',
+    animationDirection: 'normal',
+    animation: `$moveElement`,    
   '&::-webkit-scrollbar': {
     width: '0.4em'
   },
@@ -34,33 +38,37 @@ const useStyles = makeStyles({
   "&::-webkit-scrollbar-thumb:active": {
     backgroundColor: "#959595",
     },
+  },
+  '@keyframes moveElement': {
+   '0%': { left: '-100%'},
+   '100%': { left: '0%'},
   },    
 })
 
 interface IChatListRecent {
   value: string,
   date:any,
-  filteredAndSorted: TChats,
+  filteredAndSortedChats: TChats,
   handleListItemClick: (companionId: string) => void,
 }
 
-const ChatListRecent = ({value,date,filteredAndSorted,handleListItemClick}:IChatListRecent) => {
+const ChatListRecent = ({value,date,filteredAndSortedChats,handleListItemClick}:IChatListRecent) => {
   const classes = useStyles()
 
 return (
   <>
-    {!value && !date && filteredAndSorted.length > 0 &&
+    {!value && !date && filteredAndSortedChats.length > 0 &&
     <Stack direction="row" className={classes.stack}>
-      {filteredAndSorted.slice(0, 6).map((chat) =>
+      {filteredAndSortedChats.slice(0, 6).map((chat) =>
       <RecentItem key={chat.companionId} handleListItemClick={handleListItemClick} chat={chat} />)}
     </Stack>}
-    {(value || date) && filteredAndSorted.length > 0 &&
+    {(value || date) && filteredAndSortedChats.length > 0 &&
       <List className={classes.container} component="nav" aria-label="main mailbox folders">
-        {filteredAndSorted.map((chat) =>
+        {filteredAndSortedChats.map((chat) =>
         <ChatItem key={chat.companionId} handleListItemClick={handleListItemClick} chat={chat} />)}
       </List>}
-    {(value || date) && filteredAndSorted.length === 0 && <AlertInfo name={`Can not find Chat by request: ${value}`} />}
-    {!value && !date && filteredAndSorted.length === 0 &&<AlertInfo name='You do not have any Chats yet!'/>}
+    {(value || date) && filteredAndSortedChats.length === 0 && <AlertInfo name={`Can not find Chat by request: ${value}`} />}
+    {!value && !date && filteredAndSortedChats.length === 0 &&<AlertInfo name='You do not have any Chats yet!'/>}
   </>)  
 }
 

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

@@ -3,23 +3,23 @@ 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 LibraryMusicIcon from '@mui/icons-material/LibraryMusic';
-import FolderIcon from '@mui/icons-material/Folder';
-import ImageIcon from '@mui/icons-material/Image';
-import VideoLibraryIcon from '@mui/icons-material/VideoLibrary';
+import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile';
 import Divider from '@mui/material/Divider';
 import { makeStyles } from '@material-ui/core'
-import { useEffect,useMemo } from 'react';
 
 import AlertInfo from '../../../../reusableComponents/AlertInfo';
-import { timeStampEU,filteredMessages,handleSort,prodAwsS3,firstLetter } from '../../../../../helpers'
+import { timeStampEU,prodAwsS3,firstLetter } from '../../../../../helpers'
 import { TAllMessages } from '../../../../../typescript/redux/allMessages/types'
 
 const useStyles = makeStyles({
   container: {
     width: '100%',
-    maxHeight: '86vh',
+    maxHeight: '88vh',
     overflowY: 'scroll',
+    position: 'absolute',
+    animationDuration: '0.2s',
+    animationDirection: 'normal',
+    animation: `$moveElement`,       
   '&::-webkit-scrollbar': {
     width: '0.4em'
   },
@@ -47,37 +47,28 @@ const useStyles = makeStyles({
     '&:hover': {
       backgroundColor: '#f0f0f0',
     }
-  },  
+  },
+  '@keyframes moveElement': {
+   '0%': { left: '-100%'},
+   '100%': { left: '0%'},
+  },    
 })
 
 interface IFilesList {
-  messagesMemo: TAllMessages,
+  filteredAndSortedMessages: TAllMessages,
   value: string,
   date: any,
-  setDisabled: React.Dispatch<boolean>,
-  sort: boolean,
   handleScrollToTheMessage:(_id:string,companionId:string)  => void
 }
 
-const FilesList = ({ messagesMemo,value,date,sort,setDisabled,handleScrollToTheMessage }: IFilesList) => {
+const FilesList = ({ filteredAndSortedMessages,value,date,handleScrollToTheMessage }: IFilesList) => {
   const classes = useStyles()
-
-  const filtered =  useMemo(() => {
-    return messagesMemo.filter(({type}:{type:string}) => type !== 'text')
-    }, [messagesMemo])
-  const filteredAndSorted = useMemo(() => {
-    return filteredMessages(handleSort('createdAt', filtered, sort),date,value)
-  },[filtered,sort,date,value])
-  
-  useEffect(() => {
-    setDisabled(filtered.length > 0?false:true)
-  }, [filtered, setDisabled])
   
   return (
     <>
-      {filteredAndSorted.length > 0 &&
+      {filteredAndSortedMessages.length > 0 &&
         <List className={classes.container}>
-        {filteredAndSorted.map(({ createdAt, fullType,_id,companionId,name,avatarUrl,lastName,color }) =>
+        {filteredAndSortedMessages.map(({ createdAt, fullType,_id,companionId,name,avatarUrl,lastName,color }) =>
           <div key={createdAt}>
             <ListItem onClick={() => handleScrollToTheMessage(_id,companionId)}
               alignItems="flex-start" className={classes.listItem}>
@@ -91,16 +82,13 @@ const FilesList = ({ messagesMemo,value,date,sort,setDisabled,handleScrollToTheM
                 primary={fullType}
                 secondary={timeStampEU(createdAt)}
               />
-              {fullType&&fullType.includes('audio') &&<LibraryMusicIcon className={classes.folderIcon} fontSize='large' />}
-              {fullType&&fullType.includes('video') &&<VideoLibraryIcon className={classes.folderIcon} fontSize='large' />}
-              {fullType&&fullType.includes('image') &&<ImageIcon className={classes.folderIcon} fontSize='large' />}
-              {fullType && fullType.includes('application') && <FolderIcon className={classes.folderIcon} fontSize='large' />}            
+              <InsertDriveFileIcon className={classes.folderIcon} fontSize='large' />          
             </ListItem>
             <Divider variant="inset"/>
         </div>)}
       </List>}
-      {(value || date)&&  filteredAndSorted.length === 0 && <AlertInfo name={`Can not find Files by request: ${value}`} />}
-      {!value && !date && filteredAndSorted.length === 0 && <AlertInfo name='You do not have Files yet!'/>}
+      {(value || date)&&  filteredAndSortedMessages.length === 0 && <AlertInfo name={`Can not find Files by request: ${value}`} />}
+      {!value && !date && filteredAndSortedMessages.length === 0 && <AlertInfo name='You do not have Files yet!'/>}
     </>
   )
 }

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

@@ -1,17 +1,19 @@
 import ImageList from '@mui/material/ImageList';
 import { makeStyles } from '@material-ui/core'
-import { useEffect,useMemo } from 'react';
 
 import MediaListItem from './MediaListItem';
 import AlertInfo from '../../../../reusableComponents/AlertInfo';
-import { filteredMessages,handleSort } from '../../../../../helpers'
 import { TAllMessages } from '../../../../../typescript/redux/allMessages/types'
 
 const useStyles = makeStyles({
   container: {
     width: '100%',
-    maxHeight: '86vh',
+    maxHeight: '88vh',
     overflowY: 'scroll',
+    position: 'absolute',
+    animationDuration: '0.2s',
+    animationDirection: 'normal',
+    animation: `$moveElement`,   
   '&::-webkit-scrollbar': {
     width: '0.4em'
   },
@@ -29,43 +31,34 @@ const useStyles = makeStyles({
   "&::-webkit-scrollbar-thumb:active": {
     backgroundColor: "#959595",
     },
-  },  
+  },
+  '@keyframes moveElement': {
+   '0%': { left: '-100%'},
+   '100%': { left: '0%'},
+  },    
 })
 
 interface IMediaList {
-  messagesMemo: TAllMessages,
+  filteredAndSortedMessages: TAllMessages,
   value: string,
   date: any,
-  setDisabled: React.Dispatch<boolean>,
-  sort: boolean,
   handleScrollToTheMessage:(_id:string,companionId:string)  => void
 }
 
-const MediaList = ({ messagesMemo,value,date,sort,setDisabled,handleScrollToTheMessage }: IMediaList) => {
+const MediaList = ({ filteredAndSortedMessages,value,date,handleScrollToTheMessage }: IMediaList) => {
   const classes = useStyles()
-
-  const filtered =  useMemo(() => {
-    return messagesMemo.filter(({type}:{type:string}) => type === 'image')
-    }, [messagesMemo])
-  const filteredAndSorted = useMemo(() => {
-    return filteredMessages(handleSort('createdAt', filtered, sort),date,value)
-  },[filtered,sort,date,value])
-  
-  useEffect(() => {
-    setDisabled(filtered.length > 0?false:true)
-  }, [filtered, setDisabled])
   
   return (
     <>
-      {filteredAndSorted.length > 0 &&
+      {filteredAndSortedMessages.length > 0 &&
         <ImageList className={classes.container} cols={3} rowHeight={164}>
-        {filteredAndSorted.map(({message,createdAt,fullType,updatedAt,_id,companionId,name,lastName,color}) => 
+        {filteredAndSortedMessages.map(({message,createdAt,fullType,updatedAt,_id,companionId,name,lastName,color}) => 
           <MediaListItem key={createdAt} message={message} fullType={fullType}
             updatedAt={updatedAt} handleScrollToTheMessage={handleScrollToTheMessage} id={_id}
             companionId={companionId} name={name} lastName={lastName} color={color}/>)}
       </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!'/>}
+      {(value || date) &&  filteredAndSortedMessages.length === 0 && <AlertInfo name={`Can not find Media by request: ${value}`} />}
+      {!value && !date && filteredAndSortedMessages.length === 0 && <AlertInfo name='You do not have Media yet!'/>}
      </>
    )
 }

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

@@ -6,17 +6,20 @@ import Avatar from '@mui/material/Avatar';
 import Divider from '@mui/material/Divider';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import { makeStyles } from '@material-ui/core'
-import { useEffect,useMemo } from 'react';
 
 import AlertInfo from '../../../../reusableComponents/AlertInfo';
-import { timeStampEU,firstLetter,filteredMessages,handleSort,prodAwsS3 } from '../../../../../helpers'
+import { timeStampEU,firstLetter,prodAwsS3 } from '../../../../../helpers'
 import { TAllMessages } from '../../../../../typescript/redux/allMessages/types'
 
 const useStyles = makeStyles({
   container: {
     width: '100%',
-    maxHeight: '86vh',
+    maxHeight: '88vh',
     overflowY: 'scroll',
+    position: 'absolute',
+    animationDuration: '0.2s',
+    animationDirection: 'normal',
+    animation: `$moveElement`,    
   '&::-webkit-scrollbar': {
     width: '0.4em'
   },
@@ -45,36 +48,27 @@ const useStyles = makeStyles({
     margin: 'auto 0px',
     color: 'rgba(0, 0, 0, 0.5)',
   },
+  '@keyframes moveElement': {
+   '0%': { left: '-100%'},
+   '100%': { left: '0%'},
+  },  
 })
 
 interface ITextList {
-  messagesMemo: TAllMessages,
+  filteredAndSortedMessages: TAllMessages,
   value: string,
   date: any,
-  setDisabled: React.Dispatch<boolean>,
-  sort: boolean,
   handleScrollToTheMessage:(_id:string,companionId:string)  => void
 }
 
-const TextList = ({ messagesMemo,value,date,sort,setDisabled,handleScrollToTheMessage }: ITextList) => {
+const TextList = ({ filteredAndSortedMessages,value,date,handleScrollToTheMessage }: ITextList) => {
   const classes = useStyles()
-
-  const filtered =  useMemo(() => {
-    return messagesMemo.filter(({type}:{type:string}) => type === 'text')
-    }, [messagesMemo])
-  const filteredAndSorted = useMemo(() => {
-    return filteredMessages(handleSort('createdAt', filtered, sort),date,value)
-  },[filtered,sort,date,value])
-  
-  useEffect(() => {
-    setDisabled(filtered.length > 0?false:true)
-  }, [filtered, setDisabled])
   
   return (
   <>
-      {filteredAndSorted.length > 0 &&
+      {filteredAndSortedMessages.length > 0 &&
         <List className={classes.container}>
-       {filteredAndSorted.map(({ message, createdAt, lastName, name, color, avatarUrl,_id,companionId }) =>
+       {filteredAndSortedMessages.map(({ message, createdAt, lastName, name, color, avatarUrl,_id,companionId }) =>
       <div key={createdAt}>
            <ListItem onClick={() => handleScrollToTheMessage(_id,companionId)}
              alignItems="flex-start" className={classes.listItem}>
@@ -92,8 +86,8 @@ const TextList = ({ messagesMemo,value,date,sort,setDisabled,handleScrollToTheMe
           <Divider variant="inset" />
       </div>)}
     </List>}
-    {(value || date) &&  filteredAndSorted.length === 0 && <AlertInfo name={`Can not find Text by request: ${value}`} />}
-    {!value && !date && filteredAndSorted.length === 0 && <AlertInfo name='You do not have Text yet!'/>} 
+    {(value || date) &&  filteredAndSortedMessages.length === 0 && <AlertInfo name={`Can not find Text by request: ${value}`} />}
+    {!value && !date && filteredAndSortedMessages.length === 0 && <AlertInfo name='You do not have Text yet!'/>} 
   </>
   ) 
 }

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

@@ -6,17 +6,20 @@ import Avatar from '@mui/material/Avatar';
 import VideoLibraryIcon from '@mui/icons-material/VideoLibrary';
 import Divider from '@mui/material/Divider';
 import { makeStyles } from '@material-ui/core'
-import { useEffect,useMemo } from 'react';
 
 import AlertInfo from '../../../../reusableComponents/AlertInfo';
-import { timeStampEU,filteredMessages,handleSort,prodAwsS3,firstLetter } from '../../../../../helpers'
+import { timeStampEU,prodAwsS3,firstLetter } from '../../../../../helpers'
 import { TAllMessages } from '../../../../../typescript/redux/allMessages/types'
 
 const useStyles = makeStyles({
   container: {
     width: '100%',
-    maxHeight: '86vh',
+    maxHeight: '88vh',
     overflowY: 'scroll',
+    position: 'absolute',
+    animationDuration: '0.2s',
+    animationDirection: 'normal',
+    animation: `$moveElement`,       
   '&::-webkit-scrollbar': {
     width: '0.4em'
   },
@@ -44,37 +47,28 @@ const useStyles = makeStyles({
     '&:hover': {
       backgroundColor: '#f0f0f0',
     }
-  },  
+  },
+  '@keyframes moveElement': {
+   '0%': { left: '-100%'},
+   '100%': { left: '0%'},
+  },    
 })
 
 interface IVideoList {
-  messagesMemo: TAllMessages,
+  filteredAndSortedMessages: TAllMessages,
   value: string,
   date: any,
-  setDisabled: React.Dispatch<boolean>,
-  sort: boolean,
   handleScrollToTheMessage:(_id:string,companionId:string)  => void
 }
 
-const VideoList = ({ messagesMemo,value,date,sort,setDisabled,handleScrollToTheMessage }: IVideoList) => {
+const VideoList = ({ filteredAndSortedMessages,value,date,handleScrollToTheMessage }: IVideoList) => {
   const classes = useStyles()
-  
-  const filtered =  useMemo(() => {
-    return messagesMemo.filter(({type}:{type:string}) => type === 'video')
-    }, [messagesMemo])
-  const filteredAndSorted = useMemo(() => {
-    return filteredMessages(handleSort('createdAt', filtered, sort),date,value)
-  },[filtered,sort,date,value])
-  
-  useEffect(() => {
-    setDisabled(filtered.length > 0?false:true)
-  }, [filtered, setDisabled])
 
   return (
     <>
-      {filteredAndSorted.length > 0 &&
+      {filteredAndSortedMessages.length > 0 &&
         <List className={classes.container}>
-        {filteredAndSorted.map(({ createdAt, fullType,_id,companionId,name,avatarUrl,lastName,color }) =>
+        {filteredAndSortedMessages.map(({ createdAt, fullType,_id,companionId,name,avatarUrl,lastName,color }) =>
           <div key={createdAt}>
             <ListItem onClick={() => handleScrollToTheMessage(_id,companionId)}
               key={createdAt} alignItems="flex-start" className={classes.listItem}>
@@ -93,8 +87,8 @@ const VideoList = ({ messagesMemo,value,date,sort,setDisabled,handleScrollToTheM
             <Divider variant="inset" />
           </div>)}
       </List>}
-      {(value || date)&&  filteredAndSorted.length === 0 && <AlertInfo name={`Can not find Video by request: ${value}`} />}
-      {!value && !date && filteredAndSorted.length === 0 && <AlertInfo name='You do not have Video yet!'/>}
+      {(value || date)&&  filteredAndSortedMessages.length === 0 && <AlertInfo name={`Can not find Video by request: ${value}`} />}
+      {!value && !date && filteredAndSortedMessages.length === 0 && <AlertInfo name='You do not have Video yet!'/>}
     </>
    )  
 }

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

@@ -1,6 +1,10 @@
 import { useState, useEffect,useMemo } from 'react';
-import { useDispatch,useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
+import Tab from '@mui/material/Tab';
+import Tabs from '@mui/material/Tabs';
+import Box from '@mui/material/Box';
 import { makeStyles } from '@material-ui/core'
+import { styled } from '@mui/material/styles';
 
 import ChatListRecent from './ChatListRecent'
 import FilesList from './FilesList';
@@ -13,43 +17,58 @@ import { asyncGetChats } from '../../../../redux/chats/operations';
 import { getStateMemo } from '../../../../redux/chats/selector';
 import { getAllMessagesMemo } from '../../../../redux/allMessages/selector';
 import { getState } from '../../../../redux/control/selector';
-import { sortByRecent,timeStampFilter,refreshAppTime } from '../../../../helpers';
+import { sortByRecent,filterBy,filteredMessages,handleSort,timeStampFilter,refreshAppTime } from '../../../../helpers';
 import { asyncStartChatById } from '../../../../redux/chat/operations';
 import { getPinnedMessagesMemo } from '../../../../redux/pinnedMessages/selector';
 import { actionLeftIsOpen,actionRightIsOpen,actionOpenPinned } from '../../../../redux/control/action';
+import { TMessage } from '../../../../typescript/redux/messages/types';
 
 const useStyles = makeStyles({
-container: {
-  height:'7vh',
-  borderBottom: 'solid 2px #dddddd',
-  display: 'flex',
-  justifyContent: 'space-around',
-  alignContent: "center",
-  alignItems:"center",
-  flexWrap: 'nowrap',
-  color:'rgba(0, 0, 0, 0.6)'
-},
-item: {
-  height:'100%',
-  display: 'flex',
-  flexDirection: 'column',
-  justifyContent: 'center',
-  alignContent: "center",
-  alignItems: "center",
-  cursor:'pointer',
-},
-icon: {
-  fontSize: '1rem',
-  lineHeight: 0,
-  marginBottom: 0,
-  fontWeight:600
- },
-underline: {
-  fontSize: '2.2rem',
-  lineHeight: 0,
+  container: {
+    height: '5vh',
+    display: "flex",
+    alignContent: "end",
+    alignItems: "end",
+    width:'100%',
+    borderBottom: 'solid 2px #dddddd',
   },
 })
 
+interface StyledTabsProps {
+  children?: React.ReactNode;
+  value: number;
+  onChange: (event: React.SyntheticEvent, newValue: number) => void;
+}
+
+const StyledTabs = styled((props: StyledTabsProps) => (
+  <Tabs
+    {...props}
+    TabIndicatorProps={{ children: <span className="MuiTabs-indicatorSpan" /> }}
+  />
+))({
+  '& .MuiTabs-flexContainer': {
+    display: "flex",
+    width: '100%',
+    padding:'0px 10px',
+    justifyContent: "space-between"
+  },
+  '& .MuiTabs-indicator': {
+    height: 0,
+    backgroundColor: 'transparent',
+    borderBottom: '3px solid #1976d2',
+    borderLeft: '3px solid transparent',
+    borderRight: '3px solid transparent',
+  },
+});
+
+const StyledTab = styled((props:{label: string}) => <Tab disableRipple {...props} />)({
+    fontSize: '1rem',
+    fontWeight: 550,
+    textTransform: 'none',
+    minWidth: 'auto',
+  },
+);
+
 interface ISearchLists {
   value: string,
   setValue: React.Dispatch<string>
@@ -68,7 +87,7 @@ const SearchLists = ({ value,setValue,sort,date,setDate,setDisabled,chatDivRef}:
     const pinnedMessagesMemo = useSelector(getPinnedMessagesMemo)
     const { leftIsOpen,rightIsOpen,openPinned } = useSelector(getState)
     const [isActive, setIsActive] = useState<number>(0)
-    const handleIsActive = (newValue: number): void => {
+    const handleIsActive = (_e:any,newValue: number): void => {
       setIsActive(newValue)
       value && setValue('')
       date&&setDate('')
@@ -146,7 +165,7 @@ const SearchLists = ({ value,setValue,sort,date,setDate,setDisabled,chatDivRef}:
     }, [leftIsOpen,dispatch]);
     
   
-  const filteredAndSorted = useMemo(() => {
+  const filteredAndSortedChats = useMemo(() => {
       return sortByRecent(chats,sort).filter((el) => {
       const credentials = el.name + ' ' + el.lastName
       if (!date) {
@@ -158,48 +177,32 @@ const SearchLists = ({ value,setValue,sort,date,setDate,setDisabled,chatDivRef}:
       } else return undefined
     })
   }, [chats, date, value, sort])
-  
+
+  const filteredAndSortedMessages = useMemo(() => {
+    const filtered = messagesMemo.filter((el:TMessage) => filterBy[isActive === 0?0:isActive-1].includes(el.type))
+    if(isActive > 0) setDisabled(filtered.length > 0?false:true) 
+     return filteredMessages(handleSort('createdAt', filtered, sort), date, value)
+  }, [messagesMemo, date, isActive, sort, value,setDisabled])
+
     return (
-    <>
-        <div className={classes.container}>
-          <div className={classes.item} style={{color:isActive === 0?'#1976d2':"rgba(0, 0, 0, 0.6)"}}
-            onClick={() => handleIsActive(0)}>
-            <span className={classes.icon}>Chats</span>
-            <span className={classes.underline}>___</span>
-          </div>
-          <div className={classes.item} style={{color:isActive === 1?'#1976d2':"rgba(0, 0, 0, 0.6)"}}
-            onClick={() => handleIsActive(1)}>
-            <span className={classes.icon}>Files</span>
-            <span className={classes.underline}>___</span>
-          </div>
-          <div className={classes.item} style={{color:isActive === 2?'#1976d2':"rgba(0, 0, 0, 0.6)"}}
-            onClick={() => handleIsActive(2)}>
-            <span className={classes.icon}>Media</span>
-            <span className={classes.underline}>___</span>
-          </div>
-          <div className={classes.item} style={{color:isActive === 3?'#1976d2':"rgba(0, 0, 0, 0.6)"}}
-            onClick={() => handleIsActive(3)}>
-            <span className={classes.icon}>Text</span>
-            <span className={classes.underline}>___</span>
-          </div>
-          <div className={classes.item} style={{color:isActive === 4?'#1976d2':"rgba(0, 0, 0, 0.6)"}}
-            onClick={() => handleIsActive(4)}>
-            <span className={classes.icon}>Audio</span>
-            <span className={classes.underline}>___</span>
-          </div>
-          <div className={classes.item} style={{color:isActive === 5?'#1976d2':"rgba(0, 0, 0, 0.6)"}}
-            onClick={() => handleIsActive(5)}>
-            <span className={classes.icon}>Video</span>
-            <span className={classes.underline}>___</span>
-          </div>          
-      </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} 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}/>}
+      <>
+        <Box className={classes.container}>
+          <StyledTabs sx={{width:'100%'}}  onChange={handleIsActive} value={isActive} aria-label="wrapped label tabs example">
+            <StyledTab label='Chats' />
+            <StyledTab label='Files' />
+            <StyledTab label='Media' />
+            <StyledTab label='Text' />
+            <StyledTab label='Audio' />
+            <StyledTab label='Video' />
+          </StyledTabs>
+        </Box>
+        {isActive === 0 && <ChatListRecent value={value} date={date}
+          filteredAndSortedChats={filteredAndSortedChats} handleListItemClick={handleListItemClick} />}
+        {isActive === 1 && <FilesList filteredAndSortedMessages={filteredAndSortedMessages} value={value} date={date} handleScrollToTheMessage={handleScrollToTheMessage}/>}
+        {isActive === 2 && <MediaList filteredAndSortedMessages={filteredAndSortedMessages} value={value} date={date} handleScrollToTheMessage={handleScrollToTheMessage}/>}
+        {isActive === 3 && <TextList  filteredAndSortedMessages={filteredAndSortedMessages} value={value} date={date} handleScrollToTheMessage={handleScrollToTheMessage}/>}
+        {isActive === 4 && <AudioList filteredAndSortedMessages={filteredAndSortedMessages} value={value} date={date} handleScrollToTheMessage={handleScrollToTheMessage}/>}
+        {isActive === 5 && <VideoList filteredAndSortedMessages={filteredAndSortedMessages} value={value} date={date} handleScrollToTheMessage={handleScrollToTheMessage}/>}
     </>      
     )
 }

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

@@ -12,6 +12,12 @@ import { timeStampEU,prodAwsS3,firstLetter } from '../../../../../../helpers'
 import { TMessages } from '../../../../../../typescript/redux/messages/types'
 
 const useStyles = makeStyles({
+  container: {
+    position: 'absolute',
+    animationDuration: '0.2s',
+    animationDirection: 'normal',
+    animation: `$moveElement`,
+  },
   folderIcon: {
     margin: 'auto 0px',
     color: 'rgba(0, 0, 0, 0.5)',
@@ -21,7 +27,11 @@ const useStyles = makeStyles({
     '&:hover': {
       backgroundColor: '#f0f0f0',
     }
-  },  
+  },
+  '@keyframes moveElement': {
+   '0%': { left: '100%'},
+   '100%': { left: '0%'},
+  },      
 })
 
 interface IAudioList {
@@ -34,7 +44,7 @@ const AudioList = ({ filteredAndSorted,handleScrollToTheMessage,openPinned }: IA
   const classes = useStyles()
   
     return filteredAndSorted.length > 0 ?(
-      <List>
+      <List className={classes.container}>
         {filteredAndSorted.map(({ message, createdAt, fullType,_id,name,avatarUrl,lastName,color }) =>
           <div key={createdAt}>
             <ListItem onClick={() => handleScrollToTheMessage(_id)}

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

@@ -3,10 +3,7 @@ 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 LibraryMusicIcon from '@mui/icons-material/LibraryMusic';
-import FolderIcon from '@mui/icons-material/Folder';
-import ImageIcon from '@mui/icons-material/Image';
-import VideoLibraryIcon from '@mui/icons-material/VideoLibrary';
+import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile';
 import Divider from '@mui/material/Divider';
 import { makeStyles } from '@material-ui/core'
 
@@ -15,6 +12,12 @@ import { timeStampEU,prodAwsS3,firstLetter } from '../../../../../../helpers'
 import { TMessages } from '../../../../../../typescript/redux/messages/types'
 
 const useStyles = makeStyles({
+  container: {
+    position: 'absolute',
+    animationDuration: '0.2s',
+    animationDirection: 'normal',
+    animation: `$moveElement`,
+  },  
   folderIcon: {
     margin: 'auto 0px',
     color: 'rgba(0, 0, 0, 0.5)',
@@ -24,7 +27,11 @@ const useStyles = makeStyles({
     '&:hover': {
       backgroundColor: '#f0f0f0',
     }
-  },  
+  },
+  '@keyframes moveElement': {
+   '0%': { left: '100%'},
+   '100%': { left: '0%'},
+  },   
 })
 
 interface IFilesList {
@@ -37,8 +44,8 @@ const FilesList = ({ filteredAndSorted,handleScrollToTheMessage,openPinned }: IF
   const classes = useStyles()
   
     return filteredAndSorted.length > 0 ?(
-      <List>
-        {filteredAndSorted.map(({ message, createdAt, fullType,_id,name,avatarUrl,lastName,color }) =>
+      <List className={classes.container}>
+        {filteredAndSorted.map(({createdAt, fullType,_id,name,avatarUrl,lastName,color }) =>
           <div key={createdAt}>
             <ListItem onClick={() => handleScrollToTheMessage(_id)}
               alignItems="flex-start" className={classes.listItem}>
@@ -52,10 +59,7 @@ const FilesList = ({ filteredAndSorted,handleScrollToTheMessage,openPinned }: IF
                 primary={fullType}
                 secondary={timeStampEU(createdAt)}
               />
-              {fullType&&fullType.includes('audio') &&<LibraryMusicIcon className={classes.folderIcon} fontSize='large' />}
-              {fullType&&fullType.includes('video') &&<VideoLibraryIcon className={classes.folderIcon} fontSize='large' />}
-              {fullType&&fullType.includes('image') &&<ImageIcon className={classes.folderIcon} fontSize='large' />}
-              {fullType && fullType.includes('application') && <FolderIcon className={classes.folderIcon} fontSize='large' />}            
+              <InsertDriveFileIcon className={classes.folderIcon} fontSize='large' />           
             </ListItem>
             <Divider variant="inset"/>
         </div>)}

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

@@ -1,9 +1,23 @@
 import ImageList from '@mui/material/ImageList';
 import MediaListItem from './MediaListItem';
+import { makeStyles } from '@material-ui/core'
 
 import AlertInfo from '../../../../../reusableComponents/AlertInfo';
 import { TMessages } from '../../../../../../typescript/redux/messages/types'
 
+const useStyles = makeStyles({
+  container: {
+    position: 'absolute',
+    animationDuration: '0.2s',
+    animationDirection: 'normal',
+    animation: `$moveElement`,
+  },
+  '@keyframes moveElement': {
+   '0%': { left: '100%'},
+   '100%': { left: '0%'},
+  },   
+})
+
 interface IMediaList {
   openPinned: boolean,
   filteredAndSorted: TMessages,
@@ -11,14 +25,16 @@ interface IMediaList {
 }
 
 const MediaList = ({ filteredAndSorted,handleScrollToTheMessage,openPinned }: IMediaList) => {
-  
+  const classes = useStyles()
+
   return filteredAndSorted.length > 0 ?(
-      <ImageList sx={{ width: '100%', height: 'auto',overflow:'hidden' }} cols={3} rowHeight={164}>
-        {filteredAndSorted.map(({message,createdAt,fullType,updatedAt,_id,name,lastName,avatarUrl,color}) => 
-          <MediaListItem key={createdAt} message={message} fullType={fullType}
-            updatedAt={updatedAt} handleScrollToTheMessage={handleScrollToTheMessage} id={_id}
-            name={name} lastName={lastName} avatarUrl={avatarUrl} color={color}/>)}
-      </ImageList>
+  <ImageList className={classes.container}
+    sx={{ width: '100%', height: 'auto', overflow: 'hidden' }} cols={3} rowHeight={164}>
+      {filteredAndSorted.map(({message,createdAt,fullType,updatedAt,_id,name,lastName,avatarUrl,color}) => 
+        <MediaListItem key={createdAt} message={message} fullType={fullType}
+          updatedAt={updatedAt} handleScrollToTheMessage={handleScrollToTheMessage} id={_id}
+          name={name} lastName={lastName} avatarUrl={avatarUrl} color={color}/>)}
+  </ImageList>
    ): <AlertInfo name={`You do not have ${openPinned&&'Pinned'} Media yet!`}/>  
 }
 

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

@@ -12,6 +12,12 @@ import { timeStampEU,firstLetter,prodAwsS3 } from '../../../../../../helpers'
 import { TMessages } from '../../../../../../typescript/redux/messages/types'
 
 const useStyles = makeStyles({
+  container: {
+    position: 'absolute',
+    animationDuration: '0.2s',
+    animationDirection: 'normal',
+    animation: `$moveElement`,
+  },  
   listItem: {
     cursor:'pointer',
     '&:hover': {
@@ -22,6 +28,10 @@ const useStyles = makeStyles({
     margin: 'auto 0px',
     color: 'rgba(0, 0, 0, 0.5)',
   },
+  '@keyframes moveElement': {
+   '0%': { left: '100%'},
+   '100%': { left: '0%'},
+  },   
 })
 
 interface ITextList {
@@ -34,7 +44,7 @@ const TextList = ({ filteredAndSorted,handleScrollToTheMessage,openPinned }: ITe
   const classes = useStyles()
   
    return filteredAndSorted.length > 0 ?(
-    <List>
+    <List className={classes.container}>
        {filteredAndSorted.map(({ message, createdAt, lastName, name, color, avatarUrl,_id }) =>
       <div key={createdAt}>
            <ListItem onClick={() => handleScrollToTheMessage(_id)}

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

@@ -12,6 +12,12 @@ import { timeStampEU,prodAwsS3,firstLetter } from '../../../../../../helpers'
 import { TMessages } from '../../../../../../typescript/redux/messages/types'
 
 const useStyles = makeStyles({
+  container: {
+    position: 'absolute',
+    animationDuration: '0.2s',
+    animationDirection: 'normal',
+    animation: `$moveElement`,
+  },  
   folderIcon: {
     margin: 'auto 0px',
     color: 'rgba(0, 0, 0, 0.5)',
@@ -21,7 +27,11 @@ const useStyles = makeStyles({
     '&:hover': {
       backgroundColor: '#f0f0f0',
     }
-  },  
+  },
+  '@keyframes moveElement': {
+   '0%': { left: '100%'},
+   '100%': { left: '0%'},
+  },   
 })
 
 interface IVideoList {
@@ -34,7 +44,7 @@ const VideoList = ({ filteredAndSorted,handleScrollToTheMessage,openPinned }: IV
   const classes = useStyles()
 
     return filteredAndSorted.length > 0 ?(
-      <List>
+      <List className={classes.container}>
         {filteredAndSorted.map(({ message, createdAt, fullType,_id,name,avatarUrl,lastName,color }) =>
           <div key={createdAt}>
             <ListItem onClick={() => handleScrollToTheMessage(_id)}

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

@@ -1,6 +1,10 @@
 import { useState,useEffect,useMemo } from 'react';
 import { useSelector } from 'react-redux';
 import { makeStyles } from '@material-ui/core'
+import { styled } from '@mui/material/styles';
+import Tab from '@mui/material/Tab';
+import Tabs from '@mui/material/Tabs';
+import Box from '@mui/material/Box';
 
 import AudioList from './AudioList';
 import MediaList from './MediaList';
@@ -10,43 +14,56 @@ import VideoList from './VideoList'
 import { getOpenPinned } from '../../../../../redux/control/selector';
 import { getPinnedMessagesMemo } from '../../../../../redux/pinnedMessages/selector'; 
 import { getMessagesMemo } from '../../../../../redux/messages/selector'
-import { handleSort } from '../../../../../helpers';
+import { handleSort,filterBy } from '../../../../../helpers';
 import { getChat } from '../../../../../redux/chat/selector'
 import { TMessages,TMessage } from '../../../../../typescript/redux/messages/types'
 
 const useStyles = makeStyles({
 container: {
-  borderBottom: 'solid 2px #dddddd',
-  display: 'flex',
-  justifyContent: 'space-around',
-  alignContent: "center",
-  alignItems:"center",
-  flexWrap: 'nowrap',
-  height:'7vh',
-  color:'rgba(0, 0, 0, 0.6)'
-  },
-  item: {
-    height:'100%',
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'center',
-    alignContent: "center",
-    alignItems: "center",
-    cursor:'pointer',
-  },
-icon: {
-  fontSize: '1rem',
-  lineHeight: 0,
-  marginBottom: 0,
-  fontWeight:600
+  height: '7vh',
+    display: "flex",
+    alignContent: "end",
+    alignItems: "end",
+    width:'100%',
+    borderBottom: 'solid 2px #dddddd',
  },
-underline: {
-  fontSize: '2.5rem',
-  lineHeight: 0,
-  },
 })
 
-const filterBy = ['text', 'image', 'text', 'audio', 'video']
+interface StyledTabsProps {
+  children?: React.ReactNode;
+  value: number;
+  onChange: (event: React.SyntheticEvent, newValue: number) => void;
+}
+
+const StyledTabs = styled((props: StyledTabsProps) => (
+  <Tabs
+    {...props}
+    TabIndicatorProps={{ children: <span className="MuiTabs-indicatorSpan" /> }}
+  />
+))({
+  '& .MuiTabs-flexContainer': {
+    display: "flex",
+    width: '100%',
+    padding:'0px 10px',
+    justifyContent: "space-between"
+  },
+  '& .MuiTabs-indicator': {
+    height: 0,
+    backgroundColor: 'transparent',
+    borderBottom: '3px solid #1976d2',
+    borderLeft: '3px solid transparent',
+    borderRight: '3px solid transparent',
+  },
+});
+
+const StyledTab = styled((props:{label: string}) => <Tab disableRipple {...props} />)(
+  () => ({
+    fontSize: '1rem',
+    fontWeight: 550,
+    textTransform: 'none',
+    minWidth:'auto'
+  }),
+);
 
 interface IProfileLists {
   setDisabled: React.Dispatch<boolean>,
@@ -61,7 +78,7 @@ const ProfileLists = ({setDisabled,chatDivRef}:IProfileLists) => {
     const pinnedMessagesMemo = useSelector(getPinnedMessagesMemo)
     const [isActive, setIsActive] = useState<number>(0)
   
-    const handleIsActive = (newValue: number): void => setIsActive(newValue)
+    const handleIsActive = (_e:any,newValue: number): void => setIsActive(newValue)
     const handleScrollToTheMessage = (_id: string) => {
       const childNodes = chatDivRef.current.childNodes[0].childNodes
       let toScrollNode = [...childNodes].find((el: any) => el.id === _id)
@@ -78,52 +95,28 @@ const ProfileLists = ({setDisabled,chatDivRef}:IProfileLists) => {
   }
   
   const filteredAndSorted: TMessages = useMemo(() => handleSort('createdAt', !openPinned ? messagesMemo : pinnedMessagesMemo, sort)
-    .filter((el:TMessage) => {
-      if (isActive !== 0) {
-        if(el.type === filterBy[isActive]) return el
-      } else {
-        if(el.type !== filterBy[isActive]) return el
-      }
-    }),[isActive,messagesMemo,openPinned,pinnedMessagesMemo,sort])
+    .filter((el:TMessage) => filterBy[isActive].includes(el.type)),[isActive,messagesMemo,openPinned,pinnedMessagesMemo,sort])
 
     useEffect(() => {
       setDisabled(filteredAndSorted.length > 0?false:true)
     }, [filteredAndSorted, setDisabled])
   
     return (
-    <>
-        <div className={classes.container}>
-          <div className={classes.item} style={{color:isActive === 0?'#1976d2':"rgba(0, 0, 0, 0.6)"}}
-            onClick={() => handleIsActive(0)}>
-            <span className={classes.icon}>Files</span>
-            <span className={classes.underline}>___</span>
-          </div>
-          <div className={classes.item} style={{color:isActive === 1?'#1976d2':"rgba(0, 0, 0, 0.6)"}}
-            onClick={() => handleIsActive(1)}>
-            <span className={classes.icon}>Media</span>
-            <span className={classes.underline}>___</span>
-          </div>
-          <div className={classes.item} style={{color:isActive === 2?'#1976d2':"rgba(0, 0, 0, 0.6)"}}
-            onClick={() => handleIsActive(2)}>
-            <span className={classes.icon}>Text</span>
-            <span className={classes.underline}>___</span>
-          </div>
-          <div className={classes.item} style={{color:isActive === 3?'#1976d2':"rgba(0, 0, 0, 0.6)"}}
-            onClick={() => handleIsActive(3)}>
-            <span className={classes.icon}>Audio</span>
-            <span className={classes.underline}>___</span>
-          </div>
-          <div className={classes.item} style={{color:isActive === 4?'#1976d2':"rgba(0, 0, 0, 0.6)"}}
-            onClick={() => handleIsActive(4)}>
-            <span className={classes.icon}>Video</span>
-            <span className={classes.underline}>___</span>
-          </div>
-      </div>
-            {isActive === 0 && <FilesList filteredAndSorted={filteredAndSorted} handleScrollToTheMessage={handleScrollToTheMessage} openPinned={openPinned}/>}            
-            {isActive === 1 && <MediaList filteredAndSorted={filteredAndSorted} handleScrollToTheMessage={handleScrollToTheMessage} openPinned={openPinned}/>}
-            {isActive === 2 && <TextList filteredAndSorted={filteredAndSorted} handleScrollToTheMessage={handleScrollToTheMessage} openPinned={openPinned}/>}
-            {isActive === 3 && <AudioList filteredAndSorted={filteredAndSorted} handleScrollToTheMessage={handleScrollToTheMessage} openPinned={openPinned}/>}
-            {isActive === 4 && <VideoList filteredAndSorted={filteredAndSorted} handleScrollToTheMessage={handleScrollToTheMessage} openPinned={openPinned}/>}
+      <>
+        <Box className={classes.container}>
+          <StyledTabs sx={{width:'100%'}} onChange={handleIsActive} value={isActive} aria-label="wrapped label tabs example">
+            <StyledTab label='Files'/>
+            <StyledTab label='Media'/>
+            <StyledTab label='Text'/>
+            <StyledTab label='Audio'/>
+            <StyledTab label='Video'/>
+          </StyledTabs>
+        </Box>
+        {isActive === 0 && <FilesList filteredAndSorted={filteredAndSorted} handleScrollToTheMessage={handleScrollToTheMessage} openPinned={openPinned}/>}            
+        {isActive === 1 && <MediaList filteredAndSorted={filteredAndSorted} handleScrollToTheMessage={handleScrollToTheMessage} openPinned={openPinned}/>}
+        {isActive === 2 && <TextList filteredAndSorted={filteredAndSorted} handleScrollToTheMessage={handleScrollToTheMessage} openPinned={openPinned}/>}
+        {isActive === 3 && <AudioList filteredAndSorted={filteredAndSorted} handleScrollToTheMessage={handleScrollToTheMessage} openPinned={openPinned}/>}
+        {isActive === 4 && <VideoList filteredAndSorted={filteredAndSorted} handleScrollToTheMessage={handleScrollToTheMessage} openPinned={openPinned}/>}
     </>      
     )
 }

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

@@ -9,7 +9,7 @@ import Avatar from '@mui/material/Avatar';
 import Typography from '@mui/material/Typography';
 import Divider from '@mui/material/Divider';
 import LibraryMusicIcon from '@mui/icons-material/LibraryMusic';
-import FolderIcon from '@mui/icons-material/Folder';
+import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile';
 import ImageIcon from '@mui/icons-material/Image';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import VideoLibraryIcon from '@mui/icons-material/VideoLibrary';
@@ -130,11 +130,11 @@ return (
                            {timeStampEU(createdAt)}
                          </>}
                      />
-                     {fullType === null &&<ContentCopyIcon className={classes.folderIcon} fontSize='large'/>}
-                     {fullType&&fullType.includes('audio') &&<LibraryMusicIcon className={classes.folderIcon} fontSize='large' />}
-                     {fullType&&fullType.includes('video') &&<VideoLibraryIcon className={classes.folderIcon} fontSize='large' />}
-                     {fullType&&fullType.includes('image') &&<ImageIcon className={classes.folderIcon} fontSize='large' />}
-                     {fullType && fullType.includes('application') && <FolderIcon className={classes.folderIcon} fontSize='large' />}
+                     {type === 'text' &&<ContentCopyIcon className={classes.folderIcon} fontSize='large'/>}
+                     {type !== 'text'&&fullType.includes('audio') &&<LibraryMusicIcon className={classes.folderIcon} fontSize='large' />}
+                     {type !== 'text'&&fullType.includes('video') &&<VideoLibraryIcon className={classes.folderIcon} fontSize='large' />}
+                     {type !== 'text'&&fullType.includes('image') &&<ImageIcon className={classes.folderIcon} fontSize='large' />}
+                     {type !== 'text' && fullType.includes('application') && <InsertDriveFileIcon className={classes.folderIcon} fontSize='large' />}
                 </ListItem>
               <Divider variant="inset"/>
             </div>)}

src/components/HomePage/RightBar/index.tsx

@@ -9,9 +9,9 @@ interface IRightBar {
   chatDivRef: any | null,
 }
 
-const RightBar = ({rightIsOpen,chatDivRef}:IRightBar) => {
+const RightBar = ({ rightIsOpen, chatDivRef }: IRightBar) => {
   return (
-    <Grid item lg={rightIsOpen?4:0}>
+    <Grid item lg={rightIsOpen ? 4 : 0}>
       {rightIsOpen === 'credentials' && <CredentialsList chatDivRef={chatDivRef} />}
       {rightIsOpen === 'search' && <SearchList chatDivRef={chatDivRef} />}
       {rightIsOpen === 'edit' && <EditBar/>}

src/components/reusableComponents/AlertInfo/index.tsx

@@ -8,7 +8,7 @@ return (
     <Stack sx={{ width: '100%' }} spacing={2}>
       <Alert severity="info">
         <AlertTitle>Warning</AlertTitle>
-        <strong>{name}</strong>
+        <strong style={{wordBreak:'break-word'}}>{name}</strong>
       </Alert>
     </Stack>
   );

src/helpers/index.ts

@@ -151,6 +151,8 @@ const filteredMessages = (arr: TAllMessages,date:any,value:string) => arr.filter
   }
 })
 
+const filterBy = ['pdf/docx', 'image', 'text', 'audio', 'video']
+
 const emojisArr = ['💘','😀','😍','😲','😡']            
 
 let prodBaseURL = 'https://w-telegram.herokuapp.com'
@@ -177,6 +179,7 @@ export {
   handleSort,
   sortByRecent,
   filteredMessages,
+  filterBy,
   emojisArr,
   prodBaseURL,
   prodAwsS3,