done list recent

src/components/HomePage/LeftBar/ChatsList/ChatItem/index.tsx

@@ -41,7 +41,7 @@ const StyledMenu = styled((props:any) => (
     boxShadow:
       'rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px',
     '& .MuiMenu-list': {
-      padding: '14px 14px',
+      padding: '8px 8px',
     },
     '& .MuiMenuItem-root': {
       marginBottom: theme.spacing(1),
@@ -189,15 +189,13 @@ const useStyles = makeStyles({
 
 interface IChatItem {
   chat: TChat,
-  selectedIndex:null | number,
-  i: number,
-  handleListItemClick: (i: number, companionId: string) => void,
-  handleNewMsgs: (e: any, i: number, companionId: string) => void,
-  setSelectedIndex: (i: null | number) => void,
+  handleListItemClick: (companionId: string) => void,
+  handleNewMsgs: (e: any,companionId: string) => void,
 }
-const  ChatItem = ({chat,selectedIndex,i,handleListItemClick,handleNewMsgs,setSelectedIndex}:IChatItem) => {
+const  ChatItem = ({chat,handleListItemClick,handleNewMsgs}:IChatItem) => {
   const classes = useStyles()
   const [anchorEl, setAnchorEl] = useState<any>(null);
+  const [selected, setSelected] = useState<boolean>(false);
   const open = Boolean(anchorEl);
   const { name, lastName, avatarUrl, color, companionId, mute, seen, total, watched,
     typing, online, lastMessage, lastMessageCreatedAt, createdAt } = chat
@@ -206,20 +204,20 @@ const  ChatItem = ({chat,selectedIndex,i,handleListItemClick,handleNewMsgs,setSe
     if (type === 'mute') muteChat(companionId)
     if (type === 'delete') removeChatForBoth(companionId)
     setAnchorEl(null)
-    setSelectedIndex(null)
+    setSelected(false)
   }
-  const handleContextMenu = (e: React.MouseEvent<HTMLDivElement>,i: number):void => {
+  const handleContextMenu = (e: React.MouseEvent<HTMLDivElement>):void => {
     e.preventDefault()
     setAnchorEl(e.currentTarget)
-    setSelectedIndex(i)
+    setSelected(true)
   }  
 
   return (
     <div>
       <ListItemButton
-        selected={selectedIndex === i}
-        onClick={() => handleListItemClick(i, companionId)}
-        onContextMenu={(e) => handleContextMenu(e,i)}
+        selected={selected}
+        onClick={() => handleListItemClick(companionId)}
+        onContextMenu={(e) => handleContextMenu(e)}
       >
         <ListItemIcon className={classes.listItem_iconAvatar}>
           <StyledBadge overlap="circular"  variant={online === 'true'?'dot':'standard'}
@@ -245,7 +243,7 @@ const  ChatItem = ({chat,selectedIndex,i,handleListItemClick,handleNewMsgs,setSe
                 {timeStampEU(lastMessageCreatedAt?lastMessageCreatedAt:createdAt)}
               </Typography>
             </div>
-            {lastMessage && total > seen ? <button onClick={(e) => handleNewMsgs(e, i,companionId)}
+            {lastMessage && total > seen ? <button onClick={(e) => handleNewMsgs(e,companionId)}
             className={mute?classes.listItem_iconRightBtnMute:classes.listItem_iconRightBtn}>{total-seen}</button> :
             <button  className={classes.listItem_iconRightBtnHidden}/>}
           </ListItemIcon>            

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

@@ -5,14 +5,15 @@ import { useSelector, useDispatch } from 'react-redux';
 
 import AlertInfo from '../../../reusableComponents/AlertInfo'
 import ChatItem from './ChatItem';
-import { notification,playNotificationWithoutPermission } from '../../../../helpers'
-import { getState } from '../../../../redux/chats/selector'
+import { notification,playNotificationWithoutPermission,sortByRecent } from '../../../../helpers'
+import { getStateMemo } from '../../../../redux/chats/selector'
 import { getChatMemo } from '../../../../redux/chat/selector'
 import { asyncGetChats } from '../../../../redux/chats/operations'
 import { asyncStartChatById } from '../../../../redux/chat/operations'
 import { actionRemoveChat } from '../../../../redux/chat/action'
 import { actionScroll, actionIsOpen } from '../../../../redux/control/action'
 import { getIsOpen } from '../../../../redux/control/selector';
+import { TChats } from '../../../../typescript/redux/chats/types';
 
 const useStyles = makeStyles({
   list: {
@@ -43,22 +44,21 @@ const ChatsList = () => {
   const classes = useStyles()
   const dispatch = useDispatch()
   const ref = useRef<any>(null)
-  const [selectedIndex, setSelectedIndex] = useState<null | number>(null);
-  const { total, chats } = useSelector(getState)
+  const [sortedChats, setSortedChats] = useState<TChats>([]);
+  const { total, chats } = useSelector(getStateMemo)
   const chat = useSelector(getChatMemo)
   const isOpen = useSelector(getIsOpen)
 
-  const handleListItemClick = (i: number, companionId: string) => {
-    dispatch(asyncStartChatById(companionId))
-    dispatch(actionScroll(false))
+  const handleListItemClick = (companionId: string) => {
     isOpen&&dispatch(actionIsOpen(''))
-    setSelectedIndex(i);
+    dispatch(asyncStartChatById(companionId))
   }
 
-  const handleNewMsgs = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>, i: number,companionId: string) => {
+  const handleNewMsgs = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>, companionId: string) => {
     e.stopPropagation()
-    dispatch(asyncStartChatById(companionId))
     dispatch(actionScroll(true))
+    isOpen&&dispatch(actionIsOpen(''))
+    dispatch(asyncStartChatById(companionId))
   }
 
   useEffect(() => {
@@ -73,11 +73,13 @@ const ChatsList = () => {
       dispatch(asyncStartChatById(companionId))
       dispatch(actionScroll(true))
     }
-    if (chat.companionId&&!chats.find((el) => el.companionId === chat.companionId))dispatch(actionRemoveChat())
+    const sorted = sortByRecent(chats)
+    setSortedChats(sorted)
+    if (chat.companionId&&!sorted.find((el) => el.companionId === chat.companionId))dispatch(actionRemoveChat())
     if (ref.current) {
       ref.current.forEach(({total,seen}: any,i:number) => {
         const oldDifferent = total - seen
-        const chat = chats[i]
+        const chat = sorted[i]
         if(chat === undefined) return
         const newDifferent = chat.total - chat.seen
         if (newDifferent > oldDifferent && !chat.mute) {
@@ -86,14 +88,14 @@ const ChatsList = () => {
         } 
       })
     }
-      ref.current = chats
-  }, [chats,chat,dispatch])  
+      ref.current = sorted
+  }, [chats, chat, dispatch]) 
 
   return total !== '0' ? (
     <List className={classes.list} component="nav"
       aria-label="main mailbox folders">
-      {chats.map((el, i: number) => <ChatItem key={el.number} chat={el} selectedIndex={selectedIndex} i={i}
-       handleListItemClick={handleListItemClick} handleNewMsgs={handleNewMsgs} setSelectedIndex={setSelectedIndex}/>)}
+      {sortedChats.map((el) => <ChatItem key={el.number} chat={el}  
+       handleListItemClick={handleListItemClick} handleNewMsgs={handleNewMsgs}/>)}
     </List>
   ):<AlertInfo name='You do not have any chats yet!' />;
 }

src/components/HomePage/LeftBar/ContactsList/ContactItem/index.tsx

@@ -40,7 +40,7 @@ const StyledMenu = styled((props:any) => (
     boxShadow:
       'rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px',
     '& .MuiMenu-list': {
-      padding: '14px 14px',
+       padding: '8px 8px',
     },
     '& .MuiMenuItem-root': {
       marginBottom: theme.spacing(1),
@@ -60,16 +60,14 @@ const useStyles = makeStyles({
 })
 interface IContactItem {
   contact: TContact,
-  selectedIndex: null | number,
-  setSelectedIndex: (i: null | number) => void,
-  i: number,
   handleListItemClick: (companionId: string) => void,
   isOpen: TIsOpen,
 }
-const  ContactItem = ({contact,selectedIndex,setSelectedIndex,i,handleListItemClick,isOpen}:IContactItem) => {
+const  ContactItem = ({contact,handleListItemClick,isOpen}:IContactItem) => {
   const classes = useStyles()
   const dispatch = useDispatch()
   const [anchorEl, setAnchorEl] = useState<any>(null);
+  const [selected, setSelected] = useState<boolean>(false);
   const open = Boolean(anchorEl);
   const { name, lastName, avatarUrl, color, companionId,createdAt, number,_id } = contact
 
@@ -80,20 +78,20 @@ const  ContactItem = ({contact,selectedIndex,setSelectedIndex,i,handleListItemCl
       isOpen === 'edit'&&dispatch(actionIsOpen('credentials'))
     }
     setAnchorEl(null)
-    setSelectedIndex(null)
+    setSelected(false)
   }
-  const handleContextMenu = (e: React.MouseEvent<HTMLDivElement>,i: number):void => {
+  const handleContextMenu = (e: React.MouseEvent<HTMLDivElement>):void => {
     e.preventDefault()
     setAnchorEl(e.currentTarget)
-    setSelectedIndex(i)
+    setSelected(true)
   } 
 
   return (
     <div>
       <ListItemButton
-        selected={selectedIndex === i}
+        selected={selected}
         onClick={() => handleListItemClick(companionId)}
-        onContextMenu={(e) => handleContextMenu(e, i)}
+        onContextMenu={(e) => handleContextMenu(e)}
       >
         <ListItemIcon className={classes.listItem_iconAvatar}>
         <Avatar alt={name} src={avatarUrl?`http://localhost:3000/${avatarUrl}`:undefined}

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

@@ -44,7 +44,6 @@ const  ContactsList = ({value,handleClick} : IContactList) => {
   const classes = useStyles()
   const dispatch = useDispatch()
   const { total, contacts } = useSelector(getState)
-  const [selectedIndex, setSelectedIndex] = useState<null | number>(null);
   const isOpen = useSelector(getIsOpen)
 
   const handleListItemClick = (companionId:string) => {
@@ -71,9 +70,8 @@ const  ContactsList = ({value,handleClick} : IContactList) => {
     <List
       className={classes.list} component="nav"
       aria-label="main mailbox folders">
-      {arr.length > 0 ? arr.map((contact,i) => <ContactItem key={contact.number} contact={contact}
-        selectedIndex={selectedIndex} setSelectedIndex={setSelectedIndex} i={i}
-        handleListItemClick={handleListItemClick} isOpen={isOpen}/>) :
+      {arr.length > 0 ? arr.map((contact) => <ContactItem key={contact.number}
+        contact={contact} handleListItemClick={handleListItemClick} isOpen={isOpen}/>) :
         <AlertInfo name={`Can not find contact by request : ${value}`} />}
       </List>
   ):<AlertInfo name='You do not have any contact yet!' />;

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

@@ -0,0 +1,135 @@
+import { makeStyles,Typography } from '@material-ui/core'
+import { useState } from 'react';
+import { styled } from '@mui/material/styles';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import VolumeOffIcon from '@mui/icons-material/VolumeOff';
+import ListItemButton from '@mui/material/ListItemButton';
+import Avatar from '@mui/material/Avatar';
+import ListItemText from '@mui/material/ListItemText';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import DoneAllIcon from '@mui/icons-material/DoneAll';
+import PushPinIcon from '@mui/icons-material/PushPin';
+
+import { TChat } from '../../../../../../typescript/redux/chats/types';
+import { firstLetter,slicedWord,timeStampEU } from '../../../../../../helpers';
+
+const StyledMenu = styled((props:any) => (
+  <Menu
+    elevation={0}
+    anchorOrigin={{
+      vertical: 'top',
+      horizontal: 'right',
+    }}
+    transformOrigin={{
+      vertical: 'bottom',
+      horizontal: 'right',
+    }}
+    {...props}
+  />
+))(({ theme }:any) => ({
+  '& .MuiPaper-root': {
+    borderRadius: 10,
+    marginTop: theme.spacing(0),
+    minWidth: 220,
+    color:
+      theme.palette.mode === 'light' ? 'rgb(55, 65, 81)' : theme.palette.grey[500],
+    boxShadow:
+      'rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px',
+    '& .MuiMenu-list': {
+      padding: '8px 8px',
+    },
+    '& .MuiMenuItem-root': {
+      marginBottom: theme.spacing(1),
+      '& .MuiSvgIcon-root': {
+        fontSize: 21,
+        color: theme.palette.text.secondary,
+        marginRight: theme.spacing(4),
+      }
+    },
+  },
+}));
+
+const useStyles = makeStyles({
+  listItemInnerText: {
+    display: 'flex',
+    alignContent: 'center',
+    alignItems: 'center',
+    flexWrap: 'nowrap',
+  },
+  listItem_iconAvatar: {
+    marginRight:10
+  },
+  listItem_iconRight: {
+    marginRight: 10,
+  },
+  listItem_icon_time: {
+    fontSize: 12,
+    marginLeft: 5,
+    paddingBottom:25,
+    color: '#1b1b1b'
+  },
+})
+
+interface IChatItem {
+  chat: TChat,
+  handleListItemClick: (companionId: string) => void,
+}
+
+const  ChatItem = ({chat,handleListItemClick}:IChatItem) => {
+  const classes = useStyles()
+  const [anchorEl, setAnchorEl] = useState<any>(null);
+  const [selected, setSelected] = useState<boolean>(false);
+  const open = Boolean(anchorEl);
+  const {name,lastName,avatarUrl,color,companionId,lastMessage,lastMessageCreatedAt,createdAt} = chat
+
+  const handleClose = (type: string | undefined): void => {
+    if (type === 'pin') console.log('pin to top')
+    setAnchorEl(null)
+    setSelected(false)
+  }
+  const handleContextMenu = (e: React.MouseEvent<HTMLDivElement>):void => {
+    e.preventDefault()
+    setAnchorEl(e.currentTarget)
+    setSelected(true)
+  }  
+
+  return (
+    <div>
+      <ListItemButton
+        selected={selected}
+        onClick={() => handleListItemClick(companionId)}
+        onContextMenu={(e) => handleContextMenu(e)}
+      >
+        <ListItemIcon className={classes.listItem_iconAvatar}>
+          <Avatar alt={name} src={avatarUrl?`http://localhost:3000/${avatarUrl}`:undefined}
+            sx={{ background: color, width: 54, height: 54 }}>
+            {!avatarUrl&&`${firstLetter(name)}${firstLetter(lastName)}`}
+          </Avatar>
+        </ListItemIcon> 
+        <ListItemText primary={`${firstLetter(name)}${slicedWord(name, 15, 1)} 
+            ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}
+            secondary={`${lastMessage ? slicedWord(lastMessage, 35) :
+            `${firstLetter(name)}${slicedWord(name, 8, 1)} joined Telegram`}`}/>
+        <ListItemIcon className={classes.listItem_iconRight}>
+          <Typography className={classes.listItem_icon_time} variant="h6" color="initial">
+            {timeStampEU(lastMessageCreatedAt?lastMessageCreatedAt:createdAt)}
+          </Typography>
+        </ListItemIcon>            
+      </ListItemButton>
+      <StyledMenu
+        id="demo-positioned-menu"
+        aria-labelledby="demo-positioned-button"
+        anchorEl={anchorEl}
+        open={open}
+        onClose={handleClose}
+      >
+         <MenuItem onClick={() => handleClose('pin')}>
+            <PushPinIcon /> 
+            Pin to top
+          </MenuItem>      
+       </StyledMenu>    
+    </div>
+  );
+}
+export default ChatItem

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

@@ -0,0 +1,49 @@
+import { makeStyles, Typography } from '@material-ui/core'
+import Avatar from '@mui/material/Avatar';
+import { slicedWord, firstLetter } from '../../../../../../helpers';
+import { TChat } from '../../../../../../typescript/redux/chats/types';
+
+const useStyles = makeStyles({
+  stackItem: {
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignContent: 'center',
+    alignItems: 'center',
+    padding:5,
+    borderRadius: 5,
+    cursor:'pointer',
+    '&:hover': {
+        background: '#eeeded'
+      }
+    },
+  titleName: {
+    color: '#575757',
+    fontSize: 16,
+    paddingTop:5
+  }
+})
+
+interface IRecentItem {
+  handleListItemClick: (companionId: string) => void,
+  chat:TChat,
+}
+
+const RecentItem = ({handleListItemClick,chat}:IRecentItem) => {
+  const classes = useStyles()
+  const { name, lastName,color,avatarUrl,companionId } = chat
+ 
+ 
+
+return (
+  <div onClick={() => handleListItemClick(companionId)} className={classes.stackItem}>
+     <Avatar alt={name} src={avatarUrl?`http://localhost:3000/${avatarUrl}`:undefined}
+       sx={{ background: color, width: 54, height: 54}}>
+       {`${firstLetter(name)}${firstLetter(lastName)}`}
+      </Avatar>
+      <Typography variant="h6" className={classes.titleName} >{`${firstLetter(name)}${slicedWord(name, 8, 1)}`}</Typography>
+  </div>
+  )
+}
+
+export default RecentItem

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

@@ -1,44 +1,75 @@
-import Avatar from '@mui/material/Avatar';
+import { makeStyles } from '@material-ui/core'
+import List from '@mui/material/List';
 import Stack from '@mui/material/Stack';
-import { makeStyles, Typography } from '@material-ui/core'
-
-import {arr} from '../../../../reusableComponents/NotDoneList/arr'
+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 RecentItem from './RecentItem';
+import ChatItem from './ChatItem';
+import AlertInfo from '../../../../reusableComponents/AlertInfo';
 
 const useStyles = makeStyles({
-    stack: {
-        display: 'flex',
-        justifyContent: 'space-around'
+  stack: {
+    display: 'flex',
+    justifyContent: 'space-around',
+    paddingTop:20,
+  },
+  list: {
+    width: '100%',
+    maxHeight: '890px',
+    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',
     },
-    stackItem: {
-        display: 'flex',
-        flexDirection: 'column',
-        justifyContent: 'center',
-        alignContent: 'center',
-        alignItems: 'center',
-        padding: 5,
-        borderRadius: 5,
-        '&:hover': {
-            background: '#eeeded'
-        }
+  "&::-webkit-scrollbar-thumb:focus": {
+    backgroundColor: "#959595",
+          },
+  "&::-webkit-scrollbar-thumb:active": {
+    backgroundColor: "#959595",
     },
-    titleName: {
-        color: '#6e6e6e',
-        fontSize: 16,
-        paddingTop:5
-    }
+  },    
 })
 
-const ChatListRecent = () => {
-    const classes = useStyles()
-    return (
+const ChatListRecent = ({value}:{value: string}) => {
+  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 &&
     <Stack direction="row" className={classes.stack}>
-      {arr && arr.slice(0, 6).map(({ name, avatarUrl,lastName },i:number) => <div key={i} className={classes.stackItem}>
-        <Avatar alt={name} src={avatarUrl?avatarUrl:undefined}
-              sx={{ background: '#2ab307', width: 54, height: 54 }}>{!avatarUrl&&`${lastName.slice(0,1).toUpperCase()}${lastName.slice(0,1).toUpperCase()}`}</Avatar>
-        <Typography variant="h6" className={classes.titleName} >{name.length < 9?name:`${name.slice(0,8)}...`}</Typography>
-          </div>)}
-    </Stack>   
-    )
+      {arr.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) =>
+        <ChatItem key={chat.companionId} handleListItemClick={handleListItemClick} chat={chat} />)}
+      </List>}
+    {value && arr.length === 0 &&<AlertInfo name={`Can not find chat by request: ${value}`}/>}
+  </>)  
 }
 
 export default ChatListRecent

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

@@ -1,219 +0,0 @@
-export  const users = [
-    {
-        avatarUrl: '',
-        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
-        lastName:'Wedrr',
-        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
-    },
-    {
-        avatarUrl: 'https://www.seekpng.com/png/full/114-1149126_apple-clipart-black-and-white-image-small-clip.png',
-        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
-        lastName:'Wedrr',
-        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
-    },
-    {
-        avatarUrl: '',
-        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
-        lastName:'Wedrr',
-        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
-    },
-    {
-        avatarUrl: 'https://www.seekpng.com/png/full/114-1149126_apple-clipart-black-and-white-image-small-clip.png',
-        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
-        lastName:'Wedrr',
-        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
-    },
-    {
-        avatarUrl: '',
-        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
-        lastName:'Wedrr',
-        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
-    },
-    {
-        avatarUrl: 'https://www.seekpng.com/png/full/114-1149126_apple-clipart-black-and-white-image-small-clip.png',
-        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
-        lastName:'Wedrr',
-        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
-    },
-    {
-        avatarUrl: '',
-        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
-        lastName:'Wedrr',
-        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
-    },
-    {
-        avatarUrl: '',
-        name: 'hrigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
-        lastName:'uedrr',
-        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
-    },
-    {
-        avatarUrl: '',
-        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
-        lastName:'kjedrr',
-        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
-    },
-    {
-        avatarUrl: 'https://www.seekpng.com/png/full/114-1149126_apple-clipart-black-and-white-image-small-clip.png',
-        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
-        lastName:'Wedrr',
-        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
-    },
-    {
-        avatarUrl: 'https://www.seekpng.com/png/full/114-1149126_apple-clipart-black-and-white-image-small-clip.png',
-        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
-        lastName:'Wedrr',
-        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
-    },
-    {
-        avatarUrl: 'https://www.seekpng.com/png/full/114-1149126_apple-clipart-black-and-white-image-small-clip.png',
-        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
-        lastName:'Wedrr',
-        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
-    },
-    {
-        avatarUrl: 'https://www.seekpng.com/png/full/114-1149126_apple-clipart-black-and-white-image-small-clip.png',
-        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
-        lastName:'Wedrr',
-        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
-    },
-    {
-        avatarUrl: 'https://www.seekpng.com/png/full/114-1149126_apple-clipart-black-and-white-image-small-clip.png',
-        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
-        lastName:'Wedrr',
-        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
-    },
-    {
-        avatarUrl: 'https://www.seekpng.com/png/full/114-1149126_apple-clipart-black-and-white-image-small-clip.png',
-        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
-        lastName:'Wedrr',
-        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
-    },
-    {
-        avatarUrl: 'https://www.seekpng.com/png/full/114-1149126_apple-clipart-black-and-white-image-small-clip.png',
-        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
-        lastName:'Wedrr',
-        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
-    },
-    {
-        avatarUrl: 'https://www.seekpng.com/png/full/114-1149126_apple-clipart-black-and-white-image-small-clip.png',
-        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
-        lastName:'Wedrr',
-        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
-    },
-    {
-        avatarUrl: 'https://www.seekpng.com/png/full/114-1149126_apple-clipart-black-and-white-image-small-clip.png',
-        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
-        lastName:'Wedrr',
-        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
-    },
-    {
-        avatarUrl: 'https://www.seekpng.com/png/full/114-1149126_apple-clipart-black-and-white-image-small-clip.png',
-        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
-        lastName:'Wedrr',
-        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
-    },
-    {
-        avatarUrl: 'https://www.seekpng.com/png/full/114-1149126_apple-clipart-black-and-white-image-small-clip.png',
-        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
-        lastName:'Wedrr',
-        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
-    },
-    {
-        avatarUrl: 'https://www.seekpng.com/png/full/114-1149126_apple-clipart-black-and-white-image-small-clip.png',
-        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
-        lastName:'Wedrr',
-        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
-    },
-    {
-        avatarUrl: 'https://www.seekpng.com/png/full/114-1149126_apple-clipart-black-and-white-image-small-clip.png',
-        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
-        lastName:'Wedrr',
-        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
-    },
-    {
-        avatarUrl: 'https://www.seekpng.com/png/full/114-1149126_apple-clipart-black-and-white-image-small-clip.png',
-        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
-        lastName:'Wedrr',
-        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
-    },
-    {
-        avatarUrl: 'https://www.seekpng.com/png/full/114-1149126_apple-clipart-black-and-white-image-small-clip.png',
-        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
-        lastName:'Wedrr',
-        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
-    },
-    {
-        avatarUrl: 'https://www.seekpng.com/png/full/114-1149126_apple-clipart-black-and-white-image-small-clip.png',
-        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
-        lastName:'Wedrr',
-        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
-    },
-    {
-        avatarUrl: 'https://www.seekpng.com/png/full/114-1149126_apple-clipart-black-and-white-image-small-clip.png',
-        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
-        lastName:'Wedrr',
-        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
-    },
-    {
-        avatarUrl: 'https://www.seekpng.com/png/full/114-1149126_apple-clipart-black-and-white-image-small-clip.png',
-        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
-        lastName:'Wedrr',
-        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
-    },
-    {
-        avatarUrl: 'https://www.seekpng.com/png/full/114-1149126_apple-clipart-black-and-white-image-small-clip.png',
-        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
-        lastName:'Wedrr',
-        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
-    },
-    {
-        avatarUrl: 'https://www.seekpng.com/png/full/114-1149126_apple-clipart-black-and-white-image-small-clip.png',
-        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
-        lastName:'Wedrr',
-        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
-    },
-    {
-        avatarUrl: 'https://www.seekpng.com/png/full/114-1149126_apple-clipart-black-and-white-image-small-clip.png',
-        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
-        lastName:'Wedrr',
-        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
-    },
-    {
-        avatarUrl: 'https://www.seekpng.com/png/full/114-1149126_apple-clipart-black-and-white-image-small-clip.png',
-        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
-        lastName:'Wedrr',
-        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
-    },
-    {
-        avatarUrl: 'https://www.seekpng.com/png/full/114-1149126_apple-clipart-black-and-white-image-small-clip.png',
-        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
-        lastName:'Wedrr',
-        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
-    },
-    {
-        avatarUrl: 'https://www.seekpng.com/png/full/114-1149126_apple-clipart-black-and-white-image-small-clip.png',
-        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
-        lastName:'Wedrr',
-        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
-    },
-    {
-        avatarUrl: 'https://www.seekpng.com/png/full/114-1149126_apple-clipart-black-and-white-image-small-clip.png',
-        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
-        lastName:'Wedrr',
-        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
-    },
-    {
-        avatarUrl: 'https://www.seekpng.com/png/full/114-1149126_apple-clipart-black-and-white-image-small-clip.png',
-        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
-        lastName:'Wedrr',
-        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
-    },
-    {
-        avatarUrl: 'https://www.seekpng.com/png/full/114-1149126_apple-clipart-black-and-white-image-small-clip.png',
-        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
-        lastName:'Wedrr',
-        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
-    },    
-]
-

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

@@ -7,20 +7,22 @@ import ChatListRecent from './ChatListRecent'
 import NotDoneList from '../../../reusableComponents/NotDoneList';
 
 const useStyles = makeStyles({
-    bottomNavigation: {
-        boxShadow: '0px 1px 1px 1px rgba(120,120,120,0.63)',
-        marginBottom: 20
-    },
-    icon: {
-        marginBottom:0,
-    },
-    underline: {
-        fontSize: 30,
-        lineHeight:0
-    },
+  bottomNavigation: {
+  boxShadow: '0px 1px 1px 1px rgba(120,120,120,0.63)',
+ },
+ icon: {
+  fontSize: 17,
+  lineHeight: 0,
+  marginBottom: 0,
+  fontWeight:600
+ },
+underline: {
+  fontSize: 45,
+  lineHeight: 0,
+ },
 })
 
-const SearchLists = () => {
+const SearchLists = ({value}:{value:string}) => {
     const [isActive, setIsActive] = useState<number>(0)
     const handleIsActive = (_e: React.SyntheticEvent<Element, Event>, newValue: number): void => setIsActive(newValue)
     const classes = useStyles()
@@ -36,12 +38,11 @@ const SearchLists = () => {
       >
             <BottomNavigationAction label={<Label/>} icon={<Icon name='Chats' />} />
             <BottomNavigationAction label={<Label/>} icon={<Icon name='Media' />} />
-            <BottomNavigationAction label={<Label/>} icon={<Icon name='Links' />} />
             <BottomNavigationAction label={<Label/>} icon={<Icon name='Files' />} />
-            <BottomNavigationAction label={<Label/>} icon={<Icon name='Music' />}  />
-            <BottomNavigationAction label={<Label/>} icon={<Icon name='Voice' />}  />
+            <BottomNavigationAction label={<Label />} icon={<Icon name='Audio' />} />
+            <BottomNavigationAction label={<Label/>} icon={<Icon name='Video' />} />
         </BottomNavigation>
-            {isActive === 0 && <ChatListRecent />}
+            {isActive === 0 && <ChatListRecent value={value}/>}
             {isActive === 1 && <NotDoneList name='Media'/>}
             {isActive === 2 && <NotDoneList name='Links'/>}
             {isActive === 3 && <NotDoneList name='Files'/>}

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

@@ -32,7 +32,7 @@ const StyledMenu = styled((props:any) => (
     boxShadow:
       'rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px',
     '& .MuiMenu-list': {
-      padding: '14px 14px',
+      padding: '8px 8px',
     },
     '& .MuiMenuItem-root': {
       marginBottom: theme.spacing(1),

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 />}
+        {!iMenu&&isOpen && <SearchLists value={value}/>}
         {!iMenu&&!isOpen &&<ChatsList/>}
         {!iMenu && isMenuSm && !isOpen && <SmallMenuBar handleSelectedMenu={handleSelectedMenu}
           setIsMenuSm={setIsMenuSm} />}

src/helpers/index.ts

@@ -1,5 +1,6 @@
 import { toast } from 'react-toastify';
 import FileSaver from 'file-saver';
+import { TChats } from '../typescript/redux/chats/types';
 
 const format = (a: string) => a.split(' ').join('').trim()
 
@@ -24,6 +25,15 @@ const timeStampEU = (updatedAt: string) => new Date(updatedAt).toLocaleString('e
     minute: '2-digit',
 })
 
+const timeStampEUFilter = (updatedAt: string) => new Date(updatedAt).toLocaleString('en-GB', {
+    year:'numeric',
+    month: 'short',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: '2-digit',
+    second: '2-digit',
+})
+
 const timeStampMessage = (updatedAt: string) => new Date(updatedAt).toLocaleString('en-GB',{
     hour: 'numeric',
     minute: '2-digit',
@@ -111,6 +121,14 @@ const handleSort = (sortBy: string, data: any,sort:boolean): any => {
     });
 };
 
+const sortByRecent = (chats:TChats) => [...chats].sort((a, b) => {
+  const aCreatedAt = a.lastMessageCreatedAt ? a.lastMessageCreatedAt : a.createdAt
+  const bCreatedAt = b.lastMessageCreatedAt ? b.lastMessageCreatedAt : b.createdAt
+  const aTime = timeStampEUFilter(aCreatedAt)
+  const bTime = timeStampEUFilter(bCreatedAt)
+  return aTime < bTime ? 1 : -1
+})
+
 
 
 export {
@@ -119,6 +137,7 @@ export {
   slicedWord,
   timeStamp,
   timeStampEU,
+  timeStampEUFilter,
   timeStampMessage,
   timeStampFilter,
   playNotification,
@@ -126,5 +145,6 @@ export {
   copied,
   playNotificationWithoutPermission,
   handleDownload,
-  handleSort
+  handleSort,
+  sortByRecent
 }