feat: add offline support for draft messages

khushal87 · khushal87 · commit 75087dbdd9b5 · 2025-05-30T11:31:30.000+05:30
diff --git a/package/src/store/OfflineDB.ts b/package/src/store/OfflineDB.ts
@@ -30,6 +30,12 @@ export class OfflineDB extends AbstractOfflineDB {
 
   upsertPoll = api.upsertPoll;
 
+  upsertDraft = api.upsertDraft;
+
+  getDraft = api.getDraft;
+
+  deleteDraft = api.deleteDraft;
+
   upsertChannelData = api.upsertChannelData;
 
   upsertReads = api.upsertReads;
diff --git a/package/src/store/SqliteClient.ts b/package/src/store/SqliteClient.ts
@@ -28,7 +28,7 @@ import type { PreparedBatchQueries, PreparedQueries, Scalar, Table } from './typ
  * This way usage @op-engineering/op-sqlite package is scoped to a single class/file.
  */
 export class SqliteClient {
-  static dbVersion = 9;
+  static dbVersion = 10;
 
   static dbName = DB_NAME;
   static dbLocation = DB_LOCATION;
diff --git a/package/src/store/apis/deleteDraft.ts b/package/src/store/apis/deleteDraft.ts
@@ -0,0 +1,28 @@
+import { createDeleteQuery } from '../sqlite-utils/createDeleteQuery';
+import { SqliteClient } from '../SqliteClient';
+
+export const deleteDraft = async ({
+  cid,
+  parent_id,
+  execute = true,
+}: {
+  cid: string;
+  parent_id?: string;
+  execute?: boolean;
+}) => {
+  const query = createDeleteQuery('draft', {
+    cid,
+    parentId: parent_id,
+  });
+
+  SqliteClient.logger?.('info', 'deleteDraft', {
+    cid,
+    execute,
+  });
+
+  if (execute) {
+    await SqliteClient.executeSql.apply(null, query);
+  }
+
+  return [query];
+};
diff --git a/package/src/store/apis/getChannelMessages.ts b/package/src/store/apis/getChannelMessages.ts
@@ -33,6 +33,8 @@ export const getChannelMessages = async ({
     }
     messageIdVsReactions[reaction.messageId].push(reaction);
   });
+
+  // Populate the polls.
   const messageIdsVsPolls: Record<string, TableRow<'poll'>> = {};
   const pollsById: Record<string, TableRow<'poll'>> = {};
   const messagesWithPolls = messageRows.filter((message) => !!message.poll_id);
diff --git a/package/src/store/apis/getChannels.ts b/package/src/store/apis/getChannels.ts
@@ -1,6 +1,7 @@
 import type { ChannelAPIResponse } from 'stream-chat';
 
 import { getChannelMessages } from './getChannelMessages';
+import { getDraftForChannels } from './getDraftsForChannels';
 import { getMembers } from './getMembers';
 import { getReads } from './getReads';
 import { selectChannels } from './queries/selectChannels';
@@ -26,8 +27,9 @@ export const getChannels = async ({
 }): Promise<Omit<ChannelAPIResponse, 'duration'>[]> => {
   SqliteClient.logger?.('info', 'getChannels', { channelIds, currentUserId });
 
-  const [channels, cidVsMembers, cidVsReads, cidVsMessages] = await Promise.all([
+  const [channels, cidVsDraft, cidVsMembers, cidVsReads, cidVsMessages] = await Promise.all([
     selectChannels({ channelIds }),
+    getDraftForChannels({ channelIds, currentUserId }),
     getMembers({ channelIds }),
     getReads({ channelIds }),
     getChannelMessages({
@@ -39,6 +41,7 @@ export const getChannels = async ({
   // Enrich the channels with state
   return channels.map((c) => ({
     ...mapStorableToChannel(c),
+    draft: cidVsDraft[c.cid],
     members: cidVsMembers[c.cid] || [],
     membership: (cidVsMembers[c.cid] || []).find((member) => member.user_id === currentUserId),
     messages: cidVsMessages[c.cid] || [],
diff --git a/package/src/store/apis/getDraft.ts b/package/src/store/apis/getDraft.ts
@@ -0,0 +1,52 @@
+import { selectMessageForId } from './queries/selectMessageById';
+
+import { mapStorableToDraft } from '../mappers/mapStorableToDraft';
+import { createSelectQuery } from '../sqlite-utils/createSelectQuery';
+import { SqliteClient } from '../SqliteClient';
+import { TableRow } from '../types';
+
+export const getDraft = async ({
+  cid,
+  currentUserId,
+  parent_id,
+}: {
+  cid: string;
+  currentUserId: string;
+  parent_id?: string;
+}) => {
+  SqliteClient.logger?.('info', 'getDraft', { cid, parent_id });
+
+  const query = createSelectQuery('draft', ['*'], { cid, parentId: parent_id });
+
+  const rows = await SqliteClient.executeSql.apply(null, query);
+
+  if (!rows.length) return null;
+
+  const draftRow = rows[0];
+
+  const draftMessageQuery = createSelectQuery('draftMessage', ['*'], {
+    id: draftRow.draftMessageId,
+  });
+  const draftMessageRows = await SqliteClient.executeSql.apply(null, draftMessageQuery);
+
+  const channelQuery = createSelectQuery('channels', ['*'], { cid });
+  const channelRows = await SqliteClient.executeSql.apply(null, channelQuery);
+
+  const quotedMessageRows = await selectMessageForId(draftRow.quotedMessageId);
+
+  const polls = (await SqliteClient.executeSql.apply(
+    null,
+    createSelectQuery('poll', ['*'], {
+      id: quotedMessageRows?.poll_id,
+    }),
+  )) as unknown as TableRow<'poll'>[];
+
+  return mapStorableToDraft({
+    channelRow: channelRows[0] as unknown as TableRow<'channels'>,
+    currentUserId,
+    draftMessageRow: draftMessageRows[0] as unknown as TableRow<'draftMessage'>,
+    draftRow: draftRow[0] as unknown as TableRow<'draft'>,
+    pollRow: polls[0],
+    quotedMessageRow: quotedMessageRows,
+  });
+};
diff --git a/package/src/store/apis/getDraftsForChannels.ts b/package/src/store/apis/getDraftsForChannels.ts
@@ -0,0 +1,53 @@
+import { DraftResponse } from 'stream-chat';
+
+import { selectMessageForId } from './queries/selectMessageById';
+
+import { mapStorableToDraft } from '../mappers/mapStorableToDraft';
+import { createSelectQuery } from '../sqlite-utils/createSelectQuery';
+import { SqliteClient } from '../SqliteClient';
+import { TableRow } from '../types';
+
+export const getDraftForChannels = async ({
+  channelIds,
+  currentUserId,
+}: {
+  channelIds: string[];
+  currentUserId: string;
+}) => {
+  SqliteClient.logger?.('info', 'getDraftsForChannel', { channelIds });
+
+  const query = createSelectQuery('draft', ['*'], { cid: channelIds });
+
+  const rows = await SqliteClient.executeSql.apply(null, query);
+
+  const cidVsDrafts: Record<string, DraftResponse> = {};
+
+  for (const row of rows) {
+    const draftMessageQuery = createSelectQuery('draftMessage', ['*'], {
+      id: row.draftMessageId,
+    });
+    const draftMessageRows = await SqliteClient.executeSql.apply(null, draftMessageQuery);
+
+    const channelQuery = createSelectQuery('channels', ['*'], { cid: row.cid });
+    const channelRows = await SqliteClient.executeSql.apply(null, channelQuery);
+
+    const quotedMessageRow = await selectMessageForId(row.quotedMessageId);
+
+    const polls = (await SqliteClient.executeSql.apply(
+      null,
+      createSelectQuery('poll', ['*'], {
+        id: quotedMessageRow?.poll_id,
+      }),
+    )) as unknown as TableRow<'poll'>[];
+
+    cidVsDrafts[row.cid] = mapStorableToDraft({
+      channelRow: channelRows[0] as unknown as TableRow<'channels'>,
+      currentUserId,
+      draftMessageRow: draftMessageRows[0] as unknown as TableRow<'draftMessage'>,
+      draftRow: row as unknown as TableRow<'draft'>,
+      pollRow: polls[0],
+      quotedMessageRow,
+    });
+  }
+  return cidVsDrafts;
+};
diff --git a/package/src/store/apis/index.ts b/package/src/store/apis/index.ts
@@ -31,3 +31,6 @@ export * from './getPendingTasks';
 export * from './softDeleteMessage';
 export * from './channelExists';
 export * from './dropPendingTasks';
+export * from './getDraft';
+export * from './upsertDraft';
+export * from './deleteDraft';
diff --git a/package/src/store/apis/queries/selectMessageById.ts b/package/src/store/apis/queries/selectMessageById.ts
@@ -0,0 +1,44 @@
+import { tables } from '../../schema';
+import { SqliteClient } from '../../SqliteClient';
+import type { TableRowJoinedUser } from '../../types';
+
+export const selectMessageForId = async (
+  msgId?: string,
+): Promise<TableRowJoinedUser<'messages'> | undefined> => {
+  if (!msgId) {
+    return undefined;
+  }
+
+  const messagesColumnNames = Object.keys(tables.messages.columns)
+    .map((name) => `'${name}', a.${name}`)
+    .join(', ');
+  const userColumnNames = Object.keys(tables.users.columns)
+    .map((name) => `'${name}', b.${name}`)
+    .join(', ');
+
+  SqliteClient.logger?.('info', 'selectMessagesForId', {
+    msgId,
+  });
+
+  const result = await SqliteClient.executeSql(
+    `SELECT
+      json_object(
+        'user', json_object(
+          ${userColumnNames}
+        ),
+        ${messagesColumnNames}
+      ) as value
+    FROM (
+      SELECT
+      *
+      FROM messages
+      WHERE id = ?
+    ) a
+    LEFT JOIN
+      users b
+    ON b.id = a.userId`,
+    [msgId],
+  );
+
+  return result[0] ? JSON.parse(result[0].value) : undefined;
+};
diff --git a/package/src/store/apis/upsertChannels.ts b/package/src/store/apis/upsertChannels.ts
@@ -1,5 +1,6 @@
 import type { ChannelAPIResponse, ChannelMemberResponse } from 'stream-chat';
 
+import { upsertDraft } from './upsertDraft';
 import { upsertMembers } from './upsertMembers';
 
 import { upsertMessages } from './upsertMessages';
@@ -31,13 +32,18 @@ export const upsertChannels = async ({
   for (const channel of channels) {
     queries.push(createUpsertQuery('channels', mapChannelDataToStorable(channel.channel)));
 
-    const { members, membership, messages, read } = channel;
+    const { draft, members, membership, messages, read } = channel;
     if (
       membership &&
       !members.includes((m: ChannelMemberResponse) => m.user?.id === membership.user?.id)
     ) {
       members.push({ ...membership, user_id: membership.user?.id });
     }
+
+    if (draft) {
+      queries = queries.concat(await upsertDraft({ draft }));
+    }
+
     queries = queries.concat(
       await upsertMembers({
         cid: channel.channel.cid,
diff --git a/package/src/store/apis/upsertDraft.ts b/package/src/store/apis/upsertDraft.ts
@@ -0,0 +1,47 @@
+import { DraftResponse } from 'stream-chat';
+
+import { upsertMessages } from './upsertMessages';
+
+import { mapDraftMessageToStorable } from '../mappers/mapDraftMessageToStorable';
+import { mapDraftToStorable } from '../mappers/mapDraftToStorable';
+import { createUpsertQuery } from '../sqlite-utils/createUpsertQuery';
+import { SqliteClient } from '../SqliteClient';
+import type { PreparedQueries } from '../types';
+
+export const upsertDraft = async ({
+  execute = true,
+  draft,
+}: {
+  draft: DraftResponse;
+  execute?: boolean;
+}) => {
+  const queries: PreparedQueries[] = [];
+
+  // Important: Make sure you create a draft only after a draft message is created.
+  const storableDraftMessage = mapDraftMessageToStorable({ draftMessage: draft.message });
+
+  queries.push(createUpsertQuery('draftMessage', storableDraftMessage));
+
+  const storableDraft = mapDraftToStorable({ draft });
+
+  queries.push(createUpsertQuery('draft', storableDraft));
+
+  SqliteClient.logger?.('info', 'upsertDraftMessage', {
+    draftMessage: storableDraftMessage,
+  });
+
+  if (draft.quoted_message) {
+    const query = await upsertMessages({ execute: false, messages: [draft.quoted_message] });
+    queries.concat(query);
+  }
+
+  if (execute) {
+    try {
+      await SqliteClient.executeSqlBatch(queries);
+    } catch (error) {
+      console.error(error);
+    }
+  }
+
+  return queries;
+};
diff --git a/package/src/store/mappers/mapDraftMessageToStorable.ts b/package/src/store/mappers/mapDraftMessageToStorable.ts
@@ -0,0 +1,37 @@
+import { DraftMessage } from 'stream-chat';
+
+import { TableRow } from '../types';
+
+export const mapDraftMessageToStorable = ({
+  draftMessage,
+}: {
+  draftMessage: DraftMessage;
+}): TableRow<'draftMessage'> => {
+  const {
+    id,
+    custom,
+    text,
+    attachments,
+    mentioned_users,
+    parent_id,
+    poll_id,
+    quoted_message_id,
+    show_in_channel,
+    silent,
+    type,
+  } = draftMessage;
+
+  return {
+    attachments: attachments ? JSON.stringify(attachments) : undefined,
+    custom: custom ? JSON.stringify(custom) : undefined,
+    id,
+    mentionedUsers: mentioned_users ? JSON.stringify(mentioned_users) : undefined,
+    parentId: parent_id,
+    poll_id,
+    quotedMessageId: quoted_message_id,
+    showInChannel: show_in_channel,
+    silent,
+    text,
+    type,
+  };
+};
diff --git a/package/src/store/mappers/mapDraftToStorable.ts b/package/src/store/mappers/mapDraftToStorable.ts
@@ -0,0 +1,18 @@
+import type { DraftResponse } from 'stream-chat';
+
+import { mapDateTimeToStorable } from './mapDateTimeToStorable';
+
+import type { TableRow } from '../types';
+
+export const mapDraftToStorable = ({ draft }: { draft: DraftResponse }): TableRow<'draft'> => {
+  const { channel_cid, created_at, parent_id, message, quoted_message } = draft;
+  const createdAt = mapDateTimeToStorable(created_at);
+
+  return {
+    cid: channel_cid,
+    createdAt,
+    draftMessageId: message.id,
+    parentId: parent_id,
+    quotedMessageId: quoted_message?.id,
+  };
+};
diff --git a/package/src/store/mappers/mapStorableToDraft.ts b/package/src/store/mappers/mapStorableToDraft.ts
diff --git a/package/src/store/mappers/mapStorableToDraftMessage.ts b/package/src/store/mappers/mapStorableToDraftMessage.ts
diff --git a/package/src/store/mappers/mapStorableToMessage.ts b/package/src/store/mappers/mapStorableToMessage.ts
diff --git a/package/src/store/schema.ts b/package/src/store/schema.ts

Original file line number	Diff line number	Diff line change
`@@ -33,6 +33,8 @@ export const getChannelMessages = async ({`
`33`	`33`	`}`
`34`	`34`	`messageIdVsReactions[reaction.messageId].push(reaction);`
`35`	`35`	`});`
	`36`	`+`
	`37`	`+ // Populate the polls.`
`36`	`38`	`const messageIdsVsPolls: Record<string, TableRow<'poll'>> = {};`
`37`	`39`	`const pollsById: Record<string, TableRow<'poll'>> = {};`
`38`	`40`	`const messagesWithPolls = messageRows.filter((message) => !!message.poll_id);`