stream-chat-react-native-core 9.10.1-beta.2 → 10.0.0-rc.1

package/src/components/Poll/components/PollButtons.tsx

@@ -44,14 +44,17 @@ export const ViewResultsButton = (props: PollButtonProps) => {
   return (
     <>
       <GenericPollButton
-        label={t('View Results')}
+        label={t('poll.viewResults.label', 'View Results')}
         onPress={onPressHandler}
         style={styles.viewResultsButton}
         type='outline'
       />
       {showResults ? (
         <PollModal onRequestClose={closeViewResults} visible={showResults}>
-          <PollModalHeader onPress={closeViewResults} title={t('Poll Results')} />
+          <PollModalHeader
+            onPress={closeViewResults}
+            title={t('poll.results.title', 'Poll Results')}
+          />
           <PollResults message={message} poll={poll} />
         </PollModal>
       ) : null}
@@ -81,12 +84,19 @@ export const ShowAllOptionsButton = (props: PollButtonProps) => {
       {options && options.length > defaultPollOptionCount ? (
         <GenericPollButton
           onPress={onPressHandler}
-          label={t('+{{count}} More Options', { count: options.length - defaultPollOptionCount })}
+          label={t('poll.moreOptions.label', {
+            count: options.length - defaultPollOptionCount,
+            defaultValue_one: '+{{count}} More Option',
+            defaultValue_other: '+{{count}} More Options',
+          })}
         />
       ) : null}
       {showAllOptions ? (
         <PollModal onRequestClose={closeAllOptions} visible={showAllOptions}>
-          <PollModalHeader onPress={closeAllOptions} title={t('Poll Options')} />
+          <PollModalHeader
+            onPress={closeAllOptions}
+            title={t('poll.allOptions.title', 'Poll Options')}
+          />
           <PollAllOptions message={message} poll={poll} />
         </PollModal>
       ) : null}
@@ -116,12 +126,19 @@ export const ShowAllCommentsButton = (props: PollButtonProps) => {
       {answersCount && answersCount > 0 ? (
         <GenericPollButton
           onPress={onPressHandler}
-          label={t('View {{count}} comments', { count: answersCount })}
+          label={t('poll.viewComments.label', {
+            count: answersCount,
+            defaultValue_one: 'View {{count}} comment',
+            defaultValue_other: 'View {{count}} comments',
+          })}
         />
       ) : null}
       {showAnswers ? (
         <PollModal onRequestClose={closeAllComments} visible={showAnswers}>
-          <PollModalHeader onPress={closeAllComments} title={t('Poll Comments')} />
+          <PollModalHeader
+            onPress={closeAllComments}
+            title={t('poll.comments.title', 'Poll Comments')}
+          />
           <PollAnswersList message={message} poll={poll} />
         </PollModal>
       ) : null}
@@ -149,14 +166,17 @@ export const SuggestOptionButton = (props: PollButtonProps) => {
   return (
     <>
       {!isClosed && allowUserSuggestedOptions ? (
-        <GenericPollButton onPress={onPressHandler} label={t('Suggest an option')} />
+        <GenericPollButton
+          onPress={onPressHandler}
+          label={t('poll.suggestOption.label', 'Suggest an option')}
+        />
       ) : null}
       {showAddOptionDialog ? (
         <PollInputDialog
           closeDialog={closeSuggestOption}
           onSubmit={addOption}
-          placeholder={t('Enter a new option')}
-          title={t('Suggest an option')}
+          placeholder={t('poll.suggestOption.placeholder', 'Enter a new option')}
+          title={t('poll.suggestOption.label', 'Suggest an option')}
           visible={showAddOptionDialog}
         />
       ) : null}
@@ -184,15 +204,18 @@ export const AddCommentButton = (props: PollButtonProps) => {
   return (
     <>
       {!isClosed && allowAnswers ? (
-        <GenericPollButton onPress={onPressHandler} label={t('Add a comment')} />
+        <GenericPollButton
+          onPress={onPressHandler}
+          label={t('poll.addComment.label', 'Add a comment')}
+        />
       ) : null}
       {showAddCommentDialog ? (
         <PollInputDialog
           closeDialog={closeAddComment}
           initialValue={ownAnswer?.answer_text ?? ''}
           onSubmit={addComment}
-          placeholder={t('Your comment')}
-          title={t('Add a comment')}
+          placeholder={t('poll.addComment.placeholder', 'Your comment')}
+          title={t('poll.addComment.label', 'Add a comment')}
           visible={showAddCommentDialog}
         />
       ) : null}
@@ -208,7 +231,7 @@ export const EndVoteButton = () => {
 
   return !isClosed && createdBy?.id === client.userID ? (
     <GenericPollButton
-      label={t('End Vote')}
+      label={t('poll.endVote.label', 'End Vote')}
       onPress={endVote}
       style={styles.endVoteButton}
       type='outline'

package/src/components/Poll/components/PollInputDialog.tsx

@@ -75,7 +75,7 @@ export const PollInputDialog = ({
               <Button
                 variant={'primary'}
                 type={'solid'}
-                label={t('Send')}
+                label={t('poll.inputDialog.send.label', 'Send')}
                 size='lg'
                 onPress={() => {
                   onSubmit(dialogInput);
@@ -87,7 +87,7 @@ export const PollInputDialog = ({
               <Button
                 variant={'secondary'}
                 type={'outline'}
-                label={t('Cancel')}
+                label={t('common.cancel.label', 'Cancel')}
                 size='lg'
                 onPress={closeDialog}
                 style={styles.button}

package/src/components/Poll/components/PollModalHeader.tsx

@@ -26,7 +26,7 @@ export const PollModalHeader = ({ onPress, title }: PollModalHeaderProps) => {
     <View style={[styles.container, container]}>
       <View style={styles.sideContainer}>
         <Button
-          accessibilityLabelKey='a11y/Close poll'
+          accessibilityLabelKey='poll.modalHeader.close.accessibilityLabel'
           variant='secondary'
           type='outline'
           size='md'

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

@@ -4,7 +4,11 @@ import { Pressable, ScrollViewProps, StyleSheet, Text, View } from 'react-native
 
 import { ScrollView } from 'react-native-gesture-handler';
 
-import { PollOption as PollOptionClass, PollVote, UserResponse } from 'stream-chat';
+import {
+  PollOptionResponseData as PollOptionClass,
+  PollVoteResponseData,
+  UserResponse,
+} from 'stream-chat';
 
 import { PollVoteButtonProps } from './Button';
 
@@ -62,7 +66,7 @@ export const PollAllOptionsContent = ({
       {...additionalScrollViewProps}
     >
       <View style={[styles.allOptionsTitleContainer, titleContainer]}>
-        <Text style={styles.allOptionsTitleMeta}>{t('Question')}</Text>
+        <Text style={styles.allOptionsTitleMeta}>{t('poll.question.label', 'Question')}</Text>
         <Text style={[styles.allOptionsTitleText, titleText]}>{name}</Text>
       </View>
       <View style={[styles.allOptionsListContainer, listContainer]}>
@@ -134,7 +138,9 @@ export const PollOption = ({ option, showProgressBar = true, forceIncoming }: Po
           <View style={[styles.votesContainer, votesContainer]}>
             {relevantVotes.length > 0 ? (
               <UserAvatarStack
-                users={relevantVotes.map((vote: PollVote) => vote.user as UserResponse)}
+                users={relevantVotes
+                  .map((vote: PollVoteResponseData) => vote.user)
+                  .filter((user): user is UserResponse => Boolean(user))}
                 overlap={0.2}
                 maxVisible={3}
                 avatarSize='xs'
@@ -142,7 +148,11 @@ export const PollOption = ({ option, showProgressBar = true, forceIncoming }: Po
             ) : null}
 
             <Text
-              accessibilityLabel={t('{{count}} votes', { count: votes })}
+              accessibilityLabel={t('poll.votes.text', {
+                count: votes,
+                defaultValue_one: '{{count}} vote',
+                defaultValue_other: '{{count}} votes',
+              })}
               style={[styles.votesText, votesText]}
             >
               {votes}

package/src/components/Poll/components/PollResults/PollOptionFullResults.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useMemo } from 'react';
 import { FlatList, type FlatListProps, StyleSheet, Text, View } from 'react-native';
 
-import { PollOption, PollVote as PollVoteClass } from 'stream-chat';
+import { PollOptionResponseData, PollVoteResponseData as PollVoteClass } from 'stream-chat';
 
 import { PollVote } from './PollVote';
 
@@ -18,7 +18,7 @@ import { usePollOptionVotesPagination } from '../../hooks/usePollOptionVotesPagi
 import { usePollState } from '../../hooks/usePollState';
 
 export type PollOptionFullResultsProps = PollContextValue & {
-  option: PollOption;
+  option: PollOptionResponseData;
   additionalFlatListProps?: Partial<FlatListProps<PollVoteClass>>;
 };
 
@@ -48,7 +48,11 @@ export const PollOptionFullResultsContent = ({
       <View style={[styles.headerContainer, headerContainer]}>
         <Text style={[styles.headerTitle, headerTitle]}>{option.text}</Text>
         <Text style={[styles.headerText, headerText]}>
-          {t('{{count}} votes', { count: voteCountsByOption[option.id] ?? 0 })}
+          {t('poll.votes.text', {
+            count: voteCountsByOption[option.id] ?? 0,
+            defaultValue_one: '{{count}} vote',
+            defaultValue_other: '{{count}} votes',
+          })}
         </Text>
       </View>
     ),

package/src/components/Poll/components/PollResults/PollResultItem.tsx

@@ -1,7 +1,12 @@
 import React, { useCallback, useMemo, useState } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
-import { LocalMessage, Poll, PollOption, PollVote as PollVoteClass } from 'stream-chat';
+import {
+  LocalMessage,
+  Poll,
+  PollOptionResponseData,
+  PollVoteResponseData as PollVoteClass,
+} from 'stream-chat';
 
 import { PollOptionFullResults } from './PollOptionFullResults';
 import { PollVote } from './PollVote';
@@ -20,14 +25,14 @@ import { PollModal } from '../PollModal';
 import { PollModalHeader } from '../PollModalHeader';
 
 export type ShowAllVotesButtonProps = {
-  option: PollOption;
+  option: PollOptionResponseData;
   onPress?: ({
     message,
     option,
     poll,
   }: {
     message: LocalMessage;
-    option: PollOption;
+    option: PollOptionResponseData;
     poll: Poll;
   }) => void;
 };
@@ -57,7 +62,10 @@ export const ShowAllVotesButton = (props: ShowAllVotesButtonProps) => {
       voteCountsByOption &&
       voteCountsByOption?.[option.id] > 5 ? (
         <View style={styles.inlineButton}>
-          <GenericPollButton onPress={onPressHandler} label={t('Show All')} />
+          <GenericPollButton
+            onPress={onPressHandler}
+            label={t('poll.results.showAll.label', 'Show All')}
+          />
         </View>
       ) : null}
       {showAllVotes ? (
@@ -66,7 +74,10 @@ export const ShowAllVotesButton = (props: ShowAllVotesButtonProps) => {
           onRequestClose={() => setShowAllVotes(false)}
           visible={showAllVotes}
         >
-          <PollModalHeader onPress={() => setShowAllVotes(false)} title={t('Votes')} />
+          <PollModalHeader
+            onPress={() => setShowAllVotes(false)}
+            title={t('poll.votes.title', 'Votes')}
+          />
           <PollOptionFullResults message={message} option={option} poll={poll} />
         </PollModal>
       ) : null}
@@ -75,7 +86,7 @@ export const ShowAllVotesButton = (props: ShowAllVotesButtonProps) => {
 };
 
 export type PollResultItemProps = {
-  option: PollOption;
+  option: PollOptionResponseData;
   index: number;
 };
 
@@ -102,12 +113,16 @@ export const PollResultsItem = ({ option, index }: PollResultItemProps) => {
     <View style={[styles.container, container]}>
       <View style={styles.metaContainer}>
         <Text style={[styles.titleMeta, titleMeta]}>
-          {t('Option {{count}}', { count: index + 1 })}
+          {t('poll.results.optionNumber.text', 'Option {{count}}', { count: index + 1 })}
         </Text>
         <View style={[styles.headerContainer, headerContainer]}>
           <Text style={[styles.title, title]}>{option.text}</Text>
           <Text style={[styles.voteCount, voteCount]}>
-            {t('{{count}} votes', { count: voteCountsByOption[option.id] ?? 0 })}
+            {t('poll.votes.text', {
+              count: voteCountsByOption[option.id] ?? 0,
+              defaultValue_one: '{{count}} vote',
+              defaultValue_other: '{{count}} votes',
+            })}
           </Text>
         </View>
       </View>

package/src/components/Poll/components/PollResults/PollResults.tsx

@@ -50,7 +50,7 @@ export const PollResultsContent = ({
       {...additionalScrollViewProps}
     >
       <View style={[styles.container, container]}>
-        <Text style={[styles.titleMeta, titleMeta]}>{t('Question')}</Text>
+        <Text style={[styles.titleMeta, titleMeta]}>{t('poll.question.label', 'Question')}</Text>
         <Text style={[styles.title, title]}>{name}</Text>
       </View>
       <View style={styles.resultsContainer}>

package/src/components/Poll/components/PollResults/PollVote.tsx

@@ -2,11 +2,11 @@ import React, { useMemo } from 'react';
 
 import { StyleSheet, Text, View } from 'react-native';
 
-import { PollVote as PollVoteClass, VotingVisibility } from 'stream-chat';
+import { convertTimestampToDate, PollVoteResponseData as PollVoteClass } from 'stream-chat';
 
 import { useTheme, useTranslationContext } from '../../../../contexts';
+import { getDateString } from '../../../../i18n/utils';
 import { primitives } from '../../../../theme';
-import { getDateString } from '../../../../utils/i18n/getDateString';
 import { UserAvatar } from '../../../ui/Avatar/UserAvatar';
 
 import { usePollState } from '../../hooks/usePollState';
@@ -28,25 +28,24 @@ export const PollVote = ({ vote }: { vote: PollVoteClass }) => {
   const dateString = useMemo(
     () =>
       getDateString({
-        date: vote.created_at,
+        messageCreatedAt: convertTimestampToDate(vote.created_at),
         t,
         tDateTimeParser,
-        timestampTranslationKey: 'timestamp/PollVote',
+        timestampTranslationKey: 'timestamp.PollVote',
       }),
     [vote.created_at, t, tDateTimeParser],
   );
 
-  const isAnonymous = useMemo(
-    () => votingVisibility === VotingVisibility.anonymous,
-    [votingVisibility],
-  );
+  const isAnonymous = useMemo(() => votingVisibility === 'anonymous', [votingVisibility]);
 
   return (
     <View style={[styles.voteContainer, container]}>
       <View style={styles.userContainer}>
         {!isAnonymous && vote.user ? <UserAvatar user={vote.user} size='md' showBorder /> : null}
         <Text style={[styles.voteUserName, userName]}>
-          {isAnonymous ? t('Anonymous') : (vote.user?.name ?? vote.user?.id)}
+          {isAnonymous
+            ? t('common.anonymousUser.label', 'Anonymous')
+            : (vote.user?.name ?? vote.user?.id)}
         </Text>
       </View>
       <Text style={[styles.voteDate, dateText]}>{dateString}</Text>

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

@@ -41,7 +41,9 @@ describe('PollOption chat text side', () => {
   const renderOption = ({ forceIncoming }: { forceIncoming?: boolean } = {}) =>
     render(
       <ThemeProvider>
-        <TranslationProvider value={{ t: (key: string) => key } as never}>
+        <TranslationProvider
+          value={{ t: (key: string, d?: unknown) => (typeof d === 'string' ? d : key) } as never}
+        >
           <OwnCapabilitiesProvider value={{ castPollVote: true } as never}>
             <PollContextProvider
               value={{ message: generateMessage(), poll: { data: {} } as never }}

package/src/components/Poll/contexts/PollUIStateContext.tsx

@@ -1,6 +1,6 @@
 import React, { PropsWithChildren, useContext, useState } from 'react';
 
-import { StateStore } from 'stream-chat';
+import { StateStore } from '@stream-io/state-store';
 
 import { DEFAULT_BASE_CONTEXT_VALUE } from '../../../contexts/utils/defaultBaseContextValue';
 import { isTestEnvironment } from '../../../contexts/utils/isTestEnvironment';

package/src/components/Poll/hooks/__tests__/usePollPagination.test.tsx

@@ -0,0 +1,71 @@
+import React, { PropsWithChildren } from 'react';
+
+import { act, renderHook, waitFor } from '@testing-library/react-native';
+
+import type { PollVoteResponseData, StreamChat } from 'stream-chat';
+
+import { ChatProvider } from '../../../../contexts/chatContext/ChatContext';
+import { PollContextProvider } from '../../../../contexts/pollContext/pollContext';
+import { generateMessage } from '../../../../mock-builders/generator/message';
+import { getTestClientWithUser } from '../../../../mock-builders/mock';
+import { usePollAnswersPagination } from '../usePollAnswersPagination';
+import { usePollOptionVotesPagination } from '../usePollOptionVotesPagination';
+
+const answer = (id: string) =>
+  ({ answer_text: id, id, is_answer: true, poll_id: 'poll-1' }) as unknown as PollVoteResponseData;
+const vote = (id: string) =>
+  ({ id, option_id: 'option-1', poll_id: 'poll-1' }) as unknown as PollVoteResponseData;
+
+describe('poll pagination hooks', () => {
+  let client: StreamChat;
+  const emptyPage = { next: undefined, votes: [] };
+  const poll = {
+    id: 'poll-1',
+    queryAnswers: jest.fn(() => Promise.resolve(emptyPage)),
+    queryOptionVotes: jest.fn(() => Promise.resolve(emptyPage)),
+  };
+
+  const wrapper = ({ children }: PropsWithChildren) => (
+    <ChatProvider value={{ client } as never}>
+      <PollContextProvider value={{ message: generateMessage(), poll: poll as never }}>
+        {children}
+      </PollContextProvider>
+    </ChatProvider>
+  );
+
+  const castInOneBatch = (votes: PollVoteResponseData[]) =>
+    act(() => {
+      votes.forEach((pollVote) =>
+        client.dispatchEvent({
+          poll: { id: 'poll-1' },
+          poll_vote: pollVote,
+          type: 'poll.vote_casted',
+        } as never),
+      );
+    });
+
+  beforeEach(async () => {
+    client = await getTestClientWithUser({ id: 'me' });
+  });
+
+  it('keeps every answer cast in the same batch', async () => {
+    const { result } = renderHook(() => usePollAnswersPagination(), { wrapper });
+    await waitFor(() => expect(result.current.loading).toBe(false));
+
+    castInOneBatch([answer('a1'), answer('a2')]);
+
+    expect(result.current.pollAnswers.map(({ id }) => id)).toEqual(['a2', 'a1']);
+  });
+
+  it('keeps every option vote cast in the same batch', async () => {
+    const { result } = renderHook(
+      () => usePollOptionVotesPagination({ option: { id: 'option-1', text: 'One' } as never }),
+      { wrapper },
+    );
+    await waitFor(() => expect(result.current.loading).toBe(false));
+
+    castInOneBatch([vote('v1'), vote('v2')]);
+
+    expect(result.current.votes.map(({ id }) => id)).toEqual(['v2', 'v1']);
+  });
+});

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

@@ -16,14 +16,14 @@ export const useEndVote = () => {
     try {
       const response = await poll.close();
       addNotification({
-        message: t('Poll ended'),
+        message: t('notifications.pollEnded.text', 'Poll ended'),
         options: { severity: 'success', type: 'api:poll:end:success' },
         origin: { emitter: 'PollActions' },
       });
       return response;
     } catch (error) {
       addNotification({
-        message: t('Failed to end the poll'),
+        message: t('poll.endVote.error'),
         options: {
           ...(error instanceof Error ? { originalError: error } : {}),
           severity: 'error',

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

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 
 import uniqBy from 'lodash/uniqBy';
-import type { PollAnswer, PollAnswersQueryParams } from 'stream-chat';
+import type { PollAnswersQueryParams, PollVoteResponseData } from 'stream-chat';
 import { isVoteAnswer } from 'stream-chat';
 
 import { useChatContext, usePollContext } from '../../../contexts';
@@ -17,7 +17,7 @@ export type UsePollAnswersReturnType = {
   loading: boolean;
   loadMore: () => void;
   next: string | null | undefined;
-  pollAnswers: PollAnswer[];
+  pollAnswers: PollVoteResponseData[];
 };
 
 /**
@@ -41,7 +41,7 @@ export const usePollAnswersPagination = ({
   const { poll } = usePollContext();
   const { client } = useChatContext();
 
-  const [pollAnswers, setPollAnswers] = useState<PollAnswer[]>([]);
+  const [pollAnswers, setPollAnswers] = useState<PollVoteResponseData[]>([]);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<Error>();
   const cursorRef = useRef<string | null>(undefined);
@@ -59,7 +59,7 @@ export const usePollAnswersPagination = ({
       const { next: newNext, votes: answers } = await poll.queryAnswers({
         filter: paginationParams?.filter,
         options: !next ? paginationParams?.options : { ...paginationParams?.options, next },
-        sort: { updated_at: -1, ...paginationParams?.sort },
+        sort: [{ direction: -1, field: 'updated_at' }, ...(paginationParams?.sort ?? [])],
       });
       cursorRef.current = newNext || null;
       setPollAnswers((prev) => uniqBy([...prev, ...answers], 'id'));
@@ -78,14 +78,14 @@ export const usePollAnswersPagination = ({
   }, [loadFirstPage, loadMore, pollAnswers]);
 
   useEffect(() => {
-    const castedListeners = ['poll.vote_casted', 'poll.vote_changed'].map((eventName) =>
+    const castedListeners = (['poll.vote_casted', 'poll.vote_changed'] as const).map((eventName) =>
       client.on(eventName, (event) => {
         if (event.poll?.id && event.poll.id !== poll.id) {
           return;
         }
         const vote = event.poll_vote;
         if (vote && isVoteAnswer(vote)) {
-          setPollAnswers([vote, ...pollAnswers.filter((answer) => answer.id !== vote.id)]);
+          setPollAnswers((prev) => [vote, ...prev.filter((answer) => answer.id !== vote.id)]);
         }
       }),
     );
@@ -96,7 +96,7 @@ export const usePollAnswersPagination = ({
       }
       const vote = event.poll_vote;
       if (vote && isVoteAnswer(vote)) {
-        setPollAnswers(pollAnswers.filter((item) => item.id !== vote.id));
+        setPollAnswers((prev) => prev.filter((item) => item.id !== vote.id));
       }
     });
 
@@ -104,7 +104,7 @@ export const usePollAnswersPagination = ({
       castedListeners.forEach((listener) => listener.unsubscribe());
       removedListener.unsubscribe();
     };
-  }, [client, poll, pollAnswers]);
+  }, [client, poll]);
 
   return {
     error,

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

@@ -1,12 +1,17 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import uniqBy from 'lodash/uniqBy';
-import { isVoteAnswer, PollOption, PollOptionVotesQueryParams, PollVote } from 'stream-chat';
+import {
+  isVoteAnswer,
+  PollOptionResponseData,
+  PollOptionVotesQueryParams,
+  PollVoteResponseData,
+} from 'stream-chat';
 
 import { useChatContext, usePollContext } from '../../../contexts';
 
 export type UsePollOptionVotesPaginationParams = {
-  option: PollOption;
+  option: PollOptionResponseData;
   loadFirstPage?: boolean;
   paginationParams?: PollOptionVotesQueryParams;
 };
@@ -17,7 +22,7 @@ export type UsePollVotesReturnType = {
   loading: boolean;
   loadMore: () => void;
   next: string | null | undefined;
-  votes: PollVote[];
+  votes: PollVoteResponseData[];
 };
 
 /**
@@ -27,7 +32,7 @@ export type UsePollVotesReturnType = {
  * automatically be updated and trigger a state change when paginating further. Querying for votes
  * can only be done on an option by option basis.
  *
- * @param option {PollOption} The option for which we want to load the votes.
+ * @param option {PollOptionResponseData} The option for which we want to load the votes.
  * @param loadFirstPage {boolean} Signifies whether the first page should be automatically loaded whenever
  * the hook is first called.
  * @param paginationParams {PollOptionVotesQueryParams} The pagination params we might want to use for our custom
@@ -45,12 +50,13 @@ export const usePollOptionVotesPagination = ({
   const { poll } = usePollContext();
   const { client } = useChatContext();
 
-  const [votes, setVotes] = useState<PollVote[]>([]);
+  const [votes, setVotes] = useState<PollVoteResponseData[]>([]);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<Error>();
   const cursorRef = useRef<string | null>(undefined);
   const queryInProgress = useRef(false);
-  const optionFilter = useMemo(() => ({ option_id: option.id }), [option.id]);
+  const optionId = option.id;
+  const optionFilter = useMemo(() => ({ option_id: optionId }), [optionId]);
 
   const loadMore = useCallback(async () => {
     if (cursorRef.current === null || queryInProgress.current) {
@@ -64,7 +70,7 @@ export const usePollOptionVotesPagination = ({
       const { next: newNext, votes } = await poll.queryOptionVotes({
         filter: { ...optionFilter, ...paginationParams?.filter },
         options: !next ? paginationParams?.options : { ...paginationParams?.options, next },
-        sort: { created_at: -1, ...paginationParams?.sort },
+        sort: [{ direction: -1, field: 'created_at' }, ...(paginationParams?.sort ?? [])],
       });
       cursorRef.current = newNext || null;
       setVotes((prev) => uniqBy([...prev, ...votes], 'id'));
@@ -84,17 +90,17 @@ export const usePollOptionVotesPagination = ({
 
   // TODO: Possibly generalize these in a utility hook.
   useEffect(() => {
-    const castedListeners = ['poll.vote_casted', 'poll.vote_changed'].map((eventName) =>
+    const castedListeners = (['poll.vote_casted', 'poll.vote_changed'] as const).map((eventName) =>
       client.on(eventName, (event) => {
         if (event.poll?.id && event.poll.id !== poll.id) {
           return;
         }
         const vote = event.poll_vote;
         if (vote && !isVoteAnswer(vote)) {
-          if (vote.option_id === option.id) {
-            setVotes([vote, ...votes.filter((v) => v.id !== vote.id)]);
+          if (vote.option_id === optionId) {
+            setVotes((prev) => [vote, ...prev.filter((v) => v.id !== vote.id)]);
           } else if (eventName === 'poll.vote_changed') {
-            setVotes(votes.filter((v) => v.id !== vote.id));
+            setVotes((prev) => prev.filter((v) => v.id !== vote.id));
           }
         }
       }),
@@ -105,8 +111,8 @@ export const usePollOptionVotesPagination = ({
         return;
       }
       const vote = event.poll_vote;
-      if (vote && !isVoteAnswer(vote) && vote.option_id === option.id) {
-        setVotes(votes.filter((v) => v.id !== vote.id));
+      if (vote && !isVoteAnswer(vote) && vote.option_id === optionId) {
+        setVotes((prev) => prev.filter((v) => v.id !== vote.id));
       }
     });
 
@@ -114,7 +120,7 @@ export const usePollOptionVotesPagination = ({
       castedListeners.forEach((listener) => listener.unsubscribe());
       removedListener.unsubscribe();
     };
-  }, [client, option, poll, votes]);
+  }, [client, optionId, poll]);
 
   return {
     error,