prepere back to delete message

package-lock.json

@@ -28,6 +28,7 @@
         "bootstrap": "^4.6.0",
         "canvas": "^2.8.0",
         "date-fns": "^2.28.0",
+        "emoji-picker-react": "^3.5.1",
         "file-saver": "^2.0.5",
         "formik": "^2.2.6",
         "gh-pages": "^3.1.0",
@@ -7451,6 +7452,11 @@
         "node": ">=10"
       }
     },
+    "node_modules/emoji-picker-react": {
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/emoji-picker-react/-/emoji-picker-react-3.5.1.tgz",
+      "integrity": "sha512-cuSthFAvUO8Q1N7KJPEgZ7N0JNIWPKgN5GUmKe71UlSD4qFYI/p05RT9nohlWOq6YSFhEy2mI/60zBZiaku4mg=="
+    },
     "node_modules/emoji-regex": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz",
@@ -29922,6 +29928,11 @@
       "resolved": "https://registry.npmjs.org/emittery/-/emittery-0.7.2.tgz",
       "integrity": "sha512-A8OG5SR/ij3SsJdWDJdkkSYUjQdCUx6APQXem0SaEePBSRg4eymGYwBkKo1Y6DU+af/Jn2dBQqDBvjnr9Vi8nQ=="
     },
+    "emoji-picker-react": {
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/emoji-picker-react/-/emoji-picker-react-3.5.1.tgz",
+      "integrity": "sha512-cuSthFAvUO8Q1N7KJPEgZ7N0JNIWPKgN5GUmKe71UlSD4qFYI/p05RT9nohlWOq6YSFhEy2mI/60zBZiaku4mg=="
+    },
     "emoji-regex": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz",

package.json

@@ -24,6 +24,7 @@
     "bootstrap": "^4.6.0",
     "canvas": "^2.8.0",
     "date-fns": "^2.28.0",
+    "emoji-picker-react": "^3.5.1",
     "file-saver": "^2.0.5",
     "formik": "^2.2.6",
     "gh-pages": "^3.1.0",

src/components/HomePage/LeftBar/AddContact/ToolBar/index.tsx

@@ -0,0 +1,36 @@
+import Toolbar from '@mui/material/Toolbar'
+import IconButton from '@mui/material/IconButton'
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import { makeStyles } from '@material-ui/core'
+
+const useStyles = makeStyles({
+  toolBar: {
+    color: '#b1aeae',
+    height: '7vh',
+  },
+  iconArrow: {
+    '&:hover': {
+      transform: 'rotate(360deg)',
+      transition: 'all 250ms ease-out ',
+    }
+  },
+})
+
+interface ISearchBar {
+  handleClick:() => void,
+}
+
+const ToolBar = ({ handleClick }:ISearchBar) => {
+  
+  const classes = useStyles()
+    return (
+        <Toolbar className={classes.toolBar}>
+            <IconButton onClick={handleClick}>
+                <ArrowBackIcon className={classes.iconArrow} /> 
+            </IconButton>
+
+      </Toolbar>
+    )
+}
+
+export default ToolBar

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

