done main part in chat messages

package-lock.json

@@ -48,6 +48,7 @@
         "redux-persist": "^6.0.0",
         "redux-toolkit": "^1.1.2",
         "shortid": "^2.2.16",
+        "socket.io-client": "4.0.0",
         "typescript": "^4.3.5",
         "uuid": "^8.3.1",
         "web-vitals": "^0.2.4",
@@ -3241,6 +3242,11 @@
         "@babel/types": "^7.3.0"
       }
     },
+    "node_modules/@types/component-emitter": {
+      "version": "1.2.11",
+      "resolved": "https://registry.npmjs.org/@types/component-emitter/-/component-emitter-1.2.11.tgz",
+      "integrity": "sha512-SRXjM+tfsSlA9VuG8hGO2nft2p8zjXCK1VcC6N4NXbBbYbSia9kzCChYQajIjzIqOOOuh5Ock6MmV2oux4jDZQ=="
+    },
     "node_modules/@types/eslint": {
       "version": "7.2.5",
       "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-7.2.5.tgz",
@@ -4840,6 +4846,11 @@
         "babylon": "bin/babylon.js"
       }
     },
+    "node_modules/backo2": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/backo2/-/backo2-1.0.2.tgz",
+      "integrity": "sha1-MasayLEpNjRj41s+u2n038+6eUc="
+    },
     "node_modules/balanced-match": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
@@ -4908,6 +4919,14 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/base64-arraybuffer": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-0.1.4.tgz",
+      "integrity": "sha1-mBjHngWbE1X5fgQooBfIOOkLqBI=",
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
     "node_modules/base64-js": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
@@ -7297,6 +7316,33 @@
         "once": "^1.4.0"
       }
     },
+    "node_modules/engine.io-client": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-5.0.1.tgz",
+      "integrity": "sha512-CQtGN3YwfvbxVwpPugcsHe5rHT4KgT49CEcQppNtu9N7WxbPN0MAG27lGaem7bvtCFtGNLSL+GEqXsFSz36jTg==",
+      "dependencies": {
+        "base64-arraybuffer": "0.1.4",
+        "component-emitter": "~1.3.0",
+        "debug": "~4.3.1",
+        "engine.io-parser": "~4.0.1",
+        "has-cors": "1.1.0",
+        "parseqs": "0.0.6",
+        "parseuri": "0.0.6",
+        "ws": "~7.4.2",
+        "yeast": "0.1.2"
+      }
+    },
+    "node_modules/engine.io-parser": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-4.0.3.tgz",
+      "integrity": "sha512-xEAAY0msNnESNPc00e19y5heTPX4y/TJ36gr8t1voOaNmTojP9b3oK3BbJLFufW2XFPQaaijpFewm2g2Um3uqA==",
+      "dependencies": {
+        "base64-arraybuffer": "0.1.4"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
     "node_modules/enhanced-resolve": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-4.3.0.tgz",
@@ -9653,6 +9699,11 @@
         "node": ">= 0.4.0"
       }
     },
+    "node_modules/has-cors": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-cors/-/has-cors-1.1.0.tgz",
+      "integrity": "sha1-XkdHk/fqmEPRu5nCPu9J/xJv/zk="
+    },
     "node_modules/has-flag": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
@@ -15148,6 +15199,16 @@
       "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.1.tgz",
       "integrity": "sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug=="
     },
+    "node_modules/parseqs": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/parseqs/-/parseqs-0.0.6.tgz",
+      "integrity": "sha512-jeAGzMDbfSHHA091hr0r31eYfTig+29g3GKKE/PPbEQ65X0lmMwlEoqmhzu0iztID5uJpZsFlUPDP8ThPL7M8w=="
+    },
+    "node_modules/parseuri": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/parseuri/-/parseuri-0.0.6.tgz",
+      "integrity": "sha512-AUjen8sAkGgao7UyCX6Ahv0gIK2fABKmYjvP4xmy5JaKvcbTRueIqIPHLAfq30xJddqSE033IOMUSOMCcK3Sow=="
+    },
     "node_modules/parseurl": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
@@ -19048,6 +19109,36 @@
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
       "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
     },
