stream-chat-react-native-core 9.3.1-beta.4 → 9.3.1-beta.5

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

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { Modal, StyleSheet, View } from 'react-native';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 
@@ -13,13 +13,22 @@ import { useChatContext, usePollContext, useTheme, useTranslationContext } from
 import { primitives } from '../../../theme';
 import { defaultPollOptionCount } from '../../../utils/constants';
 import { SafeAreaViewWrapper } from '../../UIComponents/SafeAreaViewWrapper';
+import {
+  useAddCommentOpen,
+  useAllCommentsOpen,
+  useAllOptionsOpen,
+  usePollUIStateContext,
+  useSuggestOptionOpen,
+  useViewResultsOpen,
+} from '../contexts/PollUIStateContext';
 import { useIsPollCreatedByCurrentUser } from '../hook/useIsPollCreatedByCurrentUser';
 import { usePollState } from '../hooks/usePollState';
 
 export const ViewResultsButton = (props: PollButtonProps) => {
   const { t } = useTranslationContext();
   const { message, poll } = usePollContext();
-  const [showResults, setShowResults] = useState(false);
+  const { closeViewResults, openViewResults } = usePollUIStateContext();
+  const showResults = useViewResultsOpen();
   const { onPress } = props;
 
   const onPressHandler = useCallback(() => {
@@ -28,15 +37,11 @@ export const ViewResultsButton = (props: PollButtonProps) => {
       return;
     }
 
-    setShowResults(true);
-  }, [message, onPress, poll]);
+    openViewResults();
+  }, [message, onPress, openViewResults, poll]);
 
   const styles = useStyles();
 
