add ability to right list

src/App.tsx

@@ -8,7 +8,7 @@ import DateFnsUtils from '@date-io/date-fns';
 import s from './App.module.css';
 import { getToken } from './redux/authorization/selector'
 import { asyncLogout, asyncCurrentUser } from './redux/authorization/operations'
-import { setToken } from './api-data'
+import { setToken,onlineUser } from './api-data'
 import PrivateRoute from './components/reusableComponents/Routes/PrivateRoute';
 import PublicRoute from './components/reusableComponents/Routes/PublicRoute';
 import {Load,CLoad} from './components/reusableComponents/Loader/Loader';
@@ -41,7 +41,11 @@ function App() {
       dispatch(asyncCurrentUser())
     }
     const handleKeepIn = async () => {
-     if (localStorage.isChecked === 'false') await dispatch(asyncLogout())
+      if (localStorage.isChecked === 'false') {
+        dispatch(asyncLogout())
+      } else if(localStorage.isChecked === 'false') {
+        await onlineUser()
+      }
     }
     window.addEventListener("beforeunload",handleKeepIn)
     return () => window.removeEventListener("beforeunload",handleKeepIn)

src/api-data/index.ts

@@ -64,6 +64,16 @@ const logoutUser = async <T>():Promise<T | undefined> => {
   }
 };
 
