finished search by date and request

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

@@ -12,6 +12,7 @@ import Brightness3Icon from '@mui/icons-material/Brightness3';
 import AnimationIcon from '@mui/icons-material/Animation';
 import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
 import BugReportIcon from '@mui/icons-material/BugReport';
+import Switch from '@mui/material/Switch';
 import { makeStyles } from '@material-ui/core'
 
 import Modal from '../../../reusableComponents/Modal'
@@ -41,13 +42,14 @@ const useStyles = makeStyles({
     }
 })
 
+const label = { inputProps: { 'aria-label': 'Switch demo' } };
+
 interface IContactsList {
   handleSelectedMenu: (i:number) => void
 }
 
 const MenuBar = ({handleSelectedMenu}:IContactsList) => {
   const classes = useStyles()
-
   return (
     <Modal> 
       <Paper className={classes.container}>
@@ -81,12 +83,14 @@ const MenuBar = ({handleSelectedMenu}:IContactsList) => {
             <Brightness3Icon fontSize="medium" />
           </ListItemIcon>
           <ListItemText>Night Mode</ListItemText>
+          <Switch {...label} />
         </MenuItem>
         <MenuItem onClick={() => handleSelectedMenu(5)}>
           <ListItemIcon className={classes.listIcon}>
             <AnimationIcon fontSize="medium" />
           </ListItemIcon>
-          <ListItemText>Animation</ListItemText>
+          <ListItemText>Animations</ListItemText>
+          <Switch {...label} defaultChecked />
         </MenuItem>
         <MenuItem onClick={() => handleSelectedMenu(6)}>
           <ListItemIcon className={classes.listIcon}>

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

@@ -74,10 +74,11 @@ interface ISearchBar {
   handleClick:() => void,
   handleFocus:() => void,
   handleSearch:(e: React.ChangeEvent<HTMLInputElement>) => void,
-  isOpen:boolean,
+  isOpen: boolean,
+  iMenu: number | null
 }
 
-const SearchBar = ({handleClick,handleFocus,handleSearch,isOpen}:ISearchBar) => {
+const SearchBar = ({handleClick,handleFocus,handleSearch,isOpen,iMenu}:ISearchBar) => {
   const classes = useStyles()
     return (
         <Toolbar className={classes.toolBar}>
@@ -91,7 +92,7 @@ const SearchBar = ({handleClick,handleFocus,handleSearch,isOpen}:ISearchBar) =>
                 <StyledInputBase
                  onFocus={handleFocus}
                  onChange={handleSearch}
-                 placeholder="Search"
+                 placeholder={iMenu === 2 ?'Search contacts':'Search'}
                  inputProps={{ 'aria-label': 'search' }}
                 />
             </Search>

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

@@ -3,7 +3,7 @@ import Stack from '@mui/material/Stack';
 import { makeStyles, Typography } from '@material-ui/core'
 import shortid from 'shortid';
 
-import {users} from './user'
+import {arr} from '../../../../reusableComponents/NotDoneList/arr'
 
 const useStyles = makeStyles({
     stack: {
@@ -33,7 +33,7 @@ const ChatListRecent = () => {
     const classes = useStyles()
     return (
     <Stack direction="row" className={classes.stack}>
-      {users && users.slice(0, 6).map(({ name, avatarUrl,lastName }) => <div key={shortid.generate()} className={classes.stackItem}>
+      {arr && arr.slice(0, 6).map(({ name, avatarUrl,lastName }) => <div key={shortid.generate()} 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>

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

@@ -4,7 +4,7 @@ import React, { useState } from 'react';
 import { makeStyles } from '@material-ui/core'
 
 import ChatListRecent from './ChatListRecent'
-import NotDone from '../../../reusableComponents/NotDone'
+import NotDoneList from '../../../reusableComponents/NotDoneList';
 
 const useStyles = makeStyles({
     bottomNavigation: {
@@ -42,11 +42,11 @@ const SearchLists = () => {
             <BottomNavigationAction label={<Label/>} icon={<Icon name='Voice' />}  />
         </BottomNavigation>
             {isActive === 0 && <ChatListRecent />}
-            {isActive === 1 && <NotDone name='Media'/>}
-            {isActive === 2 && <NotDone name='Links'/>}
-            {isActive === 3 && <NotDone name='Files'/>}
-            {isActive === 4 && <NotDone name='Music'/>}
-            {isActive === 5 && <NotDone name='Voice'/>}
+            {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'/>}
     </>      
     )
 }

src/components/HomePage/LeftBar/index.tsx

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

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

@@ -1,3 +1,4 @@
+import { useSelector } from 'react-redux';
 import Paper from '@mui/material/Paper';
 import MenuList from '@mui/material/MenuList';
 import MenuItem from '@mui/material/MenuItem';
@@ -5,8 +6,10 @@ 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 Switch from '@mui/material/Switch';
 import { makeStyles } from '@material-ui/core'
 
+import { getChat } from '../../../../../../../redux/chat/selector'
 
 const useStyles = makeStyles({
     container: {
@@ -21,8 +24,11 @@ const useStyles = makeStyles({
     },
 })
 
+const label = { inputProps: { 'aria-label': 'Switch demo' } };
+
 const ProfileMenu = () => {
   const classes = useStyles()
+  const { number } = useSelector(getChat)
   return (
     <Paper className={classes.container}>
       <MenuList className={classes.list}>
@@ -30,13 +36,14 @@ const ProfileMenu = () => {
           <ListItemIcon className={classes.listIcon}>
             <PhoneIcon fontSize="medium" />
           </ListItemIcon>
-          <ListItemText primary='+380995688412' secondary='Phone'/>
+          <ListItemText primary={number} secondary='Phone'/>
         </MenuItem>
         <MenuItem onClick={() => console.log('clicked Notification')}>
           <ListItemIcon className={classes.listIcon}>
             <NotificationsIcon fontSize="medium" />
           </ListItemIcon>
-          <ListItemText primary='Notification'/>
+          <ListItemText primary='Notification' />
+          <Switch {...label} defaultChecked />
         </MenuItem>
       </MenuList>
     </Paper>

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

@@ -1,11 +1,7 @@
-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 { makeStyles } from '@material-ui/core'
 import { firstLetter,slicedWord,timeStamp } from '../../../../../../../helpers'
 import { useSelector } from 'react-redux';
-import { getState } from '../../../../../../../redux/chat/selector'
+import { getChat } from '../../../../../../../redux/chat/selector'
 
 const useStyles = makeStyles({
   container: {
@@ -42,7 +38,7 @@ const useStyles = makeStyles({
 
 const ProfilePicture = () => {
   const classes = useStyles()
-  const { chat : { name,lastName,avatarUrl,online,color } } = useSelector(getState)
+  const  { name,lastName,avatarUrl,online,color }  = useSelector(getChat)
   return (
     <div className={classes.container}>
       {avatarUrl ? <img className={classes.imgContainer} width='488px' height='488px' alt='avatar'

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

@@ -1,4 +1,3 @@
-import React, { useState } from "react";
 import InputBase from '@mui/material/InputBase';
 import Stack from '@mui/material/Stack';
 import IconButton from '@mui/material/IconButton';
@@ -16,11 +15,7 @@ import StaticDatePicker from "../../../../../../reusableComponents/StaticDatePic
 const SearchBar = styled('div')(({ theme }:any) => ({
   position: 'relative',
   borderRadius: '20px',
-  backgroundColor: '#f1f0f0',
-  '&:hover': {
-    backgroundColor: '#f5f5f5',
-    color:'#2184f7',
-  }, 
+  backgroundColor: '#f1f0f0', 
   marginLeft: 0,
   width: '100%',
   [theme.breakpoints.up('sm')]: {
@@ -64,39 +59,50 @@ const useStyles = makeStyles({
     paddingLeft: 10,
     paddingBottom:3
   },
+  searchBar: {
+  '&:hover': {
+    backgroundColor: '#f5f5f5',
+    color:'#2184f7',
+  },    
+  }
 })
 
 interface ISearch {
-  handleSearch: (e:React.ChangeEvent<HTMLInputElement>) => void
+  handleSearch: (e: React.ChangeEvent<HTMLInputElement>) => void,
+  value: string,
+  setDate: React.Dispatch<any>,
+  date:any,
 }
 
-const Search = ({handleSearch}:ISearch) => {
+const Search = ({handleSearch,value,setDate,date}:ISearch) => {
   const dispatch = useDispatch()
-  const [date, changeDate] = useState<any>(new Date());
   const classes = useStyles()
   const messages = useSelector(getMessages)
   const disabled = messages.length > 0 ? false : true
- 
+  const handleOnOpen = () => setDate('')
+
   return (
     <Stack className={classes.container} direction="row" spacing={1.5}>
       <IconButton onClick={() => dispatch(actionIsOpen(''))} aria-label="delete" size="medium">
         <CloseIcon fontSize='medium'/>
       </IconButton>
-      <SearchBar>
+      <SearchBar className={disabled?undefined:classes.searchBar}>
           <SearchIconWrapper>
               <SearchIcon />
           </SearchIconWrapper>
           <StyledInputBase
             disabled={disabled}
             onChange={handleSearch}
-            placeholder="Search"
+            placeholder="Search by request and date"
+            value={value}
             inputProps={{ 'aria-label': 'search' }}
           />
       </SearchBar>      
       <IconButton  aria-label="delete" size="medium">
         <CalendarTodayIcon fontSize='medium'/>
       </IconButton>
-      <StaticDatePicker disabled={disabled} date={date} changeDate={changeDate}  />
+      <StaticDatePicker disabled={disabled} date={date}
+        changeDate={setDate} handleOnOpen={handleOnOpen} />
     </Stack>
     )
 }

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

@@ -1,14 +1,17 @@
 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 List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import Divider from '@mui/material/Divider';
 import ListItemText from '@mui/material/ListItemText';
+import ListItemAvatar from '@mui/material/ListItemAvatar';
+import Avatar from '@mui/material/Avatar';
+import Typography from '@mui/material/Typography';
 import Search from './Search'
 import AlertInfo from "../../../../../reusableComponents/AlertInfo";
 import { getMessages } from '../../../../../../redux/messages/selector'
-import { format,timeStamp,firstLetter,slicedWord } from '../../../../../../helpers'
+import { timeStamp,timeStampFilter,firstLetter,slicedWord } from '../../../../../../helpers'
 import shortid from 'shortid';
 
 
@@ -25,16 +28,10 @@ const useStyles = makeStyles({
     backgroundColor: '#ffffff'
   },
   listItem: {
-    marginBottom: 5,
-    paddingBottom: 5,
-    borderBottom: 'solid 1px #ececec',
-  },
-  message: {
-    width: '100%',
-    wordBreak: 'break-word',
-    textAlign: "left",
-    padding:'0 10px',
-    color:'#363636'
+    borderBottom: 'solid 1px #e6e6e6',
+    '&:hover': {
+      backgroundColor: '#e6e6e6',
+    }
   },
 })
 
@@ -42,30 +39,54 @@ const SearchList= () => {
     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()))
+    const [date, setDate] = useState<any>('');
+    const handleSearch = (e: React.ChangeEvent<HTMLInputElement>): void => setValue(e.target.value)
 
+    const filteredMessages = () => messages.filter((el) => {
+      if (!date) {
+        return el.message.toLowerCase().includes(value.toLowerCase())
+      } else if (el.message.toLowerCase().includes(value.toLowerCase())
+        && timeStampFilter(date) === timeStampFilter(el.createdAt)) {
+        return el
+      }
+    })
+  const arr = filteredMessages()
 return (
    <div>
-     <Search handleSearch={handleSearch}/>
+    <Search handleSearch={handleSearch} value={value}
+      setDate={setDate} date={date} />
      <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!' />}
+      {messages.length > 0 ? arr.length > 0 ?
+        <List sx={{ width: '100%' }}>
+          {arr.map(({ name, lastName, avatarUrl, color, message, createdAt }) => 
+            <ListItem alignItems="flex-start" className={classes.listItem} key={shortid.generate()}
+              onClick={() => console.log('clicked message in rightList')}>
+                   <ListItemAvatar>
+                      <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>
+                   </ListItemAvatar>
+                   <ListItemText
+                     primary={`${firstLetter(name)}${slicedWord(name, 15, 1)} 
+                      ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}
+                     secondary={<>
+                         <Typography
+                           sx={{ display: 'block',wordBreak:'break-word' }}
+                           component="span"
+                           variant="body2"
+                           color="text.primary"
+                         >
+                           {message}
+                         </Typography>
+                         {timeStamp(createdAt)}
+                       </>}
+                   />
+                 </ListItem>)}
+          </List> :
+        <AlertInfo name={!date&&value ? `Messages not found with Search by request: ${value}`:
+        `Messages not found with Search by DataPicker: ${timeStampFilter(date)} and request: ${value}`} />:
+        <AlertInfo name='You do not have messages yet!' />}
      </div>
    </div>
   )

src/components/reusableComponents/StaticDatePicker/index.tsx

@@ -5,6 +5,7 @@ interface IStaticDatePicker {
    disabled:boolean,
    date: Date,
    changeDate: React.Dispatch<React.SetStateAction<any>>,
+   handleOnOpen: () => void
 }
 
 const useStyles = makeStyles({
@@ -17,18 +18,19 @@ const useStyles = makeStyles({
     }
 })
 
-const StaticDatePicker = ({ disabled, date, changeDate }: IStaticDatePicker) => {
+const StaticDatePicker = ({ disabled, date, changeDate,handleOnOpen }: IStaticDatePicker) => {
     const classes = useStyles()
 return (
     <DatePicker
         disabled={disabled}
         className={classes.container}
-        autoOk
         inputVariant='outlined'
         orientation="portrait"
         variant="dialog"
         openTo="date"
+        autoOk
         value={date}
+        onOpen={handleOnOpen}
         onChange={changeDate}
         />
   );

src/helpers/index.ts

@@ -13,5 +13,11 @@ const timeStamp = (updatedAt: string) => new Date(updatedAt).toLocaleString("en-
     minute: '2-digit',
 })
 
+const timeStampFilter = (updatedAt: string) => new Date(updatedAt).toLocaleString("en-US", {
+    year:'numeric',
+    month: 'short',
+    day: 'numeric',
+})
+
 
-export { format,firstLetter,slicedWord,timeStamp, }
+export { format,firstLetter,slicedWord,timeStamp,timeStampFilter }

src/redux/chat/reducer/index.ts

@@ -12,6 +12,7 @@ const initialState: IChatState = {
      avatarUrl:'',
      color: '',
      online: '',
+     number:'',
      _id: '',
      companionId: '',
      owner: '',

src/typescript/redux/chat/types.ts

@@ -3,7 +3,8 @@ export type TChat = {
   lastName: string,
   avatarUrl:string,
   color: string,
-  online:string,
+  online: string,
+  number:string,
   _id: string,
   companionId: string,
   owner: any,