retrieving chats

src/backend/api.js

@@ -2,10 +2,10 @@ import {getConfigValue} from "@brojs/cli";
 
 
 const LOCAL = "http://localhost:8099";
-const DEV = "https://dev.bro-js.ru/enterfront";
+const DEV = "https://dev.bro-js.ru";
 const SERVER = "";
 
-export const BASE_API_URL = LOCAL + getConfigValue("enterfront.api");
+export const BASE_API_URL = LOCAL + getConfigValue("enterfront.api") + "/enterfront";
 
 // fetch(`${BASE_API_URL}/books/list`)
 
@@ -22,12 +22,7 @@ export async function post(path, body) {
     });
 
     console.log("Initial data from API:", res)
-
-    const txt = await res.text();
-    console.log("Initial text from API:", txt)
-
-    const data = JSON.parse(txt);
-
+    const data = JSON.parse(await res.text());
     console.log("Data from API:", data)
 
     if (res.status === 200) {
@@ -51,6 +46,7 @@ export async function get(path){
         }
     });
 
+    console.log("Data from API:", res)
     const data = await res.json();
 
     if (res.status === 200) {

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}

src/pages/Account.jsx

@@ -45,7 +45,7 @@ const Account = () => {
 
       const {ok, data} = await get('/auth/' + username);
       if (!ok) {
-          displayMessage("Some error with auth", MessageType.ERROR);
+          displayMessage("Some error with auth:" + data.message, MessageType.ERROR);
           return;
       }
 

src/pages/Chat.jsx

@@ -74,7 +74,7 @@ const emojis = [
 ];
 
 const Chat = () => {
-  const [interlocutorId, setInterlocutorId] = useState(0);
+  const [interlocutorId, setInterlocutorId] = useState("");
   const [messages, setMessages] = useState([]);
   const [newMessage, setNewMessage] = useState("");
   const [showEmojiPicker, setShowEmojiPicker] = useState(false);
@@ -83,7 +83,8 @@ const Chat = () => {
   const navigate = useNavigate();
 
   useEffect(() => {
-    const id = parseInt(localStorage.getItem("interlocutorId"), 10) || 0;
+    // const id = parseInt(localStorage.getItem("interlocutorId"), 10) || 0;
+    const id = localStorage.getItem("interlocutorId")
     setInterlocutorId(id);
 
     socket.current = new WebSocket("ws://localhost:8080");

src/pages/Home.jsx

@@ -1,64 +1,30 @@
-import React from "react";
+import React, {useEffect, useState} from "react";
 import HomeTitle from "../components/home/HomeTitle.jsx";
 import ChatsList from "../components/home/ChatsList.jsx";
 import Header from "../components/home/Header.jsx";
+import {displayMessage} from "../backend/notifications/notifications";
+import {MessageType} from "../backend/notifications/message";
+import {get} from "../backend/api";
 
 const Home = () => {
+    const [chats, setChats] = useState([])
 
-    // temp for testing
-    const chats = [
-        {
-            name: "Alice Johnson",
-            id: 123456,
-            lastMessage: "See you later!"
-        },
-        {
-            name: "Bob Smith",
-            id: 654321,
-            lastMessage: "Got it, thanks!"
-        },
-        {
-            name: "Charlie Brown",
-            id: 234567,
-            lastMessage: "How's the project going? How's the project going? How's the project going?" +
-                "How's the project going? How's the project going?"
-        },
-        {
-            name: "David Clark",
-            id: 765432,
-            lastMessage: "I'll send the files."
-        },
-        {
-            name: "Eve Adams",
-            id: 345678,
-            lastMessage: "Let's meet tomorrow."
-        },
-        {
-            name: "Frank Wright",
-            id: 876543,
-            lastMessage: "Can you review this?"
-        },
-        {
-            name: "Grace Lee",
-            id: 456789,
-            lastMessage: "Thanks for your help!"
-        },
-        {
-            name: "Hannah Scott",
-            id: 987654,
-            lastMessage: "See you at the meeting."
-        },
-        {
-            name: "Ian Davis",
-            id: 567890,
-            lastMessage: "Let me know when you're free."
-        },
-        {
-            name: "Jill Thompson",
-            id: 678901,
-            lastMessage: "I'll catch up with you later."
+    async function retrieveChats() {
+        const username = localStorage.getItem("username");
+        if (!username) {
+            displayMessage("You're not logged in!", MessageType.WARN);
+            return;
         }
-    ];
+
+        const {ok, data} = await get('/chat/list/' + username);
+        if (!ok) {
+            displayMessage(data.message, MessageType.ERROR);
+            return;
+        }
+        setChats(data.chats);
+    }
+
+    useEffect(() => {retrieveChats().then()}, [])
 
     return (
       <div className="homeWrapper">