finish dms

public/css/chat.css

@@ -53,7 +53,8 @@
     align-items: center;
     font-weight: 1000;
     font-size: 1.5rem;
-}
+
+right: 0;}
 
 .room-name {
     display: flex;
@@ -71,6 +72,7 @@
 }
 
 .roomDisplayCenter {
+    position: relative;
     display: flex;
     width: calc(100% - 25em);
     height: 100%;
@@ -170,3 +172,9 @@
 .message-content {
     flex-grow: 0;
 }
+
+.loadMessages {
+    position: absolute;
+    right: 0;
+    cursor: pointer;
+}

public/js/chat.js

@@ -70,12 +70,12 @@ const data = {
     rooms: {},
 }
 
-async function loadRoomPage(room_id) {
+async function loadRoomPage(room) {
-    let room = data.rooms[room_id]
+
     let request = (await chatload (
         room.newest_msg,
         room.page,
-        room_id
+        room.room_id
     ))
 
     if (request.json == undefined) {
@@ -83,36 +83,38 @@ async function loadRoomPage(room_id) {
         return
     }
 
+    let messages = room.display.getElementsByClassName('messages')[0]
     for (const msg of request.json) {
         room.messages.push(msg) 
+        messages.appendChild(await parseMessageImpl(msg))
     }
 
     room.page++
+
+    return request.json.length > 0
 }
 
 async function loadRoom(room_id) {
     let room = data.rooms[room_id]
 
-    let request = (await loadusers(room.users))
+    let batch = []
-    if (request.status != 200) {
+    for (const user_id of room.users) {
-        location.href = '/login'
+        if (data.users[user_id]) continue
-    } else {
+        batch.push(user_id)
-        for (const user of request.json) {
+    }
-            data.users[user.user_id] = user
+
+    if (batch.length > 1) {
+        let request = (await loadusers(batch))
+        if (request.status != 200) {
+            location.href = '/login'
+        } else {
+            for (const user of request.json) {
+                data.users[user.user_id] = user
+            }
         }
     }
 
-    room.page = 0
+    room.display = createRoomDisplay(room, loadRoomPage)
-    room.messages = []
-    if (room.newest_msg == undefined || room.newest_msg < 0)
-        room.newest_msg = Number.MAX_SAFE_INTEGER
-    await loadRoomPage(room_id)
-    room.newest_msg = Math.max(
-        ...room.messages.map(m => m.message_id)
-    )
-    room.page = 0
-    
-    room.display = createRoomDisplay(room)
 
     let displays = document.getElementById("center")
     displays.appendChild(room.display)
@@ -125,15 +127,20 @@ async function loadRoom(room_id) {
         button.classList.add('current')
     }
     
+    room.page = 0
+    room.messages = []
+    if (room.newest_msg == undefined || room.newest_msg < 0)
+        room.newest_msg = Number.MAX_SAFE_INTEGER
+    await loadRoomPage(room)
+    room.newest_msg = Math.min(
+        ...room.messages.map(m => m.message_id)
+    )
+    room.page = 0
+    
     let sidebar = document.getElementById("sidebar")
     sidebar.appendChild(button)
     room.button = button
 
-    let messages = room.display.getElementsByClassName('messages')[0]
-    for (const message of room.messages) {
-        messages.appendChild(await parseMessageImpl(message))
-    }
-
     if (!room.people) room.people =  room.people = {}
     
     let people = room.display.getElementsByClassName("roomDisplayPeople")[0]
@@ -186,6 +193,7 @@ async function onMessage(message) {
             if (event.user_id == data.self.user_id) {
                 room.display.remove()
                 room.button.remove()
+                delete data.rooms[event.room_id]
             } 
             break;
         }
@@ -202,13 +210,13 @@ async function onMessage(message) {
 async function init() {
 
     let request = (await loadself());
-    data.self = request.json
 
     if (request.json == undefined) {
         location.href = '/login'
         return
     }
 
+    data.self = request.json
     data.users[data.self.user_id] = data.self
 
     render()

public/js/components.js

@@ -1,4 +1,4 @@
-import { div, a, pfp, span, i, parse, parseDate, p, form, input, svg, path, parseMonth, g } from './main.js'
+import { div, a, pfp, span, i, parse, parseDate, p, form, input, svg, path, parseMonth, g, button } from './main.js'
 import { postlike, postcomment, loadcommentspage, chatsend, chatadd, chatleave } from './api.js';
 
 window.parse = parse;
@@ -370,10 +370,23 @@ export function createSingleLineInput(attributes, onSubmit) {
     return area
 }
 
-export function createRoomDisplay(room) {
+export function createRoomDisplay(room, loadMessageCallback) {
+    let buttonEl = button({
+            class: 'loadMessages input', 
+            style: 'flex-grow: 0',
+            onclick: async () => {
+                if (!await loadMessageCallback(room)) {
+                    buttonEl.remove()
+                } 
+            }
+        },
+            parse('Load Previous')
+        )
+
     return (
         div({class: 'roomDisplay'},
             div({class: 'roomDisplayCenter'},
+                buttonEl,
                 div({class: 'messages'}),
                 createMultiLineInput(
                     {