stream-chat-react-native-core 5.40.0-rc.2 → 5.41.0-beta.1

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

@@ -0,0 +1,167 @@
+import React, { useMemo } from 'react';
+
+import { 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 { PollContextProvider, PollContextValue, useTheme } from '../../../contexts';
+
+import { Avatar } from '../../Avatar/Avatar';
+import { usePollState } from '../hooks/usePollState';
+
+export type PollOptionProps = {
+  option: PollOptionClass;
+  showProgressBar?: boolean;
+};
+
+export type PollAllOptionsContentProps = PollContextValue & {
+  additionalScrollViewProps?: Partial<ScrollViewProps>;
+  PollAllOptionsContent?: React.ComponentType;
+};
+
+export const PollAllOptionsContent = ({
+  additionalScrollViewProps,
+}: Pick<PollAllOptionsContentProps, 'additionalScrollViewProps'>) => {
+  const { name, options } = usePollState();
+
+  const {
+    theme: {
+      colors: { bg_user, black, white },
+      poll: {
+        allOptions: { listContainer, titleContainer, titleText, wrapper },
+      },
+    },
+  } = useTheme();
+
+  return (
+    <ScrollView
+      contentContainerStyle={{ paddingBottom: 70 }}
+      style={[styles.allOptionsWrapper, { backgroundColor: white }, wrapper]}
+      {...additionalScrollViewProps}
+    >
+      <View style={[styles.allOptionsTitleContainer, { backgroundColor: bg_user }, titleContainer]}>
+        <Text style={[styles.allOptionsTitleText, { color: black }, titleText]}>{name}</Text>
+      </View>
+      <View style={[styles.allOptionsListContainer, { backgroundColor: bg_user }, listContainer]}>
+        {options?.map((option: PollOptionClass) => (
+          <View key={`full_poll_options_${option.id}`} style={{ paddingVertical: 16 }}>
+            <PollOption key={option.id} option={option} showProgressBar={false} />
+          </View>
+        ))}
+      </View>
+    </ScrollView>
+  );
+};
+
+export const PollAllOptions = ({
+  additionalScrollViewProps,
+  message,
+  poll,
+  PollAllOptionsContent: PollAllOptionsContentOverride,
+}: PollAllOptionsContentProps) => (
+  <PollContextProvider value={{ message, poll }}>
+    {PollAllOptionsContentOverride ? (
+      <PollAllOptionsContentOverride />
+    ) : (
+      <PollAllOptionsContent additionalScrollViewProps={additionalScrollViewProps} />
+    )}
+  </PollContextProvider>
+);
+
+export const PollOption = ({ option, showProgressBar = true }: PollOptionProps) => {
+  const { isClosed, latestVotesByOption, maxVotedOptionIds, voteCountsByOption } = usePollState();
+
+  const relevantVotes = useMemo(
+    () => latestVotesByOption?.[option.id]?.slice(0, 2) || [],
+    [latestVotesByOption, option.id],
+  );
+  const maxVotes = useMemo(
+    () =>
+      maxVotedOptionIds?.[0] && voteCountsByOption ? voteCountsByOption[maxVotedOptionIds[0]] : 0,
+    [maxVotedOptionIds, voteCountsByOption],
+  );
+  const votes = voteCountsByOption[option.id] || 0;
+
+  const {
+    theme: {
+      colors: { accent_dark_blue, accent_info, black, grey },
+      poll: {
+        message: {
+          option: {
+            container,
+            progressBar,
+            progressBarEmptyFill,
+            progressBarVotedFill,
+            progressBarWinnerFill,
+            text,
+            votesContainer,
+            wrapper,
+          },
+        },
+      },
+    },
+  } = useTheme();
+
+  return (
+    <View style={[styles.wrapper, wrapper]}>
+      <View style={[styles.container, container]}>
+        <VoteButton option={option} />
+        <Text style={[styles.text, { color: black }, text]}>{option.text}</Text>
+        <View style={[styles.votesContainer, votesContainer]}>
+          {relevantVotes.map((vote: PollVote) => (
+            <Avatar image={vote.user?.image as string} key={vote.id} size={20} />
+          ))}
+          <Text style={{ color: black, marginLeft: 2 }}>{voteCountsByOption[option.id] || 0}</Text>
+        </View>
+      </View>
+      {showProgressBar ? (
+        <View style={[styles.progressBar, progressBar]}>
+          <View
+            style={{
+              backgroundColor:
+                isClosed && maxVotedOptionIds.length === 1 && maxVotedOptionIds[0] === option.id
+                  ? progressBarWinnerFill || accent_info
+                  : progressBarVotedFill || accent_dark_blue,
+              flex: maxVotes > 0 ? votes / maxVotes : 0,
+            }}
+          />
+          <View
+            style={{
+              backgroundColor: progressBarEmptyFill || grey,
+              flex: maxVotes > 0 ? (maxVotes - votes) / maxVotes : 1,
+            }}
+          />
+        </View>
+      ) : null}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  allOptionsListContainer: {
+    borderRadius: 12,
+    marginTop: 32,
+    paddingBottom: 18,
+    paddingHorizontal: 16,
+  },
+  allOptionsTitleContainer: {
+    borderRadius: 12,
+    paddingHorizontal: 16,
+    paddingVertical: 18,
+  },
+  allOptionsTitleText: { fontSize: 16, fontWeight: '500' },
+  allOptionsWrapper: { flex: 1, marginBottom: 16, padding: 16 },
+  container: { flexDirection: 'row' },
+  progressBar: { borderRadius: 4, flex: 1, flexDirection: 'row', height: 4, marginTop: 2 },
+  text: {
+    flex: 1,
+    fontSize: 16,
+    marginLeft: 4,
+  },
+  votesContainer: { flexDirection: 'row', marginLeft: 4 },
+  wrapper: { marginTop: 8, paddingVertical: 8 },
+});

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

@@ -0,0 +1,108 @@
+import React, { useCallback } from 'react';
+import { FlatList, type FlatListProps, StyleSheet, Text, View } from 'react-native';
+
+import { PollOption, PollVote as PollVoteClass } from 'stream-chat';
+
+import { PollVote } from './PollResultItem';
+
+import {
+  PollContextProvider,
+  PollContextValue,
+  useTheme,
+  useTranslationContext,
+} from '../../../../contexts';
+import type { DefaultStreamChatGenerics } from '../../../../types/types';
+import { usePollOptionVotesPagination } from '../../hooks/usePollOptionVotesPagination';
+import { usePollState } from '../../hooks/usePollState';
+
+export type PollOptionFullResultsProps<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = PollContextValue & {
+  option: PollOption<StreamChatGenerics>;
+  additionalFlatListProps?: Partial<FlatListProps<PollVoteClass<StreamChatGenerics>>>;
+  PollOptionFullResultsContent?: React.ComponentType<{ option: PollOption<StreamChatGenerics> }>;
+};
+
+export const PollOptionFullResultsItem = ({ item }: { item: PollVoteClass }) => (
+  <PollVote vote={item} />
+);
+
+export const PollOptionFullResultsContent = ({
+  additionalFlatListProps,
+  option,
+}: Pick<PollOptionFullResultsProps, 'option' | 'additionalFlatListProps'>) => {
+  const { t } = useTranslationContext();
+  const { hasNextPage, loadMore, votes } = usePollOptionVotesPagination({ option });
+  const { voteCountsByOption } = usePollState();
+
+  const {
+    theme: {
+      colors: { bg_user, black, white },
+      poll: {
+        fullResults: { container, contentContainer, headerContainer, headerText },
+      },
+    },
+  } = useTheme();
+
+  const PollOptionFullResultsHeader = useCallback(
+    () => (
+      <View style={[styles.headerContainer, headerContainer]}>
+        <Text style={[styles.headerText, { color: black }, headerText]}>
+          {t<string>('{{count}} votes', { count: voteCountsByOption[option.id] ?? 0 })}
+        </Text>
+      </View>
+    ),
+    [black, headerContainer, headerText, option.id, t, voteCountsByOption],
+  );
+
+  return (
+    <View style={[styles.container, { backgroundColor: white }, container]}>
+      <FlatList
+        contentContainerStyle={[
+          styles.contentContainer,
+          { backgroundColor: bg_user },
+          contentContainer,
+        ]}
+        data={votes}
+        keyExtractor={(item) => `option_full_results_${item.id}`}
+        ListHeaderComponent={PollOptionFullResultsHeader}
+        onEndReached={() => hasNextPage && loadMore()}
+        renderItem={PollOptionFullResultsItem}
+        {...additionalFlatListProps}
+      />
+    </View>
+  );
+};
+
+export const PollOptionFullResults = ({
+  additionalFlatListProps,
+  message,
+  option,
+  poll,
+  PollOptionFullResultsContent: PollOptionFullResultsContentOverride,
+}: PollOptionFullResultsProps) => (
+  <PollContextProvider value={{ message, poll }}>
+    {PollOptionFullResultsContentOverride ? (
+      <PollOptionFullResultsContentOverride option={option} />
+    ) : (
+      <PollOptionFullResultsContent
+        additionalFlatListProps={additionalFlatListProps}
+        option={option}
+      />
+    )}
+  </PollContextProvider>
+);
+
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+  contentContainer: {
+    borderRadius: 12,
+    marginBottom: 8,
+    marginHorizontal: 16,
+    marginTop: 16,
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+  },
+  headerContainer: { flexDirection: 'row', justifyContent: 'flex-end', marginBottom: 8 },
+  headerText: { fontSize: 16, marginLeft: 16 },
+});

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