@@ -2,6 +2,7 @@ import { makeStyles, Button, TextField, Typography } from '@material-ui/core'
 import React, { useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { asyncAddContact } from '../../../../redux/contacts/operations'
+import ToolBar from './ToolBar';
 
 const useStyles = makeStyles({
   container: {
@@ -11,7 +12,6 @@ const useStyles = makeStyles({
     flexDirection: 'column',
     width: 350,
     margin: '0 auto',
-    paddingTop: 64,
     paddingBottom: 24,
   },
   title: {
@@ -30,10 +30,11 @@ const useStyles = makeStyles({
 })
 
 interface IAddContact {
-  setSelectedIndex: React.Dispatch<React.SetStateAction<number | null>>
+  setSelectedIndex: React.Dispatch<React.SetStateAction<number | null>>,
+  handleClick: () => void
 }
 
-const AddContact = ({setSelectedIndex}:IAddContact) => {
+const AddContact = ({setSelectedIndex,handleClick}:IAddContact) => {
   const classes = useStyles()
   const dispatch = useDispatch()
   const [number, setNumber] = useState<string>('')
@@ -60,6 +61,8 @@ const AddContact = ({setSelectedIndex}:IAddContact) => {
 
  
   return (
+    <>
+    <ToolBar handleClick={handleClick}/>
     <div onKeyDown={handlePressEnter} className={classes.container} >
       <Typography
         className={classes.title}
@@ -87,7 +90,8 @@ const AddContact = ({setSelectedIndex}:IAddContact) => {
         fullWidth
         > ADD
       </Button>}
-    </div>
+      </div>
+     </> 
   );
 };
 

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

@@ -1,6 +1,6 @@
 import List from '@mui/material/List';
 import { makeStyles } from '@material-ui/core'
-import { useState,useEffect,useRef } from 'react';
+import { useState,useEffect,useRef,useCallback } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 
 import AlertInfo from '../../../reusableComponents/AlertInfo'
@@ -14,6 +14,7 @@ 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 { timeStampFilter } from '../../../../helpers';
 
 const useStyles = makeStyles({
   list: {
@@ -40,7 +41,12 @@ const useStyles = makeStyles({
   },
 })
 
-const ChatsList = ({sort}:{sort:boolean}) => {
+interface IChatsList {
+  sort: boolean,
+  date:any,
+}
+
+const ChatsList = ({sort,date}:IChatsList) => {
   const classes = useStyles()
   const dispatch = useDispatch()
   const ref = useRef<any>(null)
@@ -48,6 +54,14 @@ const ChatsList = ({sort}:{sort:boolean}) => {
   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(''))
@@ -73,7 +87,7 @@ const ChatsList = ({sort}:{sort:boolean}) => {
       dispatch(asyncStartChatById(companionId))
       dispatch(actionScroll(true))
     }
-    const sorted = sortByRecent(chats,sort)
+    const sorted = filteredChats(sortByRecent(chats,sort))
     setSortedChats(sorted)
     if (chat.companionId&&!sorted.find((el) => el.companionId === chat.companionId))dispatch(actionRemoveChat())
     if (ref.current) {
@@ -89,7 +103,7 @@ const ChatsList = ({sort}:{sort:boolean}) => {
       })
     }
       ref.current = sorted
-  }, [chats, chat,sort, dispatch]) 
+  }, [chats, chat,sort,filteredChats,dispatch]) 
 
   return total !== '0' ? (
     <List className={classes.list} component="nav"

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

@@ -10,8 +10,8 @@ import { asyncGetContacts } from '../../../../redux/contacts/operations'
 import { asyncStartChatById } from '../../../../redux/chat/operations'
 import { getIsOpen } from '../../../../redux/control/selector'
 import { actionIsOpen } from '../../../../redux/control/action';
-import { handleSort } from '../../../../helpers';
-import { TContacts } from '../../../../typescript/redux/contacts/types';
+import { handleSort,timeStampFilter } from '../../../../helpers';
+import { TContacts,TContact } from '../../../../typescript/redux/contacts/types';
 
 const useStyles = makeStyles({
   list: {
@@ -41,25 +41,31 @@ const useStyles = makeStyles({
 interface IContactList {
   value: string,
   handleClick: any,
-  sort: boolean
+  sort: boolean,
+  date: any
 }
-const  ContactsList = ({value,handleClick,sort} : IContactList) => {
+const  ContactsList = ({value,handleClick,sort,date} : IContactList) => {
   const classes = useStyles()
   const dispatch = useDispatch()
   const { total, contacts } = useSelector(getState)
   const isOpen = useSelector(getIsOpen)
 
+  const filteredContacts = ():TContacts => handleSort('name', contacts, sort).filter((el:TContact) => {
+    const credentials = el.name + ' ' + el.lastName
+      if (!date) {
+        return credentials.toLowerCase().includes(value.toLowerCase())
+      } else if (credentials.toLowerCase().includes(value.toLowerCase())
+        && timeStampFilter(date) === timeStampFilter(el.createdAt)) {
+        return el
+    }
+  })
+
   const handleListItemClick = (companionId:string) => {
     handleClick()
     isOpen&&dispatch(actionIsOpen(''))
     dispatch(asyncStartChatById(companionId))
   }
 
-  const filteredContacts = () => handleSort('name',contacts,sort).filter((el:any) => {
-    const credentials = el.name + ' ' + el.lastName
-    if(credentials.toLowerCase().includes(value.toLowerCase())) return el
-  })
-
   useEffect(() => {
     dispatch(asyncGetContacts())
     const handleReset = () => isOpen !== 'credentials' &&dispatch(asyncGetContacts())
@@ -67,7 +73,7 @@ const  ContactsList = ({value,handleClick,sort} : IContactList) => {
     return () => clearInterval(idInterval);
   }, [dispatch,isOpen]);
 
-  const arr:TContacts = filteredContacts()
+  const arr = filteredContacts()
   
   return total !== '0' ? (
     <List

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

@@ -10,24 +10,23 @@ interface IStaticDatePicker {
 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}
-        />
+  <DatePicker
+    className={classes.container}
+    inputVariant='outlined'
+    orientation="portrait"
+    variant="dialog"
+    openTo="date"
+    autoOk
+    value={date?date:new Date()}
+    onOpen={handleOnOpen}
+    onChange={changeDate}
+    />
   );
 };
 

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

@@ -74,14 +74,13 @@ interface ISearchBar {
   handleFocus:() => void,
   handleSearch:(e: React.ChangeEvent<HTMLInputElement>) => void,
   isSearch: boolean,
-  selectedIndex: number | null,
   value: string,
   sort: boolean,
   setDate: React.Dispatch<any>,
   date:any,
 }
 
-const SearchBar = ({ handleClick, handleFocus, handleSearch, isSearch, selectedIndex,
+const SearchBar = ({ handleClick, handleFocus, handleSearch, isSearch,
   value, sort,setDate,date }: ISearchBar) => {
   const dispatch = useDispatch()
   const handleSort = () => {
@@ -96,7 +95,7 @@ const SearchBar = ({ handleClick, handleFocus, handleSearch, isSearch, selectedI
             <IconButton  onClick={handleClick}>
                 {isSearch ? <ArrowBackIcon className={classes.iconArrow} /> : <MenuIcon className={classes.iconBtn} />}
             </IconButton>
-          <Search className={isSearch?classes.activeSearch:undefined}>
+          <Search className={value?classes.activeSearch:undefined}>
               <SearchIconWrapper>
                   <SearchIcon />
               </SearchIconWrapper>
@@ -108,7 +107,7 @@ const SearchBar = ({ handleClick, handleFocus, handleSearch, isSearch, selectedI
                  inputProps={{ 'aria-label': 'search' }}
               />
         </Search>
-          <IconButton aria-label="delete" size="medium">
+        <IconButton aria-label="delete" size="medium">
           <StaticDatePicker  date={date}
            changeDate={setDate} handleOnOpen={handleOnOpen} />        
           <CalendarTodayIcon fontSize='medium'

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

@@ -46,7 +46,7 @@ const useStyles = makeStyles({
     }
   },  
 })
-const AudioList = ({ allMessagesMemo,value }: { allMessagesMemo: TAllMessages,value:string }) => {
+const AudioList = ({ allMessagesMemo,value,date }: { allMessagesMemo: TAllMessages,value:string,date:any }) => {
   const classes = useStyles()
     const filteredMessagesMemo =  allMessagesMemo.filter(({type}) => type === 'audio')
   return(
@@ -69,8 +69,8 @@ const AudioList = ({ allMessagesMemo,value }: { allMessagesMemo: TAllMessages,va
             <Divider variant="inset"/>
         </div>)}
       </List>}
-      {value &&  filteredMessagesMemo.length === 0 && <AlertInfo name={`Can not find Audio by request: ${value}`} />}
-      {!value && filteredMessagesMemo.length === 0 && <AlertInfo name='You do not have Audio yet!'/>}
+      {(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!'/>}
    </>)
 }
 export default AudioList

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

@@ -39,27 +39,28 @@ const useStyles = makeStyles({
 
 interface IChatListRecent {
   value: string,
+  date:any,
   filteredAndSorted: TChats,
   handleListItemClick:(companionId:string) => void
 }
 
-const ChatListRecent = ({value,filteredAndSorted,handleListItemClick}:IChatListRecent) => {
+const ChatListRecent = ({value,date,filteredAndSorted,handleListItemClick}:IChatListRecent) => {
   const classes = useStyles()
 
 return (
   <>
-    {!value && filteredAndSorted.length > 0 &&
+    {!value && !date && filteredAndSorted.length > 0 &&
     <Stack direction="row" className={classes.stack}>
       {filteredAndSorted.slice(0, 6).map((chat) =>
       <RecentItem key={chat.companionId} handleListItemClick={handleListItemClick} chat={chat} />)}
     </Stack>}
-    {value && filteredAndSorted.length > 0 &&
+    {(value || date) && filteredAndSorted.length > 0 &&
       <List className={classes.container} component="nav" aria-label="main mailbox folders">
         {filteredAndSorted.map((chat) =>
         <ChatItem key={chat.companionId} handleListItemClick={handleListItemClick} chat={chat} />)}
       </List>}
-    {value && filteredAndSorted.length === 0 && <AlertInfo name={`Can not find Chat by request: ${value}`} />}
-    {!value && filteredAndSorted.length === 0 &&<AlertInfo name='You do not have any Chats yet!'/>}
+    {(value || date) && filteredAndSorted.length === 0 && <AlertInfo name={`Can not find Chat by request: ${value}`} />}
+    {!value && !date && filteredAndSorted.length === 0 &&<AlertInfo name='You do not have any Chats yet!'/>}
   </>)  
 }
 

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

@@ -47,7 +47,7 @@ const useStyles = makeStyles({
   },  
 })
 
-const FilesList = ({ allMessagesMemo,value }: { allMessagesMemo: TAllMessages,value: string }) => {
+const FilesList = ({ allMessagesMemo,value,date }: { allMessagesMemo: TAllMessages,value: string,date:any }) => {
   const classes = useStyles()
     const filteredMessagesMemo =  allMessagesMemo.filter(({type}) => type !== 'text')
   return (
@@ -70,8 +70,8 @@ const FilesList = ({ allMessagesMemo,value }: { allMessagesMemo: TAllMessages,va
             <Divider variant="inset"/>
         </div>)}
       </List>}
-      {value &&  filteredMessagesMemo.length === 0 && <AlertInfo name={`Can not find Files by request: ${value}`} />}
-      {!value && filteredMessagesMemo.length === 0 && <AlertInfo name='You do not have Files yet!'/>}
+      {(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!'/>}
     </>
   )
 }

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

@@ -30,7 +30,7 @@ const useStyles = makeStyles({
   },  
 })
 
-const MediaList = ({ allMessagesMemo,value }: { allMessagesMemo: TAllMessages,value:string }) => {
+const MediaList = ({ allMessagesMemo,value,date }: { allMessagesMemo: TAllMessages,value:string,date:any }) => {
   const classes = useStyles()
   const filteredMessagesMemo =  allMessagesMemo.filter(({ type }) => type === 'image')
   return (
@@ -40,8 +40,8 @@ const MediaList = ({ allMessagesMemo,value }: { allMessagesMemo: TAllMessages,va
         {filteredMessagesMemo.map(({message,createdAt,fullType,updatedAt}) => 
           <MediaListItem key={createdAt} message={message} fullType={fullType} updatedAt={updatedAt}/>)}
       </ImageList>}
-      {value &&  filteredMessagesMemo.length === 0 && <AlertInfo name={`Can not find Media by request: ${value}`} />}
-      {!value && filteredMessagesMemo.length === 0 && <AlertInfo name='You do not have Media yet!'/>}
+      {(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!'/>}
      </>
    )
 }

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

@@ -49,7 +49,7 @@ const useStyles = makeStyles({
   },  
 })
 
-const TextList = ({ allMessagesMemo,value }: { allMessagesMemo: TAllMessages,value: string }) => {
+const TextList = ({ allMessagesMemo,value,date }: { allMessagesMemo: TAllMessages,value: string,date: any }) => {
   const classes = useStyles()
   const filteredMessagesMemo =  allMessagesMemo.filter(({type}) => type === 'text')
   return (
@@ -75,8 +75,8 @@ const TextList = ({ allMessagesMemo,value }: { allMessagesMemo: TAllMessages,val
           <Divider variant="inset" />
       </div>)}
     </List>}
-    {value &&  filteredMessagesMemo.length === 0 && <AlertInfo name={`Can not find Text by request: ${value}`} />}
-    {!value && filteredMessagesMemo.length === 0 && <AlertInfo name='You do not have Text yet!'/>} 
+    {(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!'/>} 
   </>
   ) 
 }

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

@@ -46,7 +46,7 @@ const useStyles = makeStyles({
     }
   },  
 })
-const VideoList = ({ allMessagesMemo,value }: { allMessagesMemo: TAllMessages,value:string }) => {
+const VideoList = ({ allMessagesMemo,value,date }: { allMessagesMemo: TAllMessages,value:string,date:any }) => {
   const classes = useStyles()
     const filteredMessagesMemo =  allMessagesMemo.filter(({type}) => type === 'video')
   return (
@@ -69,8 +69,8 @@ const VideoList = ({ allMessagesMemo,value }: { allMessagesMemo: TAllMessages,va
             <Divider variant="inset" />
           </div>)}
       </List>}
-      {value &&  filteredMessagesMemo.length === 0 && <AlertInfo name={`Can not find Video by request: ${value}`} />}
-      {!value && filteredMessagesMemo.length === 0 && <AlertInfo name='You do not have Video yet!'/>}
+      {(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!'/>}
     </>
    )  
 }

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

@@ -1,5 +1,3 @@
-import BottomNavigation from '@mui/material/BottomNavigation';
-import BottomNavigationAction from '@mui/material/BottomNavigationAction';
 import { useState, useEffect } from 'react';
 import { useDispatch,useSelector } from 'react-redux';
 import { makeStyles } from '@material-ui/core'
@@ -15,7 +13,7 @@ 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 } from '../../../../helpers';
+import { sortByRecent,handleSort,timeStampFilter } from '../../../../helpers';
 import { asyncStartChatById } from '../../../../redux/chat/operations';
 import { actionIsOpen } from '../../../../redux/control/action';
 import { TAllMessages } from '../../../../typescript/redux/allMessages/types';
@@ -56,33 +54,60 @@ underline: {
 
 interface ISearchLists {
   value: string,
-  sort: boolean
+  setValue: React.Dispatch<string>
+  sort: boolean,
+  date: any,
+  setDate: React.Dispatch<any>,
 }
 
-const SearchLists = ({ value,sort }: ISearchLists) => {
+const SearchLists = ({ value,setValue,sort,date,setDate }: 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) 
+    const handleIsActive = (newValue: number): void => {
+      setIsActive(newValue)
+      value && setValue('')
+      date&&setDate('')
+    } 
 
     const handleListItemClick = (companionId: string) => {
       isOpen&&dispatch(actionIsOpen(''))
       dispatch(asyncStartChatById(companionId))
     }
-    const filterChats= (arr:any) => arr.filter((el:any) => {
+    const filteredChats = (arr: TChats) => arr.filter((el) => {
       const credentials = el.name + ' ' + el.lastName
-      if(credentials.toLowerCase().includes(value.toLowerCase())) return el
+      if (!date) {
+         return credentials.toLowerCase().includes(value.toLowerCase())
+      } else if (credentials.toLowerCase().includes(value.toLowerCase())
+        &&timeStampFilter(date) === timeStampFilter(el.lastMessageCreatedAt ?
+        el.lastMessageCreatedAt : el.createdAt)) {
+        return el
+      }
     })
-  const filterMessages = (arr: any) => arr.filter((el: any) => {
+      
+    const filteredMessages = (arr: TAllMessages) => arr.filter((el) => {
+    if (!date) {
       if (!el.fullType && el.message.toLowerCase().includes(value.toLowerCase())) {
         return el
-      } else if (el.fullType&& el.fullType.toLowerCase().includes(value.toLowerCase())) {
+      }
+      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(() => {
       dispatch(asyncGetAllMessages())
       dispatch(asyncGetChats())
@@ -94,8 +119,8 @@ const SearchLists = ({ value,sort }: ISearchLists) => {
     return () => clearInterval(idInterval);
     }, [dispatch]);
   
-    const filteredAndSorted:TChats = filterChats(sortByRecent(chats,sort))
-    const allMessagesMemo:TAllMessages = filterMessages(handleSort('updatedAt',messagesMemo,sort))
+    const filteredAndSorted = filteredChats(sortByRecent(chats,sort))
+    const allMessagesMemo = filteredMessages(handleSort('updatedAt',messagesMemo,sort))
   
     return (
     <>
@@ -131,13 +156,13 @@ const SearchLists = ({ value,sort }: ISearchLists) => {
             <span className={classes.underline}>___</span>
           </div>          
       </div>
-            {isActive === 0 && <ChatListRecent value={value}
+            {isActive === 0 && <ChatListRecent value={value} date={date}
               filteredAndSorted={filteredAndSorted} handleListItemClick={handleListItemClick} />}
-            {isActive === 1 && <FilesList allMessagesMemo={allMessagesMemo} value={value}/>}
-            {isActive === 2 && <MediaList allMessagesMemo={allMessagesMemo} value={value}/>}
-            {isActive === 3 && <TextList allMessagesMemo={allMessagesMemo} value={value}/>}
-            {isActive === 4 && <AudioList allMessagesMemo={allMessagesMemo} value={value}/>}
-            {isActive === 5 && <VideoList allMessagesMemo={allMessagesMemo} value={value}/>}
+            {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}/>}
     </>      
     )
 }

src/components/HomePage/LeftBar/index.tsx

@@ -42,7 +42,8 @@ const LeftBar = () => {
     setIsSearch(true)
     setIsMenu(false)
     setIsMenuSm(false)
-    setValue('')
+    value&&setValue('')
+    date&&setDate('')
     setSelectedIndex(i)
   }
   
@@ -71,19 +72,20 @@ const LeftBar = () => {
     return (
       <Grid item lg={3} style={{ position: 'relative', backgroundColor:'#ffffff'}}
         onMouseEnter={handleEnterOpenMenuSm} onMouseLeave={handleLeaveCloseMenuSm}>
-        {selectedIndex !== 2 && selectedIndex !== 4 &&
+        {selectedIndex !== 2 && selectedIndex !== 3 && selectedIndex !== 4 &&
           <SearchBar handleClick={handleClick} handleFocus={handleFocus} sort={sort} 
-            handleSearch={handleSearch} isSearch={isSearch} selectedIndex={selectedIndex}
+            handleSearch={handleSearch} isSearch={isSearch}
             value={value} setDate={setDate} date={date}/>}
-        {!selectedIndex&&isSearch && <SearchLists value={value} sort={sort}/>}
-        {!selectedIndex&&!isSearch &&<ChatsList sort={sort}/>}
+        {!selectedIndex && isSearch && <SearchLists value={value} setValue={setValue}
+          sort={sort} date={date} setDate={setDate}/>}
+        {!selectedIndex&&!isSearch &&<ChatsList sort={sort} date={date}/>}
         {!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}/>}
+        {selectedIndex === 1 && <ContactsList handleClick={handleClick} value={value} sort={sort} date={date}/>}
         {selectedIndex === 2 && <SettingsBar setSelectedIndex={setSelectedIndex} handleClick={handleClick}/>}
-        {selectedIndex === 3 && <AddContact setSelectedIndex={setSelectedIndex} />}
+        {selectedIndex === 3 && <AddContact setSelectedIndex={setSelectedIndex} handleClick={handleClick}/>}
         {selectedIndex === 4 && <EditBar setSelectedIndex={setSelectedIndex}/>}
     </Grid>
     )

src/components/HomePage/RightBar/ChatBar/Messages/MessageRightAudio/index.tsx

@@ -19,11 +19,11 @@ const StyledMenu = styled((props:any) => (
     elevation={0}
     anchorOrigin={{
       vertical: 'top',
-      horizontal: 'left',
+      horizontal: 'right',
     }}
     transformOrigin={{
       vertical: 'bottom',
-      horizontal: 'left',
+      horizontal: 'right',
     }}
     {...props}
   />

src/components/HomePage/RightBar/ChatBar/Messages/MessageRightFile/index.tsx

@@ -19,11 +19,11 @@ const StyledMenu = styled((props:any) => (
     elevation={0}
     anchorOrigin={{
       vertical: 'top',
-      horizontal: 'left',
+      horizontal: 'right',
     }}
     transformOrigin={{
       vertical: 'bottom',
-      horizontal: 'left',
+      horizontal: 'right',
     }}
     {...props}
   />

src/components/HomePage/RightBar/ChatBar/Messages/MessageRightImage/index.tsx

@@ -18,11 +18,11 @@ const StyledMenu = styled((props:any) => (
     elevation={0}
     anchorOrigin={{
       vertical: 'top',
-      horizontal: 'left',
+      horizontal: 'right',
     }}
     transformOrigin={{
       vertical: 'bottom',
-      horizontal: 'left',
+      horizontal: 'right',
     }}
     {...props}
   />

src/components/HomePage/RightBar/ChatBar/Messages/MessageRightText/index.tsx

@@ -15,11 +15,11 @@ const StyledMenu = styled((props:any) => (
     elevation={0}
     anchorOrigin={{
       vertical: 'top',
-      horizontal: 'left',
+      horizontal: 'right',
     }}
     transformOrigin={{
       vertical: 'bottom',
-      horizontal: 'left',
+      horizontal: 'right',
     }}
     {...props}
   />

src/components/HomePage/RightBar/ChatBar/Messages/MessageRightVideo/index.tsx

@@ -20,11 +20,11 @@ const StyledMenu = styled((props:any) => (
     elevation={0}
     anchorOrigin={{
       vertical: 'top',
-      horizontal: 'left',
+      horizontal: 'right',
     }}
     transformOrigin={{
       vertical: 'bottom',
-      horizontal: 'left',
+      horizontal: 'right',
     }}
     {...props}
   />

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

@@ -5,12 +5,12 @@ import VideocamIcon from '@mui/icons-material/Videocam';
 import AttachFileIcon from '@mui/icons-material/AttachFile';
 import SentimentSatisfiedAltIcon from '@mui/icons-material/SentimentSatisfiedAlt';
 import CloseIcon from '@mui/icons-material/Close';
+import Picker from 'emoji-picker-react';
 import { useReactMediaRecorder } from "react-media-recorder";
 import { useState } from "react";
 import { useSelector } from "react-redux";
 
 import FilesMenu from "../FilesMenu";
-import NotDone from "../../../../reusableComponents/NotDone";
 import {
     sentMessageById, sentImgMessageById, sentAudioMessageById,
     sentVideoMessageById,sentFileMessageById
@@ -64,7 +64,7 @@ const useStyles = makeStyles({
     filesMenu: {
       background: '#fdfdfd',
       position: 'absolute',
-      width: 300,
+      width: '15vw',
       maxWidth: '100%',
       left: '61%',
       bottom:'10vh',
@@ -74,16 +74,10 @@ const useStyles = makeStyles({
       padding: '4px 6px',
     },
     emoji: {
-      background: '#fdfdfd',
       position: 'absolute',
-      width: 350,
-      height:350,
-      left: '44%',
       bottom:'10vh',
       zIndex: 10,
       visibility: 'visible',
-      borderRadius: 10,
-      padding: '0px 6px',
     },
     iconCancel: {
         position: 'absolute',
@@ -155,7 +149,11 @@ const SendMessage = ({isArrow,handleScrollTo}:ISendMessage) => {
     const [type, setType] = useState<string>('')
     const { status, startRecording, stopRecording, mediaBlobUrl, clearBlobUrl } = useReactMediaRecorder({ audio: true });
     const { status: _status, startRecording: _startRecording, stopRecording: _stopRecording,
-        mediaBlobUrl: _mediaBlobUrl,clearBlobUrl:_clearBlobUrl } = useReactMediaRecorder({ video: true });
+        mediaBlobUrl: _mediaBlobUrl, clearBlobUrl: _clearBlobUrl } = useReactMediaRecorder({ video: true });
+    const onEmojiClick = (_e:any, emojiObject:any) => {
+        setValue(prevValue => prevValue + emojiObject.emoji)
+        setIsOpenEmoji(false)
+    };    
     const clearMessage = () => {
         file &&setFile(false)
         isRecording && setIsRecording(false)
@@ -273,28 +271,27 @@ const SendMessage = ({isArrow,handleScrollTo}:ISendMessage) => {
                     color: isRecording ? '#ffffff' : '#6b6b6b', width: 56, height: 56}}
                     style={{display: !value && !file && status !== 'stopped' && _status === 'idle' ? 'block' : 'none',
                     animation:isRecording ? 'ripple 1.2s infinite ease-in-out': 'none'}}/>
-                <SentimentSatisfiedAltIcon onClick={handleOpenEmoji}
+                <SentimentSatisfiedAltIcon onClick={handleOpenEmoji} 
                     fontSize='medium' sx={{color: isOpenEmoji ? 'rgb(41, 139, 231)' : '#6b6b6b', cursor: 'pointer',
-                    '&:hover': { color: 'rgb(41, 139, 231)'}}}/>
+                    pointerEvents: file || status !== 'idle' || _status !== 'idle' ? 'none' : "auto",
+                    '&:hover': { color: 'rgb(41, 139, 231)'}}} />
                 <div onClick={handleCloseEmoji} className={classes.overlay} id='overlay'
                   style={{ display: isOpenEmoji ? 'block':'none'}}>
-                   <div className={classes.emoji} style={{left: isOpen&&isOpen !== 'menu'?'33.5%':'46%'}}>
-                      <NotDone name='Emoji Bar'/>
+                   <div className={classes.emoji} style={{left: isOpen&&isOpen !== 'menu'?'32.5vw':'45vw'}}>
+                      <Picker onEmojiClick={onEmojiClick} />
                    </div>  
                 </div>
-                <textarea disabled={file ? true : false} value={value} onBlur={handleBlurTextarea}
+                <textarea disabled={file || status !== 'idle' || _status !== 'idle' ? true : false} value={value} onBlur={handleBlurTextarea}
                     onFocus={handleFocusTextarea} onChange={handleTextarea} className={classes.textarea}
                     placeholder={file ? 'The File is ready to send' : status === 'idle' && _status === 'idle' ? 'Message ' :
                     `${status === 'stopped' || _status === 'stopped' ?'Recorded':'Recording in progress'}`} rows={1}>
                </textarea>
                 <AttachFileIcon onClick={handleOpenFileMenu} className={classes.attachIcon}
-                    fontSize='medium' sx={{
-                        color: isOpenMenu ? 'rgb(41, 139, 231)' : '#6b6b6b', cursor: 'pointer',
-                        '&:hover': { color: 'rgb(41, 139, 231)' }
-                    }} />
+                  fontSize='medium' sx={{color: isOpenMenu ? 'rgb(41, 139, 231)' : '#6b6b6b', cursor: 'pointer',
+                  pointerEvents: value || status !== 'idle' || _status !== 'idle' ? 'none' : "auto",'&:hover': { color: 'rgb(41, 139, 231)'}}} />
                 <div onClick={handleCloseFileMenu} className={classes.overlay} id='overlay'
                     style={{ display: isOpenMenu ? 'block':'none'}}>
-                    <div className={classes.filesMenu} style={{left: isOpen&&isOpen !== 'menu'?'51%':'63.5%'}}>
+                    <div className={classes.filesMenu} style={{left: isOpen&&isOpen !== 'menu'?'52.5vw':'65vw'}}>
                       <FilesMenu setFile={setFile} setValue={setValue} setIsOpenMenu={setIsOpenMenu} setType={setType}/>
                     </div>
                 </div>         

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

@@ -44,6 +44,13 @@ const useStyles = makeStyles({
       display: "flex",
       justifyContent: 'center',
   },
+  messagesEmpty: {
+      overflowY: "hidden",
+      width: "100%",
+      display: "flex",
+      justifyContent: 'center',
+      paddingTop: 30,
+  },  
     messagesBody: {
       width: "60%",
   },  
@@ -104,7 +111,8 @@ const ChatBar = () => {
   return (
     <div className={classes.container} >
       <ArrowBack isArrow={isArrow} isNew={isNew} handleScrollTo={handleScrollTo}/>
-      <div ref={divRef} className={classes.messagesScroll} onScroll={debouncedHandleScroll}>
+      <div ref={divRef} onScroll={debouncedHandleScroll}
+        className={messages.length > 0 ? classes.messagesScroll : classes.messagesEmpty}>
         <div className={classes.messagesBody}>
         {messages.length > 0 ? messages.map(({ message, name, lastName, color,
           updatedAt, createdAt,number, type,fullType }) => {

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

@@ -50,7 +50,9 @@ const ProfileLists = () => {
     const messagesMemo = useSelector(getMessagesMemo)
     const [isActive, setIsActive] = useState<number>(0)
     const handleIsActive = (newValue: number): void => setIsActive(newValue)
-    const sortedMessages:TMessages = handleSort('updatedAt',messagesMemo,sort)
+  const sortedMessages: TMessages = handleSort('updatedAt', messagesMemo, sort)
+  //  const messages = useSelector(getMessages)
+  //const disabled = messages.length > 0 ? false : true
     return (
     <>
         <div className={classes.container}>

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

@@ -9,7 +9,7 @@ interface IStaticDatePicker {
 }
 
 const useStyles = makeStyles({
-container: {
+ container: {
   position: 'absolute',
 
 },

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

@@ -8,7 +8,6 @@ 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 { useState } from 'react';
 
 import { actionIsOpen } from '../../../../../../redux/control/action'
 import { getMessages } from '../../../../../../redux/messages/selector'
@@ -71,10 +70,8 @@ const Search = ({handleSearch,value,setDate,date}:ISearch) => {
   const dispatch = useDispatch()
   const classes = useStyles()
   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)
@@ -86,14 +83,13 @@ const Search = ({handleSearch,value,setDate,date}:ISearch) => {
       <IconButton onClick={() => dispatch(actionIsOpen(''))} aria-label="delete" size="medium">
         <CloseIcon fontSize='medium'/>
       </IconButton>
-      <SearchBar className={!isFocus||disabled?undefined:classes.searchBarActive}>
+      <SearchBar className={!value||disabled?undefined:classes.searchBarActive}>
           <SearchIconWrapper>
               <SearchIcon />
           </SearchIconWrapper>
           <StyledInputBase
             disabled={disabled}
             onChange={handleSearch}
-            onFocus={handleFocus}
             placeholder="Search"
             value={value}
             inputProps={{ 'aria-label': 'search' }}
@@ -105,7 +101,7 @@ const Search = ({handleSearch,value,setDate,date}:ISearch) => {
         <CalendarTodayIcon fontSize='medium'
         style={{color:date?'#2184f7':'#b1aeae'}}/>
       </IconButton>
-      <Switch onClick={handleSort} checked={sort} {...label} /> 
+      <Switch onClick={handleSort} checked={sort} {...label} disabled={disabled} /> 
     </Toolbar>
     )
 }

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

@@ -52,7 +52,7 @@ return (
    <div className={classes.container}>
     <Search handleSearch={handleSearch} value={value}
       setDate={setDate} date={date} />
-     <div className={classes.list}>
+     <div className={messages.length > 0 ?classes.list:undefined}>
       {messages.length > 0 ? arr.length > 0 ?
         <List sx={{ width: '100%' }}>
           {arr.map(({ name, lastName, avatarUrl, color, message, createdAt }) =>

src/components/reusableComponents/NotDone/index.tsx

@@ -1,16 +0,0 @@
-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 {name}!
-      </Alert>
-    </Stack>
-  );
-}
-
-export default NotDone

src/components/reusableComponents/NotDoneList/arr.tsx

@@ -1,218 +0,0 @@
-export  const arr = [
-    {
-        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/reusableComponents/NotDoneList/index.tsx

@@ -1,18 +0,0 @@
-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 },i:number) => {
-return (
-  <Stack sx={{ width: '100%' }} spacing={2}>
-    {arr.map(() => 
-      <Alert key={i} severity="warning">
-        <AlertTitle>Warning</AlertTitle>
-        The component has not done yet {name}!
-      </Alert>)}
-    </Stack>
-  );
-}
-
-export default NotDoneList