Load chat and friend Alpine stores from IndexedDB with JSON fallback

static/db.js

@@ -12,6 +12,14 @@ export async function putChatsToDB(chats) {
     return putObjectsToDB(conversationStoreName, chats)
 }
 
+export async function getFriendsFromDB() {
+    return getObjectsFromDB(friendStoreName)
+}
+
+export async function getChatsFromDB() {
+    return getObjectsFromDB(conversationStoreName)
+}
+
 export async function putObjectsToDB(storeName, objects) {
     const db = await getDB()
     const tx = db.transaction(storeName, 'readwrite')
@@ -29,6 +37,21 @@ export async function putObjectsToDB(storeName, objects) {
     })
 }
 
+export async function getObjectsFromDB(storeName) {
+    const db = await getDB()
+    const tx = db.transaction(storeName, 'readonly')
+    const store = tx.objectStore(storeName)
+    return new Promise((resolve, reject) => {
+        const request = store.getAll()
+        request.onsuccess = () => {
+            resolve(request.result ?? [])
+        }
+        request.onerror = () => {
+            reject(request.error)
+        }
+    })
+}
+
 function getDB() {
     if (!dbPromise) {
         dbPromise = openDB()
@@ -83,4 +106,4 @@ function openDB() {
             reject(request.error)
         }
     })
-}
+}

static/stores.js

@@ -1,18 +1,26 @@
 import {RecentChatList} from "./recentChatList";
-import {deleteDB, putChatsToDB, putFriendsToDB} from "./db";
+import {deleteDB, getChatsFromDB, getFriendsFromDB, putChatsToDB, putFriendsToDB} from "./db";
 import Alpine from "alpinejs";
 
+function getJsonScriptData(id) {
+    const element = document.getElementById(id)
+    if (!element) {
+        return null
+    }
+    return JSON.parse(element.textContent)
+}
+
 async function loadFull() {
     await deleteDB()
 
-    const friends = JSON.parse(document.getElementById('friends').textContent)
-    const states = JSON.parse(document.getElementById('states').textContent)
+    const friends = getJsonScriptData('friends') ?? []
+    const states = getJsonScriptData('states') ?? []
 
     friendStore.setFriends(friends)
     chatStore.rebuildFrom(states)
 
-    putFriendsToDB(friends)
-    putChatsToDB(states)
+    await putFriendsToDB(friends)
+    await putChatsToDB(states)
 }
 
 function setupChatStore() {
@@ -27,6 +35,20 @@ function setupChatStore() {
             this.refresh()
         },
         loadFull,
+        async loadFromDB() {
+            const chats = await getChatsFromDB()
+            if (chats.length > 0) {
+                this.rebuildFrom(chats)
+            }
+        },
+        async loadPartial() {
+            await this.loadFromDB()
+            const partialStates = getJsonScriptData('partial_states') ?? []
+            if (partialStates.length > 0) {
+                this.rebuildFrom(partialStates)
+                await putChatsToDB(partialStates)
+            }
+        },
         put(conv) {
             this.manager.upsertToFront(conv)
             this.refresh()
@@ -40,23 +62,40 @@ function setupChatStore() {
             this.refresh()
         }
     })
-    return Alpine.store(chatStoreName)
+    const store = Alpine.store(chatStoreName)
+    store.init()
+    return store
 }
 
 function setupFriendStore(alpine) {
     const friendStoreName = 'friends'
     Alpine.store(friendStoreName, {
-        friends: {},
+        friends: [],
+        friendMap: {},
+        init() {
+            this.loadFromDB()
+        },
+        async loadFromDB() {
+            const friends = await getFriendsFromDB()
+            if (friends.length > 0) {
+                this.setFriends(friends)
+            }
+        },
         setFriends(data) {
+            this.friends = []
+            this.friendMap = {}
             for (const item of data) {
-                this.friends[item.id] = item
+                this.friends.push(item)
+                this.friendMap[item.id] = item
             }
         },
         getFriend(id) {
-            return this.friends[id]
+            return this.friendMap[id]
         }
     })
-    return Alpine.store(friendStoreName)
+    const store = Alpine.store(friendStoreName)
+    store.init()
+    return store
 }
 
 export const chatStore = setupChatStore()