@@ -0,0 +1,119 @@
+import React, { useMemo } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+import { PollOption, PollVote as PollVoteClass, VotingVisibility } from 'stream-chat';
+
+import { useTheme, useTranslationContext } from '../../../../contexts';
+import type { DefaultStreamChatGenerics } from '../../../../types/types';
+import { getDateString } from '../../../../utils/i18n/getDateString';
+import { Avatar } from '../../../Avatar/Avatar';
+import { usePollState } from '../../hooks/usePollState';
+import { ShowAllVotesButton } from '../Button';
+
+export type PollResultItemProps<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = {
+  option: PollOption<StreamChatGenerics>;
+};
+
+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 PollResultsVoteItem = (vote: PollVoteClass) => (
+  <PollVote key={`results_vote_${vote.id}`} vote={vote} />
+);
+
+export const PollResultsItem = ({ option }: PollResultItemProps) => {
+  const { t } = useTranslationContext();
+  const { latestVotesByOption, voteCountsByOption } = usePollState();
+
+  const {
+    theme: {
+      colors: { bg_user, black },
+      poll: {
+        results: {
+          item: { container, headerContainer, title, voteCount },
+        },
+      },
+    },
+  } = useTheme();
+
+  return (
+    <View style={[styles.container, { backgroundColor: bg_user }, container]}>
+      <View style={[styles.headerContainer, headerContainer]}>
+        <Text style={[styles.title, { color: black }, title]}>{option.text}</Text>
+        <Text style={[styles.voteCount, { color: black }, voteCount]}>
+          {t<string>('{{count}} votes', { count: voteCountsByOption[option.id] ?? 0 })}
+        </Text>
+      </View>
+      {latestVotesByOption?.[option.id]?.length > 0 ? (
+        <View style={{ marginTop: 16 }}>
+          {(latestVotesByOption?.[option.id] ?? []).slice(0, 5).map(PollResultsVoteItem)}
+        </View>
+      ) : null}
+      <ShowAllVotesButton option={option} />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    borderRadius: 12,
+    marginBottom: 8,
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+  },
+  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/PollResults.tsx

@@ -0,0 +1,79 @@
+import React, { useMemo } from 'react';
+import { ScrollViewProps, StyleSheet, Text, View } from 'react-native';
+
+import { ScrollView } from 'react-native-gesture-handler';
+
+import { PollResultsItem } from './PollResultItem';
+
+import { PollContextProvider, PollContextValue, useTheme } from '../../../../contexts';
+import { usePollState } from '../../hooks/usePollState';
+
+export type PollResultsProps = PollContextValue & {
+  additionalScrollViewProps?: Partial<ScrollViewProps>;
+  PollResultsContent?: React.ComponentType;
+};
+
+export const PollResultsContent = ({
+  additionalScrollViewProps,
+}: Pick<PollResultsProps, 'additionalScrollViewProps'>) => {
+  const { name, options, voteCountsByOption } = usePollState();
+
+  const sortedOptions = useMemo(
+    () =>
+      [...options].sort(
+        (a, b) => (voteCountsByOption[b.id] ?? 0) - (voteCountsByOption[a.id] ?? 0),
+      ),
+    [voteCountsByOption, options],
+  );
+
+  const {
+    theme: {
+      colors: { bg_user, black, white },
+      poll: {
+        results: { container, scrollView, title },
+      },
+    },
+  } = useTheme();
+
+  return (
+    <ScrollView
+      style={[styles.scrollView, { backgroundColor: white }, scrollView]}
+      {...additionalScrollViewProps}
+    >
+      <View style={[styles.container, { backgroundColor: bg_user }, container]}>
+        <Text style={[styles.title, { color: black }, title]}>{name}</Text>
+      </View>
+      <View style={{ marginTop: 16 }}>
+        {sortedOptions.map((option) => (
+          <PollResultsItem key={`results_${option.id}`} option={option} />
+        ))}
+      </View>
+    </ScrollView>
+  );
+};
+
+export const PollResults = ({
+  additionalScrollViewProps,
+  message,
+  poll,
+  PollResultsContent: PollResultsContentOverride,
+}: PollResultsProps) => (
+  <PollContextProvider value={{ message, poll }}>
+    {PollResultsContentOverride ? (
+      <PollResultsContentOverride />
+    ) : (
+      <PollResultsContent additionalScrollViewProps={additionalScrollViewProps} />
+    )}
+  </PollContextProvider>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    borderRadius: 12,
+    marginTop: 16,
+    paddingHorizontal: 16,
+    paddingVertical: 18,
+  },
+  scrollView: { flex: 1, marginHorizontal: 16 },
+  title: { fontSize: 16, fontWeight: '500' },
+});

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

