almost done left search lists

src/api-data/index.ts

@@ -289,6 +289,16 @@ const getMessagesById = async <T>(id:string): Promise<T | undefined> => {
   }
 };
 
+const getAllMessages = async <T>(): Promise<T | undefined> => {
+  try {
+    const { data : {data} } = await axios.get('/messages');
+    return data
+  } catch (e) {
+    forbidden(e)
+    return undefined
+  }
+};
+
 export {
   setToken,
   error,
@@ -317,5 +327,6 @@ export {
   sentAudioMessageById,
   sentVideoMessageById,
   sentFileMessageById,
-  getMessagesById
+  getMessagesById,
+  getAllMessages
 };

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

@@ -0,0 +1,73 @@
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemText from '@mui/material/ListItemText';
+import ListItemAvatar from '@mui/material/ListItemAvatar';
+import LibraryMusicIcon from '@mui/icons-material/LibraryMusic';
+import Divider from '@mui/material/Divider';
+import { makeStyles } from '@material-ui/core'
+
+import AlertInfo from '../../../../reusableComponents/AlertInfo';
+import { timeStampEU,handleDownload } from '../../../../../helpers'
+import { TAllMessages } from '../../../../../typescript/redux/allMessages/types'
+
+const useStyles = makeStyles({
+  container: {
+    width: '100%',
+    maxHeight: '860px',
+    overflowY: 'scroll',
+  '&::-webkit-scrollbar': {
+    width: '0.4em'
+  },
+  '&::-webkit-scrollbar-track': {
+    boxShadow: 'inset 0 0 6px rgba(0,0,0,0.00)',
+    webkitBoxShadow: 'inset 0 0 6px rgba(0,0,0,0.00)',
+    backgroundColor: '#eceeec',
+  },
+  '&::-webkit-scrollbar-thumb': {
+    backgroundColor: '#ccc8c8',
+    },
+  "&::-webkit-scrollbar-thumb:focus": {
+    backgroundColor: "#959595",
+          },
+  "&::-webkit-scrollbar-thumb:active": {
+    backgroundColor: "#959595",
+    },
+  },  
+    folderIcon: {
+      color: '#54b0fc',
+      cursor: 'pointer',
+      '&:hover': {
+        color: '#016cc3'
+      },
+  },
+  listItem: {
+    '&:hover': {
+      backgroundColor: '#f0f0f0',
+    }
+  },  
+})
+const AudioList = ({ allMessagesMemo }: { allMessagesMemo: TAllMessages }) => {
+  const classes = useStyles()
+    const filteredMessagesMemo =  allMessagesMemo.filter(({type}) => type === 'audio')
+    return filteredMessagesMemo.length > 0 ?(
+      <List className={classes.container}>
+        {filteredMessagesMemo.map(({ message, createdAt, fullType }) =>
+          <div key={createdAt}>
+            <ListItem alignItems="flex-start" className={classes.listItem}>
+              <ListItemAvatar>
+                <LibraryMusicIcon onClick={() =>
+                  handleDownload(`http://localhost:3000/${message}`, fullType)}
+                  className={classes.folderIcon} fontSize='large' />
+              </ListItemAvatar>
+              <ListItemText
+                primary={fullType}
+                secondary={timeStampEU(createdAt)}
+               />
+            </ListItem>
+            <Divider variant="inset"/>
+        </div>)}
+    </List>
+   ): <AlertInfo name='You do not have Audio yet!'/>  
+}
+
+export default AudioList

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

@@ -1,12 +1,8 @@
 import { makeStyles } from '@material-ui/core'
 import List from '@mui/material/List';
 import Stack from '@mui/material/Stack';
-import { useSelector,useDispatch } from 'react-redux';
-import { getStateMemo } from '../../../../../redux/chats/selector';
-import { getIsOpen } from '../../../../../redux/control/selector';
-import { sortByRecent } from '../../../../../helpers';
-import { asyncStartChatById } from '../../../../../redux/chat/operations';
-import { actionIsOpen } from '../../../../../redux/control/action';
+
+import { TChats } from '../../../../../typescript/redux/chats/types';
 import RecentItem from './RecentItem';
 import ChatItem from './ChatItem';
 import AlertInfo from '../../../../reusableComponents/AlertInfo';
@@ -17,9 +13,9 @@ const useStyles = makeStyles({
     justifyContent: 'space-around',
     paddingTop:20,
   },
-  list: {
+  container: {
     width: '100%',
-    maxHeight: '890px',
+    maxHeight: '860px',
     overflowY: 'scroll',
   '&::-webkit-scrollbar': {
     width: '0.4em'
@@ -41,34 +37,29 @@ const useStyles = makeStyles({
   },    
 })
 
-const ChatListRecent = ({value}:{value: string}) => {
+interface IChatListRecent {
+  value: string,
+  filteredAndSorted: TChats,
+  handleListItemClick:(companionId:string) => void
+}
+
+const ChatListRecent = ({value,filteredAndSorted,handleListItemClick}:IChatListRecent) => {
   const classes = useStyles()
-  const dispatch = useDispatch()
-  const { chats } = useSelector(getStateMemo)
-  const isOpen = useSelector(getIsOpen)
-  const handleListItemClick = (companionId: string) => {
-    isOpen&&dispatch(actionIsOpen(''))
-    dispatch(asyncStartChatById(companionId))
-    }
-  const filteredAndSortedChats = () => sortByRecent(chats).filter((el) => {
-    const credentials = el.name + ' ' + el.lastName
-    if(credentials.toLowerCase().includes(value.toLowerCase())) return el
-  })
-  const arr = filteredAndSortedChats()
+
 
 return (
   <>
-    {!value && arr.length > 0 &&
+    {!value && filteredAndSorted.length > 0 &&
     <Stack direction="row" className={classes.stack}>
-      {arr.slice(0, 6).map((chat) =>
+      {filteredAndSorted.slice(0, 6).map((chat) =>
       <RecentItem key={chat.companionId} handleListItemClick={handleListItemClick} chat={chat} />)}
       </Stack>}
-    {value && arr.length > 0 &&
-      <List className={classes.list} component="nav" aria-label="main mailbox folders">
-        {arr.map((chat) =>
+    {value && filteredAndSorted.length > 0 &&
+      <List className={classes.container} component="nav" aria-label="main mailbox folders">
+        {filteredAndSorted.map((chat) =>
         <ChatItem key={chat.companionId} handleListItemClick={handleListItemClick} chat={chat} />)}
       </List>}
-    {value && arr.length === 0 &&<AlertInfo name={`Can not find chat by request: ${value}`}/>}
+    {value && filteredAndSorted.length === 0 &&<AlertInfo name={`Can not find chat by request: ${value}`}/>}
   </>)  
 }
 

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

@@ -0,0 +1,74 @@
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemText from '@mui/material/ListItemText';
+import ListItemAvatar from '@mui/material/ListItemAvatar';
+import FolderIcon from '@mui/icons-material/Folder';
+import Divider from '@mui/material/Divider';
+import { makeStyles } from '@material-ui/core'
+
+import AlertInfo from '../../../../reusableComponents/AlertInfo';
+import { timeStampEU,handleDownload } from '../../../../../helpers'
+import { TAllMessages } from '../../../../../typescript/redux/allMessages/types'
+
+const useStyles = makeStyles({
+  container: {
+    width: '100%',
+    maxHeight: '860px',
+    overflowY: 'scroll',
+  '&::-webkit-scrollbar': {
+    width: '0.4em'
+  },
+  '&::-webkit-scrollbar-track': {
+    boxShadow: 'inset 0 0 6px rgba(0,0,0,0.00)',
+    webkitBoxShadow: 'inset 0 0 6px rgba(0,0,0,0.00)',
+    backgroundColor: '#eceeec',
+  },
+  '&::-webkit-scrollbar-thumb': {
+    backgroundColor: '#ccc8c8',
+    },
+  "&::-webkit-scrollbar-thumb:focus": {
+    backgroundColor: "#959595",
+          },
+  "&::-webkit-scrollbar-thumb:active": {
+    backgroundColor: "#959595",
+    },
+  }, 
+  folderIcon: {
+    color: '#54b0fc',
+    cursor: 'pointer',
+    '&:hover': {
+      color: '#016cc3'
+    },
+  },
+  listItem: {
+    '&:hover': {
+      backgroundColor: '#f0f0f0',
+    }
+  },  
+})
+
+const FilesList = ({ allMessagesMemo }: { allMessagesMemo: TAllMessages }) => {
+  const classes = useStyles()
+    const filteredMessagesMemo =  allMessagesMemo.filter(({type}) => type !== 'text')
+    return filteredMessagesMemo.length > 0 ?(
+      <List className={classes.container}>
+        {filteredMessagesMemo.map(({ message, createdAt, fullType }) =>
+          <div key={createdAt}>
+            <ListItem alignItems="flex-start" className={classes.listItem}>
+              <ListItemAvatar>
+                <FolderIcon onClick={() =>
+                  handleDownload(`http://localhost:3000/${message}`, fullType)}
+                  className={classes.folderIcon} fontSize='large' />
+              </ListItemAvatar>
+              <ListItemText
+                primary={fullType}
+                secondary={timeStampEU(createdAt)}
+              />
+            </ListItem>
+            <Divider variant="inset"/>
+        </div>)}
+    </List>
+   ): <AlertInfo name='You do not have Files yet!'/>  
+}
+
+export default FilesList

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

@@ -0,0 +1,88 @@
+
+import { makeStyles } from '@material-ui/core'
+import { useState } from 'react';
+import ImageListItem from '@mui/material/ImageListItem';
+import DownloadForOfflineIcon from '@mui/icons-material/DownloadForOffline';
+import { handleDownload,timeStampEU } from '../../../../../../helpers'
+
+const useStyles = makeStyles({ 
+  overlay: {
+    position: 'fixed',
+    top: 0,
+    left: 0,
+    width: '100vw',
+    height: '100vh',
+    zIndex: 100,
+    backgroundColor: 'rgba(104, 105, 104, 0.6)',
+    overflowY: 'hidden',
+    boxSizing: 'border-box',
+    display: 'flex',
+    justifyContent: 'center',
+    alignContent: 'center',
+    alignItems: 'center'
+  },
+  wrapper: {
+    width: '40%',
+    maxHeight: '80%',
+    position: 'relative',
+    display: 'flex',
+  },
+  downloadIcon: {
+    position: 'absolute',
+    content: '',
+    right: 0,
+    top: -40,
+    cursor: 'pointer',
+    color: '#e9e7e7',
+    padding: 0,
+    borderRadius: '50%',
+    '&:hover': {
+      backgroundColor: '#ffffff',
+      color: '#b8b7b7',
+    }
+  },
+  img: {
+    cursor:'pointer',
+    '&:hover': {
+      scale:0.98
+    }
+  },
+  time: {
+    position: 'absolute',
+    content: '',    
+    color: '#ffffff',
+    top: -30,
+    left: 0,
+    borderRadius: 10,
+    padding:'2px 6px 2px 6px',
+    backgroundColor:'#707070'
+  }
+});
+const MediaListItem = ({ message,fullType,updatedAt }: { message: string,fullType:string,updatedAt:string }) => {
+  const classes = useStyles();
+  const [watch, setWatch] = useState<boolean>(false)
+  const handleOpenWatch = () => !watch && setWatch(true)
+  const handleCloseWatch = (e:any) => e.target.id === 'overlay'&&watch&&setWatch(false)
+  
+  const url = `http://localhost:3000/${message}`
+  
+  return (watch ?
+    <div onClick={handleCloseWatch} id='overlay' className={classes.overlay}>
+      <div className={classes.wrapper}>
+        <span className={classes.time}>{timeStampEU(updatedAt)}</span>
+        <DownloadForOfflineIcon className={classes.downloadIcon} fontSize='large'
+         onClick={() => handleDownload(url, fullType)}/>
+        <img width='100%' height='auto' alt='imageItem' src={url} />
+       </div>
+    </div> :
+    <ImageListItem>
+      <img onClick={handleOpenWatch} className={classes.img}
+        src={`${url}?w=164&h=164&fit=crop&auto=format`}
+        srcSet={`${url}?w=164&h=164&fit=crop&auto=format&dpr=2 2x`}
+        alt='imageItem' loading="lazy" />
+    </ImageListItem>
+      
+  )
+}
+
+export default MediaListItem

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

@@ -0,0 +1,44 @@
+import ImageList from '@mui/material/ImageList';
+import { makeStyles } from '@material-ui/core'
+
+import MediaListItem from './MediaListItem';
+import AlertInfo from '../../../../reusableComponents/AlertInfo';
+import { TAllMessages } from '../../../../../typescript/redux/allMessages/types'
+
+const useStyles = makeStyles({
+  container: {
+    width: '100%',
+    maxHeight: '830px',
+    overflowY: 'scroll',
+  '&::-webkit-scrollbar': {
+    width: '0.4em'
+  },
+  '&::-webkit-scrollbar-track': {
+    boxShadow: 'inset 0 0 6px rgba(0,0,0,0.00)',
+    webkitBoxShadow: 'inset 0 0 6px rgba(0,0,0,0.00)',
+    backgroundColor: '#eceeec',
+  },
+  '&::-webkit-scrollbar-thumb': {
+    backgroundColor: '#ccc8c8',
+    },
+  "&::-webkit-scrollbar-thumb:focus": {
+    backgroundColor: "#959595",
+          },
+  "&::-webkit-scrollbar-thumb:active": {
+    backgroundColor: "#959595",
+    },
+  },  
+})
+
+const MediaList = ({ allMessagesMemo }: { allMessagesMemo: TAllMessages }) => {
+  const classes = useStyles()
+  const filteredMessagesMemo =  allMessagesMemo.filter(({ type }) => type === 'image')
+  return filteredMessagesMemo.length > 0 ?(
+      <ImageList className={classes.container} cols={3} rowHeight={164}>
+        {filteredMessagesMemo.map(({message,createdAt,fullType,updatedAt}) => 
+          <MediaListItem key={createdAt} message={message} fullType={fullType} updatedAt={updatedAt}/>)}
+      </ImageList>
+   ): <AlertInfo name='You do not have Media yet!'/>  
+}
+
+export default MediaList

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

@@ -0,0 +1,79 @@
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemText from '@mui/material/ListItemText';
+import ListItemAvatar from '@mui/material/ListItemAvatar';
+import Avatar from '@mui/material/Avatar';
+import Divider from '@mui/material/Divider';
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
+import { makeStyles } from '@material-ui/core'
+
+import AlertInfo from '../../../../reusableComponents/AlertInfo';
+import { timeStampEU,firstLetter,copied } from '../../../../../helpers'
+import { TAllMessages } from '../../../../../typescript/redux/allMessages/types'
+
+const useStyles = makeStyles({
+  container: {
+    width: '100%',
+    maxHeight: '860px',
+    overflowY: 'scroll',
+  '&::-webkit-scrollbar': {
+    width: '0.4em'
+  },
+  '&::-webkit-scrollbar-track': {
+    boxShadow: 'inset 0 0 6px rgba(0,0,0,0.00)',
+    webkitBoxShadow: 'inset 0 0 6px rgba(0,0,0,0.00)',
+    backgroundColor: '#eceeec',
+  },
+  '&::-webkit-scrollbar-thumb': {
+    backgroundColor: '#ccc8c8',
+    },
+  "&::-webkit-scrollbar-thumb:focus": {
+    backgroundColor: "#959595",
+          },
+  "&::-webkit-scrollbar-thumb:active": {
+    backgroundColor: "#959595",
+    },
+  },   
+  listItem: {
+    '&:hover': {
+      backgroundColor: '#f0f0f0',
+    }
+  },
+  copyIcon: {
+    color: '#54b0fc',
+    cursor: 'pointer',
+    '&:hover': {
+      color: '#016cc3'
+    },
+  },  
+})
+
+const TextList = ({ allMessagesMemo }: { allMessagesMemo: TAllMessages }) => {
+  const classes = useStyles()
+  const filteredMessagesMemo =  allMessagesMemo.filter(({type}) => type === 'text')
+   return filteredMessagesMemo.length > 0 ?(
+    <List className={classes.container}>
+       {filteredMessagesMemo.map(({ message, createdAt, lastName, name, color, avatarUrl }) =>
+      <div key={createdAt}>
+          <ListItem alignItems="flex-start" className={classes.listItem}>
+            <ListItemAvatar>
+              <Avatar alt={name} src={avatarUrl?`http://localhost:3000/${avatarUrl}`:undefined}
+                  sx={{ background: color, width: 38, height: 38}}>
+                  {`${firstLetter(name)}${firstLetter(lastName)}`}
+              </Avatar>
+            </ListItemAvatar>
+             <ListItemText style={{ wordBreak: 'break-word',marginRight:2 }} primary={message}
+               secondary={timeStampEU(createdAt)} secondaryTypographyProps={{color: '#020202',paddingTop:0.5}}
+             />
+            <CopyToClipboard onCopy={() => copied('Message')} text={message}>
+              <ContentCopyIcon className={classes.copyIcon} fontSize='large' />
+            </CopyToClipboard>             
+          </ListItem>
+          <Divider variant="inset" />
+      </div>)}
+    </List>
+   ): <AlertInfo name='You do not have Text yet!'/>  
+}
+
+export default TextList

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

@@ -0,0 +1,73 @@
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemText from '@mui/material/ListItemText';
+import ListItemAvatar from '@mui/material/ListItemAvatar';
+import VideoLibraryIcon from '@mui/icons-material/VideoLibrary';
+import Divider from '@mui/material/Divider';
+import { makeStyles } from '@material-ui/core'
+
+import AlertInfo from '../../../../reusableComponents/AlertInfo';
+import { timeStampEU,handleDownload } from '../../../../../helpers'
+import { TAllMessages } from '../../../../../typescript/redux/allMessages/types'
+
+const useStyles = makeStyles({
+  container: {
+    width: '100%',
+    maxHeight: '860px',
+    overflowY: 'scroll',
+  '&::-webkit-scrollbar': {
+    width: '0.4em'
+  },
+  '&::-webkit-scrollbar-track': {
+    boxShadow: 'inset 0 0 6px rgba(0,0,0,0.00)',
+    webkitBoxShadow: 'inset 0 0 6px rgba(0,0,0,0.00)',
+    backgroundColor: '#eceeec',
+  },
+  '&::-webkit-scrollbar-thumb': {
+    backgroundColor: '#ccc8c8',
+    },
+  "&::-webkit-scrollbar-thumb:focus": {
+    backgroundColor: "#959595",
+          },
+  "&::-webkit-scrollbar-thumb:active": {
+    backgroundColor: "#959595",
+    },
+  },   
+    folderIcon: {
+      color: '#54b0fc',
+      cursor: 'pointer',
+      '&:hover': {
+        color: '#016cc3'
+      },
+  },
+  listItem: {
+    '&:hover': {
+      backgroundColor: '#f0f0f0',
+    }
+  },  
+})
+const VideoList = ({ allMessagesMemo }: { allMessagesMemo: TAllMessages }) => {
+  const classes = useStyles()
+    const filteredMessagesMemo =  allMessagesMemo.filter(({type}) => type === 'video')
+    return filteredMessagesMemo.length > 0 ?(
+      <List className={classes.container}>
+        {filteredMessagesMemo.map(({ message, createdAt, fullType }) =>
+          <div key={createdAt}>
+            <ListItem key={createdAt} alignItems="flex-start" className={classes.listItem}>
+              <ListItemAvatar>
+                <VideoLibraryIcon onClick={() =>
+                  handleDownload(`http://localhost:3000/${message}`, fullType)}
+                  className={classes.folderIcon} fontSize='large' />
+              </ListItemAvatar>
+              <ListItemText
+                primary={fullType}
+                secondary={timeStampEU(createdAt)}
+               />
+            </ListItem>
+            <Divider variant="inset"/>
+        </div>)}
+    </List>
+   ): <AlertInfo name='You do not have Audio yet!'/>  
+}
+
+export default VideoList

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

@@ -1,14 +1,28 @@
 import BottomNavigation from '@mui/material/BottomNavigation';
 import BottomNavigationAction from '@mui/material/BottomNavigationAction';
-import React, { useState } from 'react';
+import { useState, useEffect } from 'react';
+import { useDispatch,useSelector } from 'react-redux';
 import { makeStyles } from '@material-ui/core'
 
 import ChatListRecent from './ChatListRecent'
-import NotDoneList from '../../../reusableComponents/NotDoneList';
+import FilesList from './FilesList';
+import MediaList from './MediaList';
+import TextList from './TextList';
+import AudioList from './AudioList'
+import VideoList from './VideoList';
+import { asyncGetAllMessages } from '../../../../redux/allMessages/operations';
+import { asyncGetChats } from '../../../../redux/chats/operations';
+import { getStateMemo } from '../../../../redux/chats/selector';
+import { getAllMessagesMemo } from '../../../../redux/allMessages/selector';
+import { getIsOpen } from '../../../../redux/control/selector';
+import { sortByRecent } from '../../../../helpers';
+import { asyncStartChatById } from '../../../../redux/chat/operations';
+import { actionIsOpen } from '../../../../redux/control/action';
+
 
 const useStyles = makeStyles({
   bottomNavigation: {
-  boxShadow: '0px 1px 1px 1px rgba(120,120,120,0.63)',
+    boxShadow: '0px 1px 1px 1px rgba(120,120,120,0.63)',
  },
  icon: {
   fontSize: 17,
@@ -16,18 +30,51 @@ const useStyles = makeStyles({
   marginBottom: 0,
   fontWeight:600
  },
-underline: {
+ underline: {
   fontSize: 45,
   lineHeight: 0,
  },
 })
 
-const SearchLists = ({value}:{value:string}) => {
-    const [isActive, setIsActive] = useState<number>(0)
-    const handleIsActive = (_e: React.SyntheticEvent<Element, Event>, newValue: number): void => setIsActive(newValue)
+interface ISearchLists {
+  value: string,
+  setValue: (value: string) => void
+}
+
+const SearchLists = ({ value,setValue }: ISearchLists) => {
     const classes = useStyles()
+    const dispatch = useDispatch()
+    const { chats } = useSelector(getStateMemo)
+    const allMessagesMemo = useSelector(getAllMessagesMemo)
+    const isOpen = useSelector(getIsOpen)
+    const [isActive, setIsActive] = useState<number>(0)
+    const handleIsActive = (_e: React.SyntheticEvent<Element, Event>, newValue: number): void => {
+      setIsActive(newValue)
+      setValue('')
+    }
     const Icon = ({ name }: { name: string }) => <span className={classes.icon}>{name}</span>
     const Label = () => <span className={classes.underline}>__</span>
+    const handleListItemClick = (companionId: string) => {
+      isOpen&&dispatch(actionIsOpen(''))
+      dispatch(asyncStartChatById(companionId))
+    }
+    const filterAndSort = () => sortByRecent(chats).filter((el) => {
+      const credentials = el.name + ' ' + el.lastName
+      if(credentials.toLowerCase().includes(value.toLowerCase())) return el
+    })
+    useEffect(() => {
+      dispatch(asyncGetAllMessages())
+      dispatch(asyncGetChats())
+      const handleReset = () => {
+         dispatch(asyncGetAllMessages())
+         dispatch(asyncGetChats())
+      }
+    const idInterval = setInterval(handleReset, 5000);
+    return () => clearInterval(idInterval);
+    }, [dispatch]);
+  
+    const filteredAndSorted = filterAndSort()  
+  
     return (
     <>
       <BottomNavigation
@@ -36,18 +83,20 @@ const SearchLists = ({value}:{value:string}) => {
         onChange={handleIsActive}
         className={classes.bottomNavigation}
       >
-            <BottomNavigationAction label={<Label/>} icon={<Icon name='Chats' />} />
-            <BottomNavigationAction label={<Label/>} icon={<Icon name='Media' />} />
-            <BottomNavigationAction label={<Label/>} icon={<Icon name='Files' />} />
-            <BottomNavigationAction label={<Label />} icon={<Icon name='Audio' />} />
-            <BottomNavigationAction label={<Label/>} icon={<Icon name='Video' />} />
+          <BottomNavigationAction label={<Label />} icon={<Icon name='Chats' />} />
+          <BottomNavigationAction label={<Label/>} icon={<Icon name='Files' />} />
+          <BottomNavigationAction label={<Label />} icon={<Icon name='Media' />} />
+          <BottomNavigationAction label={<Label/>} icon={<Icon name='Text' />} />
+          <BottomNavigationAction label={<Label />} icon={<Icon name='Audio' />} />
+          <BottomNavigationAction label={<Label/>} icon={<Icon name='Video' />} />
         </BottomNavigation>
-            {isActive === 0 && <ChatListRecent value={value}/>}
-            {isActive === 1 && <NotDoneList name='Media'/>}
-            {isActive === 2 && <NotDoneList name='Links'/>}
-            {isActive === 3 && <NotDoneList name='Files'/>}
-            {isActive === 4 && <NotDoneList name='Music'/>}
-            {isActive === 5 && <NotDoneList name='Voice'/>}
+            {isActive === 0 && <ChatListRecent value={value}
+              filteredAndSorted={filteredAndSorted} handleListItemClick={handleListItemClick} />}
+            {isActive === 1 && <FilesList allMessagesMemo={allMessagesMemo}/>}
+            {isActive === 2 && <MediaList allMessagesMemo={allMessagesMemo}/>}
+            {isActive === 3 && <TextList allMessagesMemo={allMessagesMemo}/>}
+            {isActive === 4 && <AudioList allMessagesMemo={allMessagesMemo}/>}
+            {isActive === 5 && <VideoList allMessagesMemo={allMessagesMemo}/>}
     </>      
     )
 }

src/components/HomePage/LeftBar/index.tsx

@@ -66,7 +66,7 @@ const LeftBar = () => {
       <Grid item lg={3} onMouseEnter={handleEnterOpenMenuSm} onMouseLeave={handleLeaveCloseMenuSm}>
         <SearchBar handleClick={handleClick} handleFocus={handleFocus}
           handleSearch={handleSearch} isOpen={isOpen} iMenu={iMenu} value={value}/>
-        {!iMenu&&isOpen && <SearchLists value={value}/>}
+        {!iMenu&&isOpen && <SearchLists value={value} setValue={setValue}/>}
         {!iMenu&&!isOpen &&<ChatsList/>}
         {!iMenu && isMenuSm && !isOpen && <SmallMenuBar handleSelectedMenu={handleSelectedMenu}
           setIsMenuSm={setIsMenuSm} />}

src/redux/allMessages/action/index.ts

@@ -0,0 +1,16 @@
+import { createAction } from '@reduxjs/toolkit';
+import { IAllMessagesState } from '../../../typescript/redux/allMessages/interfaces'
+
+const actionGetAllMessagesSuccess = createAction('getAllMessages/success', (value:IAllMessagesState) => ({
+  payload: value,
+}));
+
+const actionGetAllMessagesReject = createAction('getAllMessages/reject', () => ({
+  payload: null,
+}));
+
+
+export {
+  actionGetAllMessagesSuccess,
+  actionGetAllMessagesReject,
+};

src/redux/allMessages/operations/index.ts

@@ -0,0 +1,22 @@
+import {
+  actionGetAllMessagesSuccess,
+  actionGetAllMessagesReject,
+} from '../action';
+import { getAllMessages } from '../../../api-data';
+import { IAllMessagesState } from '../../../typescript/redux/allMessages/interfaces'
+
+
+const asyncGetAllMessages= () => async (dispatch:any) => {
+  try {
+    const data = await getAllMessages<IAllMessagesState>()
+    data && dispatch(actionGetAllMessagesSuccess(data))
+  } catch (e) {
+    dispatch(actionGetAllMessagesReject())
+  } 
+};
+
+export { asyncGetAllMessages };
+
+
+
+

src/redux/allMessages/reducer/index.ts

@@ -0,0 +1,24 @@
+import { createReducer } from '@reduxjs/toolkit';
+import { IAllMessagesState, IAllMessagesPayload} from '../../../typescript/redux/allMessages/interfaces';
+import {
+  actionGetAllMessagesSuccess,
+  actionGetAllMessagesReject,
+} from '../action';
+
+const initialState: IAllMessagesState = {
+  total: "0",
+  limit: "0",
+  page: "0",
+  messages: [],
+}
+
+const reducerAllMessages = createReducer(initialState, {
+  [actionGetAllMessagesSuccess.type]: (_, { payload }: IAllMessagesPayload) => {
+    return payload;
+  },
+  [actionGetAllMessagesReject.type]: (state, _) => {
+    return state;
+  },
+});
+
+export default reducerAllMessages;

src/redux/allMessages/selector/index.ts

@@ -0,0 +1,9 @@
+import { createSelector } from 'reselect';
+import { IState } from '../../../typescript/redux/interfaces'
+
+const getAllMessages = (state: IState) => state.allMessages.messages;
+const getState = (state: IState) => state.allMessages;
+const getAllMessagesMemo = createSelector([getAllMessages], messages => messages);
+
+export { getAllMessages,getState,getAllMessagesMemo };
+

src/redux/messages/action/index.ts

@@ -1,7 +1,7 @@
 import { createAction } from '@reduxjs/toolkit';
-import { TMessages } from '../../../typescript/redux/messages/types'
+import { IMessagesState } from '../../../typescript/redux/messages/interfaces'
 
-const actionGetMessagesSuccess = createAction('getMessages/success', (value:TMessages) => ({
+const actionGetMessagesSuccess = createAction('getMessages/success', (value:IMessagesState) => ({
   payload: value,
 }));
 

src/redux/messages/operations/index.ts

@@ -3,12 +3,12 @@ import {
   actionGetMessagesReject
 } from '../action';
 import { getMessagesById } from '../../../api-data';
-import { TMessages } from '../../../typescript/redux/messages/types'
+import { IMessagesState } from '../../../typescript/redux/messages/interfaces'
 
 
 const asyncGetMessagesById= (id:string,cb:any) => async (dispatch:any) => {
   try {
-    const data = await getMessagesById<TMessages>(id)
+    const data = await getMessagesById<IMessagesState>(id)
     data && dispatch(actionGetMessagesSuccess(data))
     cb&&cb()
   } catch (e) {

src/redux/messages/reducer/index.ts

@@ -6,12 +6,15 @@ import {
 } from '../action';
 
 const initialState: IMessagesState = {
-  messages: []
+  total: "0",
+  limit: "0",
+  page: "0",
+  messages: [],
 }
 
 const reducerMessages = createReducer(initialState, {
-  [actionGetMessagesSuccess.type]: (state, { payload: messages }: IMessagesPayload) => {
-    return {messages};
+  [actionGetMessagesSuccess.type]: (_, { payload }: IMessagesPayload) => {
+    return payload;
   },
   [actionGetMessagesReject.type]: (state, _) => {
     return state;

src/redux/rootReducer/index.ts

@@ -3,6 +3,7 @@ import { persistReducer } from 'redux-persist';
 import storage from 'redux-persist/lib/storage';
 
 import reducerMessages from '../messages/reducer'
+import reducerAllMessages from '../allMessages/reducer'
 import reducerContacts from '../contacts/reducer'
 import reducerChat from '../chat/reducer'
 import reducerChats from '../chats/reducer'
@@ -18,6 +19,7 @@ const authorizationPersistConfig = {
 export const rootReducer = combineReducers({
   isLoading: reducerLoading,
   messages: reducerMessages,
+  allMessages: reducerAllMessages,
   chat:reducerChat,
   chats: reducerChats,
   contacts:reducerContacts,

src/typescript/redux/allMessages/interfaces.ts

@@ -0,0 +1,17 @@
+import { TAllMessages } from './types'
+
+export interface IAllMessagesState  {
+  total: "0",
+  limit: "0",
+  page: "0",
+  messages: TAllMessages,  
+}
+
+export interface IAllMessagesPayload {
+  payload: IAllMessagesState,
+}
+
+
+
+
+

src/typescript/redux/allMessages/types.ts

@@ -0,0 +1,19 @@
+export type TMessage = {
+  message:string,
+  name: string,
+  lastName: string,
+  avatarUrl:string,
+  color: string,
+  number:string,
+  _id: string,
+  type: string,
+  fullType:string,
+  companionId: string,
+  owner: any,
+  createdAt: string,
+  updatedAt: string,
+  __v: number
+}
+
+export type TAllMessages = TMessage[] | []
+

src/typescript/redux/interfaces.ts

@@ -2,11 +2,13 @@ import { IAuthorizationState } from './authorization/interfaces'
 import { IContactsState } from './contacts/interfaces'
 import { IChatsState } from './chats/interfaces'
 import { TChat } from './chat/types'
-import { IMessagesState} from './messages/interfaces'
+import { IMessagesState } from './messages/interfaces'
+import { IAllMessagesState} from './allMessages/interfaces'
 import { IControlState } from './control/interfaces'
 
 export interface IState {
   messages: IMessagesState,
+  allMessages:IAllMessagesState,
   contacts: IContactsState,
   chat:TChat,
   chats: IChatsState,

src/typescript/redux/messages/interfaces.ts

@@ -1,11 +1,14 @@
 import { TMessages } from './types'
 
 export interface IMessagesState  {
-  messages: TMessages
+  total: "0",
+  limit: "0",
+  page: "0",
+  messages: TMessages,  
 }
 
 export interface IMessagesPayload {
-  payload: TMessages,
+  payload: IMessagesState,
 }