+    "node_modules/socket.io-client": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.0.0.tgz",
+      "integrity": "sha512-27yQxmXJAEYF19Ygyl8FPJ0if0wegpSmkIIbrWJeI7n7ST1JyH8bbD5v3fjjGY5cfCanACJ3dARUAyiVFNrlTQ==",
+      "dependencies": {
+        "@types/component-emitter": "^1.2.10",
+        "backo2": "~1.0.2",
+        "component-emitter": "~1.3.0",
+        "debug": "~4.3.1",
+        "engine.io-client": "~5.0.0",
+        "parseuri": "0.0.6",
+        "socket.io-parser": "~4.0.4"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/socket.io-parser": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.0.4.tgz",
+      "integrity": "sha512-t+b0SS+IxG7Rxzda2EVvyBZbvFPBCjJoyHuE0P//7OAsN23GItzDRdWa6ALxZI/8R5ygK7jAR6t028/z+7295g==",
+      "dependencies": {
+        "@types/component-emitter": "^1.2.10",
+        "component-emitter": "~1.3.0",
+        "debug": "~4.3.1"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/sockjs": {
       "version": "0.3.20",
       "resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.20.tgz",
@@ -22439,11 +22530,23 @@
       }
     },
     "node_modules/ws": {
-      "version": "7.4.0",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.0.tgz",
-      "integrity": "sha512-kyFwXuV/5ymf+IXhS6f0+eAFvydbaBW3zjpT6hUdAh/hbVjTIB5EHBGi0bPoCLSK2wcuz3BrEkB9LrYv1Nm4NQ==",
+      "version": "7.4.6",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.6.tgz",
+      "integrity": "sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==",
       "engines": {
         "node": ">=8.3.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": "^5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
       }
     },
     "node_modules/xml-name-validator": {
@@ -22549,6 +22652,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/yeast": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/yeast/-/yeast-0.1.2.tgz",
+      "integrity": "sha1-AI4G2AlDIMNy28L47XagymyKxBk="
+    },
     "node_modules/yup": {
       "version": "0.32.8",
       "resolved": "https://registry.npmjs.org/yup/-/yup-0.32.8.tgz",
@@ -25188,6 +25296,11 @@
         "@babel/types": "^7.3.0"
       }
     },
+    "@types/component-emitter": {
+      "version": "1.2.11",
+      "resolved": "https://registry.npmjs.org/@types/component-emitter/-/component-emitter-1.2.11.tgz",
+      "integrity": "sha512-SRXjM+tfsSlA9VuG8hGO2nft2p8zjXCK1VcC6N4NXbBbYbSia9kzCChYQajIjzIqOOOuh5Ock6MmV2oux4jDZQ=="
+    },
     "@types/eslint": {
       "version": "7.2.5",
       "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-7.2.5.tgz",
@@ -26615,6 +26728,11 @@
       "resolved": "https://registry.npmjs.org/babylon/-/babylon-6.18.0.tgz",
       "integrity": "sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ=="
     },
+    "backo2": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/backo2/-/backo2-1.0.2.tgz",
+      "integrity": "sha1-MasayLEpNjRj41s+u2n038+6eUc="
+    },
     "balanced-match": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
@@ -26670,6 +26788,11 @@
         }
       }
     },
+    "base64-arraybuffer": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-0.1.4.tgz",
+      "integrity": "sha1-mBjHngWbE1X5fgQooBfIOOkLqBI="
+    },
     "base64-js": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
@@ -28668,6 +28791,30 @@
         "once": "^1.4.0"
       }
     },
+    "engine.io-client": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-5.0.1.tgz",
+      "integrity": "sha512-CQtGN3YwfvbxVwpPugcsHe5rHT4KgT49CEcQppNtu9N7WxbPN0MAG27lGaem7bvtCFtGNLSL+GEqXsFSz36jTg==",
+      "requires": {
+        "base64-arraybuffer": "0.1.4",
+        "component-emitter": "~1.3.0",
+        "debug": "~4.3.1",
+        "engine.io-parser": "~4.0.1",
+        "has-cors": "1.1.0",
+        "parseqs": "0.0.6",
+        "parseuri": "0.0.6",
+        "ws": "~7.4.2",
+        "yeast": "0.1.2"
+      }
+    },
+    "engine.io-parser": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-4.0.3.tgz",
+      "integrity": "sha512-xEAAY0msNnESNPc00e19y5heTPX4y/TJ36gr8t1voOaNmTojP9b3oK3BbJLFufW2XFPQaaijpFewm2g2Um3uqA==",
+      "requires": {
+        "base64-arraybuffer": "0.1.4"
+      }
+    },
     "enhanced-resolve": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-4.3.0.tgz",
@@ -30590,6 +30737,11 @@
         "function-bind": "^1.1.1"
       }
     },
+    "has-cors": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-cors/-/has-cors-1.1.0.tgz",
+      "integrity": "sha1-XkdHk/fqmEPRu5nCPu9J/xJv/zk="
+    },
     "has-flag": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