+const onlineUser = async <T>():Promise<T | undefined> => {
+  try {
+    const { data } = await axios.post('/auth/online');
+    success(`ONLINE`);
+    return data
+  } catch (e) {
+    return undefined
+  }
+};
+
 const updateCredentials = async <T>(name: string,lastName: string):Promise<T | undefined> => {
   try {
     const { data : {data} } = await axios.patch('/users/current', { name, lastName });
@@ -154,6 +164,7 @@ export {
   authorizeUser,
   loginUser,
   logoutUser,
+  onlineUser,
   updateCredentials,
   updateUserAvatar,
   currentUser,

src/components/AuthPage/Authorization/index.tsx

@@ -4,9 +4,7 @@ import Checkbox from '@mui/material/Checkbox';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import React from 'react';
 
-import { countries } from './countries'
-
-
+import { countries } from '../../../helpers/countries'
 
 const useStyles = makeStyles({
   container: {
@@ -57,6 +55,7 @@ interface IAuthorizationForm {
   setCountry: React.Dispatch<React.SetStateAction<string>>,
   isChecked: boolean,
 }
+
 interface ICountry {
   name: string,
   code: string

src/components/AuthPage/Registration/index.tsx

@@ -4,6 +4,7 @@ import { useDispatch } from 'react-redux';
 
 import UploadAvatar from '../../reusableComponents/DropZone/UploadAvatar'
 import { asyncCreateUser } from '../../../redux/authorization/operations'
+import { format } from '../../../helpers'
 
 const useStyles = makeStyles({
   container: {
@@ -37,7 +38,6 @@ const Registration = () => {
   const [lastName, setLastName] = useState<string>('')
   const [upload, setUpload] = useState<any>(null)
   const dispatch = useDispatch()
-  const format = (a: string) => a.split(' ').join('').trim()
 
   const isValidCredentials = () => {
     const validName = name.length

src/components/AuthPage/SMSCode/index.tsx

@@ -3,7 +3,6 @@ import { makeStyles, TextField, Typography, IconButton } from '@material-ui/core
 import ModeEditOutlineOutlinedIcon from '@mui/icons-material/ModeEditOutlineOutlined';
 import React from 'react';
 
-
 const useStyles = makeStyles({
   container: {
     display: 'flex',

src/components/AuthPage/index.tsx

@@ -8,7 +8,7 @@ import Registration from './Registration'
 import { authorizeUser } from '../../api-data'
 import { asyncLogin } from '../../redux/authorization/operations'
 import { actionIsLoading } from '../../redux/loading/action'
-import { is } from 'date-fns/locale';
+import { format } from '../../helpers'
 
 const AuthPage = () => {
   const [isQR, setIsQR] = useState<boolean>(false)
@@ -25,8 +25,6 @@ const AuthPage = () => {
     isCheckedLC && setIsChecked(isCheckedLC === 'true'?true:false)
   }, [])
 
-  const format = (a: string) => a.split(' ').join('').trim()
-
   const handleIsQR = (): void => setIsQR(!isQR)
 
   const handleSendCode = async (): Promise<void> => {

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

@@ -3,8 +3,8 @@ import BottomNavigationAction from '@mui/material/BottomNavigationAction';
 import React, { useState } from 'react';
 import { makeStyles } from '@material-ui/core'
 
-import ChatListRecent from '../ChatListRecent'
-import NotDone from '../../../../reusableComponents/NotDone'
+import ChatListRecent from './ChatListRecent'
+import NotDone from '../../../reusableComponents/NotDone'
 
 const useStyles = makeStyles({
     bottomNavigation: {

src/components/HomePage/LeftBar/index.tsx

@@ -3,7 +3,7 @@ import { createPortal } from 'react-dom';
 
 import Grid from '@mui/material/Grid'
 import SmallMenuBar from './SmallMenuBar'
-import SearchLists from './SearchBar/SearchLists'
+import SearchLists from './SearchLists';
 import SearchBar from './SearchBar'
 import ChatsList from './ChatsList'
 import MenuBar from './MenuBar'

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

@@ -0,0 +1,53 @@
+import BottomNavigation from '@mui/material/BottomNavigation';
+import BottomNavigationAction from '@mui/material/BottomNavigationAction';
+import React, { useState } from 'react';
+import { makeStyles } from '@material-ui/core'
+
+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
+    },
+})
+
+const ProfileLists = () => {
+    const [isActive, setIsActive] = useState<number>(0)
+    const handleIsActive = (_e: React.SyntheticEvent<Element, Event>, newValue: number): void => setIsActive(newValue)
+    const classes = useStyles()
+    const Icon = ({ name }: { name: string }) => <span className={classes.icon}>{name}</span>
+    const Label = () => <span className={classes.underline}>__</span>
+    return (
+    <>
+      <BottomNavigation
+        showLabels
+        value={isActive}
+        onChange={handleIsActive}
+        className={classes.bottomNavigation}
+      >
+            <BottomNavigationAction label={<Label/>} icon={<Icon name='Media' />} />
+            <BottomNavigationAction label={<Label/>} icon={<Icon name='Files' />} />
+            <BottomNavigationAction label={<Label/>} icon={<Icon name='Links' />} />
+            <BottomNavigationAction label={<Label/>} icon={<Icon name='Music' />} />
+            <BottomNavigationAction label={<Label/>} icon={<Icon name='Voice' />}  />
+            <BottomNavigationAction label={<Label/>} icon={<Icon name='Groups' />}  />
+        </BottomNavigation>
+            {isActive === 0 && <NotDoneList name='Media'/>}
+            {isActive === 1 && <NotDoneList name='Files'/>}
+            {isActive === 2 && <NotDoneList name='Links'/>}
+            {isActive === 3 && <NotDoneList name='Music'/>}
+            {isActive === 4 && <NotDoneList name='Voice'/>}
+            {isActive === 5 && <NotDoneList name='Groups'/>}
+    </>      
+    )
+}
+
+export default ProfileLists

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

@@ -0,0 +1,46 @@
+import Paper from '@mui/material/Paper';
+import MenuList from '@mui/material/MenuList';
+import MenuItem from '@mui/material/MenuItem';
+import ListItemText from '@mui/material/ListItemText';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import PhoneIcon from '@mui/icons-material/Phone';
+import NotificationsIcon from '@mui/icons-material/Notifications';
+import { makeStyles } from '@material-ui/core'
+
+
+const useStyles = makeStyles({
+    container: {
+    width: '100%',
+    marginBottom:16
+    },
+    list: {
+      background:'#fdfdfd'
+    },
+    listIcon: {
+        marginRight: 15,
+    },
+})
+
+const ProfileMenu = () => {
+  const classes = useStyles()
+  return (
+    <Paper className={classes.container}>
+      <MenuList className={classes.list}>
+        <MenuItem onClick={() => console.log('clicked Phone')}>
+          <ListItemIcon className={classes.listIcon}>
+            <PhoneIcon fontSize="medium" />
+          </ListItemIcon>
+          <ListItemText primary='+380995688412' secondary='Phone'/>
+        </MenuItem>
+        <MenuItem onClick={() => console.log('clicked Notification')}>
+          <ListItemIcon className={classes.listIcon}>
+            <NotificationsIcon fontSize="medium" />
+          </ListItemIcon>
+          <ListItemText primary='Notification'/>
+        </MenuItem>
+      </MenuList>
+    </Paper>
+  );
+}
+
+export default ProfileMenu

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

@@ -0,0 +1,59 @@
+import Stack from '@mui/material/Stack';
+import IconButton from '@mui/material/IconButton';
+import PersonAddAltIcon from '@mui/icons-material/PersonAddAlt';
+import CloseIcon from '@mui/icons-material/Close';
+import { makeStyles, Typography } from '@material-ui/core'
+import { firstLetter,slicedWord,timeStamp } from '../../../../../../../helpers'
+import { useSelector } from 'react-redux';
+import { getState } from '../../../../../../../redux/chat/selector'
+
+const useStyles = makeStyles({
+  container: {
+    width:'100%'
+  },
+  imgContainer: {
+    position:'relative',
+    width: '100%',
+    height: 488,
+    color: '#ffffff',
+    display: 'flex',
+    justifyContent: 'center',
+    alignContent: 'center',
+    alignItems: 'center',
+    fontSize:200
+  },
+  nameTile: {
+    position:'absolute',
+    color: '#ffffff',
+    fontWeight:600,
+    fontSize: 24,
+    zIndex:10,
+    top: 415,
+    left:35
+  },
+  timeTile: {
+    position:'absolute',
+    color: '#cfcfcf',
+    fontSize: 18,
+    top: 450,
+    left:35
+  },    
+})
+
+const ProfilePicture = () => {
+  const classes = useStyles()
+  const { chat : { name,lastName,avatarUrl,online,color } } = useSelector(getState)
+  return (
+    <div className={classes.container}>
+      {avatarUrl ? <img className={classes.imgContainer} width='488px' height='488px' alt='avatar'
+        src={`http://localhost:3000/${avatarUrl}`}></img> :
+        <div className={classes.imgContainer} style={{ background: `linear-gradient(${color} 75%, #4e4e4e)` }}>
+        {`${firstLetter(name)}${firstLetter(lastName)}`}</div>}
+      <span className={classes.nameTile}>{`${firstLetter(name)}${slicedWord(name, 15, 1)}
+        ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}</span>
+      <span className={classes.timeTile}>{online === 'true'?'online':`last seen ${timeStamp(online)}`}</span>
+    </div>
+  )
+}
+
+export default ProfilePicture

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

@@ -1,10 +1,11 @@
 import { makeStyles } from '@material-ui/core'
 import ToolBar from './ToolBar'
-import NotDone from '../../../../../reusableComponents/NotDone'
-import { chats } from './chats'
+import ProfilePicture from './ProfilePicture'
+import ProfileMenu from './ProfileMenu'
+import ProfileLists from './ProfileLists'
 
 const useStyles = makeStyles({
-    listAbsolute: {
+    containerAbsolute: {
         position: 'absolute',
         top: 58,
         width: 506,
@@ -12,20 +13,23 @@ const useStyles = makeStyles({
         maxHeight: '905px',
         minHeight: '905px',
         overflowY: 'scroll',
+        overflowX: 'hidden',
+        backgroundColor:'#ffffff'
     }
 })
 
 const CredentialsList= () => {
   const classes = useStyles()
     return (
-<div>
-     <ToolBar/>
-     <div className={classes.listAbsolute}>
-        {chats.map(() =>
-        <NotDone name='Profile credentials' />)}
+    <div>
+        <ToolBar />
+        <div className={classes.containerAbsolute}>
+          <ProfilePicture />
+          <ProfileMenu />
+          <ProfileLists/>
      </div>
-</div>
-    )
+   </div>
+  )
 }
 
 export default CredentialsList

src/components/HomePage/RightBar/HeaderBar/RightLists/SearchList/Search/index.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import React, { useState } from "react";
 import InputBase from '@mui/material/InputBase';
 import Stack from '@mui/material/Stack';
 import IconButton from '@mui/material/IconButton';
@@ -7,9 +7,10 @@ import CloseIcon from '@mui/icons-material/Close';
 import CalendarTodayIcon from '@mui/icons-material/CalendarToday';
 import { styled } from '@mui/material/styles';
 import { makeStyles } from '@material-ui/core'
-import { useDispatch } from "react-redux";
+import { useDispatch,useSelector } from "react-redux";
 
 import { actionIsOpen } from '../../../../../../../redux/control/action'
+import { getMessages } from '../../../../../../../redux/messages/selector'
 import StaticDatePicker from "../../../../../../reusableComponents/StaticDatePicker";
 
 const SearchBar = styled('div')(({ theme }:any) => ({
@@ -65,11 +66,17 @@ const useStyles = makeStyles({
   },
 })
 
-const Search = () => {
+interface ISearch {
+  handleSearch: (e:React.ChangeEvent<HTMLInputElement>) => void
+}
+
+const Search = ({handleSearch}:ISearch) => {
   const dispatch = useDispatch()
   const [date, changeDate] = useState<any>(new Date());
   const classes = useStyles()
-  console.log(date, 'data from dataPicker')
+  const messages = useSelector(getMessages)
+  const disabled = messages.length > 0 ? false : true
+ 
   return (
     <Stack className={classes.container} direction="row" spacing={1.5}>
       <IconButton onClick={() => dispatch(actionIsOpen(''))} aria-label="delete" size="medium">
@@ -80,14 +87,16 @@ const Search = () => {
               <SearchIcon />
           </SearchIconWrapper>
           <StyledInputBase
-             placeholder="Search"
+            disabled={disabled}
+            onChange={handleSearch}
+            placeholder="Search"
             inputProps={{ 'aria-label': 'search' }}
           />
       </SearchBar>      
       <IconButton  aria-label="delete" size="medium">
         <CalendarTodayIcon fontSize='medium'/>
       </IconButton>
-      <StaticDatePicker date={date} changeDate={changeDate}  />
+      <StaticDatePicker disabled={disabled} date={date} changeDate={changeDate}  />
     </Stack>
     )
 }

src/components/HomePage/RightBar/HeaderBar/RightLists/SearchList/chats.tsx

@@ -1,219 +0,0 @@
-export  const chats = [
-    {
-        avatarUrl: '',
-        name: 'Grigore',
-        lastName:'Helena',
-        message: 'Hello'
-    },
-    {
-        avatarUrl: 'https://www.seekpng.com/png/full/114-1149126_apple-clipart-black-and-white-image-small-clip.png',
-        name: 'Grigfffffffffffffffvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvfffffffffffffdddddddddfffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
-        lastName:'Weddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddrr',
-        message: 'dddd'
-    },
-    {
-        avatarUrl: '',
-        name: 'Helena',
-        lastName:'Velikolug',
-        message: 'I am zaraza'
-    },
-    {
-        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/RightBar/HeaderBar/RightLists/SearchList/index.tsx

@@ -1,31 +1,74 @@
 import { makeStyles } from '@material-ui/core'
+import { useSelector } from 'react-redux'
+import React, { useState } from 'react'
+import MenuList from '@mui/material/MenuList';
+import Avatar from '@mui/material/Avatar';
+import MenuItem from '@mui/material/MenuItem';
+import ListItemText from '@mui/material/ListItemText';
 import Search from './Search'
-import NotDone from '../../../../../reusableComponents/NotDone'
-import { chats } from './chats'
+import AlertInfo from "../../../../../reusableComponents/AlertInfo";
+import { getMessages } from '../../../../../../redux/messages/selector'
+import { format,timeStamp,firstLetter,slicedWord } from '../../../../../../helpers'
+import shortid from 'shortid';
+
 
 const useStyles = makeStyles({
-    listAbsolute: {
-        position: 'absolute',
-        top: 58,
-        width: 506,
-        borderLeft: 'solid 0.5px #9c9c9c',
-        maxHeight: '905px',
-        minHeight: '905px',
-        overflowY: 'scroll',
-    }
+  containerAbsolute: {
+    position: 'absolute',
+    top: 58,
+    width: 506,
+    borderLeft: 'solid 0.5px #9c9c9c',
+    maxHeight: '905px',
+    minHeight: '905px',
+    overflowY: 'scroll',
+    overflowX: 'hidden',
+    backgroundColor: '#ffffff'
+  },
+  listItem: {
+    marginBottom: 5,
+    paddingBottom: 5,
+    borderBottom: 'solid 1px #ececec',
+  },
+  message: {
+    width: '100%',
+    wordBreak: 'break-word',
+    textAlign: "left",
+    padding:'0 10px',
+    color:'#363636'
+  },
 })
 
 const SearchList= () => {
-  const classes = useStyles()
-    return (
-<div>
-     <Search/>
-     <div className={classes.listAbsolute}>
-        {chats.map(() =>
-        <NotDone name='Search List'/>)}
+    const classes = useStyles()
+    const messages = useSelector(getMessages)
+    const [value, setValue] = useState<string>('')
+    const handleSearch = (e: React.ChangeEvent<HTMLInputElement>): void => setValue(format(e.target.value))
+    const filteredMessages = () => messages.filter((el) =>
+        el.message.toLowerCase().includes(value.toLowerCase()))
+
+return (
+   <div>
+     <Search handleSearch={handleSearch}/>
+     <div className={classes.containerAbsolute}>
+        {messages.length > 0 ?
+            <MenuList >
+               {filteredMessages().map(({ name, lastName, avatarUrl, color, message, createdAt }) =>
+                <div className={classes.listItem}> 
+                   <MenuItem style={{marginBottom:5}} key={shortid.generate()} onClick={() => console.log('clicked message in rightList')}>
+                     <Avatar alt={name} src={avatarUrl?`http://localhost:3000/${avatarUrl}`:undefined}
+                      sx={{ background: color, width: 44, height: 44, marginRight:2 }}>
+                           {!avatarUrl&&`${firstLetter(name)}${firstLetter(lastName)}`}
+                       </Avatar>
+                    <ListItemText primary={`${firstLetter(name)}${slicedWord(name, 15, 1)} 
+                     ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`} secondary={timeStamp(createdAt)} />
+                   </MenuItem>
+                   <div className={classes.message}>{message}</div>
+                 </div> )}
+            </MenuList> :
+            <AlertInfo name='You do not have messages yet!' />}
      </div>
-</div>
-    )
+   </div>
+  )
 }
 
 export default SearchList

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

@@ -15,7 +15,6 @@ const useStyles = makeStyles({
   },
 })
 
-
 const HeaderBar = () => {
   const classes = useStyles()
     return (

src/components/reusableComponents/NotDone/index.tsx

@@ -2,13 +2,12 @@ import Alert from '@mui/material/Alert';
 import AlertTitle from '@mui/material/AlertTitle';
 import Stack from '@mui/material/Stack';
 
-
 const NotDone = ({ name }: { name: string }) => {
 return (
     <Stack sx={{ width: '100%' }} spacing={2}>
       <Alert severity="warning">
         <AlertTitle>Warning</AlertTitle>
-        The component has not done yet — <strong>{`${name}!`}</strong>
+        The component has not done yet {name}!
       </Alert>
     </Stack>
   );

src/components/HomePage/RightBar/HeaderBar/RightLists/CredentialsList/chats.tsx

@@ -1,4 +1,4 @@
-export  const chats = [
+export  const arr = [
     {
         avatarUrl: '',
         name: 'Grigore',

src/components/reusableComponents/NotDoneList/index.tsx

@@ -0,0 +1,19 @@
+import shortid from 'shortid';
+import Alert from '@mui/material/Alert';
+import AlertTitle from '@mui/material/AlertTitle';
+import Stack from '@mui/material/Stack';
+import { arr } from './arr'
+
+const NotDoneList = ({ name }: { name: string }) => {
+return (
+  <Stack sx={{ width: '100%' }} spacing={2}>
+    {arr.map(() => 
+      <Alert key={shortid.generate()} severity="warning">
+        <AlertTitle>Warning</AlertTitle>
+        The component has not done yet {name}!
+      </Alert>)}
+    </Stack>
+  );
+}
+
+export default NotDoneList

src/components/reusableComponents/StaticDatePicker/index.tsx

@@ -2,6 +2,7 @@ import { DatePicker } from "@material-ui/pickers";
 import { makeStyles } from '@material-ui/core'
 
 interface IStaticDatePicker {
+   disabled:boolean,
    date: Date,
    changeDate: React.Dispatch<React.SetStateAction<any>>,
 }
@@ -16,10 +17,11 @@ const useStyles = makeStyles({
     }
 })
 
-const StaticDatePicker = ({ date, changeDate }: IStaticDatePicker) => {
+const StaticDatePicker = ({ disabled, date, changeDate }: IStaticDatePicker) => {
     const classes = useStyles()
 return (
     <DatePicker
+        disabled={disabled}
         className={classes.container}
         autoOk
         inputVariant='outlined'

src/helpers/index.ts

@@ -1,3 +1,5 @@
+const format = (a: string) => a.split(' ').join('').trim()
+
 const firstLetter = (word: string) => word.slice(0, 1).toUpperCase()
 
 const slicedWord = (word: string, max: number, from: number = 0) =>
@@ -12,4 +14,4 @@ const timeStamp = (updatedAt: string) => new Date(updatedAt).toLocaleString("en-
 })
 
 
-export { firstLetter,slicedWord,timeStamp, }
+export { format,firstLetter,slicedWord,timeStamp, }