Chat list

public/css/main.css

@@ -491,4 +491,68 @@ button span {
     border-radius: 3px;
     margin: 5px 5px 0 0;
     display: inline-block;
-}
+}
+
+
+.resultListItem {
+    padding: 7px;
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    border-bottom: 1px solid var(--lightGrey);
+}
+
+.resultListItem:hover {
+    background-color: #f2f2f2;
+}
+
+.resultsDetailsContainer {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+}
+
+.resultsDetailsContainer .heading {
+    font-weight: 500;
+}
+
+.resultsDetailsContainer .subText {
+    color: var(--greyText);
+    font-size: 14px;
+}
+
+.resultListItem img {
+    height: 100%;
+    width: 100%;
+    border-radius: 50%;
+}
+
+.resultsImageContainer {
+    height: 40px;
+    width: 40px;
+    position: relative;
+    margin-right: 10px;
+    display: flex;
+    align-items: center;
+    padding: 5px;  
+}
+
+.groupChatImage img {
+    height: 65%;
+    width: 65%;
+    position: absolute;
+    bottom: 0;
+    margin: 0;
+    border: 3px solid #fff;
+}
+
+.groupChatImage img:first-of-type {
+    top: 0;
+    right: 0;
+}
+
+.ellipsis {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}

public/js/inboxPage.js

@@ -0,0 +1,74 @@
+$(document).ready(() => {
+    $.get("/api/chats", (data, status, xhr) => {
+        if (xhr.status == 400) {
+            alert("Не выходит получить список чатов. Попробуйте позже.")
+        }  else {
+            outputChatList(data, $(".resultsContainer"))
+        }
+    })
+})
+
+function outputChatList(chatList, container) {
+    chatList.forEach(chat => {
+        const html = createChatHtml(chat)
+        container.append(html)
+    })
+
+    if (chatList.length == 0) {
+        container.append("<span class='NoResults'>Вы не участвуете ни в одном чате</span>")
+    }
+}
+
+function createChatHtml(chatData) {
+    const chatName = getChatName(chatData);
+    const image = getChatImageElements(chatData);
+    const latestMessage = "Это последнее сообщение из чата";
+
+    return `<a href='/messages/${chatData._id}' class='resultListItem'>
+                ${image}
+                <div class="resultsDetailsContainer ellipsis">
+                    <span class="heading ellipsis">${chatName}</span>
+                    <span class="subText ellipsis">${latestMessage}</span>
+                </div>
+            </a>`
+}
+
+function getChatName(chatData) {
+    let chatName = chatData.chatName;
+
+    if (!chatName) {
+        const otherChatUsers = getOtherChatUsers(chatData.users);
+        const namesArray = otherChatUsers.map(user => user.firstName + " " + user.lastName);
+        chatName = namesArray.join(", ")
+    }
+
+    return chatName
+}
+
+function getOtherChatUsers(users) {
+    if (users.length == 1) return users;
+
+    return users.filter(user => user._id != userLoggedIn._id)
+}
+
+function getChatImageElements(chatData) {
+    const otherChatUsers = getOtherChatUsers(chatData.users);
+
+    let groupChatClass = "";
+    let chatImage = getUserChatElement(otherChatUsers[0]);
+
+    if (otherChatUsers.length > 1) {
+        groupChatClass = "groupChatImage";
+        chatImage += getUserChatElement(otherChatUsers[1]);
+    }
+
+    return `<div class='resultsImageContainer ${groupChatClass}'>${chatImage}</div>`
+}
+
+function getUserChatElement(user) {
+    if (!user || !user.profilePic) {
+        return alert("Ошибочная информация от пользователя")
+    } 
+
+    return `<img src='${user.profilePic}' alt="User's profile pic">`;
+}

routes/api/chats.js

@@ -33,6 +33,14 @@ router.post("/", async (req, res, next) => {
     })
 })
 
-
+router.get("/", async (req, res, next) => {
+    Chat.find({users: { $elemMatch: { $eq: req.session.user._id }}})
+    .populate("users")
+    .then(results => res.status(200).send(results))
+    .catch(error => {
+        console.log(error);
+        res.sendStatus(400);
+    })
+})
 
 module.exports = router;

views/inboxPage.pug

@@ -8,4 +8,4 @@ block headerButton
         i.far.fa-plus-square 
 
 block scripts 
-    script(src="/js/inboxPage.js") 
+    script(src="/js/inboxPage.js")