@@ -35025,6 +35177,16 @@
       "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.1.tgz",
       "integrity": "sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug=="
     },
+    "parseqs": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/parseqs/-/parseqs-0.0.6.tgz",
+      "integrity": "sha512-jeAGzMDbfSHHA091hr0r31eYfTig+29g3GKKE/PPbEQ65X0lmMwlEoqmhzu0iztID5uJpZsFlUPDP8ThPL7M8w=="
+    },
+    "parseuri": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/parseuri/-/parseuri-0.0.6.tgz",
+      "integrity": "sha512-AUjen8sAkGgao7UyCX6Ahv0gIK2fABKmYjvP4xmy5JaKvcbTRueIqIPHLAfq30xJddqSE033IOMUSOMCcK3Sow=="
+    },
     "parseurl": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
@@ -38259,6 +38421,30 @@
         }
       }
     },
+    "socket.io-client": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.0.0.tgz",
+      "integrity": "sha512-27yQxmXJAEYF19Ygyl8FPJ0if0wegpSmkIIbrWJeI7n7ST1JyH8bbD5v3fjjGY5cfCanACJ3dARUAyiVFNrlTQ==",
+      "requires": {
+        "@types/component-emitter": "^1.2.10",
+        "backo2": "~1.0.2",
+        "component-emitter": "~1.3.0",
+        "debug": "~4.3.1",
+        "engine.io-client": "~5.0.0",
+        "parseuri": "0.0.6",
+        "socket.io-parser": "~4.0.4"
+      }
+    },
+    "socket.io-parser": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.0.4.tgz",
+      "integrity": "sha512-t+b0SS+IxG7Rxzda2EVvyBZbvFPBCjJoyHuE0P//7OAsN23GItzDRdWa6ALxZI/8R5ygK7jAR6t028/z+7295g==",
+      "requires": {
+        "@types/component-emitter": "^1.2.10",
+        "component-emitter": "~1.3.0",
+        "debug": "~4.3.1"
+      }
+    },
     "sockjs": {
       "version": "0.3.20",
       "resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.20.tgz",
@@ -41113,9 +41299,10 @@
       }
     },
     "ws": {
-      "version": "7.4.0",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.0.tgz",
-      "integrity": "sha512-kyFwXuV/5ymf+IXhS6f0+eAFvydbaBW3zjpT6hUdAh/hbVjTIB5EHBGi0bPoCLSK2wcuz3BrEkB9LrYv1Nm4NQ=="
+      "version": "7.4.6",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.6.tgz",
+      "integrity": "sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==",
+      "requires": {}
     },
     "xml-name-validator": {
       "version": "3.0.0",
@@ -41203,6 +41390,11 @@
         }
       }
     },
+    "yeast": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/yeast/-/yeast-0.1.2.tgz",
+      "integrity": "sha1-AI4G2AlDIMNy28L47XagymyKxBk="
+    },
     "yup": {
       "version": "0.32.8",
       "resolved": "https://registry.npmjs.org/yup/-/yup-0.32.8.tgz",

package.json

@@ -44,6 +44,7 @@
     "redux-persist": "^6.0.0",
     "redux-toolkit": "^1.1.2",
     "shortid": "^2.2.16",
+    "socket.io-client": "4.0.0",
     "typescript": "^4.3.5",
     "uuid": "^8.3.1",
     "web-vitals": "^0.2.4",

src/api-data/index.ts

@@ -123,7 +123,24 @@ const getChats = async <T>(): Promise<T | undefined> => {
   }
 };
 
+const sentMessageById = async <T>(id:string,message:any): Promise<T | undefined> => {
+  try {
+    const { data: { data } } = await axios.post('/messages', { id, message });
+    success('MESSAGE SENDED');
+    return data
+  } catch (e) {
+    error('BAD REQUEST');
+  }
+};
 
+const getMessagesById = async <T>(id:string): Promise<T | undefined> => {
+  try {
+    const { data : {data} } = await axios.get(`/messages/${id}`);
+    return data
+  } catch (e) {
+    return undefined
+  }
+};
 
 export {
   setToken,
@@ -135,5 +152,7 @@ export {
   addContact,
   getContacts,
   startChat,
-  getChats
+  getChats,
+  sentMessageById,
+  getMessagesById
 };

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

@@ -120,8 +120,8 @@ const ChatsList = () => {
               </Avatar>
           </ListItemIcon> 
 
-             <ListItemText primary={`${firstLetter(name)}${slicedWord(name, 15, 1)} 
-              ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}
+          <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}>

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

@@ -61,7 +61,7 @@ const  ContactsList = () => {
     <List
       className={classes.list} component="nav"
       aria-label="main mailbox folders">
-      {contacts.map(({name,lastName,avatarUrl,color,updatedAt,companionId }, i: number) => 
+      {contacts.map(({name,lastName,avatarUrl,color,createdAt,companionId }, i: number) => 
         <ListItemButton
           key={shortid.generate()}
           selected={selectedIndex === i}
@@ -75,7 +75,7 @@ const  ContactsList = () => {
           </ListItemIcon> 
           <ListItemText primary={`${firstLetter(name)}${slicedWord(name, 15, 1)}
                ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}
-               secondary={`last seen ${timeStamp(updatedAt)}`} />
+               secondary={`Registered since ${timeStamp(createdAt)}`} />
         </ListItemButton>)}
       </List>
   ):<AlertInfo name='You do not have any contact yet!' />;

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

