add date search

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

@@ -0,0 +1,34 @@
+import { DatePicker } from "@material-ui/pickers";
+import { makeStyles } from '@material-ui/core'
+
+interface IStaticDatePicker {
+   date: Date,
+   changeDate: React.Dispatch<React.SetStateAction<any>>,
+   handleOnOpen: () => void
+}
+
+const useStyles = makeStyles({
+container: {
+  position: 'absolute',
+
+},
+})
+
+const StaticDatePicker = ({ date, changeDate,handleOnOpen }: IStaticDatePicker) => {
+    const classes = useStyles()
+return (
+    <DatePicker
+        className={classes.container}
+        inputVariant='outlined'
+        orientation="portrait"
+        variant="dialog"
+        openTo="date"
+        autoOk
+        value={date?date:new Date()}
+        onOpen={handleOnOpen}
+        onChange={changeDate}
+        />
+  );
+};
+
+export default StaticDatePicker;

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

@@ -5,11 +5,13 @@ import SearchIcon from '@mui/icons-material/Search';
 import InputBase from '@mui/material/InputBase';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import Switch from '@mui/material/Switch';
+import CalendarTodayIcon from '@mui/icons-material/CalendarToday';
 import { styled } from '@mui/material/styles';
 import { makeStyles } from '@material-ui/core'
 import { useDispatch } from 'react-redux';
 import { updateCredentials } from '../../../../api-data';
 import { asyncCurrentUser } from '../../../../redux/authorization/operations';
