stream-chat-react-native-core 5.44.2-beta.1 → 6.0.0-beta.1

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

@@ -0,0 +1,241 @@
+import React, { useCallback, useState } from 'react';
+import { Modal, SafeAreaView } from 'react-native';
+
+import { GenericPollButton, PollButtonProps } from './Button';
+import { PollAnswersList } from './PollAnswersList';
+import { PollInputDialog } from './PollInputDialog';
+import { PollModalHeader } from './PollModalHeader';
+import { PollAllOptions } from './PollOption';
+import { PollResults } from './PollResults';
+
+import { useChatContext, usePollContext, useTheme, useTranslationContext } from '../../../contexts';
+import { usePollState } from '../hooks/usePollState';
+
+export const ViewResultsButton = (props: PollButtonProps) => {
+  const { t } = useTranslationContext();
+  const { message, poll } = usePollContext();
+  const [showResults, setShowResults] = useState(false);
+  const { onPress } = props;
+
+  const onPressHandler = useCallback(() => {
+    if (onPress) {
+      onPress({ message, poll });
+      return;
+    }
+
+    setShowResults(true);
+  }, [message, onPress, poll]);
+
+  const {
+    theme: {
+      colors: { white },
+    },
+  } = useTheme();
+
+  return (
+    <>
+      <GenericPollButton onPress={onPressHandler} title={t<string>('View Results')} />
+      {showResults ? (
+        <Modal
+          animationType='slide'
+          onRequestClose={() => setShowResults(false)}
+          visible={showResults}
+        >
+          <SafeAreaView style={{ backgroundColor: white, flex: 1 }}>
+            <PollModalHeader
+              onPress={() => setShowResults(false)}
+              title={t<string>('Poll Results')}
+            />
+            <PollResults message={message} poll={poll} />
+          </SafeAreaView>
+        </Modal>
+      ) : null}
+    </>
+  );
+};
+
+export const ShowAllOptionsButton = (props: PollButtonProps) => {
+  const { t } = useTranslationContext();
+  const [showAllOptions, setShowAllOptions] = useState(false);
+  const { message, poll } = usePollContext();
+  const { options } = usePollState();
+  const { onPress } = props;
+
+  const onPressHandler = useCallback(() => {
+    if (onPress) {
+      onPress({ message, poll });
+      return;
+    }
+
+    setShowAllOptions(true);
+  }, [message, onPress, poll]);
+
+  const {
+    theme: {
+      colors: { white },
+    },
+  } = useTheme();
+
+  return (
+    <>
+      {options && options.length > 10 ? (
+        <GenericPollButton
+          onPress={onPressHandler}
+          title={t<string>('See all {{count}} options', { count: options.length })}
+        />
+      ) : null}
+      {showAllOptions ? (
+        <Modal
+          animationType='slide'
+          onRequestClose={() => setShowAllOptions(false)}
+          visible={showAllOptions}
+        >
+          <SafeAreaView style={{ backgroundColor: white, flex: 1 }}>
+            <PollModalHeader
+              onPress={() => setShowAllOptions(false)}
+              title={t<string>('Poll Options')}
+            />
+            <PollAllOptions message={message} poll={poll} />
+          </SafeAreaView>
+        </Modal>
+      ) : null}
+    </>
+  );
+};
+
+export const ShowAllCommentsButton = (props: PollButtonProps) => {
+  const { t } = useTranslationContext();
+  const { message, poll } = usePollContext();
+  const { answersCount } = usePollState();
+  const [showAnswers, setShowAnswers] = useState(false);
+  const { onPress } = props;
+
+  const onPressHandler = useCallback(() => {
+    if (onPress) {
+      onPress({ message, poll });
+      return;
+    }
+
+    setShowAnswers(true);
+  }, [message, onPress, poll]);
+
+  const {
+    theme: {
+      colors: { white },
+    },
+  } = useTheme();
+
+  return (
+    <>
+      {answersCount && answersCount > 0 ? (
+        <GenericPollButton
+          onPress={onPressHandler}
+          title={t<string>('View {{count}} comments', { count: answersCount })}
+        />
+      ) : null}
+      {showAnswers ? (
+        <Modal
+          animationType='slide'
+          onRequestClose={() => setShowAnswers(false)}
+          visible={showAnswers}
+        >
+          <SafeAreaView style={{ backgroundColor: white, flex: 1 }}>
+            <PollModalHeader
+              onPress={() => setShowAnswers(false)}
+              title={t<string>('Poll Comments')}
+            />
+            <PollAnswersList message={message} poll={poll} />
+          </SafeAreaView>
+        </Modal>
+      ) : null}
+    </>
+  );
+};
+
+export const SuggestOptionButton = (props: PollButtonProps) => {
+  const { t } = useTranslationContext();
+  const { message, poll } = usePollContext();
+  const { addOption, allowUserSuggestedOptions, isClosed } = usePollState();
+  const [showAddOptionDialog, setShowAddOptionDialog] = useState(false);
+  const { onPress } = props;
+
+  const onPressHandler = useCallback(() => {
+    if (onPress) {
+      onPress({ message, poll });
+      return;
+    }
+
+    setShowAddOptionDialog(true);
+  }, [message, onPress, poll]);
+
+  return (
+    <>
+      {!isClosed && allowUserSuggestedOptions ? (
+        <GenericPollButton onPress={onPressHandler} title={t<string>('Suggest an option')} />
+      ) : null}
+      {showAddOptionDialog ? (
+        <PollInputDialog
+          closeDialog={() => setShowAddOptionDialog(false)}
+          onSubmit={addOption}
+          title={t<string>('Suggest an option')}
+          visible={showAddOptionDialog}
+        />
+      ) : null}
+    </>
+  );
+};
+
+export const AddCommentButton = (props: PollButtonProps) => {
+  const { t } = useTranslationContext();
+  const { message, poll } = usePollContext();
+  const { addComment, allowAnswers, isClosed, ownAnswer } = usePollState();
+  const [showAddCommentDialog, setShowAddCommentDialog] = useState(false);
+  const { onPress } = props;
+
+  const onPressHandler = useCallback(() => {
+    if (onPress) {
+      onPress({ message, poll });
+      return;
+    }
+
+    setShowAddCommentDialog(true);
+  }, [message, onPress, poll]);
+
+  return (
+    <>
+      {!isClosed && allowAnswers ? (
+        <GenericPollButton onPress={onPressHandler} title={t<string>('Add a comment')} />
+      ) : null}
+      {showAddCommentDialog ? (
+        <PollInputDialog
+          closeDialog={() => setShowAddCommentDialog(false)}
+          initialValue={ownAnswer?.answer_text ?? ''}
+          onSubmit={addComment}
+          title={t<string>('Add a comment')}
+          visible={showAddCommentDialog}
+        />
+      ) : null}
+    </>
+  );
+};
+
+export const EndVoteButton = () => {
+  const { t } = useTranslationContext();
+  const { createdBy, endVote, isClosed } = usePollState();
+  const { client } = useChatContext();
+
+  return !isClosed && createdBy?.id === client.userID ? (
+    <GenericPollButton onPress={endVote} title={t<string>('End Vote')} />
+  ) : null;
+};
+
+export const PollButtons = () => (
+  <>
+    <ShowAllOptionsButton />
+    <ShowAllCommentsButton />
+    <SuggestOptionButton />
+    <AddCommentButton />
+    <ViewResultsButton />
+    <EndVoteButton />
+  </>
+);

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