-  const onRequestClose = useCallback(() => {
-    setShowResults(false);
-  }, []);
-
   return (
     <>
       <GenericPollButton
@@ -46,10 +51,10 @@ export const ViewResultsButton = (props: PollButtonProps) => {
         type='outline'
       />
       {showResults ? (
-        <Modal animationType='slide' onRequestClose={onRequestClose} visible={showResults}>
+        <Modal animationType='slide' onRequestClose={closeViewResults} visible={showResults}>
           <GestureHandlerRootView style={styles.modalRoot}>
             <SafeAreaViewWrapper style={styles.safeArea}>
-              <PollModalHeader onPress={onRequestClose} title={t('Poll Results')} />
+              <PollModalHeader onPress={closeViewResults} title={t('Poll Results')} />
               <PollResults message={message} poll={poll} />
             </SafeAreaViewWrapper>
           </GestureHandlerRootView>
@@ -61,7 +66,8 @@ export const ViewResultsButton = (props: PollButtonProps) => {
 
 export const ShowAllOptionsButton = (props: PollButtonProps) => {
   const { t } = useTranslationContext();
-  const [showAllOptions, setShowAllOptions] = useState(false);
+  const { closeAllOptions, openAllOptions } = usePollUIStateContext();
+  const showAllOptions = useAllOptionsOpen();
   const { message, poll } = usePollContext();
   const { options } = usePollState();
   const { onPress } = props;
@@ -72,12 +78,8 @@ export const ShowAllOptionsButton = (props: PollButtonProps) => {
       return;
     }
 
-    setShowAllOptions(true);
-  }, [message, onPress, poll]);
-
-  const onRequestClose = useCallback(() => {
-    setShowAllOptions(false);
-  }, []);
+    openAllOptions();
+  }, [message, onPress, openAllOptions, poll]);
 
   const styles = useStyles();
 
@@ -90,10 +92,10 @@ export const ShowAllOptionsButton = (props: PollButtonProps) => {
         />
       ) : null}
       {showAllOptions ? (
-        <Modal animationType='slide' onRequestClose={onRequestClose} visible={showAllOptions}>
+        <Modal animationType='slide' onRequestClose={closeAllOptions} visible={showAllOptions}>
           <GestureHandlerRootView style={styles.modalRoot}>
             <SafeAreaViewWrapper style={styles.safeArea}>
-              <PollModalHeader onPress={onRequestClose} title={t('Poll Options')} />
+              <PollModalHeader onPress={closeAllOptions} title={t('Poll Options')} />
               <PollAllOptions message={message} poll={poll} />
             </SafeAreaViewWrapper>
           </GestureHandlerRootView>
@@ -107,7 +109,8 @@ export const ShowAllCommentsButton = (props: PollButtonProps) => {
   const { t } = useTranslationContext();
   const { message, poll } = usePollContext();
   const { answersCount } = usePollState();
-  const [showAnswers, setShowAnswers] = useState(false);
+  const { closeAllComments, openAllComments } = usePollUIStateContext();
+  const showAnswers = useAllCommentsOpen();
   const { onPress } = props;
 
   const onPressHandler = useCallback(() => {
@@ -116,15 +119,11 @@ export const ShowAllCommentsButton = (props: PollButtonProps) => {
       return;
     }
 
-    setShowAnswers(true);
-  }, [message, onPress, poll]);
+    openAllComments();
+  }, [message, onPress, openAllComments, poll]);
 
   const styles = useStyles();
 
-  const onRequestClose = useCallback(() => {
-    setShowAnswers(false);
-  }, []);
-
   return (
     <>
       {answersCount && answersCount > 0 ? (
@@ -134,10 +133,10 @@ export const ShowAllCommentsButton = (props: PollButtonProps) => {
         />
       ) : null}
       {showAnswers ? (
-        <Modal animationType='slide' onRequestClose={onRequestClose} visible={showAnswers}>
+        <Modal animationType='slide' onRequestClose={closeAllComments} visible={showAnswers}>
           <GestureHandlerRootView style={styles.modalRoot}>
             <SafeAreaViewWrapper style={styles.safeArea}>
-              <PollModalHeader onPress={onRequestClose} title={t('Poll Comments')} />
+              <PollModalHeader onPress={closeAllComments} title={t('Poll Comments')} />
               <PollAnswersList message={message} poll={poll} />
             </SafeAreaViewWrapper>
           </GestureHandlerRootView>
@@ -151,7 +150,8 @@ export const SuggestOptionButton = (props: PollButtonProps) => {
   const { t } = useTranslationContext();
   const { message, poll } = usePollContext();
   const { addOption, allowUserSuggestedOptions, isClosed } = usePollState();
-  const [showAddOptionDialog, setShowAddOptionDialog] = useState(false);
+  const { closeSuggestOption, openSuggestOption } = usePollUIStateContext();
+  const showAddOptionDialog = useSuggestOptionOpen();
   const { onPress } = props;
 
   const onPressHandler = useCallback(() => {
@@ -160,12 +160,8 @@ export const SuggestOptionButton = (props: PollButtonProps) => {
       return;
     }
 
-    setShowAddOptionDialog(true);
-  }, [message, onPress, poll]);
-
-  const onRequestClose = useCallback(() => {
-    setShowAddOptionDialog(false);
-  }, []);
+    openSuggestOption();
+  }, [message, onPress, openSuggestOption, poll]);
 
   return (
     <>
@@ -174,7 +170,7 @@ export const SuggestOptionButton = (props: PollButtonProps) => {
       ) : null}
       {showAddOptionDialog ? (
         <PollInputDialog
-          closeDialog={onRequestClose}
+          closeDialog={closeSuggestOption}
           onSubmit={addOption}
           placeholder={t('Enter a new option')}
           title={t('Suggest an option')}
@@ -189,7 +185,8 @@ export const AddCommentButton = (props: PollButtonProps) => {
   const { t } = useTranslationContext();
   const { message, poll } = usePollContext();
   const { addComment, allowAnswers, isClosed, ownAnswer } = usePollState();
-  const [showAddCommentDialog, setShowAddCommentDialog] = useState(false);
+  const { closeAddComment, openAddComment } = usePollUIStateContext();
+  const showAddCommentDialog = useAddCommentOpen();
   const { onPress } = props;
 
   const onPressHandler = useCallback(() => {
@@ -198,12 +195,8 @@ export const AddCommentButton = (props: PollButtonProps) => {
       return;
     }
 
-    setShowAddCommentDialog(true);
-  }, [message, onPress, poll]);
-
-  const onRequestClose = useCallback(() => {
-    setShowAddCommentDialog(false);
-  }, []);
+    openAddComment();
+  }, [message, onPress, openAddComment, poll]);
 
   return (
     <>
@@ -212,7 +205,7 @@ export const AddCommentButton = (props: PollButtonProps) => {
       ) : null}
       {showAddCommentDialog ? (
         <PollInputDialog
-          closeDialog={onRequestClose}
+          closeDialog={closeAddComment}
           initialValue={ownAnswer?.answer_text ?? ''}
           onSubmit={addComment}
           placeholder={t('Your comment')}

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

@@ -20,11 +20,11 @@ import { useComponentsContext } from '../../../contexts/componentsContext/Compon
 
 import { Check } from '../../../icons';
 import { primitives } from '../../../theme';
-import { useNotificationApi } from '../../Notifications';
 import { ProgressBar } from '../../ProgressControl/ProgressBar';
 import { UserAvatarStack } from '../../ui/Avatar/AvatarStack';
 import { useIsPollCreatedByCurrentUser } from '../hook/useIsPollCreatedByCurrentUser';
 import { usePollState } from '../hooks/usePollState';
+import { usePollVoteToggle } from '../hooks/usePollVoteToggle';
 
 const pollVoteAccessibilityStates = {
   checked: { checked: true, selected: true },
@@ -161,7 +161,6 @@ export const PollOption = ({ option, showProgressBar = true, forceIncoming }: Po
 export const VoteButton = ({ onPress, option }: PollVoteButtonProps) => {
   const { message, poll } = usePollContext();
   const { isClosed, ownVotesByOptionId } = usePollState();
-  const { runWithNotificationTarget } = useNotificationApi();
   const ownCapabilities = useOwnCapabilitiesContext();
   const {
     theme: { semantics },
@@ -179,15 +178,7 @@ export const VoteButton = ({ onPress, option }: PollVoteButtonProps) => {
     },
   } = useTheme();
 
-  const toggleVote = useCallback(async () => {
-    await runWithNotificationTarget(async () => {
-      if (ownVotesByOptionId[option.id]) {
-        await poll.removeVote(ownVotesByOptionId[option.id]?.id, message.id);
-      } else {
-        await poll.castVote(option.id, message.id);
-      }
-    });
-  }, [message.id, option.id, ownVotesByOptionId, poll, runWithNotificationTarget]);
+  const toggleVote = usePollVoteToggle();
 
   const onPressHandler = useCallback(() => {
     if (onPress) {
@@ -195,8 +186,8 @@ export const VoteButton = ({ onPress, option }: PollVoteButtonProps) => {
       return;
     }
 
-    toggleVote();
-  }, [message, onPress, poll, toggleVote]);
+    toggleVote(option.id);
+  }, [message, onPress, option.id, poll, toggleVote]);
 
   const hasVote = !!ownVotesByOptionId[option.id];
   const accessibilityState = hasVote

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

@@ -0,0 +1,105 @@
+import React, { PropsWithChildren, useContext, useState } from 'react';
+
+import { StateStore } from 'stream-chat';
+
+import { DEFAULT_BASE_CONTEXT_VALUE } from '../../../contexts/utils/defaultBaseContextValue';
+import { isTestEnvironment } from '../../../contexts/utils/isTestEnvironment';
+import { useStateStore } from '../../../hooks/useStateStore';
+
+export type PollUIState = {
+  addCommentOpen: boolean;
+  allCommentsOpen: boolean;
+  allOptionsOpen: boolean;
+  suggestOptionOpen: boolean;
+  viewResultsOpen: boolean;
+};
+
+const INITIAL_POLL_UI_STATE: PollUIState = {
+  addCommentOpen: false,
+  allCommentsOpen: false,
+  allOptionsOpen: false,
+  suggestOptionOpen: false,
+  viewResultsOpen: false,
+};
+
+export type PollUIStateContextValue = {
+  closeAddComment: () => void;
+  closeAllComments: () => void;
+  closeAllOptions: () => void;
+  closeSuggestOption: () => void;
+  closeViewResults: () => void;
+  openAddComment: () => void;
+  openAllComments: () => void;
+  openAllOptions: () => void;
+  openSuggestOption: () => void;
+  openViewResults: () => void;
+  store: StateStore<PollUIState>;
+};
+
+export const PollUIStateContext = React.createContext(
+  DEFAULT_BASE_CONTEXT_VALUE as PollUIStateContextValue,
+);
+
+export const PollUIStateProvider = ({ children }: PropsWithChildren) => {
+  const value = useState<PollUIStateContextValue>(() => {
+    const store = new StateStore<PollUIState>(INITIAL_POLL_UI_STATE);
+    return {
+      closeAddComment: () => store.partialNext({ addCommentOpen: false }),
+      closeAllComments: () => store.partialNext({ allCommentsOpen: false }),
+      closeAllOptions: () => store.partialNext({ allOptionsOpen: false }),
+      closeSuggestOption: () => store.partialNext({ suggestOptionOpen: false }),
+      closeViewResults: () => store.partialNext({ viewResultsOpen: false }),
+      openAddComment: () => store.partialNext({ addCommentOpen: true }),
+      openAllComments: () => store.partialNext({ allCommentsOpen: true }),
+      openAllOptions: () => store.partialNext({ allOptionsOpen: true }),
+      openSuggestOption: () => store.partialNext({ suggestOptionOpen: true }),
+      openViewResults: () => store.partialNext({ viewResultsOpen: true }),
+      store,
+    };
+  })[0];
+
+  return <PollUIStateContext.Provider value={value}>{children}</PollUIStateContext.Provider>;
+};
+
+export const usePollUIStateContext = () => {
+  const contextValue = useContext(PollUIStateContext) as unknown as PollUIStateContextValue;
+
+  if (contextValue === DEFAULT_BASE_CONTEXT_VALUE && !isTestEnvironment()) {
+    throw new Error(
+      'usePollUIStateContext must be used within a PollUIStateProvider. The provider is mounted by the Poll component automatically.',
+    );
+  }
+
+  return contextValue;
+};
+
+const selectAddCommentOpen = ({ addCommentOpen }: PollUIState) => ({ addCommentOpen });
+const selectAllCommentsOpen = ({ allCommentsOpen }: PollUIState) => ({ allCommentsOpen });
+const selectAllOptionsOpen = ({ allOptionsOpen }: PollUIState) => ({ allOptionsOpen });
+const selectSuggestOptionOpen = ({ suggestOptionOpen }: PollUIState) => ({ suggestOptionOpen });
+const selectViewResultsOpen = ({ viewResultsOpen }: PollUIState) => ({ viewResultsOpen });
+
+export const useAddCommentOpen = () => {
+  const { store } = usePollUIStateContext();
+  return useStateStore(store, selectAddCommentOpen).addCommentOpen;
+};
+
+export const useAllCommentsOpen = () => {
+  const { store } = usePollUIStateContext();
+  return useStateStore(store, selectAllCommentsOpen).allCommentsOpen;
+};
+
+export const useAllOptionsOpen = () => {
+  const { store } = usePollUIStateContext();
+  return useStateStore(store, selectAllOptionsOpen).allOptionsOpen;
+};
+
+export const useSuggestOptionOpen = () => {
+  const { store } = usePollUIStateContext();
+  return useStateStore(store, selectSuggestOptionOpen).suggestOptionOpen;
+};
+
+export const useViewResultsOpen = () => {
+  const { store } = usePollUIStateContext();
+  return useStateStore(store, selectViewResultsOpen).viewResultsOpen;
+};

package/src/components/Poll/contexts/index.ts

@@ -0,0 +1 @@
+export * from './PollUIStateContext';