@amityco/ts-sdk 0.0.1-cb052d5.0 → 0.0.1-cb5cdb1.0

package/src/message/observers/liveMessages.ts

@@ -0,0 +1,155 @@
+/* eslint-disable no-use-before-define */
+import { getResolver } from '~/core/model';
+import { getActiveClient } from '~/client/api';
+import { pushToCache, pullFromCache } from '~/cache/api';
+import { createQuery, runQuery, queryOptions, filterByPropEquality } from '~/core/query';
+
+import {
+  COLLECTION_DEFAULT_CACHING_POLICY,
+  COLLECTION_DEFAULT_PAGINATION_LIMIT,
+  ENABLE_CACHE_MESSAGE,
+} from '~/utils/constants';
+
+import {
+  onMessageCreated,
+  onMessageDeleted,
+  onMessageUpdated,
+  onMessageFlagged,
+  onMessageUnflagged,
+  onMessageFlagCleared,
+  onMessageReactionAdded,
+  onMessageReactionRemoved,
+} from '../events';
+import { onMessageFetched } from '../events/onMessageFetched';
+import { queryMessages } from '../api';
+
+/**
+ * ```js
+ * import { liveMessages } from '@amityco/ts-sdk';
+ *
+ * let messages = [];
+ *
+ * const unsubscribe = liveMessages({
+ *   subChannelId: Amity.SubChannel['subChannelId'];
+ * }, response => merge(messages, response.data));
+ * ```
+ *
+ * Observe all mutations on a list of {@link Amity.Message} for a given target object
+ *
+ * @param params for querying messages from a sub channel
+ * @param callback the function to call when new data are available
+ * @returns An {@link Amity.Unsubscriber} function to run when willing to stop observing the messages
+ *
+ * @category Messages Live Collection
+ */
+export const liveMessages = (
+  params: Amity.MessagesLiveCollection,
+  callback: Amity.LiveCollectionCallback<Amity.Message>,
+  config?: Amity.LiveCollectionConfig,
+): Amity.Unsubscriber => {
+  const { log, cache } = getActiveClient();
+
+  if (!cache) {
+    console.log(ENABLE_CACHE_MESSAGE);
+  }
+
+  const timestamp = Date.now();
+  log(`liveMessages(tmpid: ${timestamp}) > listen`);
+
+  const { limit: queryLimit, ...queryParams } = params;
+
+  const limit = queryLimit ?? COLLECTION_DEFAULT_PAGINATION_LIMIT;
+  const { policy = COLLECTION_DEFAULT_CACHING_POLICY } = config ?? {};
+
+  const disposers: Amity.Unsubscriber[] = [];
+  const cacheKey = ['message', 'collection', { subChannelId: params.subChannelId }];
+
+  const responder = (data: Amity.MessageLiveCollectionCache) => {
+    let messages: Amity.Message[] =
+      data.data
+        .map(messageId => pullFromCache<Amity.Message>(['message', 'get', messageId])!)
+        .filter(Boolean)
+        .map(({ data }) => data) ?? [];
+
+    /*
+     * for cases when message is deleted via RTE, this flag is used to get
+     * items from cache that are !deleted
+     */
+    if (params.includeDeleted === false) {
+      messages = filterByPropEquality(messages, 'isDeleted', false);
+    }
+
+    callback({
+      onNextPage: onFetch,
+      data: messages,
+      hasNextPage: !!data.params?.page,
+      loading: data.loading,
+      error: data.error,
+    });
+  };
+
+  const realtimeRouter = (_: Amity.MessageActionType) => (message: Amity.Message) => {
+    const collection = pullFromCache<Amity.MessageLiveCollectionCache>(cacheKey)?.data;
+
+    if (params.subChannelId !== message.subChannelId || !collection) return;
+
+    collection.data = [...new Set([message.messageId, ...collection.data])];
+
+    pushToCache(cacheKey, collection);
+
+    responder(collection);
+  };
+
+  const onFetch = () => {
+    const collection = pullFromCache<Amity.MessageLiveCollectionCache>(cacheKey)?.data;
+
+    const messages = collection?.data ?? [];
+
+    if (messages.length > 0 && !collection?.params?.page) return;
+
+    const query = createQuery(queryMessages, {
+      ...queryParams,
+      page: collection?.params?.page ?? { limit },
+    });
+
+    runQuery(
+      query,
+      ({ data: result, error, loading, nextPage: page }) => {
+        const data = {
+          loading,
+          error,
+          params: { page },
+          data: messages,
+        };
+
+        if (result) {
+          data.data = [...new Set([...messages, ...result.map(getResolver('message'))])];
+        }
+
+        pushToCache(cacheKey, data);
+
+        responder(data);
+      },
+      queryOptions(policy),
+    );
+  };
+
+  disposers.push(
+    onMessageFetched(realtimeRouter('onFetch')),
+    onMessageCreated(realtimeRouter('onCreate')),
+    onMessageUpdated(realtimeRouter('onUpdate')),
+    onMessageDeleted(realtimeRouter('onDelete')),
+    onMessageFlagged(realtimeRouter('onFlagged')),
+    onMessageUnflagged(realtimeRouter('onUnflagged')),
+    onMessageFlagCleared(realtimeRouter('onFlagCleared')),
+    onMessageReactionAdded(realtimeRouter('onReactionAdded')),
+    onMessageReactionRemoved(realtimeRouter('onReactionRemoved')),
+  );
+
+  onFetch();
+
+  return () => {
+    log(`liveMessages(tmpid: ${timestamp}) > dispose`);
+    disposers.forEach(fn => fn());
+  };
+};

