make red indecator

build/asset-manifest.json

@@ -4,13 +4,13 @@
     "static/js/0.a45ab394.chunk.js.map": "/static/js/0.a45ab394.chunk.js.map",
     "AuthPage.js": "/static/js/AuthPage.b0e63748.chunk.js",
     "AuthPage.js.map": "/static/js/AuthPage.b0e63748.chunk.js.map",
-    "HomePage.js": "/static/js/HomePage.ab68b19e.chunk.js",
-    "HomePage.js.map": "/static/js/HomePage.ab68b19e.chunk.js.map",
+    "HomePage.js": "/static/js/HomePage.f9b2a831.chunk.js",
+    "HomePage.js.map": "/static/js/HomePage.f9b2a831.chunk.js.map",
     "main.css": "/static/css/main.9a5b6280.chunk.css",
     "main.js": "/static/js/main.9d16c444.chunk.js",
     "main.js.map": "/static/js/main.9d16c444.chunk.js.map",
-    "runtime-main.js": "/static/js/runtime-main.d9619061.js",
-    "runtime-main.js.map": "/static/js/runtime-main.d9619061.js.map",
+    "runtime-main.js": "/static/js/runtime-main.c03fd211.js",
+    "runtime-main.js.map": "/static/js/runtime-main.c03fd211.js.map",
     "static/js/5.e555b29b.chunk.js": "/static/js/5.e555b29b.chunk.js",
     "static/js/5.e555b29b.chunk.js.map": "/static/js/5.e555b29b.chunk.js.map",
     "static/css/6.c7cc29b3.chunk.css": "/static/css/6.c7cc29b3.chunk.css",
