fix: all issues with state store api change

Author: isekovanic

package/src/components/ChannelPreview/hooks/useLatestMessagePreview.ts

@@ -37,17 +37,17 @@ export type LatestMessagePreview<
   created_at?: string | Date;
 };
 
-export type LatestMessagePreviewSelectorReturnType = [
-  Record<string, PollVote[]>,
-  UserResponse | null,
-];
+export type LatestMessagePreviewSelectorReturnType = {
+  created_by?: UserResponse | null;
+  latest_votes_by_option?: Record<string, PollVote[]>;
+};
 
 const selector = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(
   nextValue: PollState<StreamChatGenerics>,
-): LatestMessagePreviewSelectorReturnType => [
-  nextValue.latest_votes_by_option,
-  nextValue.created_by,
-];
+): LatestMessagePreviewSelectorReturnType => ({
+  created_by: nextValue.created_by,
+  latest_votes_by_option: nextValue.latest_votes_by_option,
+});
 
 const getMessageSenderName = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
@@ -98,7 +98,7 @@ const getLatestMessageDisplayText = <
   client: StreamChat<StreamChatGenerics>,
   message: LatestMessage<StreamChatGenerics> | undefined,
   t: (key: string) => string,
-  pollState: LatestMessagePreviewSelectorReturnType | [],
+  pollState: LatestMessagePreviewSelectorReturnType | undefined,
 ) => {
   if (!message) return [{ bold: false, text: t('Nothing yet...') }];
   const isMessageTypeDeleted = message.type === 'deleted';
@@ -146,16 +146,16 @@ const getLatestMessageDisplayText = <
     ];
   }
   if (message.poll && pollState) {
-    const [latest_votes_by_option, created_by] = pollState;
+    const { created_by, latest_votes_by_option } = pollState;
     let latestVotes;
     if (latest_votes_by_option) {
       latestVotes = Object.values(latest_votes_by_option)
         .map((votes) => votes?.[0])
-        .sort((a, b) => new Date(a.created_at).getTime() - new Date(b.created_at).getTime());
+        .sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime());
     }
     let previewAction = 'created';
     let previewUser = created_by;
