WIP: composer queue cache

Author: arnautov-anton

src/components/MessageInput/hooks/messageComposer/useMessageComposer.ts

@@ -2,23 +2,78 @@ import { useEffect, useMemo, useRef, useState } from 'react';
 import { MessageComposer } from 'stream-chat';
 import { useThreadContext } from '../../../Threads';
 import { useChannelStateContext, useMessageInputContext } from '../../../../context';
-import type { LocalMessage, TextComposerMiddleware } from 'stream-chat';
+import type { LocalMessage } from 'stream-chat';
 import { useLegacyThreadContext } from '../../../Thread';
 
-export type UseMessageComposerParams = {
-  textComposerMiddleware?: TextComposerMiddleware[];
-};
+class FixedSizeQueueCache<T> {
+  private elements: Array<T>;
+  private size: number;
+  constructor(size: number) {
+    if (!size) throw new Error('Size must be greater than 0');
+    this.elements = [];
+    this.size = size;
+  }
+
+  add(...values: T[]) {
+    const pushableValues =
+      values.length > this.size ? values.slice(values.length - this.size) : values;
+
+    if (pushableValues.length === this.size) {
+      // this.elements.splice(0, this.size - 1);
+      this.elements.length = 0;
+      this.elements.push(...pushableValues);
+    } else {
+      for (const value of pushableValues) {
+        if (this.elements.length >= this.size) {
+          this.elements.shift();
+        }
+
+        this.elements.push(value);
+      }
+    }
+  }
+
+  // returns value without shifting it to the end of the array
+  peek(predicate: (element: T) => boolean) {
+    // start searching from the most recent (end of array)
+    for (let index = 0; index < this.elements.length; index++) {
+      const element = this.elements[this.elements.length - 1 - index];
+      const predicateResult = predicate(element);
+
+      if (predicateResult) return element;
+    }
+
+    return null;
+  }
+
+  get(predicate: (element: T) => boolean) {
+    const foundElement = this.peek(predicate);
+
+    if (foundElement && this.elements.indexOf(foundElement) !== this.size - 1) {
+      this.elements.splice(this.elements.indexOf(foundElement), 1);
+      this.elements.push(foundElement);
+    }
+
+    return foundElement;
+  }
+
+  toArray() {
+    return [...this.elements];
+  }
+}
+
+export type UseMessageComposerParams = unknown;
 
-export const useMessageComposer = ({
-  textComposerMiddleware,
-}: UseMessageComposerParams = {}) => {
+const queueCache = new FixedSizeQueueCache<MessageComposer>(64);
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const useMessageComposer = (_unused: UseMessageComposerParams = {}) => {
   const { channel } = useChannelStateContext();
   const { message: editedMessage } = useMessageInputContext();
   // legacy thread will receive new composer
   const { legacyThread: parentMessage, messageDraft } = useLegacyThreadContext();
-  const thread = useThreadContext();
+  const threadInstance = useThreadContext();
   const detachedMessageComposerRef = useRef<MessageComposer>(
-    new MessageComposer({ channel }),
+    new MessageComposer({ channel, tag: 'detached' }),
   );
 
   const [cachedEditedMessage, setCachedEditedMessage] = useState<
@@ -42,25 +97,37 @@ export const useMessageComposer = ({
 
   const messageComposer = useMemo(() => {
     if (cachedEditedMessage) {
-      const composer = new MessageComposer({ channel, composition: cachedEditedMessage });
-      // todo: remove with factory functions introduction
-      if (textComposerMiddleware) {
-        composer.textComposer.use(textComposerMiddleware);
-      }
-      return composer;
-    } else if (thread) {
-      return thread.messageComposer;
+      const tag = `edited-message-${cachedEditedMessage.id}`;
+
+      const element = queueCache.get((element) => element.tag === tag);
+      if (element) return element;
+
+      const c = new MessageComposer({
+        channel,
+        composition: cachedEditedMessage,
+        tag,
+      });
+
+      // FIXME: don't like this side effect here
+      queueCache.add(c);
+      return c;
+    } else if (threadInstance) {
+      return threadInstance.messageComposer;
     } else if (cachedParentMessage) {
-      const composer = new MessageComposer({
+      const tag = `parent-message-${cachedParentMessage.id}`;
+
+      const element = queueCache.get((element) => element.tag === tag);
+      if (element) return element;
+
+      const c = new MessageComposer({
         channel,
         composition: messageDraft,
+        tag,
         threadId: cachedParentMessage.id,
       });
-      // todo: remove with factory functions introduction
-      if (textComposerMiddleware) {
-        composer.textComposer.use(textComposerMiddleware);
-      }
-      return composer;
+
+      queueCache.add(c);
+      return c;
     } else if (channel) {
       return channel.messageComposer;
     } else {
@@ -72,8 +139,7 @@ export const useMessageComposer = ({
     cachedParentMessage,
     channel,
     messageDraft, // TODO: set message draft after the fact
-    textComposerMiddleware,
-    thread,
+    threadInstance,
   ]);
 
   useEffect(() => {

yarn.lock

@@ -12157,7 +12157,7 @@ [email protected]:
 
 "stream-chat@https://github.com/GetStream/stream-chat-js.git#feat/message-composer":
   version "0.0.0-development"
-  resolved "https://github.com/GetStream/stream-chat-js.git#d621fc9f455a4274ae5f2d80b8e80cdade2d446a"
+  resolved "https://github.com/GetStream/stream-chat-js.git#4236389e4ddd2adf4eed23149a7f732a79d9ec1a"
   dependencies:
     "@types/jsonwebtoken" "^9.0.8"
     "@types/ws" "^8.5.14"