@@ -27,7 +27,7 @@
     "static/media/qrCode_telegram.bb0caf3c.png": "/static/media/qrCode_telegram.bb0caf3c.png"
   },
   "entrypoints": [
-    "static/js/runtime-main.d9619061.js",
+    "static/js/runtime-main.c03fd211.js",
     "static/css/6.c7cc29b3.chunk.css",
     "static/js/6.6b4232f4.chunk.js",
     "static/css/main.9a5b6280.chunk.css",

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

@@ -12,7 +12,7 @@ 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';
+import { TChats,TChat } from '../../../../typescript/redux/chats/types';
 import { timeStampFilter,prodBaseURL } from '../../../../helpers';
 
 const useStyles = makeStyles({
@@ -42,11 +42,9 @@ const useStyles = makeStyles({
 
 interface IChatsList {
   sort: boolean,
-  date: any,
-  value: string
 }
 
-const ChatsList = ({sort,date,value}:IChatsList) => {
+const ChatsList = ({sort}:IChatsList) => {
   const classes = useStyles()
   const dispatch = useDispatch()
   const chatsRef = useRef<any>(null)
@@ -54,15 +52,6 @@ const ChatsList = ({sort,date,value}:IChatsList) => {
   const { total, chats } = useSelector(getStateMemo)
   const chat = useSelector(getChatMemo)
   const isOpen = useSelector(getIsOpen)
-  const filteredChats = useCallback((arr: TChats) => arr.filter((el) => {
-    if (!date) {
-      return el
-    } else if (timeStampFilter(date) === timeStampFilter(el.lastMessageCreatedAt ?
-      el.lastMessageCreatedAt : el.createdAt)) {
-      return el
-    }
-  }),[date])
-
   const handleListItemClick = (companionId: string) => {
     isOpen&&dispatch(actionIsOpen(''))
     dispatch(asyncStartChatById(companionId))
@@ -80,13 +69,12 @@ const ChatsList = ({sort,date,value}:IChatsList) => {
       dispatch(asyncStartChatById(companionId))
       dispatch(actionScroll(true))
     }
-    const sorted = filteredChats(sortByRecent(chats,sort))
-    setSortedChats(sorted)
-    if (chat.companionId&&!sorted.find((el) => el.companionId === chat.companionId)) dispatch(actionRemoveChat())
+    setSortedChats(sortByRecent(chats, sort))
+    if (chat.companionId&&!sortedChats.find((el) => el.companionId === chat.companionId)) dispatch(actionRemoveChat())
     if (chatsRef.current) {
       chatsRef.current.forEach(({total,seen}: any,i:number) => {
         const oldDifferent = total - seen
-        const chat = sorted[i]
+        const chat = sortedChats[i]
         if(chat === undefined) return
         const newDifferent = chat.total - chat.seen
         if (newDifferent > oldDifferent && !chat.mute) {
@@ -95,15 +83,14 @@ const ChatsList = ({sort,date,value}:IChatsList) => {
         } 
       })
     }
-      chatsRef.current = sorted
-  }, [chats, chat,sort,filteredChats,dispatch]) 
+      chatsRef.current = sortedChats
+  }, [chats, chat,sort,sortedChats, dispatch])
 
   return total !== '0' ? (
     <List className={classes.list} component="nav"
       aria-label="main mailbox folders">
-      {sortedChats.length > 0 ? sortedChats.map((el) => <ChatItem key={el.number} chat={el}  
-        handleListItemClick={handleListItemClick} handleNewMsgs={handleNewMsgs} />):
-       <AlertInfo name={`Can not find Chats by request : ${value}`} />}
+      {sortedChats.map((el) => <ChatItem key={el.number} chat={el}  
+      handleListItemClick={handleListItemClick} handleNewMsgs={handleNewMsgs} />)}
     </List>
   ):<AlertInfo name='You do not have Chats yet!' />;
 }

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

@@ -1,6 +1,7 @@
 import List from '@mui/material/List';
 import { makeStyles } from '@material-ui/core'
-import { useSelector,useDispatch } from 'react-redux';
+import { useSelector, useDispatch } from 'react-redux';
+import { useEffect } from 'react';
 
 import AlertInfo from '../../../reusableComponents/AlertInfo'
 import ContactItem from './ContactItem';
@@ -38,11 +39,12 @@ const useStyles = makeStyles({
 
 interface IContactList {
   value: string,
-  handleClick: any,
+  handleClick: () => void,
   sort: boolean,
-  date: any
+  date: any,
+  setDisabled: React.Dispatch<boolean>,
 }
-const  ContactsList = ({value,handleClick,sort,date} : IContactList) => {
+const  ContactsList = ({value,handleClick,sort,date,setDisabled} : IContactList) => {
   const classes = useStyles()
   const dispatch = useDispatch()
   const { total, contacts } = useSelector(getState)
@@ -65,6 +67,10 @@ const  ContactsList = ({value,handleClick,sort,date} : IContactList) => {
   }
 
   const arr = filteredContacts()
+
+  useEffect(() => {
+    setDisabled(total === '0'?true:false)
+  },[total,setDisabled])
   
   return total !== '0' ? (
     <List

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

@@ -1,19 +1,20 @@
 import { DatePicker } from "@material-ui/pickers";
 import { makeStyles } from '@material-ui/core'
 
+const useStyles = makeStyles({
+  container: {
+    position: 'absolute',
+  },
+})
+
 interface IStaticDatePicker {
   date: Date,
+  disabled: boolean,
   changeDate: React.Dispatch<React.SetStateAction<any>>,
-  handleOnOpen: () => void
+  handleOnOpen: () => void,
 }
 
-const useStyles = makeStyles({
-container: {
-  position: 'absolute',
-},
-})
-
-const StaticDatePicker = ({ date, changeDate,handleOnOpen }: IStaticDatePicker) => {
+const StaticDatePicker = ({ date,disabled, changeDate,handleOnOpen }: IStaticDatePicker) => {
     const classes = useStyles()
 return (
   <DatePicker
@@ -23,6 +24,7 @@ return (
     variant="dialog"
     openTo="date"
     autoOk
+    disabled={disabled}
     value={date?date:new Date()}
     onOpen={handleOnOpen}
     onChange={changeDate}

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

@@ -69,46 +69,48 @@ const label = { inputProps: { 'aria-label': 'Switch demo' } };
 
 interface ISearchBar {
   handleClick:() => void,
-  handleFocus:() => void,
+  handleOpenIsSearch:() => void,
   handleSearch:(e: React.ChangeEvent<HTMLInputElement>) => void,
   isSearch: boolean,
   value: string,
   sort: boolean,
   setDate: React.Dispatch<any>,
   date:any,
+  disabled: boolean
 }
 
-const SearchBar = ({ handleClick, handleFocus, handleSearch, isSearch,
-  value, sort,setDate,date }: ISearchBar) => {
+const SearchBar = ({ handleClick, handleOpenIsSearch, handleSearch, isSearch,
+  value, sort,setDate,date,disabled }: ISearchBar) => {
   const handleSort = () => updateUser({ sort: !sort })
   const handleOnOpen = () => setDate('')  
   
   const classes = useStyles()
     return (
-        <Toolbar className={classes.toolBar}>
-            <IconButton  onClick={handleClick}>
+      <Toolbar className={classes.toolBar}>
+        <IconButton  onClick={handleClick}>
                 {isSearch ? <ArrowBackIcon className={classes.iconArrow} /> : <MenuIcon className={classes.iconBtn} />}
-            </IconButton>
+        </IconButton>
+        <div onFocus={handleOpenIsSearch} style={{display:'flex',width:'100%'}}>
           <Search className={value?classes.activeSearch:undefined}>
-              <SearchIconWrapper>
-                  <SearchIcon />
-              </SearchIconWrapper>
-          <StyledInputBase
-                 value={value}
-                 onFocus={handleFocus}
-                 onChange={handleSearch}
-                 placeholder='Search'
-                 inputProps={{ 'aria-label': 'search' }}
-              />
-        </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>
+            <SearchIconWrapper>
+              <SearchIcon />
+            </SearchIconWrapper>
+            <StyledInputBase
+              value={value}
+              onChange={handleSearch}
+              placeholder={disabled?'Disabled':'Search'}
+              inputProps={{ 'aria-label': 'search' }}
+              disabled={disabled}/>
+           </Search>
+           <IconButton aria-label="delete" size="medium" disabled={disabled}>
+            <StaticDatePicker  date={date} disabled={disabled} 
+              changeDate={setDate} handleOnOpen={handleOnOpen} />        
+              <CalendarTodayIcon fontSize='medium'
+                style={{color:date?'#2184f7':'#b1aeae'}}/>
+          </IconButton>
+        </div>
+        <Switch onClick={handleSort} checked={sort} {...label} disabled={disabled} />
+    </Toolbar>
     )
 }
 

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

@@ -5,9 +5,10 @@ import ListItemAvatar from '@mui/material/ListItemAvatar';
 import LibraryMusicIcon from '@mui/icons-material/LibraryMusic';
 import Divider from '@mui/material/Divider';
 import { makeStyles } from '@material-ui/core'
+import { useEffect } from 'react';
 
 import AlertInfo from '../../../../reusableComponents/AlertInfo';
-import { timeStampEU,handleDownload,prodBaseURL } from '../../../../../helpers'
+import { timeStampEU,handleDownload,filteredMessages,handleSort,prodBaseURL } from '../../../../../helpers'
 import { TAllMessages } from '../../../../../typescript/redux/allMessages/types'
 
 const useStyles = makeStyles({
@@ -46,14 +47,29 @@ const useStyles = makeStyles({
     }
   },  
 })
-const AudioList = ({ allMessagesMemo,value,date }: { allMessagesMemo: TAllMessages,value:string,date:any }) => {
+
+interface IAudioList {
+  messagesMemo: TAllMessages,
+  value: string,
+  date: any,
+  setDisabled: React.Dispatch<boolean>,
+  sort: boolean
+}
+
+const AudioList = ({ messagesMemo,value,date,sort,setDisabled }: IAudioList) => {
   const classes = useStyles()
-    const filteredMessagesMemo =  allMessagesMemo.filter(({type}) => type === 'audio')
+  const filtered =  messagesMemo.filter(({type}) => type === 'audio')
+  const filteredAndSorted = filteredMessages(handleSort('createdAt', filtered, sort), date,value)
+  
+  useEffect(() => {
+    setDisabled(filtered.length > 0?false:true)
+  }, [filtered, setDisabled])
+  
   return(
     <>
-      {filteredMessagesMemo.length > 0 &&
+      {filteredAndSorted.length > 0 &&
         <List className={classes.container}>
-        {filteredMessagesMemo.map(({ message, createdAt, fullType }) =>
+        {filteredAndSorted.map(({ message, createdAt, fullType }) =>
           <div key={createdAt}>
             <ListItem alignItems="flex-start" className={classes.listItem}>
               <ListItemAvatar>
@@ -69,8 +85,8 @@ const AudioList = ({ allMessagesMemo,value,date }: { allMessagesMemo: TAllMessag
             <Divider variant="inset"/>
         </div>)}
       </List>}
-      {(value || date) &&  filteredMessagesMemo.length === 0 && <AlertInfo name={`Can not find Audio by request: ${value}`} />}
-      {!value && !date && filteredMessagesMemo.length === 0 && <AlertInfo name='You do not have Audio yet!'/>}
+      {(value || date) &&  filteredAndSorted.length === 0 && <AlertInfo name={`Can not find Audio by request: ${value}`} />}
+      {!value && !date && filteredAndSorted.length === 0 && <AlertInfo name='You do not have Audio yet!'/>}
    </>)
 }
 export default AudioList

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

@@ -41,7 +41,7 @@ interface IChatListRecent {
   value: string,
   date:any,
   filteredAndSorted: TChats,
-  handleListItemClick:(companionId:string) => void
+  handleListItemClick: (companionId: string) => void,
 }
 
 const ChatListRecent = ({value,date,filteredAndSorted,handleListItemClick}:IChatListRecent) => {

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

@@ -5,9 +5,10 @@ import ListItemAvatar from '@mui/material/ListItemAvatar';
 import FolderIcon from '@mui/icons-material/Folder';
 import Divider from '@mui/material/Divider';
 import { makeStyles } from '@material-ui/core'
+import { useEffect } from 'react';
 
 import AlertInfo from '../../../../reusableComponents/AlertInfo';
-import { timeStampEU,handleDownload,prodBaseURL } from '../../../../../helpers'
+import { timeStampEU,handleDownload,filteredMessages,handleSort,prodBaseURL } from '../../../../../helpers'
 import { TAllMessages } from '../../../../../typescript/redux/allMessages/types'
 
 const useStyles = makeStyles({
@@ -47,14 +48,28 @@ const useStyles = makeStyles({
   },  
 })
 
-const FilesList = ({ allMessagesMemo,value,date }: { allMessagesMemo: TAllMessages,value: string,date:any }) => {
+interface IFilesList {
+  messagesMemo: TAllMessages,
+  value: string,
+  date: any,
+  setDisabled: React.Dispatch<boolean>,
+  sort: boolean
+}
+
+const FilesList = ({ messagesMemo,value,date,sort,setDisabled }: IFilesList) => {
   const classes = useStyles()
-    const filteredMessagesMemo =  allMessagesMemo.filter(({type}) => type !== 'text')
+  const filtered =  messagesMemo.filter(({type}) => type !== 'text')
+  const filteredAndSorted = filteredMessages(handleSort('createdAt', filtered, sort),date,value)
+  
+  useEffect(() => {
+    setDisabled(filtered.length > 0?false:true)
+  }, [filtered, setDisabled])
+  
   return (
     <>
-      {filteredMessagesMemo.length > 0 &&
+      {filteredAndSorted.length > 0 &&
         <List className={classes.container}>
-        {filteredMessagesMemo.map(({ message, createdAt, fullType }) =>
+        {filteredAndSorted.map(({ message, createdAt, fullType }) =>
           <div key={createdAt}>
             <ListItem alignItems="flex-start" className={classes.listItem}>
               <ListItemAvatar>
@@ -70,8 +85,8 @@ const FilesList = ({ allMessagesMemo,value,date }: { allMessagesMemo: TAllMessag
             <Divider variant="inset"/>
         </div>)}
       </List>}
-      {(value || date)&&  filteredMessagesMemo.length === 0 && <AlertInfo name={`Can not find Files by request: ${value}`} />}
-      {!value && !date && filteredMessagesMemo.length === 0 && <AlertInfo name='You do not have Files yet!'/>}
+      {(value || date)&&  filteredAndSorted.length === 0 && <AlertInfo name={`Can not find Files by request: ${value}`} />}
+      {!value && !date && filteredAndSorted.length === 0 && <AlertInfo name='You do not have Files yet!'/>}
     </>
   )
 }

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

@@ -1,8 +1,10 @@
 import ImageList from '@mui/material/ImageList';
 import { makeStyles } from '@material-ui/core'
+import { useEffect } from 'react';
 
 import MediaListItem from './MediaListItem';
 import AlertInfo from '../../../../reusableComponents/AlertInfo';
+import { filteredMessages,handleSort } from '../../../../../helpers'
 import { TAllMessages } from '../../../../../typescript/redux/allMessages/types'
 
 const useStyles = makeStyles({
@@ -30,18 +32,32 @@ const useStyles = makeStyles({
   },  
 })
 
-const MediaList = ({ allMessagesMemo,value,date }: { allMessagesMemo: TAllMessages,value:string,date:any }) => {
+interface IMediaList {
+  messagesMemo: TAllMessages,
+  value: string,
+  date: any,
+  setDisabled: React.Dispatch<boolean>,
+  sort: boolean
+}
+
+const MediaList = ({ messagesMemo,value,date,sort,setDisabled }: IMediaList) => {
   const classes = useStyles()
-  const filteredMessagesMemo =  allMessagesMemo.filter(({ type }) => type === 'image')
+  const filtered =  messagesMemo.filter(({type}) => type === 'image')
+  const filteredAndSorted = filteredMessages(handleSort('createdAt', filtered, sort), date, value)
+  
+  useEffect(() => {
+    setDisabled(filtered.length > 0?false:true)
+  }, [filtered, setDisabled])
+  
   return (
     <>
-      {filteredMessagesMemo.length > 0 &&
+      {filteredAndSorted.length > 0 &&
         <ImageList className={classes.container} cols={3} rowHeight={164}>
-        {filteredMessagesMemo.map(({message,createdAt,fullType,updatedAt}) => 
+        {filteredAndSorted.map(({message,createdAt,fullType,updatedAt}) => 
           <MediaListItem key={createdAt} message={message} fullType={fullType} updatedAt={updatedAt}/>)}
       </ImageList>}
-      {(value || date) &&  filteredMessagesMemo.length === 0 && <AlertInfo name={`Can not find Media by request: ${value}`} />}
-      {!value && !date && filteredMessagesMemo.length === 0 && <AlertInfo name='You do not have Media yet!'/>}
+      {(value || date) &&  filteredAndSorted.length === 0 && <AlertInfo name={`Can not find Media by request: ${value}`} />}
+      {!value && !date && filteredAndSorted.length === 0 && <AlertInfo name='You do not have Media yet!'/>}
      </>
    )
 }

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

@@ -7,9 +7,10 @@ import Divider from '@mui/material/Divider';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { makeStyles } from '@material-ui/core'
+import { useEffect } from 'react';
 
 import AlertInfo from '../../../../reusableComponents/AlertInfo';
-import { timeStampEU,firstLetter,copied,prodBaseURL } from '../../../../../helpers'
+import { timeStampEU,firstLetter,copied,filteredMessages,handleSort,prodBaseURL } from '../../../../../helpers'
 import { TAllMessages } from '../../../../../typescript/redux/allMessages/types'
 
 const useStyles = makeStyles({
@@ -49,14 +50,28 @@ const useStyles = makeStyles({
   },  
 })
 
-const TextList = ({ allMessagesMemo,value,date }: { allMessagesMemo: TAllMessages,value: string,date: any }) => {
+interface ITextList {
+  messagesMemo: TAllMessages,
+  value: string,
+  date: any,
+  setDisabled: React.Dispatch<boolean>,
+  sort: boolean
+}
+
+const TextList = ({ messagesMemo,value,date,sort,setDisabled }: ITextList) => {
   const classes = useStyles()
-  const filteredMessagesMemo =  allMessagesMemo.filter(({type}) => type === 'text')
+  const filtered =  messagesMemo.filter(({type}) => type === 'text')
+  const filteredAndSorted = filteredMessages(handleSort('createdAt', filtered, sort),date,value)
+  
+  useEffect(() => {
+    setDisabled(filtered.length > 0?false:true)
+  }, [filtered, setDisabled])
+  
   return (
   <>
-      {filteredMessagesMemo.length > 0 &&
+      {filteredAndSorted.length > 0 &&
         <List className={classes.container}>
-       {filteredMessagesMemo.map(({ message, createdAt, lastName, name, color, avatarUrl }) =>
+       {filteredAndSorted.map(({ message, createdAt, lastName, name, color, avatarUrl }) =>
       <div key={createdAt}>
           <ListItem alignItems="flex-start" className={classes.listItem}>
             <ListItemAvatar>
@@ -75,8 +90,8 @@ const TextList = ({ allMessagesMemo,value,date }: { allMessagesMemo: TAllMessage
           <Divider variant="inset" />
       </div>)}
     </List>}
-    {(value || date) &&  filteredMessagesMemo.length === 0 && <AlertInfo name={`Can not find Text by request: ${value}`} />}
-    {!value && !date && filteredMessagesMemo.length === 0 && <AlertInfo name='You do not have Text yet!'/>} 
+    {(value || date) &&  filteredAndSorted.length === 0 && <AlertInfo name={`Can not find Text by request: ${value}`} />}
+    {!value && !date && filteredAndSorted.length === 0 && <AlertInfo name='You do not have Text yet!'/>} 
   </>
   ) 
 }

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

@@ -5,9 +5,10 @@ import ListItemAvatar from '@mui/material/ListItemAvatar';
 import VideoLibraryIcon from '@mui/icons-material/VideoLibrary';
 import Divider from '@mui/material/Divider';
 import { makeStyles } from '@material-ui/core'
+import { useEffect } from 'react';
 
 import AlertInfo from '../../../../reusableComponents/AlertInfo';
-import { timeStampEU,handleDownload,prodBaseURL } from '../../../../../helpers'
+import { timeStampEU,handleDownload,filteredMessages,handleSort,prodBaseURL } from '../../../../../helpers'
 import { TAllMessages } from '../../../../../typescript/redux/allMessages/types'
 
 const useStyles = makeStyles({
@@ -46,14 +47,28 @@ const useStyles = makeStyles({
     }
   },  
 })
-const VideoList = ({ allMessagesMemo,value,date }: { allMessagesMemo: TAllMessages,value:string,date:any }) => {
+
+interface IVideoList {
+  messagesMemo: TAllMessages,
+  value: string,
+  date: any,
+  setDisabled: React.Dispatch<boolean>,
+  sort: boolean
+}
+
+const VideoList = ({ messagesMemo,value,date,sort,setDisabled }: IVideoList) => {
   const classes = useStyles()
-    const filteredMessagesMemo =  allMessagesMemo.filter(({type}) => type === 'video')
+  const filtered =  messagesMemo.filter(({type}) => type === 'video')
+  const filteredAndSorted = filteredMessages(handleSort('createdAt', filtered, sort),date,value)
+  useEffect(() => {
+    setDisabled(filtered.length > 0?false:true)
+  }, [filtered, setDisabled])
+
   return (
     <>
-      {filteredMessagesMemo.length > 0 &&
+      {filteredAndSorted.length > 0 &&
         <List className={classes.container}>
-        {filteredMessagesMemo.map(({ message, createdAt, fullType }) =>
+        {filteredAndSorted.map(({ message, createdAt, fullType }) =>
           <div key={createdAt}>
             <ListItem key={createdAt} alignItems="flex-start" className={classes.listItem}>
               <ListItemAvatar>
@@ -69,8 +84,8 @@ const VideoList = ({ allMessagesMemo,value,date }: { allMessagesMemo: TAllMessag
             <Divider variant="inset" />
           </div>)}
       </List>}
-      {(value || date)&&  filteredMessagesMemo.length === 0 && <AlertInfo name={`Can not find Video by request: ${value}`} />}
-      {!value && !date && filteredMessagesMemo.length === 0 && <AlertInfo name='You do not have Video yet!'/>}
+      {(value || date)&&  filteredAndSorted.length === 0 && <AlertInfo name={`Can not find Video by request: ${value}`} />}
+      {!value && !date && filteredAndSorted.length === 0 && <AlertInfo name='You do not have Video yet!'/>}
     </>
    )  
 }

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

@@ -9,14 +9,12 @@ import TextList from './TextList';
 import AudioList from './AudioList'
 import VideoList from './VideoList';
 import { asyncGetAllMessages } from '../../../../redux/allMessages/operations';
-import { asyncGetChats } from '../../../../redux/chats/operations';
 import { getStateMemo } from '../../../../redux/chats/selector';
 import { getAllMessagesMemo } from '../../../../redux/allMessages/selector';
 import { getIsOpen } from '../../../../redux/control/selector';
-import { sortByRecent,handleSort,timeStampFilter } from '../../../../helpers';
+import { sortByRecent,timeStampFilter } from '../../../../helpers';
 import { asyncStartChatById } from '../../../../redux/chat/operations';
 import { actionIsOpen } from '../../../../redux/control/action';
-import { TAllMessages } from '../../../../typescript/redux/allMessages/types';
 import { TChats } from '../../../../typescript/redux/chats/types';
 
 
@@ -58,12 +56,13 @@ interface ISearchLists {
   sort: boolean,
   date: any,
   setDate: React.Dispatch<any>,
+  setDisabled: React.Dispatch<boolean>,
 }
 
-const SearchLists = ({ value,setValue,sort,date,setDate }: ISearchLists) => {
+const SearchLists = ({ value,setValue,sort,date,setDate,setDisabled }: ISearchLists) => {
     const classes = useStyles()
     const dispatch = useDispatch()
-    const { chats } = useSelector(getStateMemo)
+    const { chats,total } = useSelector(getStateMemo)
     const messagesMemo = useSelector(getAllMessagesMemo)
     const isOpen = useSelector(getIsOpen)
     const [isActive, setIsActive] = useState<number>(0)
@@ -87,42 +86,24 @@ const SearchLists = ({ value,setValue,sort,date,setDate }: ISearchLists) => {
         return el
       }
     })
-      
-    const filteredMessages = (arr: TAllMessages) => arr.filter((el) => {
-    if (!date) {
-      if (!el.fullType && el.message.toLowerCase().includes(value.toLowerCase())) {
-        return el
-      }
-      if (el.fullType && el.fullType.toLowerCase().includes(value.toLowerCase())) {
-        return el
-      }
-    } else {
-      if (!el.fullType && el.message.toLowerCase().includes(value.toLowerCase())
-        && timeStampFilter(date) === timeStampFilter(el.createdAt)) {
-        return el
-      }
-      if (el.fullType && el.fullType.toLowerCase().includes(value.toLowerCase())
-        && timeStampFilter(date) === timeStampFilter(el.createdAt)) {
-        return el
-      }
-     }
-    })
   
     useEffect(() => {
        setDate('')
     }, [setDate])
   
+    useEffect(() => {
+        if (isActive === 0) setDisabled(total === '0'?true:false)
+    }, [isActive,total,setDisabled])
+  
     useEffect(() => {
       dispatch(asyncGetAllMessages())
-      const handleReset = () =>  dispatch(asyncGetChats())
+      const handleReset = () =>  dispatch(asyncGetAllMessages())
       const idInterval = setInterval(handleReset, 3000);
       return () => clearInterval(idInterval);
     }, [dispatch]);
     
   
     const filteredAndSorted = filteredChats(sortByRecent(chats,sort))
-    const allMessagesMemo = filteredMessages(handleSort('createdAt',messagesMemo,sort))
-  
     return (
     <>
         <div className={classes.container}>
@@ -159,11 +140,11 @@ const SearchLists = ({ value,setValue,sort,date,setDate }: ISearchLists) => {
       </div>
             {isActive === 0 && <ChatListRecent value={value} date={date}
               filteredAndSorted={filteredAndSorted} handleListItemClick={handleListItemClick} />}
-            {isActive === 1 && <FilesList allMessagesMemo={allMessagesMemo} value={value} date={date}/>}
-            {isActive === 2 && <MediaList allMessagesMemo={allMessagesMemo} value={value} date={date}/>}
-            {isActive === 3 && <TextList allMessagesMemo={allMessagesMemo} value={value} date={date}/>}
-            {isActive === 4 && <AudioList allMessagesMemo={allMessagesMemo} value={value} date={date}/>}
-            {isActive === 5 && <VideoList allMessagesMemo={allMessagesMemo} value={value} date={date}/>}
+            {isActive === 1 && <FilesList messagesMemo={messagesMemo} value={value} date={date} sort={sort} setDisabled={setDisabled}/>}
+            {isActive === 2 && <MediaList messagesMemo={messagesMemo} value={value} date={date} sort={sort} setDisabled={setDisabled}/>}
+            {isActive === 3 && <TextList  messagesMemo={messagesMemo} value={value} date={date} sort={sort} setDisabled={setDisabled}/>}
+            {isActive === 4 && <AudioList messagesMemo={messagesMemo} value={value} date={date} sort={sort} setDisabled={setDisabled}/>}
+            {isActive === 5 && <VideoList messagesMemo={messagesMemo} value={value} date={date} sort={sort} setDisabled={setDisabled}/>}
     </>      
     )
 }

src/components/HomePage/LeftBar/SettingsBar/SettingsPicture/index.tsx

@@ -66,7 +66,7 @@ const useStyles = makeStyles({
   '80%': { transform: 'translate(-0.5px, -0.5px) rotate(1deg)'},
   '90%': { transform: 'translate(0.5px, 1px) rotate(0deg)'},
   '100%': { transform: 'translate(0.5px, -1px) rotate(-1deg)'},
-}  
+ },  
 })
 
 const SettingsPicture = () => {

src/components/HomePage/LeftBar/index.tsx

@@ -20,16 +20,18 @@ const LeftBar = () => {
   const [isMenu, setIsMenu] = useState<boolean>(false)
   const [isMenuSm, setIsMenuSm] = useState<boolean>(false);
   const [selectedIndex, setSelectedIndex] = useState<number | null>(null)
+  const [disabled, setDisabled] = useState<boolean>(false)
   const [value, setValue] = useState<string>('')
   const [date, setDate] = useState<any>('');
   const modalRoot = useRef<HTMLDivElement|null>(null);
-  const handleFocus = (): void => setIsSearch(true)
+  const handleOpenIsSearch = () => !isSearch&&setIsSearch(true)
   const handleClick = (): void => {
     setValue('')
     setDate('')
     if (selectedIndex) setSelectedIndex(null)
     if(!isSearch) return setIsMenu(!isMenu)
     setIsSearch(false)
+    setDisabled(false)
   }
   const handleSearch = (e: React.ChangeEvent<HTMLInputElement>):void => setValue(e.target.value)
   const handleEnterOpenMenuSm = (): void => {
@@ -73,17 +75,18 @@ const LeftBar = () => {
       <Grid item lg={3} style={{ position: 'relative', backgroundColor:'#ffffff'}}
         onMouseEnter={handleEnterOpenMenuSm} onMouseLeave={handleLeaveCloseMenuSm}>
         {selectedIndex !== 2 && selectedIndex !== 3 && selectedIndex !== 4 &&
-          <SearchBar handleClick={handleClick} handleFocus={handleFocus} sort={sort} 
-            handleSearch={handleSearch} isSearch={isSearch}
-            value={value} setDate={setDate} date={date}/>}
+          <SearchBar handleClick={handleClick} handleOpenIsSearch={handleOpenIsSearch} sort={sort} 
+            handleSearch={handleSearch} isSearch={isSearch} value={value} setDate={setDate}
+            date={date} disabled={disabled} />}
         {!selectedIndex && isSearch && <SearchLists value={value} setValue={setValue}
-          sort={sort} date={date} setDate={setDate}/>}
-        {!selectedIndex&&!isSearch &&<ChatsList sort={sort} date={date} value={value}/>}
+          sort={sort} date={date} setDate={setDate} setDisabled={setDisabled}/>}
+        {!selectedIndex&&!isSearch &&<ChatsList sort={sort}/>}
         {!selectedIndex && isMenuSm && !isSearch && <SmallMenuBar
           handleSelectedMenu={handleSelectedMenu} setIsMenuSm={setIsMenuSm} />}
         {isMenu && modalRoot.current &&
           createPortal(<MenuBar handleSelectedMenu={handleSelectedMenu} nightMode={nightMode}/>, modalRoot.current)}
-        {selectedIndex === 1 && <ContactsList handleClick={handleClick} value={value} sort={sort} date={date}/>}
+        {selectedIndex === 1 && <ContactsList handleClick={handleClick} value={value}
+          sort={sort} date={date} setDisabled={setDisabled} />}
         {selectedIndex === 2 && <SettingsBar setSelectedIndex={setSelectedIndex} handleClick={handleClick}/>}
         {selectedIndex === 3 && <AddContact setSelectedIndex={setSelectedIndex} handleClick={handleClick}/>}
         {selectedIndex === 4 && <EditBar setSelectedIndex={setSelectedIndex}/>}

src/components/HomePage/RightBar/ChatBar/SendMessage/index.tsx

@@ -128,7 +128,43 @@ const useStyles = makeStyles({
       width: '100vw',
       height: '100vh',
       zIndex:100
-    },  
+    },
+   ringContainerLeft: {
+    position: 'absolute',
+    left: 10,
+    top: -40,
+    zIndex: 10,
+  },   
+  ringContainerRight: {
+    position: 'absolute',
+    right: 10,
+    top: -40,
+    zIndex: 10,
+  },
+  circle: {
+    width: 15,
+    height: 15,
+    backgroundColor: '#ff0505',
+    borderRadius: '50%',
+    position: 'relative'
+    },
+  ringRing: {
+    border: '3px solid #ff0505',
+    borderRadius: '50%',
+    height: 25,
+    width: 25,
+    position: 'absolute',
+    right: -5,
+    top: -5,
+    animation: `$pulsate 1s ease-out`,
+    animationIterationCount: 'infinite',
+    opacity: 0
+    },
+   '@keyframes pulsate': {
+    '0%': {transform: 'scale(0.1, 0.1)', opacity: 0},
+    '50%': { opacity: 1},
+    '100%': {transform: 'scale(1.2, 1.2)', opacity: 0},
+    },
 });
 
 interface ISendMessage{
@@ -250,7 +286,17 @@ const SendMessage = ({isArrow }:ISendMessage) => {
 
     return (
         <div className={classes.container}>
-                {isArrow&&<div className={classes.borderTop}></div>}    
+            {isArrow && <div className={classes.borderTop}></div>}
+            {isFilming && _status !== 'stopped' &&
+                <div className={classes.ringContainerLeft}>
+                <div className={classes.ringRing}></div>
+                <div className={classes.circle}></div>         
+            </div>}               
+            {isRecording && status !== 'stopped' &&
+            <div className={classes.ringContainerRight}>
+                <div className={classes.ringRing}></div>
+                <div className={classes.circle}></div>         
+            </div>}         
                 <CloseIcon onClick={clearMessage} fontSize="small" className={classes.iconCancel}
                     sx={{width: 56, height: 56, display: file || value || status === 'stopped'
                     || _status === 'stopped' ? 'inline-block' : 'none'}} />

src/components/HomePage/RightBar/RightListsAndBars/CredentialsList/ProfileLists/AudioList/index.tsx

@@ -24,12 +24,12 @@ const useStyles = makeStyles({
     }
   },  
 })
-const AudioList = ({ messagesMemo }: { messagesMemo: TMessages }) => {
+const AudioList = ({ filteredAndSorted }: { filteredAndSorted: TMessages }) => {
   const classes = useStyles()
-    const filteredMessagesMemo =  messagesMemo.filter(({type}) => type === 'audio')
-    return filteredMessagesMemo.length > 0 ?(
+  
+    return filteredAndSorted.length > 0 ?(
       <List>
-        {filteredMessagesMemo.map(({ message, createdAt, fullType }) =>
+        {filteredAndSorted.map(({ message, createdAt, fullType }) =>
           <div key={createdAt}>
             <ListItem alignItems="flex-start" className={classes.listItem}>
               <ListItemAvatar>

src/components/HomePage/RightBar/RightListsAndBars/CredentialsList/ProfileLists/FilesList/index.tsx

@@ -25,12 +25,12 @@ const useStyles = makeStyles({
   },  
 })
 
-const FilesList = ({ messagesMemo }: { messagesMemo: TMessages }) => {
+const FilesList = ({ filteredAndSorted }: { filteredAndSorted: TMessages }) => {
   const classes = useStyles()
-    const filteredMessagesMemo =  messagesMemo.filter(({type}) => type !== 'text')
-    return filteredMessagesMemo.length > 0 ?(
+  
+    return filteredAndSorted.length > 0 ?(
       <List>
-        {filteredMessagesMemo.map(({ message, createdAt, fullType }) =>
+        {filteredAndSorted.map(({ message, createdAt, fullType }) =>
           <div key={createdAt}>
             <ListItem alignItems="flex-start" className={classes.listItem}>
               <ListItemAvatar>

src/components/HomePage/RightBar/RightListsAndBars/CredentialsList/ProfileLists/MediaList/index.tsx

@@ -4,11 +4,11 @@ import MediaListItem from './MediaListItem';
 import AlertInfo from '../../../../../../reusableComponents/AlertInfo';
 import { TMessages } from '../../../../../../../typescript/redux/messages/types'
 
-const MediaList = ({ messagesMemo }: { messagesMemo: TMessages }) => {
-  const filteredMessagesMemo =  messagesMemo.filter(({ type }) => type === 'image')
-  return filteredMessagesMemo.length > 0 ?(
+const MediaList = ({ filteredAndSorted }: { filteredAndSorted: TMessages }) => {
+  
+  return filteredAndSorted.length > 0 ?(
       <ImageList sx={{ width: '100%', height: 'auto',overflow:'hidden' }} cols={3} rowHeight={164}>
-        {filteredMessagesMemo.map(({message,createdAt,fullType,updatedAt}) => 
+        {filteredAndSorted.map(({message,createdAt,fullType,updatedAt}) => 
           <MediaListItem key={createdAt} message={message} fullType={fullType} updatedAt={updatedAt}/>)}
       </ImageList>
    ): <AlertInfo name='You do not have Media yet!'/>  

src/components/HomePage/RightBar/RightListsAndBars/CredentialsList/ProfileLists/TextList/index.tsx

@@ -27,12 +27,12 @@ const useStyles = makeStyles({
   },  
 })
 
-const TextList = ({ messagesMemo }: { messagesMemo: TMessages }) => {
+const TextList = ({ filteredAndSorted }: { filteredAndSorted: TMessages }) => {
   const classes = useStyles()
-  const filteredMessagesMemo =  messagesMemo.filter(({type}) => type === 'text')
-   return filteredMessagesMemo.length > 0 ?(
+  
+   return filteredAndSorted.length > 0 ?(
     <List>
-       {filteredMessagesMemo.map(({ message, createdAt, lastName, name, color, avatarUrl }) =>
+       {filteredAndSorted.map(({ message, createdAt, lastName, name, color, avatarUrl }) =>
       <div key={createdAt}>
           <ListItem alignItems="flex-start" className={classes.listItem}>
             <ListItemAvatar>

src/components/HomePage/RightBar/RightListsAndBars/CredentialsList/ProfileLists/VideoList/index.tsx

@@ -24,12 +24,12 @@ const useStyles = makeStyles({
     }
   },  
 })
-const VideoList = ({ messagesMemo }: { messagesMemo: TMessages }) => {
+const VideoList = ({ filteredAndSorted }: { filteredAndSorted: TMessages }) => {
   const classes = useStyles()
-    const filteredMessagesMemo =  messagesMemo.filter(({type}) => type === 'video')
-    return filteredMessagesMemo.length > 0 ?(
+
+    return filteredAndSorted.length > 0 ?(
       <List>
-        {filteredMessagesMemo.map(({ message, createdAt, fullType }) =>
+        {filteredAndSorted.map(({ message, createdAt, fullType }) =>
           <div key={createdAt}>
             <ListItem key={createdAt} alignItems="flex-start" className={classes.listItem}>
               <ListItemAvatar>

src/components/HomePage/RightBar/RightListsAndBars/CredentialsList/ProfileLists/index.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState,useEffect } from 'react';
 import { useSelector } from 'react-redux';
 import { makeStyles } from '@material-ui/core'
 
@@ -44,13 +44,24 @@ underline: {
   },
 })
 
-const ProfileLists = () => {
+const ProfileLists = ({setDisabled}:{setDisabled: React.Dispatch<boolean>,}) => {
     const classes = useStyles()
     const { sort } = useSelector(getChat)
     const messagesMemo = useSelector(getMessagesMemo)
     const [isActive, setIsActive] = useState<number>(0)
     const handleIsActive = (newValue: number): void => setIsActive(newValue)
-    const sortedMessages: TMessages = handleSort('createdAt', messagesMemo, sort)
+    const filterBy = ['text', 'image', 'text', 'audio', 'video']
+    const sorted: TMessages = handleSort('createdAt', messagesMemo, sort)
+    const filteredAndSorted = sorted.filter((el) => {
+      if (isActive !== 0) {
+        if(el.type === filterBy[isActive]) return el
+      } else {
+        if(el.type !== filterBy[isActive]) return el
+      }
+    })
+    useEffect(() => {
+      setDisabled(filteredAndSorted.length > 0?false:true)
+    },[filteredAndSorted,setDisabled])
     return (
     <>
         <div className={classes.container}>
@@ -80,11 +91,11 @@ const ProfileLists = () => {
             <span className={classes.underline}>___</span>
           </div>
       </div>
-            {isActive === 0 && <FilesList messagesMemo={sortedMessages}/>}            
-            {isActive === 1 && <MediaList messagesMemo={sortedMessages}/>}
-            {isActive === 2 && <TextList messagesMemo={sortedMessages}/>}
-            {isActive === 3 && <AudioList messagesMemo={sortedMessages} />}
-            {isActive === 4 && <VideoList messagesMemo={sortedMessages}/>}
+            {isActive === 0 && <FilesList filteredAndSorted={filteredAndSorted}/>}            
+            {isActive === 1 && <MediaList filteredAndSorted={filteredAndSorted}/>}
+            {isActive === 2 && <TextList filteredAndSorted={filteredAndSorted}/>}
+            {isActive === 3 && <AudioList filteredAndSorted={filteredAndSorted} />}
+            {isActive === 4 && <VideoList filteredAndSorted={filteredAndSorted}/>}
     </>      
     )
 }

src/components/HomePage/RightBar/RightListsAndBars/CredentialsList/ProfileMenu/index.tsx

@@ -25,7 +25,7 @@ const useStyles = makeStyles({
 
 const label = { inputProps: { 'aria-label': 'Switch demo' } };
 
-const ProfileMenu = () => {
+const ProfileMenu = ({disabled}:{disabled:boolean}) => {
   const classes = useStyles()
   const { number, mute,sort,companionId,originalName,originalLastName } = useSelector(getChat)
   const handleMute = () => muteChat(companionId)
@@ -44,7 +44,16 @@ const ProfileMenu = () => {
               <ListItemText primary={number} secondary='Phone' />
             </MenuItem>
           </CopyToClipboard>
-        <Divider variant="inset"/>
+        <Divider variant="inset" />
+        <CopyToClipboard onCopy={() => copied('Username')} text={credentials}>
+          <MenuItem style={{cursor:'pointer'}}>
+            <ListItemIcon className={classes.listIcon}>
+               <AlternateEmailIcon fontSize="medium" />
+            </ListItemIcon>
+            <ListItemText primary={credentials} secondary='Username' />
+          </MenuItem>
+        </CopyToClipboard>
+        <Divider variant="inset"/>         
         <MenuItem style={{cursor:'default'}}>
           <ListItemIcon className={classes.listIcon}>
             <NotificationsIcon fontSize="medium" />
@@ -53,22 +62,13 @@ const ProfileMenu = () => {
           <Switch style={{ cursor:'pointer'}} onClick={handleMute} {...label} checked={!mute} />
         </MenuItem>
         <Divider variant="inset" />
-        <MenuItem style={{cursor:'default'}}>
+        <MenuItem disabled={disabled}  style={{cursor:'default'}}>
           <ListItemIcon className={classes.listIcon}>
             <SortIcon fontSize="medium" />
           </ListItemIcon>
           <ListItemText primary={`Sort by Date`} />
           <Switch style={{ cursor:'pointer'}} onClick={handleSort} {...label} checked={sort} />
-        </MenuItem>
-        <Divider variant="inset"/>        
-        <CopyToClipboard onCopy={() => copied('Username')} text={credentials}>
-          <MenuItem style={{cursor:'pointer'}}>
-            <ListItemIcon className={classes.listIcon}>
-               <AlternateEmailIcon fontSize="medium" />
-            </ListItemIcon>
-            <ListItemText primary={credentials} secondary='Username' />
-          </MenuItem>
-        </CopyToClipboard>        
+        </MenuItem>        
       </MenuList>
     </Paper>
   );

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

@@ -1,4 +1,5 @@
 import { makeStyles } from '@material-ui/core'
+import { useState } from 'react'
 import ToolBar from './ToolBar'
 import ProfilePicture from './ProfilePicture'
 import ProfileMenu from './ProfileMenu'
@@ -37,13 +38,14 @@ const useStyles = makeStyles({
 
 const CredentialsList = () => {
   const classes = useStyles()
+  const [disabled, setDisabled] = useState<boolean>(false)
     return (
     <div className={classes.container}>
       <ToolBar />
       <div className={classes.scrollContainer}>
         <ProfilePicture />
-        <ProfileMenu />
-        <ProfileLists />
+        <ProfileMenu disabled={disabled}/>
+        <ProfileLists setDisabled={setDisabled}/>
       </div>
     </div>
   )

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

@@ -86,12 +86,12 @@ const Search = ({handleSearch,value,setDate,date}:ISearch) => {
           <StyledInputBase
             disabled={disabled}
             onChange={handleSearch}
-            placeholder="Search"
+            placeholder={disabled?'Disabled':'Search'}
             value={value}
             inputProps={{ 'aria-label': 'search' }}
           />
       </SearchBar>      
-      <IconButton aria-label="delete" size="medium">
+      <IconButton aria-label="delete" size="medium" disabled={disabled}>
         <StaticDatePicker disabled={disabled} date={date}
         changeDate={setDate} handleOnOpen={handleOnOpen} />        
         <CalendarTodayIcon fontSize='medium'

src/helpers/index.ts

@@ -1,6 +1,7 @@
 import { toast } from 'react-toastify';
 import FileSaver from 'file-saver';
 import { TChats } from '../typescript/redux/chats/types';
+import { TAllMessages } from '../typescript/redux/allMessages/types';
 
 const format = (a: string) => a.split(' ').join('').trim()
 
@@ -130,6 +131,26 @@ const sortByRecent = (chats:TChats,sort:boolean) => [...chats].sort((a, b) => {
   return direction ? 1 : -1
 })
 
+const filteredMessages = (arr: TAllMessages,date:any,value:string) => arr.filter((el) => {
+  if (!date) {
+    if (!el.fullType && el.message.toLowerCase().includes(value.toLowerCase())) {
+      return el
+    }
+    if (el.fullType && el.fullType.toLowerCase().includes(value.toLowerCase())) {
+      return el
+    }
+    } else {
+       if (!el.fullType && el.message.toLowerCase().includes(value.toLowerCase())
+        && timeStampFilter(date) === timeStampFilter(el.createdAt)) {
+        return el
+      }
+      if (el.fullType && el.fullType.toLowerCase().includes(value.toLowerCase())
+        && timeStampFilter(date) === timeStampFilter(el.createdAt)) {
+        return el
+      }
+  }
+})
+
 const prodBaseURL = 'https://w-telegram.herokuapp.com'
 
 export {
@@ -148,5 +169,6 @@ export {
   handleDownload,
   handleSort,
   sortByRecent,
+  filteredMessages,
   prodBaseURL,
 }