-    if (latestVotes && latestVotes.length) {
+    if (latestVotes && latestVotes.length && latestVotes[0]?.user) {
       previewAction = 'voted';
       previewUser = latestVotes[0]?.user;
     }
@@ -215,7 +215,7 @@ const getLatestMessagePreview = <
 >(params: {
   channel: Channel<StreamChatGenerics>;
   client: StreamChat<StreamChatGenerics>;
-  pollState: LatestMessagePreviewSelectorReturnType | [];
+  pollState: LatestMessagePreviewSelectorReturnType | undefined;
   readEvents: boolean;
   t: TFunction;
   lastMessage?:
@@ -308,8 +308,9 @@ export const useLatestMessagePreview = <
 
   const pollId = lastMessage?.poll_id ?? '';
   const poll = client.polls.fromState(pollId);
-  const pollState = useStateStore(poll?.state, selector) ?? [];
-  const [latest_votes_by_option, created_by] = pollState;
+  const pollState: LatestMessagePreviewSelectorReturnType =
+    useStateStore(poll?.state, selector) ?? {};
+  const { created_by, latest_votes_by_option } = pollState;
 
   useEffect(
     () =>

package/src/components/Poll/components/PollOption.tsx

@@ -21,11 +21,17 @@ import { Avatar } from '../../Avatar/Avatar';
 import { usePollState } from '../hooks/usePollState';
 import { usePollStateStore } from '../hooks/usePollStateStore';
 
-type PollOptionSelectorReturnValue = [Record<string, PollVote[]>, string[]];
+type PollOptionSelectorReturnValue = {
+  latest_votes_by_option: Record<string, PollVote[]>;
+  maxVotedOptionIds: string[];
+};
 
 const selector = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(
   nextValue: PollState<StreamChatGenerics>,
-): PollOptionSelectorReturnValue => [nextValue.latest_votes_by_option, nextValue.maxVotedOptionIds];
+): PollOptionSelectorReturnValue => ({
+  latest_votes_by_option: nextValue.latest_votes_by_option,
+  maxVotedOptionIds: nextValue.maxVotedOptionIds,
+});
 
 export type PollOptionProps = {
   option: PollOptionClass;
@@ -99,7 +105,7 @@ export const PollOption = ({ option, showProgressBar = true }: PollOptionProps)
     }
   }, [message.id, option.id, ownVotesByOptionId, poll]);
 
-  const [latest_votes_by_option, maxVotedOptionIds] = usePollStateStore(selector);
+  const { latest_votes_by_option, maxVotedOptionIds } = usePollStateStore(selector);
 
   const relevantVotes = useMemo(
     () => latest_votes_by_option?.[option.id]?.slice(0, 2) || [],

package/src/components/Poll/hooks/usePollState.ts

@@ -15,60 +15,60 @@ import { usePollContext } from '../../../contexts';
 
 import { DefaultStreamChatGenerics } from '../../../types/types';
 
-export type UsePollStateSelectorReturnType = [
-  Record<string, number>,
-  Record<string, PollVote>,
-  Record<string, PollVote[]>,
-  number,
-  PollAnswer | undefined,
-  PollOption[],
-  string,
-  number,
-  boolean | undefined,
-  boolean,
-  boolean | undefined,
-  boolean | undefined,
-  UserResponse | null,
-  VotingVisibility | undefined,
-];
+export type UsePollStateSelectorReturnType = {
+  allow_answers: boolean | undefined;
+  allow_user_suggested_options: boolean | undefined;
+  answers_count: number;
+  created_by: UserResponse | null;
+  enforce_unique_vote: boolean;
+  is_closed: boolean | undefined;
+  latest_votes_by_option: Record<string, PollVote[]>;
+  max_votes_allowed: number;
+  name: string;
+  options: PollOption[];
+  ownAnswer: PollAnswer | undefined;
+  ownVotesByOptionId: Record<string, PollVote>;
+  vote_counts_by_option: Record<string, number>;
+  voting_visibility: VotingVisibility | undefined;
+};
 
 const selector = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(
   nextValue: PollState<StreamChatGenerics>,
-): UsePollStateSelectorReturnType => [
-  nextValue.vote_counts_by_option,
-  nextValue.ownVotesByOptionId,
-  nextValue.latest_votes_by_option,
-  nextValue.answers_count,
-  nextValue.ownAnswer,
-  nextValue.options,
-  nextValue.name,
-  nextValue.max_votes_allowed,
-  nextValue.is_closed,
-  nextValue.enforce_unique_vote,
-  nextValue.allow_answers,
-  nextValue.allow_user_suggested_options,
-  nextValue.created_by,
-  nextValue.voting_visibility,
-];
+): UsePollStateSelectorReturnType => ({
+  allow_answers: nextValue.allow_answers,
+  allow_user_suggested_options: nextValue.allow_user_suggested_options,
+  answers_count: nextValue.answers_count,
+  created_by: nextValue.created_by,
+  enforce_unique_vote: nextValue.enforce_unique_vote,
+  is_closed: nextValue.is_closed,
+  latest_votes_by_option: nextValue.latest_votes_by_option,
+  max_votes_allowed: nextValue.max_votes_allowed,
+  name: nextValue.name,
+  options: nextValue.options,
+  ownAnswer: nextValue.ownAnswer,
+  ownVotesByOptionId: nextValue.ownVotesByOptionId,
+  vote_counts_by_option: nextValue.vote_counts_by_option,
+  voting_visibility: nextValue.voting_visibility,
+});
 
 export const usePollState = () => {
   const { message, poll } = usePollContext();
-  const [
-    vote_counts_by_option,
-    ownVotesByOptionId,
-    latest_votes_by_option,
-    answers_count,
-    ownAnswer,
-    options,
-    name,
-    max_votes_allowed,
-    is_closed,
-    enforce_unique_vote,
+  const {
     allow_answers,
     allow_user_suggested_options,
+    answers_count,
     created_by,
+    enforce_unique_vote,
+    is_closed,
+    latest_votes_by_option,
+    max_votes_allowed,
+    name,
+    options,
+    ownAnswer,
+    ownVotesByOptionId,
+    vote_counts_by_option,
     voting_visibility,
-  ] = usePollStateStore(selector);
+  } = usePollStateStore(selector);
 
   const addOption = useCallback(
     async (optionText: string) => {

package/src/components/Poll/hooks/usePollStateStore.ts

@@ -3,7 +3,9 @@ import { PollState } from 'stream-chat';
 import { usePollContext } from '../../../contexts';
 import { useStateStore } from '../../../hooks';
 
-export const usePollStateStore = <T extends readonly unknown[]>(
+export const usePollStateStore = <
+  T extends Readonly<Record<string, unknown> | Readonly<unknown[]>>,
+>(
   selector: (nextValue: PollState) => T,
 ): T => {
   const { poll } = usePollContext();