vybe/client/message.js

import { render, html } from '/uhtml.js';

let msg;

function sendMessage(event) {
	event.preventDefault();
	if (!msg.value)
		return;
	window.currentInstance.emit('send_message', {
		message: msg.value,
		thread: window.currentThread.id
	});
	msg.value = '';
}

let earliestMessage;

function loadMessages(callback) {
	let instance = window.currentInstance;

   if (!msg) {
      render(document.getElementById('message'), html`
         <button id='loadmore' class='hidden' onclick=${loadMessages}>
         load more messages
         </button>
         <div id='messages'></div>
         <form id='msginput' onsubmit=${sendMessage}>
            <input id='msg' placeholder='write a message...' />
            <button type='submit' id='sendmsg'>send</button>
         </form>
      `);
      msg = document.getElementById('msg');
   }
   const messages = document.getElementById('messages');
   if (!this) { // called from chooseThread, initializing thread
   	messages.innerHTML = '';
      earliestMessage = null;
		if (window.currentThread.permissions.post)
			document.getElementById('msginput').classList.remove('hidden');
		else
			document.getElementById('msginput').classList.add('hidden');
   }
	instance.emit('get_history', {
		before: earliestMessage,
		thread: window.currentThread.id
	}, async msg => {
		if (!msg.success) {
			console.log('get_history failed: ' + msg.message);
			return;
		}
		callback && callback(msg.messages);
		if (msg.messages.length > 0) {
			earliestMessage = msg.messages[msg.messages.length - 1].id;
			let users = {};
			for (let message of msg.messages) {
				if (!message.name) {
					try {
						message.name = (users[message.userid] || (
							users[message.userid] = await window.getUser(message.userid)
						)).displayname;
					}
					catch (e) {
						console.log(`error getting user ${message.userid}`, e);
						message.name = message.userid;
					}
				}
				messages.prepend(html.node`
					<div class='message'>
						<strong>${message.name}: </strong>
						${message.content}
					</div>`);
			}
		}
		if (msg.more)
			document.getElementById('loadmore').classList.remove('hidden');
		else
			document.getElementById('loadmore').classList.add('hidden');
		messages.scroll(0, messages.scrollHeight - messages.clientHeight);
	});

	if (!instance.messaged) {
		instance.socket.on('new_message', message => {
			if (message.thread !== window.currentThread?.id || instance !== window.currentInstance)
				return;
			const messages = document.getElementById('messages');
			let scroll = messages.scrollTop + 10 >= messages.scrollHeight - messages.clientHeight;
			messages.appendChild(html.node`
				<div class='message'>
					<strong>${message.name}: </strong>
					${message.content}
				</div>`);
			if (scroll)
				messages.scroll(0, messages.scrollHeight - messages.clientHeight);
			if (!earliestMessage)
				earliestMessage = message.id;
		});
		instance.messaged = true;
	}
}

export default loadMessages;