+import StaticDatePicker from "./StaticDatePicker";
 
 
 const Search = styled('div')(({ theme }:any) => ({
@@ -75,14 +77,18 @@ interface ISearchBar {
   selectedIndex: number | null,
   value: string,
   sort: boolean,
+  setDate: React.Dispatch<any>,
+  date:any,
 }
 
-const SearchBar = ({ handleClick, handleFocus, handleSearch, isSearch, selectedIndex, value,sort }: ISearchBar) => {
+const SearchBar = ({ handleClick, handleFocus, handleSearch, isSearch, selectedIndex,
+  value, sort,setDate,date }: ISearchBar) => {
   const dispatch = useDispatch()
   const handleSort = () => {
     updateCredentials({ sort: !sort })
     dispatch(asyncCurrentUser())
   }
+  const handleOnOpen = () => setDate('')  
   
   const classes = useStyles()
     return (
@@ -94,16 +100,22 @@ const SearchBar = ({ handleClick, handleFocus, handleSearch, isSearch, selectedI
               <SearchIconWrapper>
                   <SearchIcon />
               </SearchIconWrapper>
-              <StyledInputBase
+          <StyledInputBase
                  value={value}
                  onFocus={handleFocus}
                  onChange={handleSearch}
-                 placeholder={selectedIndex === 1 ?'Search contacts':'Search'}
+                 placeholder='Search'
                  inputProps={{ 'aria-label': 'search' }}
               />
-          </Search>
-          <Switch onClick={handleSort} checked={sort} {...label} />
-        </Toolbar>
+        </Search>
+          <IconButton aria-label="delete" size="medium">
+          <StaticDatePicker  date={date}
+           changeDate={setDate} handleOnOpen={handleOnOpen} />        
+          <CalendarTodayIcon fontSize='medium'
+           style={{color:date?'#2184f7':'#b1aeae'}}/>
+        </IconButton>        
+        <Switch onClick={handleSort} checked={sort} {...label} />
+      </Toolbar>
     )
 }
 

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

@@ -56,21 +56,17 @@ underline: {
 
 interface ISearchLists {
   value: string,
-  setValue: (value: string) => void,
   sort: boolean
 }
 
-const SearchLists = ({ value,setValue,sort }: ISearchLists) => {
+const SearchLists = ({ value,sort }: ISearchLists) => {
     const classes = useStyles()
     const dispatch = useDispatch()
     const { chats } = useSelector(getStateMemo)
     const messagesMemo = useSelector(getAllMessagesMemo)
     const isOpen = useSelector(getIsOpen)
     const [isActive, setIsActive] = useState<number>(0)
-    const handleIsActive = (newValue: number): void => {
-      setIsActive(newValue)
-      setValue('')
-    }
+    const handleIsActive = (newValue: number): void => setIsActive(newValue) 
 
     const handleListItemClick = (companionId: string) => {
       isOpen&&dispatch(actionIsOpen(''))

src/components/HomePage/LeftBar/index.tsx

@@ -21,10 +21,12 @@ const LeftBar = () => {
   const [isMenuSm, setIsMenuSm] = useState<boolean>(false);
   const [selectedIndex, setSelectedIndex] = useState<number | null>(null)
   const [value, setValue] = useState<string>('')
+  const [date, setDate] = useState<any>('');
   const modalRoot = useRef<HTMLDivElement|null>(null);
   const handleFocus = (): void => setIsSearch(true)
   const handleClick = (): void => {
-    setValue('')
+    value&&setValue('')
+    date&&setDate('')
     if (selectedIndex) setSelectedIndex(null)
     if(!isSearch) return setIsMenu(!isMenu)
     setIsSearch(false)
@@ -71,8 +73,9 @@ const LeftBar = () => {
         onMouseEnter={handleEnterOpenMenuSm} onMouseLeave={handleLeaveCloseMenuSm}>
         {selectedIndex !== 2 && selectedIndex !== 4 &&
           <SearchBar handleClick={handleClick} handleFocus={handleFocus} sort={sort} 
-          handleSearch={handleSearch} isSearch={isSearch} selectedIndex={selectedIndex} value={value}/>}
-        {!selectedIndex&&isSearch && <SearchLists value={value} setValue={setValue} sort={sort}/>}
+            handleSearch={handleSearch} isSearch={isSearch} selectedIndex={selectedIndex}
+            value={value} setDate={setDate} date={date}/>}
+        {!selectedIndex&&isSearch && <SearchLists value={value} sort={sort}/>}
         {!selectedIndex&&!isSearch &&<ChatsList sort={sort}/>}
         {!selectedIndex && isMenuSm && !isSearch && <SmallMenuBar
           handleSelectedMenu={handleSelectedMenu} setIsMenuSm={setIsMenuSm} />}

src/components/HomePage/RightBar/RightListsAndBars/SearchList/Search/StaticDatePicker/index.tsx

@@ -11,7 +11,8 @@ interface IStaticDatePicker {
 const useStyles = makeStyles({
 container: {
   position: 'absolute',
-  }
+
+},
 })
 
 const StaticDatePicker = ({ disabled, date, changeDate,handleOnOpen }: IStaticDatePicker) => {

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

@@ -7,7 +7,8 @@ import CalendarTodayIcon from '@mui/icons-material/CalendarToday';
 import Switch from '@mui/material/Switch';
 import { styled } from '@mui/material/styles';
 import { makeStyles } from '@material-ui/core'
-import { useDispatch,useSelector } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
+import { useState } from 'react';
 
 import { actionIsOpen } from '../../../../../../redux/control/action'
 import { getMessages } from '../../../../../../redux/messages/selector'
@@ -51,7 +52,7 @@ const useStyles = makeStyles({
     color: '#b1aeae',
     height:'7vh'
   },
-  searchBar: {
+  searchBarActive: {
     outline: '2px solid  #2184f7',
     color: '#2184f7',
   },
@@ -69,9 +70,11 @@ interface ISearch {
 const Search = ({handleSearch,value,setDate,date}:ISearch) => {
   const dispatch = useDispatch()
   const classes = useStyles()
-  const { sort,companionId } = useSelector(getChat)
+  const { sort, companionId } = useSelector(getChat)
+  const [isFocus,setIsFocus] = useState<boolean>(false)
   const messages = useSelector(getMessages)
   const disabled = messages.length > 0 ? false : true
+  const handleFocus= () => !isFocus&&setIsFocus(true)
   const handleOnOpen = () => setDate('')
   const handleSort = () => {
     sortChat(companionId)
@@ -83,14 +86,15 @@ const Search = ({handleSearch,value,setDate,date}:ISearch) => {
       <IconButton onClick={() => dispatch(actionIsOpen(''))} aria-label="delete" size="medium">
         <CloseIcon fontSize='medium'/>
       </IconButton>
-      <SearchBar className={disabled?undefined:classes.searchBar}>
+      <SearchBar className={!isFocus||disabled?undefined:classes.searchBarActive}>
           <SearchIconWrapper>
               <SearchIcon />
           </SearchIconWrapper>
           <StyledInputBase
             disabled={disabled}
             onChange={handleSearch}
-            placeholder="Search by request and date"
+            onFocus={handleFocus}
+            placeholder="Search"
             value={value}
             inputProps={{ 'aria-label': 'search' }}
           />
@@ -98,7 +102,8 @@ const Search = ({handleSearch,value,setDate,date}:ISearch) => {
       <IconButton aria-label="delete" size="medium">
         <StaticDatePicker disabled={disabled} date={date}
         changeDate={setDate} handleOnOpen={handleOnOpen} />        
-        <CalendarTodayIcon fontSize='medium' />
+        <CalendarTodayIcon fontSize='medium'
+        style={{color:date?'#2184f7':'#b1aeae'}}/>
       </IconButton>
       <Switch onClick={handleSort} checked={sort} {...label} /> 
     </Toolbar>

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

@@ -83,8 +83,7 @@ return (
               <Divider variant="inset"/>
             </div>)}
           </List> :
-        <AlertInfo name={!date&&value ? `Can not find message by request: ${value}`:
-        `Can not find message by request: ${value} and DataPicker: ${timeStampFilter(date)}`} />:
+        <AlertInfo name={`Can not find message by request: ${value}`}/>:
         <AlertInfo name='You do not have messages yet!' />}
      </div>
    </div>