stream-chat 8.41.0 → 8.42.0

package/src/poll.ts

@@ -0,0 +1,414 @@
+import { StateStore } from './store';
+import type { StreamChat } from './client';
+import type {
+  DefaultGenerics,
+  Event,
+  ExtendableGenerics,
+  PartialPollUpdate,
+  PollAnswer,
+  PollData,
+  PollEnrichData,
+  PollOptionData,
+  PollResponse,
+  PollVote,
+  QueryVotesFilters,
+  QueryVotesOptions,
+  VoteSort,
+} from './types';
+
+type PollEvent<SCG extends ExtendableGenerics = DefaultGenerics> = {
+  cid: string;
+  created_at: string;
+  poll: PollResponse<SCG>;
+};
+
+type PollUpdatedEvent<SCG extends ExtendableGenerics = DefaultGenerics> = PollEvent<SCG> & {
+  type: 'poll.updated';
+};
+
+type PollClosedEvent<SCG extends ExtendableGenerics = DefaultGenerics> = PollEvent<SCG> & {
+  type: 'poll.closed';
+};
+
+type PollVoteEvent<SCG extends ExtendableGenerics = DefaultGenerics> = {
+  cid: string;
+  created_at: string;
+  poll: PollResponse<SCG>;
+  poll_vote: PollVote<SCG> | PollAnswer<SCG>;
+};
+
+type PollVoteCastedEvent<SCG extends ExtendableGenerics = DefaultGenerics> = PollVoteEvent<SCG> & {
+  type: 'poll.vote_casted';
+};
+
+type PollVoteCastedChanged<SCG extends ExtendableGenerics = DefaultGenerics> = PollVoteEvent<SCG> & {
+  type: 'poll.vote_removed';
+};
+
+type PollVoteCastedRemoved<SCG extends ExtendableGenerics = DefaultGenerics> = PollVoteEvent<SCG> & {
+  type: 'poll.vote_removed';
+};
+
+const isPollUpdatedEvent = <SCG extends ExtendableGenerics = DefaultGenerics>(
+  e: Event<SCG>,
+): e is PollUpdatedEvent<SCG> => e.type === 'poll.updated';
+const isPollClosedEventEvent = <SCG extends ExtendableGenerics = DefaultGenerics>(
+  e: Event<SCG>,
+): e is PollClosedEvent<SCG> => e.type === 'poll.closed';
+const isPollVoteCastedEvent = <SCG extends ExtendableGenerics = DefaultGenerics>(
+  e: Event<SCG>,
+): e is PollVoteCastedEvent<SCG> => e.type === 'poll.vote_casted';
+const isPollVoteChangedEvent = <SCG extends ExtendableGenerics = DefaultGenerics>(
+  e: Event<SCG>,
+): e is PollVoteCastedChanged<SCG> => e.type === 'poll.vote_changed';
+const isPollVoteRemovedEvent = <SCG extends ExtendableGenerics = DefaultGenerics>(
+  e: Event<SCG>,
+): e is PollVoteCastedRemoved<SCG> => e.type === 'poll.vote_removed';
+
+export const isVoteAnswer = <SCG extends ExtendableGenerics = DefaultGenerics>(
+  vote: PollVote<SCG> | PollAnswer<SCG>,
+): vote is PollAnswer<SCG> => !!(vote as PollAnswer<SCG>)?.answer_text;
+
+export type PollAnswersQueryParams = {
+  filter?: QueryVotesFilters;
+  options?: QueryVotesOptions;
+  sort?: VoteSort;
+};
+
+export type PollOptionVotesQueryParams = {
+  filter: { option_id: string } & QueryVotesFilters;
+  options?: QueryVotesOptions;
+  sort?: VoteSort;
+};
+
+type OptionId = string;
+
+export type PollState<SCG extends ExtendableGenerics = DefaultGenerics> = SCG['pollType'] &
+  Omit<PollResponse<SCG>, 'own_votes' | 'id'> & {
+    lastActivityAt: Date; // todo: would be ideal to get this from the BE
+    maxVotedOptionIds: OptionId[];
+    ownVotesByOptionId: Record<OptionId, PollVote<SCG>>;
+    ownAnswer?: PollAnswer; // each user can have only one answer
+  };
+
+type PollInitOptions<SCG extends ExtendableGenerics = DefaultGenerics> = {
+  client: StreamChat<SCG>;
+  poll: PollResponse<SCG>;
+};
+
+export class Poll<SCG extends ExtendableGenerics = DefaultGenerics> {
+  public readonly state: StateStore<PollState<SCG>>;
+  public id: string;
+  private client: StreamChat<SCG>;
+  private unsubscribeFunctions: Set<() => void> = new Set();
+
+  constructor({ client, poll }: PollInitOptions<SCG>) {
+    this.client = client;
+    this.id = poll.id;
+
+    this.state = new StateStore<PollState<SCG>>(this.getInitialStateFromPollResponse(poll));
+  }
+
+  private getInitialStateFromPollResponse = (poll: PollInitOptions<SCG>['poll']) => {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { own_votes, id, ...pollResponseForState } = poll;
+    const { ownAnswer, ownVotes } = own_votes?.reduce<{ ownVotes: PollVote<SCG>[]; ownAnswer?: PollAnswer }>(
+      (acc, voteOrAnswer) => {
+        if (isVoteAnswer(voteOrAnswer)) {
+          acc.ownAnswer = voteOrAnswer;
+        } else {
+          acc.ownVotes.push(voteOrAnswer);
+        }
+        return acc;
+      },
+      { ownVotes: [] },
+    ) ?? { ownVotes: [] };
+
+    return {
+      ...pollResponseForState,
+      lastActivityAt: new Date(),
+      maxVotedOptionIds: getMaxVotedOptionIds(
+        pollResponseForState.vote_counts_by_option as PollResponse<SCG>['vote_counts_by_option'],
+      ),
+      ownAnswer,
+      ownVotesByOptionId: getOwnVotesByOptionId(ownVotes),
+    };
+  };
+
+  public reinitializeState = (poll: PollInitOptions<SCG>['poll']) => {
+    this.state.partialNext(this.getInitialStateFromPollResponse(poll));
+  };
+
+  get data(): PollState<SCG> {
+    return this.state.getLatestValue();
+  }
+
+  public handlePollUpdated = (event: Event<SCG>) => {
+    if (event.poll?.id && event.poll.id !== this.id) return;
+    if (!isPollUpdatedEvent(event)) return;
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { id, ...pollData } = extractPollData(event.poll);
+    // @ts-ignore
+    this.state.partialNext({ ...pollData, lastActivityAt: new Date(event.created_at) });
+  };
+
+  public handlePollClosed = (event: Event<SCG>) => {
+    if (event.poll?.id && event.poll.id !== this.id) return;
+    if (!isPollClosedEventEvent(event)) return;
+    // @ts-ignore
+    this.state.partialNext({ is_closed: true, lastActivityAt: new Date(event.created_at) });
+  };
+
+  public handleVoteCasted = (event: Event<SCG>) => {
+    if (event.poll?.id && event.poll.id !== this.id) return;
+    if (!isPollVoteCastedEvent(event)) return;
+    const currentState = this.data;
+    const isOwnVote = event.poll_vote.user_id === this.client.userID;
+    let latestAnswers = [...(currentState.latest_answers as PollAnswer[])];
+    let ownAnswer = currentState.ownAnswer;
+    const ownVotesByOptionId = currentState.ownVotesByOptionId;
+    let maxVotedOptionIds = currentState.maxVotedOptionIds;
+
+    if (isOwnVote) {
+      if (isVoteAnswer(event.poll_vote)) {
+        ownAnswer = event.poll_vote;
+      } else if (event.poll_vote.option_id) {
+        ownVotesByOptionId[event.poll_vote.option_id] = event.poll_vote;
+      }
+    }
+
+    if (isVoteAnswer(event.poll_vote)) {
+      latestAnswers = [event.poll_vote, ...latestAnswers];
+    } else {
+      maxVotedOptionIds = getMaxVotedOptionIds(event.poll.vote_counts_by_option);
+    }
+
+    const pollEnrichData = extractPollEnrichedData(event.poll);
+    // @ts-ignore
+    this.state.partialNext({
+      ...pollEnrichData,
+      latest_answers: latestAnswers,
+      lastActivityAt: new Date(event.created_at),
+      ownAnswer,
+      ownVotesByOptionId,
+      maxVotedOptionIds,
+    });
+  };
+
+  public handleVoteChanged = (event: Event<SCG>) => {
+    // this event is triggered only when event.poll.enforce_unique_vote === true
+    if (event.poll?.id && event.poll.id !== this.id) return;
+    if (!isPollVoteChangedEvent(event)) return;
+    const currentState = this.data;
+    const isOwnVote = event.poll_vote.user_id === this.client.userID;
+    let latestAnswers = [...(currentState.latest_answers as PollAnswer[])];
+    let ownAnswer = currentState.ownAnswer;
+    let ownVotesByOptionId = currentState.ownVotesByOptionId;
+    let maxVotedOptionIds = currentState.maxVotedOptionIds;
+
+    if (isOwnVote) {
+      if (isVoteAnswer(event.poll_vote)) {
+        latestAnswers = [event.poll_vote, ...latestAnswers.filter((answer) => answer.id !== event.poll_vote.id)];
+        ownAnswer = event.poll_vote;
+      } else if (event.poll_vote.option_id) {
+        if (event.poll.enforce_unique_votes) {
+          ownVotesByOptionId = { [event.poll_vote.option_id]: event.poll_vote };
+        } else {
+          ownVotesByOptionId = Object.entries(ownVotesByOptionId).reduce<Record<OptionId, PollVote<SCG>>>(
+            (acc, [optionId, vote]) => {
+              if (optionId !== event.poll_vote.option_id && vote.id === event.poll_vote.id) {
+                return acc;
+              }
+              acc[optionId] = vote;
+              return acc;
+            },
+            {},
+          );
+          ownVotesByOptionId[event.poll_vote.option_id] = event.poll_vote;
+        }
+
+        if (ownAnswer?.id === event.poll_vote.id) {
+          ownAnswer = undefined;
+        }
+        maxVotedOptionIds = getMaxVotedOptionIds(event.poll.vote_counts_by_option);
+      }
+    } else if (isVoteAnswer(event.poll_vote)) {
+      latestAnswers = [event.poll_vote, ...latestAnswers];
+    } else {
+      maxVotedOptionIds = getMaxVotedOptionIds(event.poll.vote_counts_by_option);
+    }
+
+    const pollEnrichData = extractPollEnrichedData(event.poll);
+    // @ts-ignore
+    this.state.partialNext({
+      ...pollEnrichData,
+      latest_answers: latestAnswers,
+      lastActivityAt: new Date(event.created_at),
+      ownAnswer,
+      ownVotesByOptionId,
+      maxVotedOptionIds,
+    });
+  };
+
+  public handleVoteRemoved = (event: Event<SCG>) => {
+    if (event.poll?.id && event.poll.id !== this.id) return;
+    if (!isPollVoteRemovedEvent(event)) return;
+    const currentState = this.data;
+    const isOwnVote = event.poll_vote.user_id === this.client.userID;
+    let latestAnswers = [...(currentState.latest_answers as PollAnswer[])];
+    let ownAnswer = currentState.ownAnswer;
+    const ownVotesByOptionId = { ...currentState.ownVotesByOptionId };
+    let maxVotedOptionIds = currentState.maxVotedOptionIds;
+
+    if (isVoteAnswer(event.poll_vote)) {
+      latestAnswers = latestAnswers.filter((answer) => answer.id !== event.poll_vote.id);
+      if (isOwnVote) {
+        ownAnswer = undefined;
+      }
+    } else {
+      maxVotedOptionIds = getMaxVotedOptionIds(event.poll.vote_counts_by_option);
+      if (isOwnVote && event.poll_vote.option_id) {
+        delete ownVotesByOptionId[event.poll_vote.option_id];
+      }
+    }
+
+    const pollEnrichData = extractPollEnrichedData(event.poll);
+    // @ts-ignore
+    this.state.partialNext({
+      ...pollEnrichData,
+      latest_answers: latestAnswers,
+      lastActivityAt: new Date(event.created_at),
+      ownAnswer,
+      ownVotesByOptionId,
+      maxVotedOptionIds,
+    });
+  };
+
+  query = async (id: string) => {
+    const { poll } = await this.client.getPoll(id);
+    // @ts-ignore
+    this.state.partialNext({ ...poll, lastActivityAt: new Date() });
+    return poll;
+  };
+
+  update = async (data: Exclude<PollData<SCG>, 'id'>) => {
+    return await this.client.updatePoll({ ...data, id: this.id });
+  };
+
+  partialUpdate = async (partialPollObject: PartialPollUpdate<SCG>) => {
+    return await this.client.partialUpdatePoll(this.id as string, partialPollObject);
+  };
+
+  close = async () => {
+    return await this.client.closePoll(this.id as string);
+  };
+
+  delete = async () => {
+    return await this.client.deletePoll(this.id as string);
+  };
+
+  createOption = async (option: PollOptionData) => {
+    return await this.client.createPollOption(this.id as string, option);
+  };
+
+  updateOption = async (option: PollOptionData) => {
+    return await this.client.updatePollOption(this.id as string, option);
+  };
+
+  deleteOption = async (optionId: string) => {
+    return await this.client.deletePollOption(this.id as string, optionId);
+  };
+
+  castVote = async (optionId: string, messageId: string) => {
+    const { max_votes_allowed, ownVotesByOptionId } = this.data;
+
+    const reachedVoteLimit = max_votes_allowed && max_votes_allowed === Object.keys(ownVotesByOptionId).length;
+
+    if (reachedVoteLimit) {
+      let oldestVote = Object.values(ownVotesByOptionId)[0];
+      Object.values(ownVotesByOptionId)
+        .slice(1)
+        .forEach((vote) => {
+          if (!oldestVote?.created_at || new Date(vote.created_at) < new Date(oldestVote.created_at)) {
+            oldestVote = vote;
+          }
+        });
+      if (oldestVote?.id) {
+        await this.removeVote(oldestVote.id, messageId);
+      }
+    }
+    return await this.client.castPollVote(messageId, this.id as string, { option_id: optionId });
+  };
+
+  removeVote = async (voteId: string, messageId: string) => {
+    return await this.client.removePollVote(messageId, this.id as string, voteId);
+  };
+
+  addAnswer = async (answerText: string, messageId: string) => {
+    return await this.client.addPollAnswer(messageId, this.id as string, answerText);
+  };
+
+  removeAnswer = async (answerId: string, messageId: string) => {
+    return await this.client.removePollVote(messageId, this.id as string, answerId);
+  };
+
+  queryAnswers = async (params: PollAnswersQueryParams) => {
+    return await this.client.queryPollAnswers(this.id as string, params.filter, params.sort, params.options);
+  };
+
+  queryOptionVotes = async (params: PollOptionVotesQueryParams) => {
+    return await this.client.queryPollVotes(this.id as string, params.filter, params.sort, params.options);
+  };
+}
+
+function getMaxVotedOptionIds(voteCountsByOption: PollResponse['vote_counts_by_option']) {
+  let maxVotes = 0;
+  let winningOptions: string[] = [];
+  for (const [id, count] of Object.entries(voteCountsByOption ?? {})) {
+    if (count > maxVotes) {
+      winningOptions = [id];
+      maxVotes = count;
+    } else if (count === maxVotes) {
+      winningOptions.push(id);
+    }
+  }
+  return winningOptions;
+}
+
+function getOwnVotesByOptionId<SCG extends ExtendableGenerics = DefaultGenerics>(ownVotes: PollVote<SCG>[]) {
+  return !ownVotes
+    ? ({} as Record<OptionId, PollVote<SCG>>)
+    : ownVotes.reduce<Record<OptionId, PollVote<SCG>>>((acc, vote) => {
+        if (isVoteAnswer(vote) || !vote.option_id) return acc;
+        acc[vote.option_id] = vote;
+        return acc;
+      }, {});
+}
+
+export function extractPollData<SCG extends ExtendableGenerics = DefaultGenerics>(
+  pollResponse: PollResponse<SCG>,
+): PollData<SCG> {
+  return {
+    allow_answers: pollResponse.allow_answers,
+    allow_user_suggested_options: pollResponse.allow_user_suggested_options,
+    description: pollResponse.description,
+    enforce_unique_vote: pollResponse.enforce_unique_vote,
+    id: pollResponse.id,
+    is_closed: pollResponse.is_closed,
+    max_votes_allowed: pollResponse.max_votes_allowed,
+    name: pollResponse.name,
+    options: pollResponse.options,
+    voting_visibility: pollResponse.voting_visibility,
+  };
+}
+
+export function extractPollEnrichedData<SCG extends ExtendableGenerics = DefaultGenerics>(
+  pollResponse: PollResponse<SCG>,
+): Omit<PollEnrichData<SCG>, 'own_votes' | 'latest_answers'> {
+  return {
+    answers_count: pollResponse.answers_count,
+    latest_votes_by_option: pollResponse.latest_votes_by_option,
+    vote_count: pollResponse.vote_count,
+    vote_counts_by_option: pollResponse.vote_counts_by_option,
+  };
+}

