diff --git a/package/src/components/Poll/CreatePollContent.tsx b/package/src/components/Poll/CreatePollContent.tsx index d94fa5d86f..c7169b9d6d 100644 --- a/package/src/components/Poll/CreatePollContent.tsx +++ b/package/src/components/Poll/CreatePollContent.tsx @@ -24,26 +24,21 @@ import { useMessageComposer } from '../../contexts/messageInputContext/hooks/use import { useStateStore } from '../../hooks/useStateStore'; const pollComposerStateSelector = (state: PollComposerState) => ({ - allow_answers: state.data.allow_answers, - allow_user_suggested_options: state.data.allow_user_suggested_options, - enforce_unique_vote: state.data.enforce_unique_vote, - max_votes_allowed: state.data.max_votes_allowed, - name: state.data.name, options: state.data.options, - voting_visibility: state.data.voting_visibility, }); export const POLL_OPTION_HEIGHT = 71; export const CreatePollContent = () => { + const [isAnonymousPoll, setIsAnonymousPoll] = React.useState(false); + const [allowUserSuggestedOptions, setAllowUserSuggestedOptions] = React.useState(false); + const [allowAnswers, setAllowAnswers] = React.useState(false); + const { t } = useTranslationContext(); const messageComposer = useMessageComposer(); const { pollComposer } = messageComposer; - const { allow_answers, allow_user_suggested_options, options, voting_visibility } = useStateStore( - pollComposer.state, - pollComposerStateSelector, - ); + const { options } = useStateStore(pollComposer.state, pollComposerStateSelector); const { createPollOptionHeight, closePollCreationDialog, createAndSendPoll } = useCreatePollContentContext(); @@ -89,6 +84,32 @@ export const CreatePollContent = () => { await createAndSendPoll(); }, [createAndSendPoll]); + const onAnonymousPollChangeHandler = useCallback( + async (value: boolean) => { + setIsAnonymousPoll(value); + await pollComposer.updateFields({ + voting_visibility: value ? VotingVisibility.anonymous : VotingVisibility.public, + }); + }, + [pollComposer], + ); + + const onAllowUserSuggestedOptionsChangeHandler = useCallback( + async (value: boolean) => { + setAllowUserSuggestedOptions(value); + await pollComposer.updateFields({ allow_user_suggested_options: value }); + }, + [pollComposer], + ); + + const onAllowAnswersChangeHandler = useCallback( + async (value: boolean) => { + setAllowAnswers(value); + await pollComposer.updateFields({ allow_answers: value }); + }, + [pollComposer], + ); + return ( <> { {t('Anonymous poll')} - - pollComposer.updateFields({ - voting_visibility: value ? VotingVisibility.anonymous : VotingVisibility.public, - }) - } - value={voting_visibility === VotingVisibility.anonymous} - /> + { {t('Suggest an option')} - pollComposer.updateFields({ allow_user_suggested_options: value }) - } - value={allow_user_suggested_options} + onValueChange={onAllowUserSuggestedOptionsChangeHandler} + value={allowUserSuggestedOptions} /> {t('Add a comment')} - pollComposer.updateFields({ allow_answers: value })} - value={allow_answers} - /> + diff --git a/package/src/components/Poll/components/MultipleAnswersField.tsx b/package/src/components/Poll/components/MultipleAnswersField.tsx index 3574224e66..152e1942a9 100644 --- a/package/src/components/Poll/components/MultipleAnswersField.tsx +++ b/package/src/components/Poll/components/MultipleAnswersField.tsx @@ -8,20 +8,17 @@ import { useMessageComposer } from '../../../contexts/messageInputContext/hooks/ import { useStateStore } from '../../../hooks/useStateStore'; const pollComposerStateSelector = (state: PollComposerState) => ({ - enforce_unique_vote: state.data.enforce_unique_vote, error: state.errors.max_votes_allowed, max_votes_allowed: state.data.max_votes_allowed, }); export const MultipleAnswersField = () => { + const [allowMultipleVotes, setAllowMultipleVotes] = React.useState(false); const { t } = useTranslationContext(); const messageComposer = useMessageComposer(); const { pollComposer } = messageComposer; const { handleFieldBlur, updateFields } = pollComposer; - const { enforce_unique_vote, error, max_votes_allowed } = useStateStore( - pollComposer.state, - pollComposerStateSelector, - ); + const { error, max_votes_allowed } = useStateStore(pollComposer.state, pollComposerStateSelector); const { theme: { @@ -34,6 +31,7 @@ export const MultipleAnswersField = () => { const onEnforceUniqueVoteHandler = useCallback( async (value: boolean) => { + setAllowMultipleVotes(value); await updateFields({ enforce_unique_vote: !value }); }, [updateFields], @@ -58,9 +56,9 @@ export const MultipleAnswersField = () => { {t('Multiple answers')} - + - {!enforce_unique_vote ? ( + {allowMultipleVotes ? ( {max_votes_allowed && error ? (