done ability to set chat

src/api-data/index.ts

@@ -103,6 +103,26 @@ const getContacts = async <T>(): Promise<T | undefined> => {
   }
 };
 
+const startChat = async <T>(id:string): Promise<T | undefined> => {
+  try {
+    const { data : {data} } = await axios.post('/chats',{id});
+    success('CHAT OPENED');
+    return data
+  } catch (e) {
+    error('BAD REQUEST');
+  }
+};
+
+const getChats = async <T>(): Promise<T | undefined> => {
+  try {
+    const { data : {data} } = await axios.get('/chats');
+    success('CHATS LOADED');
+    return data
+  } catch (e) {
+    error('BAD REQUEST');
+  }
+};
+
 
 
 export {
@@ -113,5 +133,7 @@ export {
   updateUserAvatar,
   currentUser,
   addContact,
-  getContacts
+  getContacts,
+  startChat,
+  getChats
 };

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

@@ -1,219 +0,0 @@
-export  const chats = [
-    {
-        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/HomePage/LeftBar/ChatsList/index.tsx

@@ -4,11 +4,15 @@ import Avatar from '@mui/material/Avatar';
 import ListItemText from '@mui/material/ListItemText';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import { makeStyles, Typography } from '@material-ui/core'
-import { useState } from 'react';
-import  shortid  from 'shortid';
+import { useState,useEffect } from 'react';
+import shortid from 'shortid';
+import { useSelector, useDispatch } from 'react-redux';
+import AlertInfo from '../../../reusableComponents/AlertInfo'
 
 import doubleCheck from '../../../../img/clipart289625.png'
-import { chats } from './chats'
+import { firstLetter, slicedWord, timeStamp } from '../../../../helpers'
+import { getState } from '../../../../redux/chats/selector'
+import { asyncGetChats,asyncStartChat } from '../../../../redux/chats/operations'
 
 const useStyles = makeStyles({
   list: {
@@ -77,59 +81,58 @@ const useStyles = makeStyles({
   }
 })
 
-const  ChatsList = () => {
-  const [selectedIndex, setSelectedIndex] = useState<number>(1);
-
+const ChatsList = () => {
   const classes = useStyles()
+  const dispatch = useDispatch()
+  const [selectedIndex, setSelectedIndex] = useState<number>(1);
+  const { total, chats } = useSelector(getState)
+ 
 
-  const handleListItemClick = (e: React.SyntheticEvent<Element, Event>, i: number) => {
-    console.log(i,'index','selected chat in chat bar',e)
-    setSelectedIndex(i);
+  const handleListItemClick = async (i: number, companionId: string) => {
+      await dispatch(asyncStartChat(companionId))
+      setSelectedIndex(i);
   }
 
   const handleNewMsgS = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>, i: number) => {
     e.stopPropagation()
     console.log(i,'index','clicked read new messages')
   }
-  
-  const data = new Date(2022, 3, 8).toLocaleString("en-US", {
-    year:'numeric',
-    month: 'short',
-    day: 'numeric'
-  });
 
-  const firstLetter = (word: string) => word.slice(0, 1).toUpperCase()
-  const slicedWord = (word: string, max: number,from:number = 0) => word.length < max ? word.slice(from) : word.slice(from, max)
+  useEffect(() => {
+    dispatch(asyncGetChats())
+  }, [dispatch])
+  
 
-  return (
-    <List
-      className={classes.list} component="nav"
-        aria-label="main mailbox folders">
-         {chats && chats.map(({name,lastName,avatarUrl,message}: any,i:number) =>
+  return total !== '0' ? (
+    <List className={classes.list} component="nav"
+          aria-label="main mailbox folders">
+      {chats.map(({ name, lastName, avatarUrl, updatedAt, color,companionId }, i: number) => 
           <ListItemButton
           className={classes.listItem}
           key={shortid.generate()}
           selected={selectedIndex === i}
-          onClick={(e) => handleListItemClick(e, i)}
+          onClick={(e) => handleListItemClick(i,companionId)}
           >
           <ListItemIcon className={classes.listItem_iconAvatar}>
-            <Avatar alt={name} src={avatarUrl?avatarUrl:undefined}
-                 sx={{ background: '#2ab307', width: 54, height: 54 }}>
+            <Avatar alt={name} src={avatarUrl?`http://localhost:3000/${avatarUrl}`:undefined}
+                 sx={{ background: color, width: 54, height: 54 }}>
                  {!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)} />
+             <ListItemText primary={`${firstLetter(name)}${slicedWord(name, 15, 1)} 
+              ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}
+              secondary={slicedWord('message', 35)} />
           <ListItemIcon className={classes.listItem_iconRight}>
                <div className={classes.listItem_iconTimeChecked}>
                  <img alt='double check' width="16" height='16' src={doubleCheck} />
-                 <Typography  className={classes.listItem_icon_time} variant="h6"   color="initial">{data}</Typography>
+                 <Typography  className={classes.listItem_icon_time} variant="h6"   color="initial">{timeStamp(updatedAt)}</Typography>
                </div>
                <button onClick={(e) => handleNewMsgS(e,i)} className={classes.listItem_iconRightBtn}>17</button>
           </ListItemIcon>            
         </ListItemButton>)}
       </List>
-  );
+  ):<AlertInfo name='You do not have any chats yet!' />;
 }
 
 export default ChatsList

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

@@ -12,8 +12,7 @@ import AlertInfo from '../../../reusableComponents/AlertInfo'
 import { getState } from '../../../../redux/contacts/selector'
 import { asyncGetContacts } from '../../../../redux/contacts/operations'
 import { firstLetter, slicedWord, timeStamp } from '../../../../helpers'
-import { actionStartChat } from '../../../../redux/controlApp/action'
-import { TContact } from '../../../../typescript/redux/contacts/types'
+import { asyncStartChat } from '../../../../redux/chats/operations'
 
 const useStyles = makeStyles({
   list: {
@@ -48,9 +47,9 @@ const  ContactsList = () => {
   const dispatch = useDispatch()
   const { total, contacts } = useSelector(getState)
   const [selectedIndex, setSelectedIndex] = useState<number>(1);  
-  const handleListItemClick = async (i:number, companion:TContact) => {
-    setSelectedIndex(i);
-    await dispatch(actionStartChat(companion))
+  const handleListItemClick = async (i:number, companionId:string) => {
+     setSelectedIndex(i);
+     await dispatch(asyncStartChat(companionId))
   }
 
   useEffect(() => {
@@ -62,24 +61,22 @@ const  ContactsList = () => {
     <List
       className={classes.list} component="nav"
       aria-label="main mailbox folders">
-      {contacts.map((contact, i: number) => {
-          const { name, lastName, avatarUrl, updatedAt } = contact
-         return  (
+      {contacts.map(({name,lastName,avatarUrl,color,updatedAt,companionId }, i: number) => 
         <ListItemButton
           key={shortid.generate()}
           selected={selectedIndex === i}
-          onClick={() => handleListItemClick(i, contact)}
+          onClick={() => handleListItemClick(i,companionId)}
           >
           <ListItemIcon className={classes.listItem_iconAvatar}>
             <Avatar alt={name} src={avatarUrl?`http://localhost:3000/${avatarUrl}`:undefined}
-                 sx={{ background: '#f0c712', width: 54, height: 54 }}>
+                 sx={{ background: color, width: 54, height: 54 }}>
                  {!avatarUrl&&`${firstLetter(name)}${firstLetter(lastName)}`}
               </Avatar>
           </ListItemIcon> 
           <ListItemText primary={`${firstLetter(name)}${slicedWord(name, 15, 1)}
                ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}
                secondary={`last seen ${timeStamp(updatedAt)}`} />
-        </ListItemButton>)})}
+        </ListItemButton>)}
       </List>
   ):<AlertInfo name='You do not have any contact yet!' />;
 }

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

@@ -22,6 +22,7 @@ const useStyles = makeStyles({
         width: 700,
         position: 'fixed',
         bottom: 20,
+        paddingTop:10,
     },
     inputContainer: {
         position:'relative',
@@ -145,7 +146,7 @@ const SendMessage = ({setChat,isArrow,handleArrow}:ISendMessage) => {
     const sentMessage = () => {
         const {name ,lastName,avatarUrl} = currentUser
         const newMessage =  {
-        avatarUrl:`http://${avatarUrl}`,
+        avatarUrl:`http://localhost:3000/${avatarUrl}`,
         name,
         lastName,
         message: value?value:file.path,
@@ -188,7 +189,7 @@ const SendMessage = ({setChat,isArrow,handleArrow}:ISendMessage) => {
 
     console.log(value,file)
     return (
-        <div className={classes.container} >            
+        <div className={classes.container} style={{borderTop:isArrow?'solid 1px #ffffff':'none'}} >            
             <div onMouseLeave={handleLeaveInput} onMouseMove={handleMoveInput}
                 onKeyPress={handleKeyPres} className={classes.inputContainer}>
                 <CloseIcon onClick={handleClearMessage} fontSize="small" className={classes.iconCancel}

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

@@ -4,7 +4,7 @@ import MessageLeft from './Messages/MessageLeft'
 import MessageRight from './Messages/MessagesRight'
 import { useState,useEffect,useRef,useCallback} from "react";
 import { fakeChat } from "./fakeChat";
-
+import shortid from 'shortid';
 const debounce = require('lodash.debounce');
 
 const useStyles = makeStyles({   
@@ -64,6 +64,7 @@ const ChatBar = () => {
           if (i % 2 === 0) {
             return (
             <MessageLeft
+            key={shortid.generate()}
             message={message}
             timestamp={timestamp}
             avatarUrl={avatarUrl}
@@ -73,6 +74,7 @@ const ChatBar = () => {
           } else {
             return (
             <MessageRight
+            key={shortid.generate()}    
             message={message}
             timestamp={timestamp}
             avatarUrl={avatarUrl}

src/components/HomePage/RightBar/HeaderBar/Credentials/index.tsx

@@ -5,18 +5,18 @@ import ListItemIcon from '@mui/material/ListItemIcon';
 import { useDispatch,useSelector } from 'react-redux';
 
 import { actionIsOpen } from '../../../../../redux/controlApp/action'
-import { getCompanion } from '../../../../../redux/controlApp/selector'
+import { getChat } from '../../../../../redux/chats/selector'
 import { firstLetter,slicedWord,timeStamp } from '../../../../../helpers'
 
 const Credentials = () => {
   const dispatch = useDispatch()
-  const companion = useSelector(getCompanion)
-  const { name,lastName,avatarUrl,updatedAt } = companion
+  const chat = useSelector(getChat)
+  const { name,lastName,avatarUrl,color,updatedAt } = chat
   return (
     <ListItemButton onClick={() => dispatch(actionIsOpen('credentials'))}>
       <ListItemIcon >
         <Avatar alt={name} src={avatarUrl?`http://localhost:3000/${avatarUrl}`:undefined}
-              sx={{ background: '#f0c712', width: 44, height: 44 }}>
+              sx={{ background: color, width: 44, height: 44 }}>
               {!avatarUrl&&`${firstLetter(name)}${firstLetter(lastName)}`}
           </Avatar>
       </ListItemIcon> 

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

@@ -10,7 +10,7 @@ import { makeStyles } from '@material-ui/core'
 import { useDispatch } from "react-redux";
 
 import { actionIsOpen } from '../../../../../../../redux/controlApp/action'
-import StaticDatePicker from './DataPicker'
+import StaticDatePicker from "../../../../../../reusableComponents/StaticDatePicker";
 
 const SearchBar = styled('div')(({ theme }:any) => ({
   position: 'relative',

src/components/HomePage/RightBar/index.tsx

@@ -3,14 +3,15 @@ import { makeStyles } from '@material-ui/core'
 import HeaderBar from './HeaderBar'
 import ChatBar from './ChatBar'
 import { useSelector } from 'react-redux'
-import { getState } from '../../../redux/controlApp/selector'
+import { getIsOpen } from '../../../redux/controlApp/selector'
+import { getChat } from '../../../redux/chats/selector'
 
 const useStyles = makeStyles({
   container: {
     minHeight: '100vh',
     maxHeight: '100vh',
     background: 'linear-gradient(to bottom right, #e7f097 , #b1e667,#f4f75e)',
-    paddingBottom:180,
+    paddingBottom:158,
   },
   chat: {
     width: "100%",
@@ -22,13 +23,24 @@ const useStyles = makeStyles({
   },
   moveChat: {
     marginLeft:506
+  },
+  containerBtn: {
+    minHeight: '100vh',
+    maxHeight: '100vh',
+    background: 'linear-gradient(to bottom right, #e7f097 , #b1e667,#f4f75e)',
+    display: 'flex',
+    msFlexDirection: 'column',
+    alignContent: 'center',
+    alignItems: 'center',
+    justifyContent:'center'
   }
 })
 
 const RightBar = () => {
   const classes = useStyles()
-  const {isOpen,companion:{number}} = useSelector(getState)
-    return number?(
+  const isOpen = useSelector(getIsOpen)
+  const {_id} = useSelector(getChat)
+    return _id?
       <Grid item lg={9} className={classes.container}>
         <HeaderBar />
         <div className={classes.chat}>
@@ -36,7 +48,7 @@ const RightBar = () => {
           {isOpen&&isOpen !== 'menu'&&<div className={classes.moveChat}></div>}
         </div>
       </Grid>
-    ):<Grid item lg={9} className={classes.container}/>
+     : <Grid item lg={9} className={classes.container}/>
 }
 
 export default RightBar

src/redux/chats/action/index.ts

@@ -0,0 +1,22 @@
+import { createAction } from '@reduxjs/toolkit';
+import { IChatsRes } from '../../../typescript/redux/chats/interfaces'
+import { TChat } from '../../../typescript/redux/chats/types'
+
+const actionGetChatsSuccess = createAction('getChats/success', (value:IChatsRes) => ({
+  payload: value,
+}));
+
+const actionGetChatsReject = createAction('getChats/reject', () => ({
+  payload: null,
+}));
+
+const selectCompanionSuccess = createAction('selectCompanion/success', (value:TChat) => ({
+  payload: value,
+}));
+
+
+export {
+  actionGetChatsSuccess,
+  actionGetChatsReject,
+  selectCompanionSuccess
+};

src/redux/chats/operations/index.ts

@@ -0,0 +1,37 @@
+import { actionIsLoading } from '../../loading/action';
+import {
+  actionGetChatsSuccess,
+  actionGetChatsReject,
+  selectCompanionSuccess
+} from '../action';
+import { startChat,getChats} from '../../../api-data';
+import { IChatsRes } from '../../../typescript/redux/chats/interfaces'
+import { TChat } from '../../../typescript/redux/chats/types'
+
+const asyncStartChat = (id:string) => async (dispatch:any) => {
+  try {
+    dispatch(actionIsLoading(true));
+    const data = await startChat<TChat>(id)
+    data&&dispatch(selectCompanionSuccess(data))
+  } finally {
+    dispatch(actionIsLoading(false));
+  }
+};
+
+const asyncGetChats = () => async (dispatch:any) => {
+  try {
+    dispatch(actionIsLoading(true));
+    const data = await getChats<IChatsRes>()
+    data&&dispatch(actionGetChatsSuccess(data))
+  } catch (e) {
+    dispatch(actionGetChatsReject())
+  } finally {
+    dispatch(actionIsLoading(false));
+  }
+};
+
+export { asyncStartChat,asyncGetChats };
+
+
+
+

src/redux/chats/reducer/index.ts

@@ -0,0 +1,47 @@
+import { createReducer } from '@reduxjs/toolkit';
+import { IChatsState, IChatsPayload,IChatPayload } from '../../../typescript/redux/chats/interfaces';
+
+import {
+  actionGetChatsSuccess,
+  actionGetChatsReject,
+  selectCompanionSuccess
+} from '../action';
+
+const initialState: IChatsState = {
+  chat:{
+     name: '',
+     lastName: '',
+     avatarUrl:'',
+     color: '',
+     _id: '',
+     companionId: '',
+     owner: {
+       _id: '',
+     },
+     createdAt: '',
+     updatedAt: '',
+     __v: 0,
+},
+  total: "0",
+  limit: "0",
+  page: "0",
+  chats: []
+}
+
+
+
+const reducerChats = createReducer(initialState, {
+  [actionGetChatsSuccess.type]: (state,{ payload }:IChatsPayload) => {
+    return {...state,...payload};
+  },
+  [actionGetChatsReject.type]: (state, _) => {
+    return state;
+  },
+  [selectCompanionSuccess.type]: (state, { payload }: IChatPayload) => {
+    const newState = { ...state }
+    newState.chat = payload
+    return newState;
+  },  
+});
+
+export default reducerChats;

src/redux/chats/selector/index.ts

@@ -0,0 +1,10 @@
+import {IState} from '../../../typescript/redux/interfaces'
+
+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 getChat = (state: IState) => state.chats.chat;
+const getState= (state:IState) => state.chats;
+
+export { getTotal,getLimit,getPage,getChats,getChat,getState };

src/redux/controlApp/action/index.ts

@@ -1,13 +1,9 @@
 import { createAction } from '@reduxjs/toolkit';
 import { TIsOpen } from '../../../typescript/redux/controlApp/types'
-import { TContact } from '../../../typescript/redux/contacts/types'
 
 const actionIsOpen= createAction('controlApp/isOpen', (value:TIsOpen) => ({
   payload: value,
 }));
 
-const actionStartChat= createAction('controlApp/startChat', (value:TContact) => ({
-  payload: value,
-}));
 
-export { actionIsOpen,actionStartChat };
+export { actionIsOpen };

src/redux/controlApp/reducer/index.ts

@@ -1,33 +1,15 @@
 import { createReducer } from '@reduxjs/toolkit';
-import { actionIsOpen,actionStartChat } from '../action';
-import { IControlAppState,IPayloadIsOpen,IPayloadCompanion } from '../../../typescript/redux/controlApp/interfaces'
+import { actionIsOpen } from '../action';
+import { IControlAppState,IPayloadIsOpen } from '../../../typescript/redux/controlApp/interfaces'
 
 const initialState:IControlAppState = {
-  isOpen: "",
-  companion: {
-  _id: '',
-  __v: 0,
-  avatarUrl: '',
-  color: '',
-  country: '',
-  createdAt: '',
-  lastName: '',
-  name: '',
-  number: '',
-  owner: {
-    token: '',
-  },
-  updatedAt: '',
-  },
+  isOpen: '',
 }
 
 const reducerControlApp = createReducer(initialState, {
   [actionIsOpen.type]: (state, { payload:isOpen }:IPayloadIsOpen) => {
     return {...state,isOpen}
   },
-  [actionStartChat.type]: (state, { payload:companion }:IPayloadCompanion) => {
-    return {...state,companion}
-  },  
 });
 
 export default reducerControlApp;

src/redux/controlApp/selector/index.ts

@@ -1,7 +1,6 @@
 import { IState } from '../../../typescript/redux/interfaces'
 
 const getIsOpen = (state: IState) => state.controlApp.isOpen;
-const getCompanion = (state: IState) => state.controlApp.companion;
 const getState = (state:IState) => state.controlApp;
 
-export { getIsOpen,getCompanion,getState };
+export { getIsOpen,getState };

src/redux/rootReducer/index.ts

@@ -3,6 +3,7 @@ import { persistReducer } from 'redux-persist';
 import storage from 'redux-persist/lib/storage';
 
 import reducerContacts from '../contacts/reducer'
+import reducerChats from '../chats/reducer'
 import reducerControlApp from '../controlApp/reducer'
 import reducerLoading from '../loading/reducer';
 import reducerAuthorization from '../authorization/reducer';
@@ -14,6 +15,7 @@ const authorizationPersistConfig = {
 
 export const rootReducer = combineReducers({
   isLoading: reducerLoading,
+  chats: reducerChats,
   contacts:reducerContacts,
   controlApp: reducerControlApp,
   authorization: persistReducer(

src/typescript/redux/chats/interfaces.ts

@@ -0,0 +1,30 @@
+import { TChats,TChat } from './types'
+
+export interface IChatsState  {
+  chat: TChat,
+  total: string,
+  limit: string,
+  page: string,
+  chats: TChats
+}
+
+export interface IChatsPayload {
+  payload: {
+  total: string,
+  limit: string,
+  page: string,
+  chats: TChats
+  },
+}
+
+export interface IChatsRes  {
+  total: string,
+  limit: string,
+  page: string,
+  chats: TChats
+}
+
+export interface IChatPayload {
+  payload: TChat
+}
+

src/typescript/redux/chats/types.ts

@@ -0,0 +1,21 @@
+export type TChat = {
+  name: string,
+  lastName: string,
+  avatarUrl:string,
+  color: string,
+  _id: string,
+  companionId: string,
+  owner: {
+    _id: string,
+  },
+  createdAt: string,
+  updatedAt: string,
+  __v: number
+}
+
+export type TChats = TChat[] | []
+
+
+
+
+

src/typescript/redux/contacts/types.ts

@@ -1,6 +1,7 @@
 export type TContact = {
   _id: string,
   __v: number,
+  companionId:string,
   avatarUrl: string,
   color: string,
   country: string,
@@ -9,7 +10,7 @@ export type TContact = {
   name: string,
   number: string,
   owner: {
-    token: string,
+    _id: string,
   },
   updatedAt: string,
 }

src/typescript/redux/controlApp/interfaces.ts

@@ -1,16 +1,12 @@
 import { TIsOpen } from './types'
-import { TContact } from '../contacts/types'
 
 export interface IControlAppState {
   isOpen: TIsOpen,
-  companion: TContact
 }
 
 export interface IPayloadIsOpen {
   payload:TIsOpen
 }
 
-export interface IPayloadCompanion {
-  payload:TContact
-}
+
 

src/typescript/redux/interfaces.ts

@@ -1,9 +1,11 @@
 import { IAuthorizationState } from './authorization/interfaces'
 import { IContactsState } from './contacts/interfaces'
+import { IChatsState} from './chats/interfaces'
 import { IControlAppState } from './controlApp/interfaces'
 
 export interface IState {
-  contacts:IContactsState,
+  contacts: IContactsState,
+  chats: IChatsState,
   controlApp:IControlAppState,
   isLoading: boolean;
   authorization: IAuthorizationState