fix: use state store

Author: isekovanic

package/src/components/Poll/CreatePollContent.tsx

@@ -4,7 +4,7 @@ import { StyleSheet, Switch, Text, View } from 'react-native';
 import { ScrollView } from 'react-native-gesture-handler';
 import Animated, { LinearTransition, useSharedValue } from 'react-native-reanimated';
 
-import { PollComposerState, VotingVisibility } from 'stream-chat';
+import { PollComposerState, StateStore, VotingVisibility } from 'stream-chat';
 
 import { CreatePollOptions, CurrentOptionPositionsCache } from './components';
 
@@ -13,6 +13,7 @@ import { MultipleAnswersField } from './components/MultipleAnswersField';
 import { NameField } from './components/NameField';
 
 import {
+  CreatePollModalState,
   CreatePollContentContextValue,
   CreatePollContentProvider,
   InputMessageInputContextValue,
@@ -219,21 +220,23 @@ export const CreatePoll = ({
 > &
   Pick<InputMessageInputContextValue, 'CreatePollContent'>) => {
   const messageComposer = useMessageComposer();
-  const [isClosing, setIsClosing] = useState(false);
+  const [modalStateStore] = useState(
+    () => new StateStore<CreatePollModalState>({ isClosing: false }),
+  );
   const closeFrameRef = useRef<number | null>(null);
 
   const closeCreatePollDialog = useCallback(() => {
-    if (closeFrameRef.current !== null) {
+    if (closeFrameRef.current !== null || modalStateStore.getLatestValue().isClosing) {
       return;
     }
 
-    setIsClosing(true);
     // Let the modal render once with exit animations disabled before we dismiss it.
+    modalStateStore.partialNext({ isClosing: true });
     closeFrameRef.current = requestAnimationFrame(() => {
       closeFrameRef.current = null;
       closePollCreationDialog?.();
     });
-  }, [closePollCreationDialog]);
+  }, [closePollCreationDialog, modalStateStore]);
 
   useEffect(() => {
     return () => {
@@ -261,7 +264,7 @@ export const CreatePoll = ({
         closePollCreationDialog: closeCreatePollDialog,
         createAndSendPoll,
         createPollOptionGap,
-        isClosing,
+        modalStateStore,
         sendMessage,
       }}
     >

package/src/components/Poll/components/MultipleVotesSettings.tsx

@@ -17,6 +17,10 @@ const pollComposerStateSelector = (state: PollComposerState) => ({
   max_votes_allowed: state.data.max_votes_allowed,
 });
 
+const modalStateSelector = (state: { isClosing: boolean }) => ({
+  isClosing: state.isClosing,
+});
+
 const MaxVotesTextInput = () => {
   const messageComposer = useMessageComposer();
   const { pollComposer } = messageComposer;
@@ -91,7 +95,8 @@ const MaxVotesTextInput = () => {
 export const MultipleVotesSettings = () => {
   const [allowMaxVotesPerPerson, setAllowMaxVotesPerPerson] = useState<boolean>(false);
   const { t } = useTranslationContext();
-  const { isClosing } = useCreatePollContentContext();
+  const { modalStateStore } = useCreatePollContentContext();
+  const { isClosing = false } = useStateStore(modalStateStore, modalStateSelector) ?? {};
   const messageComposer = useMessageComposer();
   const { pollComposer } = messageComposer;
   const { updateFields } = pollComposer;

package/src/contexts/pollContext/createPollContentContext.tsx

@@ -1,15 +1,21 @@
 import React, { PropsWithChildren, useContext } from 'react';
 
+import { StateStore } from 'stream-chat';
+
 import { MessageInputContextValue } from '../messageInputContext/MessageInputContext';
 import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
 
 import { isTestEnvironment } from '../utils/isTestEnvironment';
 
+export type CreatePollModalState = {
+  isClosing: boolean;
+};
+
 export type CreatePollContentContextValue = {
   createAndSendPoll: () => Promise<void>;
   sendMessage: MessageInputContextValue['sendMessage'];
   closePollCreationDialog?: () => void;
-  isClosing?: boolean;
+  modalStateStore?: StateStore<CreatePollModalState>;
   /**
    * Vertical gap between poll options in the poll creation screen.
    *