changes

content/root.js

@@ -50,9 +50,9 @@ async function deleteMessage(messageId) {
 }
 
 async function updateMessagesInPlace() {
-	const currenteScrollLocation = getScrollLocation();
-	await loadMessages(true);
-	setScrollLocation(currenteScrollLocation);
+	lastMessageCount = await getMessageCount();
+	const currentScrollLocation = getScrollLocation();
+	loadMessages(true, currentScrollLocation);
 }
 
 function getScrollLocation() {
@@ -130,46 +130,56 @@ async function loadUsers() {
 	}
 }
 
-let lastMessageCount = 0;
-async function loadMessages(forceUpdate = false) {
+async function getMessageCount() {
 	try {
-		let messagesDiv = document.getElementById("messages");
-		const response = await fetch("/messages");
-		const text = await response.text();
-		const tempDiv = document.createElement("div");
-		tempDiv.innerHTML = text;
+		const response = await fetch("/messages/length");
+		const text = await response.json();
+		return text.length;
+	} catch (error) {
+		console.error("Error getting message count:", error);
+	}
+}
 
-		// getting an error right here that messagesDiv is null
-		// but only on the first load, so maybe we can just hold off?
+let lastMessageCount = 0;
+async function loadMessages(forceUpdate = false, scrollLocation) {
+	try {
+		const newMessageCount = await getMessageCount();
+
+		const update = newMessageCount != lastMessageCount ||
+			lastMessageCount === 0 || forceUpdate;
+
+		let messagesDiv = document.getElementById("messages");
 		while (messagesDiv === null) {
 			await new Promise((resolve) =>
 				setTimeout(resolve, 100)
 			);
-			messagesDiv = document.getElementById("messages");
+			messagesDiv = document.getElementById(
+				"messages",
+			);
 		}
 		if (messagesDiv.scrollTop != bottom) {
 			// show a button to scroll to the bottom
-			const scrollToBottomButton = document.getElementById(
+			const scrollToBottomButton = document
+				.getElementById(
 					"scroll",
 				);
 			scrollToBottomButton.style.display = "block";
 			scrollToBottomButton.onclick = scrollToBottom;
 		} else {
 			// hide the button
-			const scrollToBottomButton = document.getElementById(
+			const scrollToBottomButton = document
+				.getElementById(
 					"scroll",
 				);
 			scrollToBottomButton.style.display = "none";
 		}
+		if (update) {
+			const response = await fetch("/messages");
+			const text = await response.text();
+			const tempDiv = document.createElement("div");
+			tempDiv.innerHTML = text;
 
 			const messages = tempDiv.getElementsByTagName("p");
-
-		const newMessageCount = messages.length;
-
-		const update = newMessageCount != lastMessageCount ||
-			lastMessageCount === 0 || forceUpdate;
-
-		if (update) {
 			messagesDiv.innerHTML = "";
 			Array.from(messages).forEach((msg) => {
 				const messageDiv = document.createElement(
@@ -214,7 +224,11 @@ async function loadMessages(forceUpdate = false) {
 
 				messagesDiv.appendChild(messageDiv);
 			});
+			if (scrollLocation !== undefined) {
+				setScrollLocation(scrollLocation);
+			} else {
 				scrollToBottom();
+			}
 			lastMessageCount = newMessageCount;
 		}
 	} catch (error) {
@@ -270,8 +284,6 @@ function getYouTubeID(url) {
 	return (match && match[7].length == 11) ? match[7] : false;
 }
 
-var bottom = 0;
-
 function scrollToBottom() {
 	const messagesDiv = document.getElementById("messages");
 	messagesDiv.scrollTop = messagesDiv.scrollHeight;
@@ -465,6 +477,7 @@ document.addEventListener("keyup", function (event) {
 	}
 });
 
+let bottom = 0;
 async function initialize() {
 	usersPanel = document.getElementById("users-panel");
 	if (usersPanel) {
@@ -475,14 +488,13 @@ async function initialize() {
 		settingsPanel.style.display = "none";
 	}
 	initializeTheme();
-	checkUsername();
-	updateCurrentUser();
-	timeZoneCheck();
+	await checkUsername();
+	await updateCurrentUser();
+	await timeZoneCheck();
 	setInterval(loadMessages, 1000);
 	setInterval(loadUsers, 1000);
 	setInterval(pingCheck, 3000);
 	await loadMessages(true);
-	scrollToBottom();
 }
 
 initialize();

main.go

@@ -656,6 +656,19 @@ func (s *Server) handleCss(w http.ResponseWriter, r *http.Request) {
 	w.Write(file)
 }
 
+func (s *Server) handleMessagesLength(w http.ResponseWriter, r *http.Request) {
+	// should return the number of messages in the database
+	if r.Method != http.MethodGet {
+		http.Error(w, `{"error": "Method not allowed"}`, http.StatusMethodNotAllowed)
+		return
+	}
+	w.Header().Set("Content-Type", "application/json")
+	messages := s.Database.MessagesGet()
+	json.NewEncoder(w).Encode(map[string]int{
+		"length": len(messages),
+	})
+}
+
 func (s *Server) Run() {
 	s.Database.DbCreateTableMessages()
 	s.Database.DbCreateTableUsers()
@@ -664,6 +677,7 @@ func (s *Server) Run() {
 	handler.HandleFunc("/ping", s.handlePing)
 	handler.HandleFunc("/username", s.handleUsername)
 	handler.HandleFunc("/messages", s.handleMessages)
+	handler.HandleFunc("/messages/length", s.handleMessagesLength)
 	handler.HandleFunc("/username/status", s.handleUsernameStatus)
 	handler.HandleFunc("/users", s.handleUsers)
 	handler.HandleFunc("/", s.handleRoot)