update read state when navigating through messages

liamcottle · Nov 18, 2024 · 8a65174 · 8a65174
1 parent dc33f5e
commit 8a65174
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 1 deletion.
diff --git a/src/components/messages/MessageViewer.vue b/src/components/messages/MessageViewer.vue
@@ -146,6 +146,12 @@ export default {
     unmounted() {
         this.messagesSubscription?.unsubscribe();
     },
+    activated() {
+
+        // update read state when coming back to message viewer
+        Database.NodeMessagesReadState.touch(this.nodeId);
+
+    },
     methods: {
         async sendMessage() {
 
@@ -216,9 +222,15 @@ export default {
             // update messages in ui
             this.messages = messages.map((message) => message.toJSON());
 
-            // auto scroll to bottom if we want to
+            // check if we should auto scroll on new message
             if(this.autoScrollOnNewMessage){
+
+                // auto scroll to bottom if we want to
                 this.scrollMessagesToBottom();
+
+                // update read state since we auto scrolled to bottom of new messages
+                Database.NodeMessagesReadState.touch(this.nodeId);
+
             }
 
         },
@@ -241,6 +253,11 @@ export default {
             // we want to auto scroll if user is at bottom of messages list
             this.autoScrollOnNewMessage = isAtBottom;
 
+            // update read state since we scrolled to bottom
+            if(isAtBottom){
+                Database.NodeMessagesReadState.touch(this.nodeId);
+            }
+
         },
         scrollMessagesToBottom: function() {
             this.$nextTick(() => {

diff --git a/src/js/Database.js b/src/js/Database.js
@@ -99,6 +99,22 @@ async function initDatabase(nodeId) {
                 },
             }
         },
+        node_messages_read_state: {
+            schema: {
+                version: 0,
+                primaryKey: 'id',
+                type: 'object',
+                properties: {
+                    id: {
+                        type: 'string',
+                        maxLength: 10,
+                    },
+                    timestamp: {
+                        type: 'integer',
+                    },
+                },
+            }
+        },
     });
 
 }
@@ -314,8 +330,21 @@ class TraceRoute {
 
 }
 
+class NodeMessagesReadState {
+
+    // update the read state of messages for the provided node id
+    static async touch(nodeId) {
+        return await database.node_messages_read_state.upsert({
+            id: nodeId.toString(),
+            timestamp: Date.now(),
+        });
+    }
+
+}
+
 export default {
     initDatabase,
     Message,
     TraceRoute,
+    NodeMessagesReadState,
 };