feat(indexeddb): Added dexie to support indexeddb storage AP-366

.eslintrc.js

@@ -18,7 +18,8 @@ module.exports = {
     'import/named': 0,
     'standard/no-callback-literal': 0,
     '@typescript-eslint/no-unused-vars': 0,
-    '@typescript-eslint/require-await': 0,
+    'require-await': 0,
+    'no-empty-pattern': 0,
     'no-else-return': [
       'error',
       {

libraries/Enums/types/prop-common-events.ts

@@ -1,12 +1,13 @@
 export enum PropCommonEnum {
-    UPDATE = "Update",
-    NORMAL = "Normal",
-    DEFAULT = "default",
-    WAIT = "wait",
-    FULFILLED = "fulfilled",
-    CREATED_AT = "created_at",
-    TYPING = "TYPING",
-    NOT_TYPING = "NOT_TYPING",
+  UPDATE = 'Update',
+  NORMAL = 'Normal',
+  DEFAULT = 'default',
+  WAIT = 'wait',
+  FULFILLED = 'fulfilled',
+  CREATED_AT = 'created_at',
+  MOD = '_mod',
+  TYPING = 'TYPING',
+  NOT_TYPING = 'NOT_TYPING',
 }
 
-export type PropCommon  = keyof typeof PropCommonEnum
+export type PropCommon = keyof typeof PropCommonEnum

libraries/Textile/MailboxManager.ts

@@ -20,9 +20,9 @@ import {
   Message,
 } from '~/types/textile/mailbox'
 import { TextileInitializationData } from '~/types/textile/manager'
-import {PropCommonEnum} from "~/libraries/Enums/types/prop-common-events";
-import {MessagingTypesEnum} from "~/libraries/Enums/types/messaging-types";
-import {EncodingTypesEnum} from "~/libraries/Enums/types/encoding-types";
+import { PropCommonEnum } from '~/libraries/Enums/types/prop-common-events'
+import { MessagingTypesEnum } from '~/libraries/Enums/types/messaging-types'
+import { EncodingTypesEnum } from '~/libraries/Enums/types/encoding-types'
 
 export class MailboxManager {
   senderAddress: string
@@ -75,16 +75,32 @@ export class MailboxManager {
    * Retrieve a conversation with a specific user, filtered by the given query parameters
    * @param friendIdentifier friend mailboxId
    * @param query parameters for filtering
+   * @param lastInbound timestamp of last received message
    * @returns an array of messages
    */
-  async getConversation(
-    friendIdentifier: string,
-    query: ConversationQuery,
-  ): Promise<Message[]> {
+  async getConversation({
+    friendIdentifier,
+    query,
+    lastInbound,
+  }: {
+    friendIdentifier: string
+    query: ConversationQuery
+    lastInbound?: number
+  }): Promise<Message[]> {
     const thread = await this.textile.users.getThread('hubmail')
     const threadID = ThreadID.fromString(thread.id)
 
-    const inboxQuery = Query.where('from').eq(friendIdentifier).orderByIDDesc()
+    let inboxQuery = Query.where('from').eq(friendIdentifier).orderByIDDesc()
+
+    // if messages are stored in indexeddb, only fetch new messages from textile
+    if (lastInbound) {
+      lastInbound = lastInbound * 1000000 // textile has a more specific unix timestamp, matching theirs
+      inboxQuery = Query.where('from')
+        .eq(friendIdentifier)
+        .and(PropCommonEnum.MOD)
+        .ge(lastInbound)
+        .orderByIDDesc()
+    }
 
     if (query?.limit) {
       inboxQuery.limitTo(query.limit)
@@ -113,11 +129,16 @@ export class MailboxManager {
       sentboxQuery.and(PropCommonEnum.CREATED_AT).lt(lastMessageTime)
     }
 
-    const encryptedSentbox = await this.textile.client.find<MessageFromThread>(
-      threadID,
-      MailboxSubscriptionType.sentbox,
-      sentboxQuery,
-    )
+    let encryptedSentbox: MessageFromThread[] = []
+
+    // only fetch sent messages from textile if indexeddb is empty. after that, fetch sent messages from indexeddb
+    if (lastInbound === undefined) {
+      encryptedSentbox = await this.textile.client.find<MessageFromThread>(
+        threadID,
+        MailboxSubscriptionType.sentbox,
+        sentboxQuery,
+      )
+    }
 
     const messages = [...encryptedInbox, ...encryptedSentbox].sort(
       (a, b) => a.created_at - b.created_at,
@@ -208,9 +229,18 @@ export class MailboxManager {
         at: Date.now(),
         type: message.type,
         payload: message.payload,
-        reactedTo: message.type === MessagingTypesEnum.REACTION ? message.reactedTo : undefined,
-        repliedTo: message.type === MessagingTypesEnum.REPLY ? message.repliedTo : undefined,
-        replyType: message.type === MessagingTypesEnum.REPLY ? message.replyType : undefined,
+        reactedTo:
+          message.type === MessagingTypesEnum.REACTION
+            ? message.reactedTo
+            : undefined,
+        repliedTo:
+          message.type === MessagingTypesEnum.REPLY
+            ? message.repliedTo
+            : undefined,
+        replyType:
+          message.type === MessagingTypesEnum.REPLY
+            ? message.replyType
+            : undefined,
         pack: message.pack,
       }),
     )
@@ -245,8 +275,14 @@ export class MailboxManager {
         editedAt: Date.now(),
         type: message.type,
         payload: message.payload,
-        reactedTo: message.type === MessagingTypesEnum.REACTION ? message.reactedTo : undefined,
-        repliedTo: message.type === MessagingTypesEnum.REPLY ? message.repliedTo : undefined,
+        reactedTo:
+          message.type === MessagingTypesEnum.REACTION
+            ? message.reactedTo
+            : undefined,
+        repliedTo:
+          message.type === MessagingTypesEnum.REPLY
+            ? message.repliedTo
+            : undefined,
       }),
     )
 

nuxt.config.js

@@ -79,6 +79,7 @@ export default defineNuxtConfig({
     { src: '~/plugins/thirdparty/videoplayer.ts' },
     { src: '~/plugins/thirdparty/vuetify.ts' },
     { src: '~/plugins/thirdparty/swiper.ts' },
+    { src: '~/plugins/thirdparty/dexie.ts' },
     // Local
     { src: '~/plugins/local/classLoader.ts' },
     { src: '~/plugins/local/notifications.ts', mode: 'client' },

package.json

@@ -44,6 +44,7 @@
     "curve25519-js": "^0.0.4",
     "dayjs": "^1.10.4",
     "detectrtc": "^1.4.1",
+    "dexie": "^3.2.0",
     "ed2curve": "^0.3.0",
     "emoji-mart-vue-fast": "^10.0.1",
     "events": "^3.3.0",

plugins/thirdparty/dexie.ts

@@ -0,0 +1,20 @@
+import Dexie from 'dexie'
+import { Message } from '~/types/textile/mailbox'
+
+export type DexieMessage = {
+  key: string
+  conversation: Message[]
+}
+class SatelliteDB extends Dexie {
+  public conversations: Dexie.Table<DexieMessage, string>
+
+  public constructor() {
+    super('SatelliteDB')
+    this.version(1).stores({
+      conversations: 'key',
+    })
+    this.conversations = this.table('conversations')
+  }
+}
+
+export const db = new SatelliteDB()