add last message

src/api-data/index.ts

@@ -110,6 +110,7 @@ const addContact = async <T>(number:string): Promise<T | undefined> => {
     success('CONTACT ADDED');
     return data
   } catch (e) {
+    error('ALREADY ADDED OR NOT EXIST')
     return undefined
   }
 };
@@ -134,7 +135,7 @@ const startChat = async <T>(id:string): Promise<T | undefined> => {
 
 const getChats = async <T>(): Promise<T | undefined> => {
   try {
-    const { data : {data} } = await axios.get('/chats');
+    const { data: { data } } = await axios.get('/chats');
     return data
   } catch (e) {
     return undefined
@@ -161,6 +162,8 @@ const getMessagesById = async <T>(id:string): Promise<T | undefined> => {
 
 export {
   setToken,
+  error,
+  success,
   authorizeUser,
   loginUser,
   logoutUser,

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

@@ -1,5 +1,5 @@
 import { makeStyles, Button, TextField, Typography } from '@material-ui/core'
-import { useState } from 'react';
+import React, { useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { asyncAddContact } from '../../../../redux/contacts/operations'
 
@@ -29,7 +29,11 @@ const useStyles = makeStyles({
   }
 })
 
-const AddContact = () => {
+interface IAddContact {
+  setIMenu: React.Dispatch<React.SetStateAction<number | null>>
+}
+
+const AddContact = ({setIMenu}:IAddContact) => {
   const classes = useStyles()
   const dispatch = useDispatch()
   const [number, setNumber] = useState<string>('')
@@ -38,9 +42,10 @@ const AddContact = () => {
     const value = e.target.value.split(' ').join('').trim()
     setNumber(value)
   }
-  const handleAddContact = async() => {
-    await dispatch(asyncAddContact(number))
+  const handleAddContact = async () => {
+    dispatch(asyncAddContact(number))
     setNumber('')
+    setIMenu(2)  
   }
 
   const isValidNumber = () => {
@@ -49,9 +54,13 @@ const AddContact = () => {
     return true
   }
 
+  const handlePressEnter = (e: React.KeyboardEvent<HTMLDivElement>) => {
+    if(e.code === 'Enter' && isValidNumber()) handleAddContact()
+  }
+
  
   return (
-    <div className={classes.container} >
+    <div onKeyDown={handlePressEnter} className={classes.container} >
       <Typography
         className={classes.title}
         variant="h5"

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

@@ -87,7 +87,7 @@ const ChatsList = () => {
   const classes = useStyles()
   const dispatch = useDispatch()
   const [selectedIndex, setSelectedIndex] = useState<number>(1);
-  const { total, chats } = useSelector(getState)
+  const { total, chats , lastMessages } = useSelector(getState)
  
 
   const handleListItemClick = async (i: number, companionId: string) => {
@@ -110,11 +110,10 @@ const ChatsList = () => {
     dispatch(asyncGetChats())
   }, [dispatch])
   
-
   return total !== '0' ? (
     <List className={classes.list} component="nav"
           aria-label="main mailbox folders">
-      {chats.map(({ name, lastName, avatarUrl, updatedAt, color,companionId }, i: number) => 
+      {chats.map(({name, lastName, avatarUrl, updatedAt, color,companionId }, i: number) => 
           <ListItemButton
           className={classes.listItem}
           key={shortid.generate()}
@@ -127,10 +126,9 @@ const ChatsList = () => {
                  {!avatarUrl&&`${firstLetter(name)}${firstLetter(lastName)}`}
               </Avatar>
           </ListItemIcon> 
-
           <ListItemText primary={`${firstLetter(name)}${slicedWord(name, 15, 1)} 
              ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}
-              secondary={slicedWord('message', 35)} />
+              secondary={slicedWord(lastMessages[i]?lastMessages[i].message:'No messages yet', 35)} />
           <ListItemIcon className={classes.listItem_iconRight}>
                <div className={classes.listItem_iconTimeChecked}>
                  <img alt='double check' width="16" height='16' src={doubleCheck} />

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

@@ -42,7 +42,10 @@ const useStyles = makeStyles({
   },
 })
 
-const  ContactsList = () => {
+interface IContactList {
+  value: string
+}
+const  ContactsList = ({value} : IContactList) => {
   const classes = useStyles()
   const dispatch = useDispatch()
   const { total, contacts } = useSelector(getState)
@@ -56,12 +59,18 @@ const  ContactsList = () => {
     dispatch(asyncGetContacts())
   }, [dispatch])
 
+  const filteredContacts = () => contacts.filter((el) => {
+    const credentials = el.name + ' ' + el.lastName
+    if(credentials.toLowerCase().includes(value.toLowerCase())) return el
+  })
+
+  const arr = filteredContacts()
   
   return total !== '0' ? (
     <List
       className={classes.list} component="nav"
       aria-label="main mailbox folders">
-      {contacts.map(({name,lastName,avatarUrl,color,createdAt,companionId }, i: number) => 
+      {arr.length > 0? arr.map(({name,lastName,avatarUrl,color,createdAt,companionId }, i: number) => 
         <ListItemButton
           key={shortid.generate()}
           selected={selectedIndex === i}
@@ -76,7 +85,8 @@ const  ContactsList = () => {
           <ListItemText primary={`${firstLetter(name)}${slicedWord(name, 15, 1)}
                ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}
                secondary={`Registered since ${timeStamp(createdAt)}`} />
-        </ListItemButton>)}
+        </ListItemButton>) :
+        <AlertInfo name={`Can not find contact by request : ${value}`} />}
       </List>
   ):<AlertInfo name='You do not have any contact yet!' />;
 }

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

@@ -16,6 +16,7 @@ import Switch from '@mui/material/Switch';
 import { makeStyles } from '@material-ui/core'
 
 import Modal from '../../../reusableComponents/Modal'
+import { ChangeEvent } from 'react';
 
 const useStyles = makeStyles({
     container: {
@@ -50,6 +51,10 @@ interface IContactsList {
 
 const MenuBar = ({handleSelectedMenu}:IContactsList) => {
   const classes = useStyles()
+  const handleSwitch = (e: React.MouseEvent<HTMLElement>) => {
+    e.stopPropagation()
+    console.log('clicked switch input')
+  }
   return (
     <Modal> 
       <Paper className={classes.container}>
@@ -83,14 +88,14 @@ const MenuBar = ({handleSelectedMenu}:IContactsList) => {
             <Brightness3Icon fontSize="medium" />
           </ListItemIcon>
           <ListItemText>Night Mode</ListItemText>
-          <Switch {...label} />
+          <Switch onClick={handleSwitch} {...label} />
         </MenuItem>
         <MenuItem onClick={() => handleSelectedMenu(5)}>
           <ListItemIcon className={classes.listIcon}>
             <AnimationIcon fontSize="medium" />
           </ListItemIcon>
           <ListItemText>Animations</ListItemText>
-          <Switch {...label} defaultChecked />
+          <Switch onClick={handleSwitch} {...label} defaultChecked />
         </MenuItem>
         <MenuItem onClick={() => handleSelectedMenu(6)}>
           <ListItemIcon className={classes.listIcon}>

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

@@ -75,10 +75,11 @@ interface ISearchBar {
   handleFocus:() => void,
   handleSearch:(e: React.ChangeEvent<HTMLInputElement>) => void,
   isOpen: boolean,
-  iMenu: number | null
+  iMenu: number | null,
+  value:string
 }
 
-const SearchBar = ({handleClick,handleFocus,handleSearch,isOpen,iMenu}:ISearchBar) => {
+const SearchBar = ({handleClick,handleFocus,handleSearch,isOpen,iMenu,value}:ISearchBar) => {
   const classes = useStyles()
     return (
         <Toolbar className={classes.toolBar}>
@@ -90,6 +91,7 @@ const SearchBar = ({handleClick,handleFocus,handleSearch,isOpen,iMenu}:ISearchBa
                     <SearchIcon />
                 </SearchIconWrapper>
                 <StyledInputBase
+                 value={value}
                  onFocus={handleFocus}
                  onChange={handleSearch}
                  placeholder={iMenu === 2 ?'Search contacts':'Search'}

src/components/HomePage/LeftBar/index.tsx

@@ -20,6 +20,7 @@ const LeftBar = () => {
   const modalRoot = useRef<HTMLDivElement|null>(null);
   const handleFocus = (): void => setIsOpen(true)
   const handleClick = (): void => {
+  setValue('')
   if (iMenu) setIMenu(null)
   if(!isOpen) return setIsMenu(!isMenu)
      setIsOpen(false)
@@ -35,6 +36,7 @@ const LeftBar = () => {
     setIsOpen(true)
     setIsMenu(false)
     setIsMenuSm(false)
+    setValue('')
     setIMenu(i)
   }
   
@@ -63,7 +65,7 @@ const LeftBar = () => {
     return (
       <Grid item lg={3} onMouseEnter={handleEnterOpenMenuSm} onMouseLeave={handleLeaveCloseMenuSm}>
         <SearchBar handleClick={handleClick} handleFocus={handleFocus}
-          handleSearch={handleSearch} isOpen={isOpen} iMenu={iMenu} />
+          handleSearch={handleSearch} isOpen={isOpen} iMenu={iMenu} value={value}/>
         {!iMenu&&isOpen && <SearchLists />}
         {!iMenu&&!isOpen &&<ChatsList/>}
         {!iMenu && isMenuSm && !isOpen && <SmallMenuBar handleSelectedMenu={handleSelectedMenu}
@@ -72,7 +74,7 @@ const LeftBar = () => {
           createPortal(<MenuBar handleSelectedMenu={handleSelectedMenu} />, modalRoot.current)}
         {iMenu === 0 && <NotDone name='Saved Messages' />}
         {iMenu === 1 && <NotDone name='Archive Chats' />}
-        {iMenu === 2 && <ContactsList />}
+        {iMenu === 2 && <ContactsList value={value}/>}
         {iMenu === 3 && <NotDone name='Settings' />}
         {iMenu === 4 && <NotDone name='Night Mode' />}
         {iMenu === 5 && <NotDone name='Animations' />}
@@ -83,8 +85,8 @@ const LeftBar = () => {
         {iMenu === 10 && <NotDone name='Telegram WebZ 1.33.4' />}
         {iMenu === 11 && <NotDone name='New Channel' />}
         {iMenu === 12 && <NotDone name='New Group' />}
-        {iMenu === 13 && <ContactsList />}
-        {iMenu === 14 && <AddContact/>}
+        {iMenu === 13 && <ChatsList />}
+        {iMenu === 14 && <AddContact setIMenu={setIMenu}/>}
     </Grid>
     )
 }

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

@@ -84,8 +84,8 @@ return (
                    />
                  </ListItem>)}
           </List> :
-        <AlertInfo name={!date&&value ? `Messages not found with Search by request: ${value}`:
-        `Messages not found with Search by DataPicker: ${timeStampFilter(date)} and request: ${value}`} />:
+        <AlertInfo name={!date&&value ? `Can not find message by request: ${value}`:
+        `Can not find message by request: ${value} and DataPicker: ${timeStampFilter(date)}`} />:
         <AlertInfo name='You do not have messages yet!' />}
      </div>
    </div>

src/redux/chats/reducer/index.ts

@@ -10,7 +10,8 @@ const initialState: IChatsState = {
   total: "0",
   limit: "0",
   page: "0",
-  chats: []
+  chats: [],
+  lastMessages: []
 }
 
 

src/redux/chats/selector/index.ts

@@ -4,6 +4,7 @@ const getTotal = (state: IState) => state.chats.total;
 const getLimit = (state:IState) => state.chats.limit;
 const getPage = (state: IState) => state.chats.page;
 const getChats = (state: IState) => state.chats.chats;
+const getLastMessages = (state: IState) => state.chats.lastMessages;
 const getState= (state:IState) => state.chats;
 
-export { getTotal,getLimit,getPage,getChats,getState };
+export { getTotal,getLimit,getPage,getChats,getLastMessages,getState };

src/typescript/redux/chat/types.ts

@@ -19,3 +19,4 @@ export type TChat = {
 
 
 
+

src/typescript/redux/chats/interfaces.ts

@@ -1,10 +1,11 @@
-import { TChats } from './types'
+import { TChats,TLastMessages } from './types'
 
 export interface IChatsState  {
   total: string,
   limit: string,
   page: string,
-  chats: TChats
+  chats: TChats,
+  lastMessages: TLastMessages
 }
 
 export interface IChatsPayload {
@@ -12,7 +13,8 @@ export interface IChatsPayload {
   total: string,
   limit: string,
   page: string,
-  chats: TChats
+  chats: TChats,
+  lastMessages: TLastMessages
   },
 }
 
@@ -20,7 +22,8 @@ export interface IChatsRes  {
   total: string,
   limit: string,
   page: string,
-  chats: TChats
+  chats: TChats,
+  lastMessages: TLastMessages
 }
 
 

src/typescript/redux/chats/types.ts

@@ -3,6 +3,8 @@ export type TChat = {
   lastName: string,
   avatarUrl:string,
   color: string,
+  online: string,
+  number:string,
   _id: string,
   companionId: string,
   owner: any,
@@ -13,6 +15,14 @@ export type TChat = {
 
 export type TChats = TChat[] | []
 
+export type TLastMessage = {
+  message: string,
+  companionId: string,
+}
+
+export type TLastMessages = TLastMessage[] | []
+
+