get thread history

DOCS.md

@@ -35,7 +35,21 @@ Response format:
 
 ## get_history
 
-todo
+```json
+{
+  "before": 100 // message ID. if ommitted just starts from end
+}
+```
+
+Response format:
+
+```json
+{
+  "success": true,
+  "messages": [], // each message has same format as new_message
+  "more": true // false if there are no more
+}
+```
 
 ## send_message
 
@@ -52,7 +66,8 @@ Response format:
 
 ```json
 {
-  "success": true
+  "success": true,
+  "id": 111
 }
 ```
 
@@ -62,6 +77,7 @@ Response format:
 
 ```json
 {
+  "id": 69,
   "name": "unique_username",
   "message": "msg text"
 }

client/chat.js

@@ -42,6 +42,13 @@ async function loadKeys(keys) {
   window.keys = { priv, pub };
 }
 
+async function loadMessages() {
+  window.socket.emit(
+    "get_history",
+    window.earliestMessage ? { before: window.earliestMessage } : {}
+  );
+}
+
 window.onload = () => {
   window.socket = io(SERVER);
   window.socket.on("create_user", swap);
@@ -50,6 +57,20 @@ window.onload = () => {
     el.classList.add("message");
     el.innerHTML = `<strong>${msg.name}: </strong>${msg.message}`;
     document.getElementById("messages").appendChild(el);
+    if (!window.earliestMessage) window.earliestMessage = msg.id;
+  });
+  window.socket.on("send_message", (msg) => {
+    if (!window.earliestMessage) window.earliestMessage = msg.id;
+  });
+  window.socket.on("get_history", (msg) => {
+    window.earliestMessage = msg.messages[msg.messages.length - 1].id;
+    for (let message of msg.messages) {
+      const el = document.createElement("div");
+      el.classList.add("message");
+      el.innerHTML = `<strong>${message.name}: </strong>${message.message}`;
+      document.getElementById("messages").prepend(el);
+    }
+    if (!msg.more) document.getElementById("loadmore").classList.add("hidden");
   });
   const keys = localStorage.getItem("keys");
   if (keys) {
@@ -58,4 +79,5 @@ window.onload = () => {
   }
   document.getElementById("submit").onclick = register;
   document.getElementById("msginput").onsubmit = message;
+  document.getElementById("loadmore").onclick = loadMessages;
 };

client/index.html

@@ -42,6 +42,7 @@
     <div id="chat" class="hidden">
       <h1>vybe</h1>
       <h3>messages will appear below as they are sent</h3>
+      <button id="loadmore">load more messages</button>
       <div id="messages"></div>
       <form id="msginput">
         <input type="text" placeholder="write a message..." id="msg" />

src/get_history.js

@@ -1,3 +1,27 @@
-const get_history = async (msg) => {};
+const db = require("../db");
+
+const get_history = async (msg, respond) => {
+  if (msg.before && isNaN(Number(msg.before))) {
+    return respond({
+      success: false,
+      message: "before must be a number",
+    });
+  }
+  const messages = await db.query(
+    `select users.name, posts.id, content from posts
+    join users on posts.user = users.id
+    ${msg.before ? "where posts.id < ?" : ""}
+    order by posts.created desc
+    limit 101`,
+    msg.before ? [msg.before] : []
+  );
+  return respond({
+    success: true,
+    messages: messages.rows
+      .slice(0, 100)
+      .map((i) => ({ id: i.id, name: i.name, message: i.content })),
+    more: messages.rows.length > 100,
+  });
+};
 
 module.exports = get_history;

src/send_message.js

@@ -23,14 +23,19 @@ const send_message = async (msg, respond, socket) => {
       expectSigned: true,
     });
     // add message and send it to everyone
-    await db.query(
+    const id = await db.query(
-      "insert into posts (user, thread, content, sig) values (?, 1, ?, ?)",
+      "insert into posts (user, thread, content, sig) values (?, 1, ?, ?) returning id",
       [result.rows[0].id, verification.data, msg.message]
     );
     socket.broadcast.emit("new_message", {
+      id: id.rows[0].id,
       name: msg.name,
       message: verification.data,
     });
+    return respond({
+      success: true,
+      id: id.rows[0].id,
+    });
   } catch (err) {
     return respond({
       success: false,