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

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/hook/useIsPollCreatedByCurrentUser.ts

@@ -2,8 +2,9 @@ import { useChatContext } from '../../../contexts';
 import { usePollState } from '../hooks/usePollState';
 
 /**
- * React hook to check if the poll was created by the logged in client.
- * @returns Whether the poll was created by the logged in client.
+ * Whether the poll was created by the current user.
+ *
+ * @returns True when the poll's creator is the logged in user.
  */
 export const useIsPollCreatedByCurrentUser = () => {
   const { createdBy } = usePollState();

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

@@ -3,9 +3,10 @@ import { useStableCallback } from '../../../hooks';
 import { useNotificationApi } from '../../Notifications';
 
 /**
- * Returns a stable callback that closes the current poll and emits a success or
- * failure notification. Shared by `EndVoteButton` and the rotor accessibility
- * action so both paths produce identical side effects.
+ * Returns a stable callback that closes the current poll and emits a success or failure
+ * notification. Shared by the end vote button and its accessibility action.
+ *
+ * @returns An async callback that resolves with the close response and rethrows on failure.
  */
 export const useEndVote = () => {
   const { poll } = usePollContext();
@@ -16,14 +17,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,23 +17,17 @@ export type UsePollAnswersReturnType = {
   loading: boolean;
   loadMore: () => void;
   next: string | null | undefined;
-  pollAnswers: PollAnswer[];
+  pollAnswers: PollVoteResponseData[];
 };
 
 /**
- * A hook that queries answers for a given Poll and returns them in a paginated fashion.
- * Should be used instead of the latest_answers property within the reactive state in the
- * event that we need more than the top 10 answers. The returned property pollAnswers will
- * automatically be updated and trigger a state change when paginating further.
+ * Queries the answers of the poll in context page by page, for when `latest_answers` in the poll
+ * state does not hold enough of them. `pollAnswers` stays in sync with answer events for the poll.
  *
- * @param loadFirstPage {boolean} Signifies whether the first page should be automatically loaded whenever
- * the hook is first called.
- * @param paginationParams {PollAnswersQueryParams} The pagination params we might want to use for our custom
- * needs when invoking the hook.
- *
- * @returns {UsePollAnswersReturnType} An object containing all of the needed pagination values as well as the
- * answers.
- **/
+ * @param params.loadFirstPage Loads the first page on mount. Defaults to true.
+ * @param params.paginationParams Filter, sort and options merged into every query.
+ * @returns The loaded answers with the pagination state and `loadMore`.
+ */
 export const usePollAnswersPagination = ({
   loadFirstPage = true,
   paginationParams,
@@ -41,7 +35,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 +53,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 +72,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 +90,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 +98,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,26 +22,18 @@ export type UsePollVotesReturnType = {
   loading: boolean;
   loadMore: () => void;
   next: string | null | undefined;
-  votes: PollVote[];
+  votes: PollVoteResponseData[];
 };
 
 /**
- * A hook that queries votes for a given Poll and returns them in a paginated fashion.
- * Should be used instead of the latestVotesByOption property within the reactive state in the
- * event that we need more than the top 10 votes for an option. The returned property votes will
- * automatically be updated and trigger a state change when paginating further. Querying for votes
- * can only be done on an option by option basis.
+ * Queries the votes of one poll option page by page, for when `latestVotesByOption` in the poll
+ * state does not hold enough of them. `votes` stays in sync with vote events for the option.
  *
- * @param option {PollOption} 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
- * needs when invoking the hook.
- *
- * @returns {UsePollVotesReturnType} An object containing all of the needed pagination values as well as the
- * answers.
- **/
-
+ * @param params.option The option to load the votes of.
+ * @param params.loadFirstPage Loads the first page on mount. Defaults to true.
+ * @param params.paginationParams Filter, sort and options merged into every query.
+ * @returns The loaded votes with the pagination state and `loadMore`.
+ */
 export const usePollOptionVotesPagination = ({
   loadFirstPage = true,
   option,
@@ -45,12 +42,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 +62,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 +82,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 +103,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 +112,7 @@ export const usePollOptionVotesPagination = ({
       castedListeners.forEach((listener) => listener.unsubscribe());
       removedListener.unsubscribe();
     };
-  }, [client, option, poll, votes]);
+  }, [client, optionId, poll]);
 
   return {
     error,

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

@@ -1,13 +1,11 @@
 import { useCallback } from 'react';
 
 import {
-  APIResponse,
-  CastVoteAPIResponse,
-  PollAnswer,
-  PollOption,
+  PollOptionResponseData,
+  PollResponse,
   PollState,
-  PollVote,
-  UpdatePollAPIResponse,
+  PollVoteResponse,
+  PollVoteResponseData,
   UserResponse,
   VotingVisibility,
 } from 'stream-chat';
@@ -24,40 +22,40 @@ export type UsePollStateSelectorReturnType = {
   createdBy: UserResponse | null;
   enforceUniqueVote: boolean;
   isClosed: boolean | undefined;
-  latestVotesByOption: Record<string, PollVote[]>;
+  latestVotesByOption: Record<string, PollVoteResponseData[]>;
   maxVotedOptionIds: string[];
   maxVotesAllowed: number;
   name: string;
-  options: PollOption[];
-  ownAnswer: PollAnswer | undefined;
-  ownVotesByOptionId: Record<string, PollVote>;
+  options: PollOptionResponseData[];
+  ownAnswer: PollVoteResponseData | undefined;
+  ownVotesByOptionId: Record<string, PollVoteResponseData>;
   voteCountsByOption: Record<string, number>;
   votingVisibility: VotingVisibility | undefined;
   voteCount: number;
 };
 
 export type UsePollStateReturnType = UsePollStateSelectorReturnType & {
-  addComment: (answerText: string) => Promise<APIResponse & CastVoteAPIResponse>;
+  addComment: (answerText: string) => Promise<PollVoteResponse>;
   addOption: (optionText: string) => Promise<void>;
-  endVote: () => Promise<(APIResponse & UpdatePollAPIResponse) | undefined>;
+  endVote: () => Promise<PollResponse | undefined>;
 };
 
 const selector = (nextValue: PollState): UsePollStateSelectorReturnType => ({
   allowAnswers: nextValue.allow_answers,
   allowUserSuggestedOptions: nextValue.allow_user_suggested_options,
   answersCount: nextValue.answers_count,
-  createdBy: nextValue.created_by,
+  createdBy: nextValue.created_by ?? null,
   enforceUniqueVote: nextValue.enforce_unique_vote,
   isClosed: nextValue.is_closed,
   latestVotesByOption: nextValue.latest_votes_by_option,
   maxVotedOptionIds: nextValue.maxVotedOptionIds,
-  maxVotesAllowed: nextValue.max_votes_allowed,
+  maxVotesAllowed: nextValue.max_votes_allowed ?? 0,
   name: nextValue.name,
   options: nextValue.options,
   ownAnswer: nextValue.ownAnswer,
   ownVotesByOptionId: nextValue.ownVotesByOptionId,
   voteCountsByOption: nextValue.vote_counts_by_option,
-  votingVisibility: nextValue.voting_visibility,
+  votingVisibility: nextValue.voting_visibility as VotingVisibility,
   voteCount: nextValue.vote_count,
 });
 

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

@@ -11,10 +11,11 @@ const ownVotesSelector = (state: PollState) => ({
 });
 
 /**
- * Returns a stable callback that toggles the current user's vote on a poll option
- * by id: casts a vote if none exists, removes it if one does. Shared by the
- * visible vote button and the rotor accessibility action so both paths use
- * identical logic.
+ * Returns a stable callback that toggles the current user's vote on an option, by option ID: it
+ * removes the vote if one exists and casts it otherwise. Shared by the vote button and its
+ * accessibility action.
+ *
+ * @returns An async callback taking the option ID.
  */
 export const usePollVoteToggle = () => {
   const { message, poll } = usePollContext();

package/src/components/Poll/index.ts

@@ -1,9 +1,7 @@
-// components
 export * from './Poll';
 export * from './CreatePollContent';
 export * from './components';
 
-// hooks
 export * from './hooks/usePollState';
 export * from './hooks/usePollStateStore';
 export * from './hooks/usePollAnswersPagination';

package/src/components/ProgressControl/ProgressBar.tsx

@@ -15,7 +15,6 @@ export type ProgressBarProps = {
 export const ProgressBar = ({ progress, filledColor, emptyColor }: ProgressBarProps) => {
   const styles = useStyles();
 
-  // clamp for safety
   const value = Math.max(0, Math.min(progress, 1));
   const unfilledValue = 1 - value;