package/src/message/observers/observeMessage.ts

@@ -11,6 +11,7 @@ import { onMessageUpdated, onMessageDeleted } from '../events';
  * import { observeMessage } from '@amityco/ts-sdk'
  *
  * let message = {}
+ *
  * const unsub = observeMessage(messageId, updated => message = updated)
  * ```
  *
@@ -34,6 +35,10 @@ export const observeMessage = <Events extends ['onFetch', 'onUpdate', 'onDelete'
   const timestamp = Date.now();
   log(`observeMessage(tmpid: ${timestamp}) > listen`);
 
+  console.log(
+    'observeMessage will be deprecated on 15th November 2022, please use liveMessage instead.',
+  );
+
   // wrapper function to make sure
   const router = (result: Amity.Snapshot<Amity.Message>, action: Events[number]) => {
     // filter function

package/src/message/observers/observeMessages.ts

@@ -7,20 +7,20 @@ import { onMessageCreated, onMessageUpdated, onMessageDeleted } from '../events'
  * import { observeMessages } from '@amityco/ts-sdk'
  *
  * let messages = []
- * const unsub = observeMessages(channelId, message => merge(messages, message))
+ *
+ * const unsubscribe = observeMessages(channelId, message => merge(messages, message))
  * ```
  *
- * Observe all mutations on a list of {@link Amity.Message} for a given {@link Amity.Channel} object
+ * Observe all mutations on a list of {@link Amity.Message} for a given {@link Amity.SubChannel} object
  *