@@ -3,10 +3,10 @@ import {
   KeyboardAvoidingView,
   Modal,
   Platform,
+  Pressable,
   StyleSheet,
   Text,
   TextInput,
-  TouchableOpacity,
   View,
 } from 'react-native';
 
@@ -62,22 +62,25 @@ export const PollInputDialog = ({
             value={dialogInput}
           />
           <View style={[styles.buttonContainer, buttonContainer]}>
-            <TouchableOpacity onPress={closeDialog}>
+            <Pressable
+              onPress={closeDialog}
+              style={({ pressed }) => ({ opacity: pressed ? 0.5 : 1 })}
+            >
               <Text style={[styles.button, { color: accent_dark_blue }, button]}>
                 {t<string>('Cancel')}
               </Text>
-            </TouchableOpacity>
-            <TouchableOpacity
+            </Pressable>
+            <Pressable
               onPress={() => {
                 onSubmit(dialogInput);
                 closeDialog();
               }}
-              style={{ marginLeft: 32 }}
+              style={({ pressed }) => ({ marginLeft: 32, opacity: pressed ? 0.5 : 1 })}
             >
               <Text style={[styles.button, { color: accent_dark_blue }, button]}>
                 {t<string>('SEND')}
               </Text>
-            </TouchableOpacity>
+            </Pressable>
           </View>
         </View>
       </KeyboardAvoidingView>

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
 
 import { useTheme } from '../../../contexts';
 import { Back } from '../../../icons';
@@ -21,9 +21,9 @@ export const PollModalHeader = ({ onPress, title }: PollModalHeaderProps) => {
 
   return (
     <View style={[styles.container, { backgroundColor: white }, container]}>
-      <TouchableOpacity onPress={onPress}>
+      <Pressable onPress={onPress} style={({ pressed }) => ({ opacity: pressed ? 0.5 : 1 })}>
         <Back height={24} pathFill={text_high_emphasis} viewBox='0 0 24 24' width={24} />
-      </TouchableOpacity>
+      </Pressable>
       <Text numberOfLines={1} style={[styles.title, { color: black }, titleStyle]}>
         {title}
       </Text>

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

@@ -1,15 +1,22 @@
-import React, { useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 
-import { ScrollViewProps, StyleSheet, Text, View } from 'react-native';
+import { Pressable, ScrollViewProps, StyleSheet, Text, View } from 'react-native';
 
 import { ScrollView } from 'react-native-gesture-handler';
 
 import { PollOption as PollOptionClass, PollVote } from 'stream-chat';
 
-import { VoteButton } from './Button';
+import { PollVoteButtonProps } from './Button';
 
-import { PollContextProvider, PollContextValue, useTheme } from '../../../contexts';
+import {
+  PollContextProvider,
+  PollContextValue,
+  useOwnCapabilitiesContext,
+  usePollContext,
+  useTheme,
+} from '../../../contexts';
 
+import { Check } from '../../../icons';
 import { Avatar } from '../../Avatar/Avatar';
 import { usePollState } from '../hooks/usePollState';
 
@@ -141,6 +148,61 @@ export const PollOption = ({ option, showProgressBar = true }: PollOptionProps)
   );
 };
 
+export const VoteButton = ({ onPress, option }: PollVoteButtonProps) => {
+  const { message, poll } = usePollContext();
+  const { isClosed, ownVotesByOptionId } = usePollState();
+  const ownCapabilities = useOwnCapabilitiesContext();
+
+  const {
+    theme: {
+      colors: { accent_dark_blue, disabled },
+      poll: {
+        message: {
+          option: { voteButtonActive, voteButtonContainer, voteButtonInactive },
+        },
+      },
+    },
+  } = useTheme();
+
+  const toggleVote = useCallback(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]);
+
+  const onPressHandler = useCallback(() => {
+    if (onPress) {
+      onPress({ message, poll });
+      return;
+    }
+
+    toggleVote();
+  }, [message, onPress, poll, toggleVote]);
+
+  return ownCapabilities.castPollVote && !isClosed ? (
+    <Pressable
+      onPress={onPressHandler}
+      style={({ pressed }) => [
+        { opacity: pressed ? 0.5 : 1 },
+        styles.voteContainer,
+        {
+          backgroundColor: ownVotesByOptionId[option.id]
+            ? voteButtonActive || accent_dark_blue
+            : 'transparent',
+          borderColor: ownVotesByOptionId[option.id]
+            ? voteButtonActive || accent_dark_blue
+            : voteButtonInactive || disabled,
+        },
+        voteButtonContainer,
+      ]}
+    >
+      {ownVotesByOptionId[option.id] ? <Check height={15} pathFill='white' width={20} /> : null}
+    </Pressable>
+  ) : null;
+};
+
 const styles = StyleSheet.create({
   allOptionsListContainer: {
     borderRadius: 12,
@@ -162,6 +224,14 @@ const styles = StyleSheet.create({
     fontSize: 16,
     marginLeft: 4,
   },
+  voteContainer: {
+    alignItems: 'center',
+    borderRadius: 18,
+    borderWidth: 1,
+    height: 18,
+    justifyContent: 'center',
+    width: 18,
+  },
   votesContainer: { flexDirection: 'row', marginLeft: 4 },
   wrapper: { marginTop: 8, paddingVertical: 8 },
 });

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

@@ -3,7 +3,7 @@ import { FlatList, type FlatListProps, StyleSheet, Text, View } from 'react-nati
 
 import { PollOption, PollVote as PollVoteClass } from 'stream-chat';
 
-import { PollVote } from './PollResultItem';
+import { PollVote } from './PollVote';
 
 import {
   PollContextProvider,

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

@@ -1,66 +1,90 @@
-import React, { useMemo } from 'react';
-import { StyleSheet, Text, View } from 'react-native';
+import React, { useCallback, useState } from 'react';
+import { Modal, SafeAreaView, StyleSheet, Text, View } from 'react-native';
 
-import { PollOption, PollVote as PollVoteClass, VotingVisibility } from 'stream-chat';
+import { Poll, PollOption, PollVote as PollVoteClass } from 'stream-chat';
 
-import { useTheme, useTranslationContext } from '../../../../contexts';
+import { PollOptionFullResults } from './PollOptionFullResults';
+import { PollVote } from './PollVote';
+
+import {
+  useOwnCapabilitiesContext,
+  usePollContext,
+  useTheme,
+  useTranslationContext,
+} from '../../../../contexts';
 import type { DefaultStreamChatGenerics } from '../../../../types/types';
-import { getDateString } from '../../../../utils/i18n/getDateString';
-import { Avatar } from '../../../Avatar/Avatar';
+import { MessageType } from '../../../MessageList/hooks/useMessageList';
 import { usePollState } from '../../hooks/usePollState';
-import { ShowAllVotesButton } from '../Button';
+import { GenericPollButton } from '../Button';
+import { PollModalHeader } from '../PollModalHeader';
 
-export type PollResultItemProps<
+export type ShowAllVotesButtonProps<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
   option: PollOption<StreamChatGenerics>;
+  onPress?: ({
+    message,
+    option,
+    poll,
+  }: {
+    message: MessageType<StreamChatGenerics>;
+    option: PollOption<StreamChatGenerics>;
+    poll: Poll<StreamChatGenerics>;
+  }) => void;
 };
 
-export const PollVote = ({ vote }: { vote: PollVoteClass }) => {
-  const { t, tDateTimeParser } = useTranslationContext();
-  const { votingVisibility } = usePollState();
+export const ShowAllVotesButton = (props: ShowAllVotesButtonProps) => {
+  const { t } = useTranslationContext();
+  const { message, poll } = usePollContext();
+  const { voteCountsByOption } = usePollState();
+  const ownCapabilities = useOwnCapabilitiesContext();
+  const [showAllVotes, setShowAllVotes] = useState(false);
+  const { onPress, option } = props;
+
+  const onPressHandler = useCallback(() => {
+    if (onPress) {
+      onPress({ message, option, poll });
+      return;
+    }
+
+    setShowAllVotes(true);
+  }, [message, onPress, option, poll]);
+
   const {
     theme: {
-      colors: { black, text_low_emphasis },
-      poll: {
-        results: {
-          vote: { container, dateText, userName },
-        },
-      },
+      colors: { white },
     },
   } = useTheme();
 
-  const dateString = useMemo(
-    () =>
-      getDateString({
-        date: vote.created_at,
-        t,
-        tDateTimeParser,
-        timestampTranslationKey: 'timestamp/PollVote',
-      }),
-    [vote.created_at, t, tDateTimeParser],
-  );
-
-  const isAnonymous = useMemo(
-    () => votingVisibility === VotingVisibility.anonymous,
-    [votingVisibility],
-  );
-
   return (
-    <View style={[styles.voteContainer, container]}>
-      <View style={{ flexDirection: 'row' }}>
-        {!isAnonymous && vote.user?.image ? (
-          <Avatar image={vote.user.image as string} key={vote.id} size={20} />
-        ) : null}
-        <Text style={[styles.voteUserName, { color: black }, userName]}>
-          {isAnonymous ? t<string>('Anonymous') : vote.user?.name}
-        </Text>
-      </View>
-      <Text style={[styles.voteDate, { color: text_low_emphasis }, dateText]}>{dateString}</Text>
-    </View>
+    <>
+      {ownCapabilities.queryPollVotes &&
+      voteCountsByOption &&
+      voteCountsByOption?.[option.id] > 5 ? (
+        <GenericPollButton onPress={onPressHandler} title={t<string>('Show All')} />
+      ) : null}
+      {showAllVotes ? (
+        <Modal
+          animationType='fade'
+          onRequestClose={() => setShowAllVotes(false)}
+          visible={showAllVotes}
+        >
+          <SafeAreaView style={{ backgroundColor: white, flex: 1 }}>
+            <PollModalHeader onPress={() => setShowAllVotes(false)} title={option.text} />
+            <PollOptionFullResults message={message} option={option} poll={poll} />
+          </SafeAreaView>
+        </Modal>
+      ) : null}
+    </>
   );
 };
 
+export type PollResultItemProps<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = {
+  option: PollOption<StreamChatGenerics>;
+};
+
 const PollResultsVoteItem = (vote: PollVoteClass) => (
   <PollVote key={`results_vote_${vote.id}`} vote={vote} />
 );
@@ -107,13 +131,5 @@ const styles = StyleSheet.create({
   },
   headerContainer: { flexDirection: 'row', justifyContent: 'space-between' },
   title: { flex: 1, fontSize: 16, fontWeight: '500' },
-  voteContainer: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    marginBottom: 8,
-    paddingVertical: 8,
-  },
   voteCount: { fontSize: 16, marginLeft: 16 },
-  voteDate: { fontSize: 14 },
-  voteUserName: { fontSize: 14, marginLeft: 2 },
 });

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

@@ -0,0 +1,68 @@
+import React, { useMemo } from 'react';
+
+import { StyleSheet, Text, View } from 'react-native';
+
+import { PollVote as PollVoteClass, VotingVisibility } from 'stream-chat';
+
+import { useTheme, useTranslationContext } from '../../../../contexts';
+import { getDateString } from '../../../../utils/i18n/getDateString';
+
+import { Avatar } from '../../../Avatar/Avatar';
+import { usePollState } from '../../hooks/usePollState';
+
+export const PollVote = ({ vote }: { vote: PollVoteClass }) => {
+  const { t, tDateTimeParser } = useTranslationContext();
+  const { votingVisibility } = usePollState();
+  const {
+    theme: {
+      colors: { black, text_low_emphasis },
+      poll: {
+        results: {
+          vote: { container, dateText, userName },
+        },
+      },
+    },
+  } = useTheme();
+
+  const dateString = useMemo(
+    () =>
+      getDateString({
+        date: vote.created_at,
+        t,
+        tDateTimeParser,
+        timestampTranslationKey: 'timestamp/PollVote',
+      }),
+    [vote.created_at, t, tDateTimeParser],
+  );
+
+  const isAnonymous = useMemo(
+    () => votingVisibility === VotingVisibility.anonymous,
+    [votingVisibility],
+  );
+
+  return (
+    <View style={[styles.voteContainer, container]}>
+      <View style={{ flexDirection: 'row' }}>
+        {!isAnonymous && vote.user?.image ? (
+          <Avatar image={vote.user.image as string} key={vote.id} size={20} />
+        ) : null}
+        <Text style={[styles.voteUserName, { color: black }, userName]}>
+          {isAnonymous ? t<string>('Anonymous') : vote.user?.name}
+        </Text>
+      </View>
+      <Text style={[styles.voteDate, { color: text_low_emphasis }, dateText]}>{dateString}</Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  voteContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginBottom: 8,
+    paddingVertical: 8,
+  },
+  voteCount: { fontSize: 16, marginLeft: 16 },
+  voteDate: { fontSize: 14 },
+  voteUserName: { fontSize: 14, marginLeft: 2 },
+});

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

@@ -1,4 +1,5 @@
 export * from './Button';
+export * from './PollButtons';
 export * from './CreatePollIcon';
 export * from './CreatePollOptions';
 export * from './PollAnswersList';