add: Chats list

compose.yaml

@@ -29,8 +29,7 @@ services:
     shm_size: 128mb
     volumes:
       - postgres_data:/var/lib/postgresql/data
-    environment:
-      POSTGRES_PASSWORD: change-me
+    env_file: ".env"
 
 volumes:
   postgres_data:

public/css/main.css

@@ -139,6 +139,7 @@ body {
     align-items: center;
     width: 100%;
     height: 64px;
+    background-color: #222;
 }
 
 .chat-list {
@@ -155,6 +156,35 @@ body {
     font-weight: 700;
 }
 
+.chat-item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    width: 100%;
+    height: 48px;
+    border-bottom-color: #222;
+    border-bottom-width: 1px;
+    border-bottom-style: solid;
+}
+
+.chat-link {
+    color: #fff;
+    text-decoration: none;
+}
+
+.chat-name {
+    margin-left: 16px;
+    font-size: 14pt;
+}
+
+.empty-label {
+    width: 100%;
+    margin-top: 16px;
+    text-align: center;
+    font-size: 16pt;
+    font-weight: 500;
+}
+
 .logout {
     display: flex;
     justify-content: center;
@@ -162,7 +192,9 @@ body {
 }
 
 .logout img {
-    width: 66%;
+    width: 32px;
+    height: 32px;
+    margin: 16px;
 }
 
 @media screen and (max-width: 600px) {
@@ -193,6 +225,34 @@ body {
     .text-input {
         font-size: 12pt;
     }
+
+    .chats-header {
+        height: 48px;
+    }
+
+    .chat-title {
+        font-size: 16pt;
+    }
+
+    .chat-item {
+        height: 40px;
+    }
+    
+    .chat-name {
+        margin-left: 12px;
+        font-size: 13pt;
+    }
+    
+    .empty-label {
+        margin-top: 12px;
+        font-size: 14pt;
+    }
+
+    .logout img {
+        width: 26px;
+        height: 26px;
+        margin: 12px;
+    }
 }
 
 @media screen and (max-width: 400px) {
@@ -223,6 +283,34 @@ body {
     .text-input {
         font-size: 10pt;
     }
+
+    .chats-header {
+        height: 44px;
+    }
+
+    .chat-title {
+        font-size: 14pt;
+    }
+
+    .chat-item {
+        height: 36px;
+    }
+    
+    .chat-name {
+        margin-left: 10px;
+        font-size: 12pt;
+    }
+    
+    .empty-label {
+        margin-top: 10px;
+        font-size: 12pt;
+    }
+
+    .logout img {
+        width: 23px;
+        height: 23px;
+        margin: 11px;
+    }
 }
 
 @media screen and (max-width: 240px) {
@@ -253,4 +341,32 @@ body {
     .text-input {
         font-size: 8pt;
     }
+
+    .chats-header {
+        height: 40px;
+    }
+
+    .chat-title {
+        font-size: 13pt;
+    }
+
+    .chat-item {
+        height: 32px;
+    }
+    
+    .chat-name {
+        margin-left: 8px;
+        font-size: 11pt;
+    }
+    
+    .empty-label {
+        margin-top: 8px;
+        font-size: 11pt;
+    }
+
+    .logout img {
+        width: 20px;
+        height: 20px;
+        margin: 10px;
+    }
 }

src/routes/index.js

@@ -12,9 +12,25 @@ const router = express.Router();
 
 router.get("/", async (req, res) => {
     if (req.user) {
-        res.render("layout", {
-            child: await ejs.renderFile(path.join(views, "chats.ejs"))
-        });
+        try {
+            const chats = await db.any("SELECT * FROM chats WHERE user1_id = $1 or user2_id = $1", [ req.user.id ]);
+            const userIds = chats.map((chat) => chat.user1_id == req.user.id ? chat.user2_id : chat.user1_id);
+            const users = await db.any("SELECT username FROM users WHERE id IN ($1:csv)", [ userIds ]);
+            res.render("layout", {
+                child: await ejs.renderFile(path.join(views, "chats.ejs"), {
+                    empty: chats.length < 1,
+                    chats: users.map((user) => user.username)
+                })
+            });
+        } catch (err) {
+            console.log(err);
+            res.render("layout", {
+                child: await ejs.renderFile(path.join(views, "chats.ejs"), {
+                    empty: true,
+                    chats: []
+                })
+            });
+        }
     } else {
         res.render("layout", {
             child: await ejs.renderFile(path.join(views, "home.ejs"))

src/views/chats.ejs

@@ -6,6 +6,15 @@
         </a>
     </div>
     <div class="chat-list">
-
+        <% if (empty) { %>
+            <p class="empty-label">No chats</p>
+        <% } %>
+        <% chats.forEach(function(chat) { %>
+            <a href="/chat/<%- chat %>" class="chat-link">
+                <div class="chat-item">
+                    <span class="chat-name"><%- chat %></span>
+                </div>
+            </a>
+        <% }); %>
     </div>
 </div>