package/src/poll_manager.ts

@@ -0,0 +1,162 @@
+import type { StreamChat } from './client';
+import type {
+  CreatePollData,
+  DefaultGenerics,
+  ExtendableGenerics,
+  PollResponse,
+  PollSort,
+  QueryPollsFilters,
+  QueryPollsOptions,
+} from './types';
+import { Poll } from './poll';
+import { FormatMessageResponse } from './types';
+import { formatMessage } from './utils';
+
+export class PollManager<SCG extends ExtendableGenerics = DefaultGenerics> {
+  private client: StreamChat<SCG>;
+  // The pollCache contains only polls that have been created and sent as messages
+  // (i.e only polls that are coupled with a message, can be voted on and require a
+  // reactive state). It shall work as a basic look-up table for our SDK to be able
+  // to quickly consume poll state that will be reactive even without the polls being
+  // rendered within the UI.
+  private pollCache = new Map<string, Poll<SCG>>();
+  private unsubscribeFunctions: Set<() => void> = new Set();
+
+  constructor({ client }: { client: StreamChat<SCG> }) {
+    this.client = client;
+  }
+
+  get data(): Map<string, Poll<SCG>> {
+    return this.pollCache;
+  }
+
+  public fromState = (id: string) => {
+    return this.pollCache.get(id);
+  };
+
+  public registerSubscriptions = () => {
+    if (this.unsubscribeFunctions.size) {
+      // Already listening for events and changes
+      return;
+    }
+
+    this.unsubscribeFunctions.add(this.subscribeMessageNew());
+    this.unsubscribeFunctions.add(this.subscribePollUpdated());
+    this.unsubscribeFunctions.add(this.subscribePollClosed());
+    this.unsubscribeFunctions.add(this.subscribeVoteCasted());
+    this.unsubscribeFunctions.add(this.subscribeVoteChanged());
+    this.unsubscribeFunctions.add(this.subscribeVoteRemoved());
+  };
+
+  public unregisterSubscriptions = () => {
+    this.unsubscribeFunctions.forEach((cleanupFunction) => cleanupFunction());
+    this.unsubscribeFunctions.clear();
+  };
+
+  public createPoll = async (poll: CreatePollData<SCG>) => {
+    const { poll: createdPoll } = await this.client.createPoll(poll);
+
+    return new Poll({ client: this.client, poll: createdPoll });
+  };
+
+  public getPoll = async (id: string) => {
+    const cachedPoll = this.fromState(id);
+
+    // optimistically return the cached poll if it exists and update in the background
+    if (cachedPoll) {
+      this.client.getPoll(id).then(({ poll }) => this.setOrOverwriteInCache(poll, true));
+      return cachedPoll;
+    }
+    // fetch it, write to the cache and return otherwise
+    const { poll } = await this.client.getPoll(id);
+
+    this.setOrOverwriteInCache(poll);
+
+    return this.fromState(id);
+  };
+
+  public queryPolls = async (filter: QueryPollsFilters, sort: PollSort = [], options: QueryPollsOptions = {}) => {
+    const { polls, next } = await this.client.queryPolls(filter, sort, options);
+
+    const pollInstances = polls.map((poll) => {
+      this.setOrOverwriteInCache(poll, true);
+
+      return this.fromState(poll.id);
+    });
+
+    return {
+      polls: pollInstances,
+      next,
+    };
+  };
+
+  public hydratePollCache = (messages: FormatMessageResponse<SCG>[], overwriteState?: boolean) => {
+    for (const message of messages) {
+      if (!message.poll) {
+        continue;
+      }
+      const pollResponse = message.poll as PollResponse<SCG>;
+      this.setOrOverwriteInCache(pollResponse, overwriteState);
+    }
+  };
+
+  private setOrOverwriteInCache = (pollResponse: PollResponse<SCG>, overwriteState?: boolean) => {
+    const pollFromCache = this.fromState(pollResponse.id);
+    if (!pollFromCache) {
+      const poll = new Poll<SCG>({ client: this.client, poll: pollResponse });
+      this.pollCache.set(poll.id, poll);
+    } else if (overwriteState) {
+      pollFromCache.reinitializeState(pollResponse);
+    }
+  };
+
+  private subscribePollUpdated = () => {
+    return this.client.on('poll.updated', (event) => {
+      if (event.poll?.id) {
+        this.fromState(event.poll.id)?.handlePollUpdated(event);
+      }
+    }).unsubscribe;
+  };
+
+  private subscribePollClosed = () => {
+    return this.client.on('poll.closed', (event) => {
+      if (event.poll?.id) {
+        this.fromState(event.poll.id)?.handlePollClosed(event);
+      }
+    }).unsubscribe;
+  };
+
+  private subscribeVoteCasted = () => {
+    return this.client.on('poll.vote_casted', (event) => {
+      if (event.poll?.id) {
+        this.fromState(event.poll.id)?.handleVoteCasted(event);
+      }
+    }).unsubscribe;
+  };
+
+  private subscribeVoteChanged = () => {
+    return this.client.on('poll.vote_changed', (event) => {
+      if (event.poll?.id) {
+        this.fromState(event.poll.id)?.handleVoteChanged(event);
+      }
+    }).unsubscribe;
+  };
+
+  private subscribeVoteRemoved = () => {
+    return this.client.on('poll.vote_removed', (event) => {
+      if (event.poll?.id) {
+        this.fromState(event.poll.id)?.handleVoteRemoved(event);
+      }
+    }).unsubscribe;
+  };
+
+  private subscribeMessageNew = () => {
+    return this.client.on('message.new', (event) => {
+      const { message } = event;
+      if (message) {
+        const formattedMessage = formatMessage(message);
+        this.hydratePollCache([formattedMessage]);
+      }
+    }).unsubscribe;
+  };
+}