@@ -0,0 +1,3 @@
+export * from './PollResults';
+export * from './PollResultItem';
+export * from './PollOptionFullResults';

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

@@ -0,0 +1,8 @@
+export * from './Button';
+export * from './CreatePollIcon';
+export * from './CreatePollOptions';
+export * from './PollAnswersList';
+export * from './PollInputDialog';
+export * from './PollOption';
+export * from './PollResults';
+export * from './PollModalHeader';

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

@@ -0,0 +1,109 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+import uniqBy from 'lodash/uniqBy';
+import type { PollAnswer, PollAnswersQueryParams } from 'stream-chat';
+import { isVoteAnswer } from 'stream-chat';
+
+import { useChatContext, usePollContext } from '../../../contexts';
+
+export type UsePollAnswersPaginationParams = {
+  loadFirstPage?: boolean;
+  paginationParams?: PollAnswersQueryParams;
+};
+
+export type UsePollAnswersReturnType = {
+  error: Error | undefined;
+  hasNextPage: boolean;
+  loading: boolean;
+  loadMore: () => void;
+  next: string | null | undefined;
+  pollAnswers: PollAnswer[];
+};
+
+/**
+ * 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.
+ *
+ * @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.
+ **/
+export const usePollAnswersPagination = ({
+  loadFirstPage = true,
+  paginationParams,
+}: UsePollAnswersPaginationParams = {}): UsePollAnswersReturnType => {
+  const { poll } = usePollContext();
+  const { client } = useChatContext();
+
+  const [pollAnswers, setPollAnswers] = useState<PollAnswer[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<Error>();
+  const cursorRef = useRef<string | null>();
+  const queryInProgress = useRef(false);
+
+  const loadMore = useCallback(async () => {
+    if (cursorRef.current === null || queryInProgress.current) return;
+    const next = cursorRef.current;
+
+    setLoading(true);
+    queryInProgress.current = true;
+    try {
+      const { next: newNext, votes: answers } = await poll.queryAnswers({
+        filter: paginationParams?.filter,
+        options: !next ? paginationParams?.options : { ...paginationParams?.options, next },
+        sort: { updated_at: -1, ...paginationParams?.sort },
+      });
+      cursorRef.current = newNext || null;
+      setPollAnswers((prev) => uniqBy([...prev, ...answers], 'id'));
+    } catch (e) {
+      setError(e as Error);
+    }
+    queryInProgress.current = false;
+    setLoading(false);
+  }, [paginationParams, poll]);
+
+  useEffect(() => {
+    if (!loadFirstPage || pollAnswers.length) return;
+    loadMore();
+  }, [loadFirstPage, loadMore, pollAnswers]);
+
+  useEffect(() => {
+    const castedListeners = ['poll.vote_casted', 'poll.vote_changed'].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)]);
+        }
+      }),
+    );
+
+    const removedListener = client.on('poll.vote_removed', (event) => {
+      if (event.poll?.id && event.poll.id !== poll.id) return;
+      const vote = event.poll_vote;
+      if (vote && isVoteAnswer(vote)) {
+        setPollAnswers(pollAnswers.filter((item) => item.id !== vote.id));
+      }
+    });
+
+    return () => {
+      castedListeners.forEach((listener) => listener.unsubscribe());
+      removedListener.unsubscribe();
+    };
+  }, [client, poll, pollAnswers]);
+
+  return {
+    error,
+    hasNextPage: cursorRef.current !== null,
+    loading,
+    loadMore,
+    next: cursorRef.current,
+    pollAnswers,
+  };
+};