- * @param client the client to observe the message with
- * @param channelId the ID of the channel where to observe the messages
+ * @param subChannelId the ID of the channel where to observe the messages
  * @param callback the function to call when new data are available
  * @returns An {@link Amity.Unsubscriber} function to run when willing to stop observing the messages
  *
  * @category Message Observer
  */
 export const observeMessages = (
-  channelId: Amity.Channel['channelId'],
+  subChannelId: Amity.SubChannel['subChannelId'],
   callback: Amity.ObjectListener<
     Amity.Snapshot<Amity.Message>,
     ['onCreate', 'onUpdate', 'onDelete']
@@ -37,7 +37,7 @@ export const observeMessages = (
     message: Amity.Snapshot<Amity.Message>,
     action: 'onCreate' | 'onUpdate' | 'onDelete',
   ) => {
-    if (message.data?.channelId !== channelId) return;
+    if (message.data?.subChannelId !== subChannelId) return;
 
     if (callback instanceof Function) return callback(message);
 

package/src/message/tests/events.test.ts

@@ -0,0 +1,61 @@
+import { client, generateRawMessage } from '~/utils/tests';
+import { convertFromRaw } from '~/message/utils';
+import {
+  onMessageCreated,
+  onMessageUpdated,
+  onMessageDeleted,
+  onMessageFlagged,
+  onMessageUnflagged,
+  onMessageFlagCleared,
+  onMessageReactionAdded,
+  onMessageReactionRemoved,
+} from '../events';
+
+describe('Message Events', () => {
+  const rawMessage = generateRawMessage();
+  const message = convertFromRaw(rawMessage);
+
+  const cases: Array<
+    [(callback: Amity.Listener<Amity.Message>) => Amity.Unsubscriber, keyof Amity.MqttMessageEvents]
+  > = [
+    [onMessageCreated, 'message.created'],
+    [onMessageUpdated, 'message.updated'],
+    [onMessageDeleted, 'message.deleted'],
+    [onMessageFlagged, 'message.flagged'],
+    [onMessageUnflagged, 'message.unflagged'],
+    [onMessageFlagCleared, 'message.flagCleared'],
+    [onMessageReactionAdded, 'message.reactionAdded'],
+    [onMessageReactionRemoved, 'message.reactionRemoved'],
+  ];
+
+  cases.forEach(([onEvent, event]) => {
+    test(`should call '${onEvent.name}' callback if '${event}' event is dispatched`, () => {
+      const callback = jest.fn();
+      const unsubscribe = onEvent(callback);
+      client.emitter.emit(event, {
+        messages: [rawMessage],
+        files: [],
+        users: [],
+      });
+
+      unsubscribe();
+
+      expect(callback).toHaveBeenCalled();
+      expect(callback).toHaveBeenCalledWith(message);
+    });
+
+    test(`should not call '${onEvent.name}' callback if we have already unsubscribed`, () => {
+      const callback = jest.fn();
+      const unsubscribe = onEvent(callback);
+
+      unsubscribe();
+      client.emitter.emit(event, {
+        files: [],
+        users: [],
+        messages: [rawMessage],
+      });
+
+      expect(callback).not.toHaveBeenCalled();
+    });
+  });
+});

package/src/message/tests/observers/liveMessage.test.ts

@@ -0,0 +1,108 @@
+import { ASCApiError } from '~/core/errors';
+import { disableCache, enableCache } from '~/cache/api';
+import { UNSYNCED_OBJECT_CACHED_AT_MESSAGE } from '~/utils/constants';
+import { pause, client, connectClient, disconnectClient, generateRawMessage } from '~/utils/tests';
+import { getFutureDate } from '~/core/model';
+
+import { convertFromRaw } from '../../utils';
+import { liveMessage } from '../../observers/liveMessage';
+import { createMessage } from '../../api';
+
+const rawMessage = generateRawMessage();
+const message = convertFromRaw(rawMessage);
+const messageQueryResponseRaw = {
+  data: { messages: [rawMessage] },
+};
+
+const getSnapshot = () => {
+  return {
+    loading: true,
+    error: undefined as any,
+    data: undefined as undefined | Amity.Message,
+  };
+};
+
+describe('liveMessage', () => {
+  beforeAll(async () => {
+    await connectClient();
+  });
+
+  afterAll(async () => {
+    await disconnectClient();
+  });
+
+  beforeEach(enableCache);
+
+  afterEach(disableCache);
+
+  const events: [string, keyof Amity.Events][] = [
+    ['it should return updated message on onFetch', 'local.message.fetched'],
+    ['it should return updated message on onUpdate', 'message.updated'],
+    ['it should return updated message on onDelete', 'message.deleted'],
+    ['it should return updated message on onFlagged', 'message.flagged'],
+    ['it should return updated message on onUnflagged', 'message.unflagged'],
+    ['it should return updated message on onFlagCleared', 'message.flagCleared'],
+    ['it should return updated message on onReactionAdded', 'message.reactionAdded'],
+    ['it should return updated message on onReactionRemoved', 'message.reactionRemoved'],
+  ];
+
+  test.each(events)('%s', async (test, event) => {
+    const snapshot = getSnapshot();
+
+    // mock response of queryMessages and validate
+    const callback = jest.fn();
+    client.http.get = jest.fn().mockResolvedValue(messageQueryResponseRaw);
+
+    liveMessage(message.messageId, callback);
+
+    await pause();
+
+    expect(callback).toHaveBeenCalledTimes(2);
+
+    const rawUpdatedMessage = {
+      ...rawMessage,
+      data: { text: event },
+      updatedAt: getFutureDate(rawMessage.updatedAt),
+    };
+    const updatedMessage = convertFromRaw(rawUpdatedMessage);
+    if (event === 'local.message.fetched') {
+      client.emitter.emit('local.message.fetched', { messages: [updatedMessage] });
+    } else {
+      client.emitter.emit(event, {
+        messages: [rawUpdatedMessage],
+        users: [],
+        files: [],
+      });
+    }
+    await pause();
+
+    delete snapshot.error;
+    snapshot.loading = false;
+    snapshot.data = updatedMessage;
+    expect(callback.mock.calls[2][0]).toMatchObject(snapshot);
+  });
+
+  test('it should terminate updates for unsynced object', async () => {
+    const callback = jest.fn();
+    client.http.get = jest.fn();
+    const snapshot = getSnapshot();
+    const data = { subChannelId: 'test', data: { text: 'text' } };
+
+    const message = createMessage.optimistically(data);
+
+    const error = new ASCApiError(
+      UNSYNCED_OBJECT_CACHED_AT_MESSAGE,
+      Amity.ClientError.DISALOOW_UNSYNCED_OBJECT,
+      Amity.ErrorLevel.ERROR,
+    );
+
+    liveMessage(message!.data.messageId, callback);
+
+    expect(callback).toHaveBeenCalledTimes(1);
+
+    snapshot.error = error;
+    snapshot.loading = false;
+    snapshot.data = message!.data;
+    expect(callback).toHaveBeenLastCalledWith(expect.objectContaining(snapshot));
+  });
+});