package/src/store.ts

@@ -9,6 +9,8 @@ function isPatch<T>(value: T | Patch<T>): value is Patch<T> {
 export class StateStore<T extends Record<string, unknown>> {
   private handlerSet = new Set<Handler<T>>();
 
+  private static logCount = 5;
+
   constructor(private value: T) {}
 
   public next = (newValueOrPatch: T | Patch<T>): void => {
@@ -36,13 +38,31 @@ export class StateStore<T extends Record<string, unknown>> {
     };
   };
 
-  public subscribeWithSelector = <O extends readonly unknown[]>(selector: (nextValue: T) => O, handler: Handler<O>) => {
+  public subscribeWithSelector = <O extends Readonly<Record<string, unknown>> | Readonly<unknown[]>>(
+    selector: (nextValue: T) => O,
+    handler: Handler<O>,
+  ) => {
     // begin with undefined to reduce amount of selector calls
     let selectedValues: O | undefined;
 
     const wrappedHandler: Handler<T> = (nextValue) => {
       const newlySelectedValues = selector(nextValue);
-      const hasUpdatedValues = selectedValues?.some((value, index) => value !== newlySelectedValues[index]) ?? true;
+
+      let hasUpdatedValues = !selectedValues;
+
+      if (Array.isArray(newlySelectedValues) && StateStore.logCount > 0) {
+        console.warn(
+          '[StreamChat]: The API of our StateStore has changed. Instead of returning an array in the selector, please return a named object of properties.',
+        );
+        StateStore.logCount--;
+      }
+
+      for (const key in selectedValues) {
+        // @ts-ignore TODO: remove array support (Readonly<unknown[]>)
+        if (selectedValues[key] === newlySelectedValues[key]) continue;
+        hasUpdatedValues = true;
+        break;
+      }
 
       if (!hasUpdatedValues) return;
 

package/src/thread.ts

@@ -197,8 +197,11 @@ export class Thread<SCG extends ExtendableGenerics = DefaultGenerics> {
 
   private subscribeMarkActiveThreadRead = () => {
     return this.state.subscribeWithSelector(
-      (nextValue) => [nextValue.active, ownUnreadCountSelector(this.client.userID)(nextValue)],
-      ([active, unreadMessageCount]) => {
+      (nextValue) => ({
+        active: nextValue.active,
+        unreadMessageCount: ownUnreadCountSelector(this.client.userID)(nextValue),
+      }),
+      ({ active, unreadMessageCount }) => {
         if (!active || !unreadMessageCount) return;
         this.throttledMarkAsRead();
       },
@@ -207,8 +210,8 @@ export class Thread<SCG extends ExtendableGenerics = DefaultGenerics> {
 
   private subscribeReloadActiveStaleThread = () =>
     this.state.subscribeWithSelector(
-      (nextValue) => [nextValue.active, nextValue.isStateStale],
-      ([active, isStateStale]) => {
+      (nextValue) => ({ active: nextValue.active, isStateStale: nextValue.isStateStale }),
+      ({ active, isStateStale }) => {
         if (active && isStateStale) {
           this.reload();
         }

package/src/thread_manager.ts

@@ -119,9 +119,9 @@ export class ThreadManager<SCG extends ExtendableGenerics = DefaultGenerics> {
 
   private subscribeManageThreadSubscriptions = () =>
     this.state.subscribeWithSelector(
-      (nextValue) => [nextValue.threads] as const,
-      ([nextThreads], prev) => {
-        const [prevThreads = []] = prev ?? [];
+      (nextValue) => ({ threads: nextValue.threads }),
+      ({ threads: nextThreads }, prev) => {
+        const { threads: prevThreads = [] } = prev ?? {};
         // Thread instance was removed if there's no thread with the given id at all,
         // or it was replaced with a new instance
         const removedThreads = prevThreads.filter((thread) => thread !== this.threadsById[thread.id]);
@@ -133,8 +133,8 @@ export class ThreadManager<SCG extends ExtendableGenerics = DefaultGenerics> {
 
   private subscribeReloadOnActivation = () =>
     this.state.subscribeWithSelector(
-      (nextValue) => [nextValue.active],
-      ([active]) => {
+      (nextValue) => ({ active: nextValue.active }),
+      ({ active }) => {
         if (active) this.reload();
       },
     );