retrieving chats

src/components/home/ChatsList.jsx

@@ -1,9 +1,44 @@
-import React from 'react';
+import React, {useEffect, useState} from 'react';
 import Card from "./Card.jsx";
+import {get} from "../../backend/api";
+import {displayMessage} from "../../backend/notifications/notifications";
+import {MessageType} from "../../backend/notifications/message";
 
 const ChatsList = (props) => {
     const { chats } = props;
 
+    const [customChats, setCustomChats] = useState([]);
+
+    const updateList = async () => {
+        const username = localStorage.getItem("username");
+        if (!username) {return null;}
+
+        const updatedChats = await Promise.all(
+            chats.map(async (chat) => {
+                const interlocutorId = chat.id1 === username ? chat.id2 : chat.id1
+
+                const {ok, data} = await get('/auth/' + interlocutorId);
+                if (!ok) {
+                    displayMessage(data.message, MessageType.ERROR);
+                    return null;
+                }
+
+                const interlocutor = data.user;
+
+                return {
+                    id: interlocutorId,
+                    name: interlocutor.nickname,
+                    lastMessage: chat.messages.length > 0 ? chat.messages[chat.messages.length - 1].data : "",
+                }
+            })
+        );
+
+        setCustomChats(updatedChats.filter(chat => chat !== null));
+    };
+
+    useEffect(() => {updateList().then();}, [chats])
+
+
     const colorMap = {
         orange: 'FFA500FF',
         aqua: '00FFFFFF',
@@ -19,13 +54,14 @@ const ChatsList = (props) => {
 
     function getColor(chatId) {
         const keys = Object.keys(colorMap);
-        const index = chatId % keys.length;
+        const numericId = Array.from(chatId).reduce((sum, char) => sum + char.charCodeAt(0), 0);
+        const index = numericId % keys.length;
         return colorMap[keys[index]];
     }
 
   return (
       <div className="ChatsList">
-          {chats.map((item, index) => (
+          {customChats.map((item, index) => (
               <Card
                   key={index}
                   name={item.name}