@@ -1,6 +1,7 @@
 import { makeStyles } from "@material-ui/core/styles";
 import Avatar from "@material-ui/core/Avatar";
 import ListItemText from '@mui/material/ListItemText';
+import { firstLetter,slicedWord,timeStamp } from '../../../../../../helpers'
 
 const useStyles = makeStyles({
     container: {
@@ -15,12 +16,6 @@ const useStyles = makeStyles({
       alignItems: 'flex-end',
       marginBottom: "10px",
     },
-    avatar: {
-      width: 34,
-      height: 34,
-      backgroundColor: "#2697dd",
-      marginBottom:13
-    },
     message: {
       position: "relative",
       marginLeft: 5,
@@ -66,26 +61,33 @@ const useStyles = makeStyles({
     },
 });
 
-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)
 
-const MessageLeft = ({message,avatarUrl,name,lastName,timestamp}:any) => {
+interface IMessageLeft {
+  message:string,
+  avatarUrl:string,
+  name:string,
+  lastName:string,
+  updatedAt:string,
+  color:string
+}
+
+const MessageLeft = ({message,avatarUrl,name,lastName,updatedAt,color}:IMessageLeft) => {
   const classes = useStyles();
   return (
   <div className={classes.container}>
       <div className={classes.messageVertical}>
         <Avatar
           alt='avatar'
-          src={avatarUrl?avatarUrl:undefined}
-          className={classes.avatar}
-        >{!avatarUrl&&`${firstLetter(name)}${firstLetter(lastName)}`}</Avatar>
+          src={avatarUrl ? `http://localhost:3000/${avatarUrl}` : undefined}
+          style={{background: color, width: 40, height: 40,marginBottom:13}}>
+          {!avatarUrl && `${firstLetter(name)}${firstLetter(lastName)}`}</Avatar>
         <ListItemText className={classes.message}
           primary={`${firstLetter(name)}${slicedWord(name, 15, 1)} 
           ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}
           primaryTypographyProps={{color: "#0379af"}}
           secondary={message}
           secondaryTypographyProps={{color: "#0e0d0d"}}/>
-        <div className={classes.messageTime}>{timestamp}</div>
+        <div className={classes.messageTime}>{timeStamp(updatedAt)}</div>
       </div>
     </div>
   );

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

@@ -1,6 +1,7 @@
 import { makeStyles } from "@material-ui/core/styles";
 import Avatar from "@material-ui/core/Avatar";
 import ListItemText from '@mui/material/ListItemText';
+import { firstLetter, slicedWord, timeStamp } from '../../../../../../helpers'
 
 const useStyles = makeStyles({
     container: {
@@ -16,12 +17,6 @@ const useStyles = makeStyles({
       alignItems: 'flex-end',
       marginBottom: "10px",
     },
-    avatar: {
-      width: 34,
-      height: 34,
-      backgroundColor: "#2697dd",
-      marginBottom:13
-    },
     message: {
       position: "relative",
       marginRight: 5,
@@ -67,10 +62,16 @@ const useStyles = makeStyles({
     },
 });
 
-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)
+interface IMessageRight {
+  message:string,
+  avatarUrl:string,
+  name:string,
+  lastName:string,
+  updatedAt:string,
+  color:string
+}
 
-const MessageRight = ({message,avatarUrl,name,lastName,timestamp}:any) => {
+const MessageRight = ({message,avatarUrl,name,lastName,updatedAt,color}:IMessageRight) => {
   const classes = useStyles();
 
   return (
@@ -82,12 +83,12 @@ const MessageRight = ({message,avatarUrl,name,lastName,timestamp}:any) => {
           primaryTypographyProps={{color: "#42aee0"}}
           secondary={message}
           secondaryTypographyProps={{ color: "#0e0d0d" }} />
-        <div className={classes.messageTime}>{timestamp}</div>
+        <div className={classes.messageTime}>{timeStamp(updatedAt)}</div>
        <Avatar
           alt='avatar'
-          src={avatarUrl?avatarUrl:undefined}
-          className={classes.avatar}
-        >{!avatarUrl&&`${firstLetter(name)}${firstLetter(lastName)}`}</Avatar>
+          src={avatarUrl ? `http://localhost:3000/${avatarUrl}` : undefined}
+          style={{ background: color, width: 40, height: 40, marginBottom: 13 }}>
+          {!avatarUrl && `${firstLetter(name)}${firstLetter(lastName)}`}</Avatar>
       </div>
   </div>    
 )};

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

@@ -7,9 +7,10 @@ import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
 import Avatar from '@mui/material/Avatar';
 import CloseIcon from '@mui/icons-material/Close';
 import { useState } from "react";
-import { useSelector } from "react-redux";
-import { getState } from '../../../../../redux/authorization/selector'
+import { useSelector, useDispatch } from "react-redux";
 
+import { asyncSentMessageById } from '../../../../../redux/messages/operations'
+import { getChat } from '../../../../../redux/chats/selector'
 import FilesMenu from "../FilesMenu";
 import NotDone from "../../../../reusableComponents/NotDone";
 
@@ -131,36 +132,31 @@ const useStyles = makeStyles({
 });
 
 interface ISendMessage{
-    setChat:any,
     isArrow:boolean,
-    handleArrow:() => void
+    handleScrollTo:() => void
 }
 
-const SendMessage = ({setChat,isArrow,handleArrow}:ISendMessage) => {
+const SendMessage = ({isArrow,handleScrollTo}:ISendMessage) => {
     const classes = useStyles();
-    const currentUser = useSelector(getState)
+    const dispatch = useDispatch()
+    const {companionId} = useSelector(getChat)
     const [value, setValue] = useState<string>('')
     const [file, setFile] = useState<any>(null)
     const [isOpenMenu, setIsOpenMenu] = useState<boolean>(false)
     const [isOpenEmoji, setIsOpenEmoji] = useState<boolean>(false)
     const sentMessage = () => {
-        const {name ,lastName,avatarUrl} = currentUser
-        const newMessage =  {
-        avatarUrl:`http://localhost:3000/${avatarUrl}`,
-        name,
-        lastName,
-        message: value?value:file.path,
-        }
-        setChat((prevState: any) => [...prevState, newMessage])
+        const message = value ? value : file.path;
         setValue('')
         setFile(null)
         isOpenMenu&&setIsOpenMenu(false)
-        isOpenEmoji&&setIsOpenEmoji(false)        
+        isOpenEmoji && setIsOpenEmoji(false)
+        dispatch(asyncSentMessageById(companionId, message))
+        setTimeout(handleScrollTo, 3000);
     }    
     const handleTextarea = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
         isOpenMenu&&setIsOpenMenu(false)
         isOpenEmoji && setIsOpenEmoji(false)
-        setValue(e.target.value.trim())
+        setValue(e.target.value)
     }
     const handleFocusTextarea = () => {
         isOpenMenu&&setIsOpenMenu(false)
@@ -187,7 +183,6 @@ const SendMessage = ({setChat,isArrow,handleArrow}:ISendMessage) => {
     const handleLeaveEmoji = () => isOpenEmoji && setIsOpenEmoji(false)
     const handleClearMessage = () => setFile(null)
 
-    console.log(value,file)
     return (
         <div className={classes.container} style={{borderTop:isArrow?'solid 1px #ffffff':'none'}} >            
             <div onMouseLeave={handleLeaveInput} onMouseMove={handleMoveInput}
@@ -206,7 +201,7 @@ const SendMessage = ({setChat,isArrow,handleArrow}:ISendMessage) => {
                 <div onMouseLeave={handleLeaveFileMenu} style={{display:isOpenMenu?'block':'none'}} className={classes.filesMenu}>
                     <FilesMenu setFile={setFile} setValue={setValue} setIsOpenMenu={setIsOpenMenu}/>
                 </div>
-                <Avatar onClick={handleArrow} className={classes.avatarArrow} sx={{
+                <Avatar onClick={handleScrollTo} className={classes.avatarArrow} sx={{
                   backgroundColor: '#ffffff',
                    width: 56, height: 56 ,color: '#6b6b6b',display:isArrow?'flex':'none'}}>
                   <ArrowDownwardIcon fontSize="medium" />

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

@@ -1,225 +0,0 @@
-export  const fakeChat = [
-    {
-        avatarUrl: '',
-        name: 'Grigore',
-        lastName:'Helena',
-        message: 'Hello'
-    },
-    {
-        avatarUrl: '',
-        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
-        lastName:'Wedrr',
-        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
-    },
-    {
-        avatarUrl: '',
-        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
-        lastName:'Wedrr',
-        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
-    },
-    {
-        avatarUrl: '',
-        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
-        lastName:'Wedrr',
-        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
-    },
-    {
-        avatarUrl: '',
-        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
-        lastName:'Wedrr',
-        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
-    },
-    {
-        avatarUrl: '',
-        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
-        lastName:'Wedrr',
-        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
-    },
-    {
-        avatarUrl: '',
-        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
-        lastName:'Wedrr',
-        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
-    },
-    {
-        avatarUrl: '',
-        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
-        lastName:'Wedrr',
-        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
-    },
-    {
-        avatarUrl: '',
-        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
-        lastName:'Wedrr',
-        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
-    },
-    {
-        avatarUrl: '',
-        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
-        lastName:'Wedrr',
-        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
-    },
-    {
-        avatarUrl: '',
-        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
-        lastName:'Wedrr',
-        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
-    },
-    {
-        avatarUrl: '',
-        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
-        lastName:'Wedrr',
-        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
-    },
-    {
-        avatarUrl: '',
-        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
-        lastName:'Wedrr',
-        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
-    },
-    {
-        avatarUrl: '',
-        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
-        lastName:'Wedrr',
-        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
-    },
-    {
-        avatarUrl: '',
-        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
-        lastName:'Wedrr',
-        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
-    },
-    {
-        avatarUrl: '',
-        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
-        lastName:'Wedrr',
-        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
-    },
-    {
-        avatarUrl: '',
-        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
-        lastName:'Wedrr',
-        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
-    },
-    {
-        avatarUrl: '',
-        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
-        lastName:'Wedrr',
-        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
-    },
-    {
-        avatarUrl: '',
-        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
-        lastName:'Wedrr',
-        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
-    },
-    {
-        avatarUrl: '',
-        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
-        lastName:'Wedrr',
-        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
-    },
-    {
-        avatarUrl: '',
-        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
-        lastName:'Wedrr',
-        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
-    },
-    {
-        avatarUrl: '',
-        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
-        lastName:'Wedrr',
-        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
-    },
-    {
-        avatarUrl: '',
-        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
-        lastName:'Wedrr',
-        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
-    },
-    {
-        avatarUrl: '',
-        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
-        lastName:'Wedrr',
-        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
-    },
-    {
-        avatarUrl: '',
-        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
-        lastName:'Wedrr',
-        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
-    },
-    {
-        avatarUrl: '',
-        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
-        lastName:'Wedrr',
-        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
-    },
-    {
-        avatarUrl: '',
-        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
-        lastName:'Wedrr',
-        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
-    },
-    {
-        avatarUrl: '',
-        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
-        lastName:'Wedrr',
-        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
-    },
-    {
-        avatarUrl: '',
-        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
-        lastName:'Wedrr',
-        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
-    },
-    {
-        avatarUrl: '',
-        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
-        lastName:'Wedrr',
-        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
-    },
-    {
-        avatarUrl: '',
-        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
-        lastName:'Wedrr',
-        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
-    },
-    {
-        avatarUrl: '',
-        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
-        lastName:'Wedrr',
-        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
-    },
-    {
-        avatarUrl: '',
-        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
-        lastName:'Wedrr',
-        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
-    },
-    {
-        avatarUrl: '',
-        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
-        lastName:'Wedrr',
-        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
-    },
-    {
-        avatarUrl: '',
-        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
-        lastName:'Wedrr',
-        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
-    },
-    {
-        avatarUrl: 'http://localhost:3000/6204ddabad4c847040122033//%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D0%B5_viber_2021-01-02_13-51-35.jpg',
-        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
-        lastName:'Wedrr',
-        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
-    },
-    {
-        avatarUrl: '',
-        name: 'Grigffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
-        lastName:'Wedrr',
-        message: 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd'
-    },    
-]
-

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

@@ -1,10 +1,16 @@
 import { makeStyles } from "@material-ui/core/styles";
+import { useState, useEffect, useRef, useCallback } from "react";
+import { useSelector,useDispatch } from "react-redux";
+import shortid from 'shortid';
+
 import SendMessage from "./SendMessage";
 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';
+import AlertInfo from "../../../reusableComponents/AlertInfo";
+import { getMessages } from '../../../../redux/messages/selector'
+import { getId } from '../../../../redux/authorization/selector'
+import { getChat } from '../../../../redux/chats/selector'
+import { asyncGetMessagesById } from '../../../../redux/messages/operations'
 const debounce = require('lodash.debounce');
 
 const useStyles = makeStyles({   
@@ -27,62 +33,65 @@ const useStyles = makeStyles({
     },   
 });
 
-const timestamp = new Date(2022, 3, 8).toLocaleString("en-US", {
-    year:'numeric',
-    month: 'short',
-    day: 'numeric'
-  });
-
 const ChatBar = () => {
   const classes = useStyles();
-  const [chat, setChat] = useState<any>(fakeChat)
+  const dispatch = useDispatch()
+  const messages = useSelector(getMessages)
+  const userId = useSelector(getId)
+  const {companionId} = useSelector(getChat)
   const [isArrow,setIsArrow] = useState<boolean>(false)
   const divRef = useRef<any | null>(null)
   const handleScroll = ({ target }: any) => {
     const different = target.scrollHeight - target.scrollTop
     setIsArrow(different < 1500?false:true)
   }
-  const handleArrow = () => {
+  const handleScrollTo = () => {
     divRef.current&&divRef.current.scrollTo({
     top: divRef.current.scrollTopMax,
     behavior: 'smooth'
     })
   }
   const debouncedHandleScroll = useCallback(debounce(handleScroll, 300), []);
+
   useEffect(() => {
-    divRef.current&&divRef.current.scrollTo({
-    top: divRef.current.scrollTopMax,
-    behavior: 'smooth'
-    })
-  }, [chat])
- 
+    dispatch(asyncGetMessagesById(companionId,handleScrollTo))
+  }, [dispatch, companionId])
+  
+  useEffect(() => {
+    const handleReset = () => dispatch(asyncGetMessagesById(companionId,null))
+    const idInterval = setInterval(handleReset, 3000);
+    return () => clearInterval(idInterval);
+  }, [dispatch, companionId]);  
+  
 
   return (
       <div ref={divRef} className={classes.container} onScroll={debouncedHandleScroll}>
         <div  className={classes.messagesBody}>
-        {chat.map(({message,avatarUrl,name,lastName}:any,i:number) => {
-          if (i % 2 === 0) {
+        {messages.length > 0 ? messages.map(({message,avatarUrl,name,lastName,color,updatedAt,owner:{_id}}:any,i:number) => {
+          if (_id !== userId) {
             return (
             <MessageLeft
             key={shortid.generate()}
             message={message}
-            timestamp={timestamp}
+            updatedAt={updatedAt}
             avatarUrl={avatarUrl}
             name={name}
             lastName={lastName}
+            color={color}
           />)
           } else {
             return (
             <MessageRight
             key={shortid.generate()}    
             message={message}
-            timestamp={timestamp}
+            updatedAt={updatedAt}
             avatarUrl={avatarUrl}
             name={name}
             lastName={lastName}
-          />)}})}
+            color={color}    
+          />)}}):<AlertInfo name='You do not have messages yet!' />}
       </div>         
-      <SendMessage setChat={setChat} isArrow={isArrow} handleArrow={handleArrow}/>   
+      <SendMessage isArrow={isArrow} handleScrollTo={handleScrollTo}/>   
       </div>
   );
 }

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

@@ -22,7 +22,7 @@ const Credentials = () => {
       </ListItemIcon> 
       <ListItemText primary={`${firstLetter(name)}${slicedWord(name, 15, 1)}
         ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}
-        secondary={timeStamp(updatedAt)} />
+        secondary={`last seen ${timeStamp(updatedAt)}`} />
     </ListItemButton>
   )
 }

src/redux/authorization/selector/index.ts

@@ -6,6 +6,7 @@ const getName = (state: IState) => state.authorization.name;
 const getLastName = (state: IState) => state.authorization.lastName;
 const getCountry = (state: IState) => state.authorization.country;
 const getAvatarUrl = (state: IState) => state.authorization.avatarUrl;
+const getId= (state:IState) => state.authorization._id;
 const getState= (state:IState) => state.authorization;
 
-export { getToken,getNumber,getName,getLastName,getCountry,getAvatarUrl,getState };
+export { getToken,getNumber,getName,getLastName,getCountry,getAvatarUrl,getId,getState };

src/redux/chats/reducer/index.ts

@@ -15,9 +15,7 @@ const initialState: IChatsState = {
      color: '',
      _id: '',
      companionId: '',
-     owner: {
-       _id: '',
-     },
+     owner: '',
      createdAt: '',
      updatedAt: '',
      __v: 0,

src/redux/messages/action/index.ts

@@ -0,0 +1,16 @@
+import { createAction } from '@reduxjs/toolkit';
+import { TMessages } from '../../../typescript/redux/messages/types'
+
+const actionGetMessagesSuccess = createAction('getMessages/success', (value:TMessages) => ({
+  payload: value,
+}));
+
+const actionGetMessagesReject = createAction('getMessages/reject', () => ({
+  payload: null,
+}));
+
+
+export {
+  actionGetMessagesSuccess,
+  actionGetMessagesReject,
+};

src/redux/messages/operations/index.ts

@@ -0,0 +1,33 @@
+import { actionIsLoading } from '../../loading/action';
+import {
+  actionGetMessagesSuccess,
+  actionGetMessagesReject
+} from '../action';
+import { getMessagesById,sentMessageById } from '../../../api-data';
+import { TMessages } from '../../../typescript/redux/messages/types'
+
+
+const asyncGetMessagesById= (id:string,cb:any) => async (dispatch:any) => {
+  try {
+    const data = await getMessagesById<TMessages>(id)
+    data && dispatch(actionGetMessagesSuccess(data))
+    cb&&cb()
+  } catch (e) {
+    dispatch(actionGetMessagesReject())
+  } 
+};
+
+const asyncSentMessageById= (id:string,message:any) => async (dispatch:any) => {
+  try {
+    dispatch(actionIsLoading(true));
+    await sentMessageById(id, message)
+  } finally {
+    dispatch(actionIsLoading(false));
+  }
+};
+
+export { asyncGetMessagesById,asyncSentMessageById };
+
+
+
+

src/redux/messages/reducer/index.ts

@@ -0,0 +1,23 @@
+import { createReducer } from '@reduxjs/toolkit';
+import { IMessagesState, IMessagesPayload} from '../../../typescript/redux/messages/interfaces';
+import {
+  actionGetMessagesSuccess,
+  actionGetMessagesReject
+} from '../action';
+
+const initialState: IMessagesState = {
+  messages: []
+}
+
+
+
+const reducerMessages = createReducer(initialState, {
+  [actionGetMessagesSuccess.type]: (state, { payload: messages }: IMessagesPayload) => {
+    return {messages};
+  },
+  [actionGetMessagesReject.type]: (state, _) => {
+    return state;
+  },
+});
+
+export default reducerMessages;

src/redux/messages/selector/index.ts

@@ -0,0 +1,6 @@
+import {IState} from '../../../typescript/redux/interfaces'
+
+const getMessages = (state: IState) => state.messages.messages;
+const getState= (state:IState) => state.messages;
+
+export { getMessages,getState };

src/redux/rootReducer/index.ts

@@ -2,6 +2,7 @@ import { combineReducers } from '@reduxjs/toolkit';
 import { persistReducer } from 'redux-persist';
 import storage from 'redux-persist/lib/storage';
 
+import reducerMessages from '../messages/reducer'
 import reducerContacts from '../contacts/reducer'
 import reducerChats from '../chats/reducer'
 import reducerControlApp from '../controlApp/reducer'
@@ -15,6 +16,7 @@ const authorizationPersistConfig = {
 
 export const rootReducer = combineReducers({
   isLoading: reducerLoading,
+  messages:reducerMessages,
   chats: reducerChats,
   contacts:reducerContacts,
   controlApp: reducerControlApp,

src/typescript/redux/chats/types.ts

@@ -5,9 +5,7 @@ export type TChat = {
   color: string,
   _id: string,
   companionId: string,
-  owner: {
-    _id: string,
-  },
+  owner: any,
   createdAt: string,
   updatedAt: string,
   __v: number

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 { IChatsState } from './chats/interfaces'
+import { IMessagesState} from './messages/interfaces'
 import { IControlAppState } from './controlApp/interfaces'
 
 export interface IState {
+  messages: IMessagesState,
   contacts: IContactsState,
   chats: IChatsState,
   controlApp:IControlAppState,

src/typescript/redux/messages/interfaces.ts

@@ -0,0 +1,14 @@
+import { TMessages } from './types'
+
+export interface IMessagesState  {
+  messages: TMessages
+}
+
+export interface IMessagesPayload {
+  payload: TMessages,
+}
+
+
+
+
+

src/typescript/redux/messages/types.ts

@@ -0,0 +1,16 @@
+export type TMessage = {
+  message:string,
+  name: string,
+  lastName: string,
+  avatarUrl:string,
+  color: string,
+  _id: string,
+  companionId: string,
+  owner: any,
+  createdAt: string,
+  updatedAt: string,
+  __v: number
+}
+
+export type TMessages = TMessage[] | []
+