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

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

@@ -0,0 +1,119 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+import uniqBy from 'lodash/uniqBy';
+import { isVoteAnswer, PollOption, PollOptionVotesQueryParams, PollVote } from 'stream-chat';
+
+import { useChatContext, usePollContext } from '../../../contexts';
+
+export type UsePollOptionVotesPaginationParams = {
+  option: PollOption;
+  loadFirstPage?: boolean;
+  paginationParams?: PollOptionVotesQueryParams;
+};
+
+export type UsePollVotesReturnType = {
+  error: Error | undefined;
+  hasNextPage: boolean;
+  loading: boolean;
+  loadMore: () => void;
+  next: string | null | undefined;
+  votes: PollVote[];
+};
+
+/**
+ * A hook that queries votes for a given Poll and returns them in a paginated fashion.
+ * Should be used instead of the latestVotesByOption property within the reactive state in the
+ * event that we need more than the top 10 votes for an option. The returned property votes will
+ * automatically be updated and trigger a state change when paginating further. Querying for votes
+ * can only be done on an option by option basis.
+ *
+ * @param option {PollOption} The option for which we want to load the votes.
+ * @param loadFirstPage {boolean} Signifies whether the first page should be automatically loaded whenever
+ * the hook is first called.
+ * @param paginationParams {PollOptionVotesQueryParams} The pagination params we might want to use for our custom
+ * needs when invoking the hook.
+ *
+ * @returns {UsePollVotesReturnType} An object containing all of the needed pagination values as well as the
+ * answers.
+ **/
+
+export const usePollOptionVotesPagination = ({
+  loadFirstPage = true,
+  option,
+  paginationParams,
+}: UsePollOptionVotesPaginationParams): UsePollVotesReturnType => {
+  const { poll } = usePollContext();
+  const { client } = useChatContext();
+
+  const [votes, setVotes] = useState<PollVote[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<Error>();
+  const cursorRef = useRef<string | null>();
+  const queryInProgress = useRef(false);
+  const optionFilter = useMemo(() => ({ option_id: option.id }), [option.id]);
+
+  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 } = await poll.queryOptionVotes({
+        filter: { ...optionFilter, ...paginationParams?.filter },
+        options: !next ? paginationParams?.options : { ...paginationParams?.options, next },
+        sort: { created_at: -1, ...paginationParams?.sort },
+      });
+      cursorRef.current = newNext || null;
+      setVotes((prev) => uniqBy([...prev, ...votes], 'id'));
+    } catch (e) {
+      setError(e as Error);
+    }
+    queryInProgress.current = false;
+    setLoading(false);
+  }, [optionFilter, paginationParams, poll]);
+
+  useEffect(() => {
+    if (!loadFirstPage || votes.length) return;
+    loadMore();
+  }, [loadFirstPage, loadMore, votes]);
+
+  // TODO: Possibly generalize these in a utility hook.
+  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)) {
+          if (vote.option_id === option.id) {
+            setVotes([vote, ...votes.filter((v) => v.id !== vote.id)]);
+          } else if (eventName === 'poll.vote_changed') {
+            setVotes(votes.filter((v) => v.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) && vote.option_id === option.id) {
+        setVotes(votes.filter((v) => v.id !== vote.id));
+      }
+    });
+
+    return () => {
+      castedListeners.forEach((listener) => listener.unsubscribe());
+      removedListener.unsubscribe();
+    };
+  }, [client, option, poll, votes]);
+
+  return {
+    error,
+    hasNextPage: cursorRef.current !== null,
+    loading,
+    loadMore,
+    next: cursorRef.current,
+    votes,
+  };
+};

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

@@ -0,0 +1,122 @@
+import { useCallback } from 'react';
+
+import {
+  APIResponse,
+  CastVoteAPIResponse,
+  PollAnswer,
+  PollOption,
+  PollState,
+  PollVote,
+  UpdatePollAPIResponse,
+  UserResponse,
+  VotingVisibility,
+} from 'stream-chat';
+
+import { usePollStateStore } from './usePollStateStore';
+
+import { usePollContext } from '../../../contexts';
+
+import { DefaultStreamChatGenerics } from '../../../types/types';
+
+export type UsePollStateSelectorReturnType = {
+  allowAnswers: boolean | undefined;
+  allowUserSuggestedOptions: boolean | undefined;
+  answersCount: number;
+  createdBy: UserResponse | null;
+  enforceUniqueVote: boolean;
+  isClosed: boolean | undefined;
+  latestVotesByOption: Record<string, PollVote[]>;
+  maxVotedOptionIds: string[];
+  maxVotesAllowed: number;
+  name: string;
+  options: PollOption[];
+  ownAnswer: PollAnswer | undefined;
+  ownVotesByOptionId: Record<string, PollVote>;
+  voteCountsByOption: Record<string, number>;
+  votingVisibility: VotingVisibility | undefined;
+};
+
+export type UsePollStateReturnType<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = UsePollStateSelectorReturnType & {
+  addComment: (
+    answerText: string,
+  ) => Promise<APIResponse & CastVoteAPIResponse<StreamChatGenerics>>;
+  addOption: (optionText: string) => Promise<void>;
+  endVote: () => Promise<APIResponse & UpdatePollAPIResponse<StreamChatGenerics>>;
+};
+
+const selector = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(
+  nextValue: PollState<StreamChatGenerics>,
+): UsePollStateSelectorReturnType => ({
+  allowAnswers: nextValue.allow_answers,
+  allowUserSuggestedOptions: nextValue.allow_user_suggested_options,
+  answersCount: nextValue.answers_count,
+  createdBy: nextValue.created_by,
+  enforceUniqueVote: nextValue.enforce_unique_vote,
+  isClosed: nextValue.is_closed,
+  latestVotesByOption: nextValue.latest_votes_by_option,
+  maxVotedOptionIds: nextValue.maxVotedOptionIds,
+  maxVotesAllowed: nextValue.max_votes_allowed,
+  name: nextValue.name,
+  options: nextValue.options,
+  ownAnswer: nextValue.ownAnswer,
+  ownVotesByOptionId: nextValue.ownVotesByOptionId,
+  voteCountsByOption: nextValue.vote_counts_by_option,
+  votingVisibility: nextValue.voting_visibility,
+});
+
+export const usePollState = (): UsePollStateReturnType => {
+  const { message, poll } = usePollContext();
+  const {
+    allowAnswers,
+    allowUserSuggestedOptions,
+    answersCount,
+    createdBy,
+    enforceUniqueVote,
+    isClosed,
+    latestVotesByOption,
+    maxVotedOptionIds,
+    maxVotesAllowed,
+    name,
+    options,
+    ownAnswer,
+    ownVotesByOptionId,
+    voteCountsByOption,
+    votingVisibility,
+  } = usePollStateStore(selector);
+
+  const addOption = useCallback(
+    async (optionText: string) => {
+      const { poll_option } = await poll.createOption({ text: optionText });
+      await poll.castVote(poll_option.id, message.id);
+    },
+    [message, poll],
+  );
+  const addComment = useCallback(
+    (answerText: string) => poll.addAnswer(answerText, message.id),
+    [message.id, poll],
+  );
+  const endVote = useCallback(() => poll.close(), [poll]);
+
+  return {
+    addComment,
+    addOption,
+    allowAnswers,
+    allowUserSuggestedOptions,
+    answersCount,
+    createdBy,
+    endVote,
+    enforceUniqueVote,
+    isClosed,
+    latestVotesByOption,
+    maxVotedOptionIds,
+    maxVotesAllowed,
+    name,
+    options,
+    ownAnswer,
+    ownVotesByOptionId,
+    voteCountsByOption,
+    votingVisibility,
+  };
+};

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

@@ -0,0 +1,13 @@
+import { PollState } from 'stream-chat';
+
+import { usePollContext } from '../../../contexts';
+import { useStateStore } from '../../../hooks';
+
+export const usePollStateStore = <
+  T extends Readonly<Record<string, unknown> | Readonly<unknown[]>>,
+>(
+  selector: (nextValue: PollState) => T,
+): T => {
+  const { poll } = usePollContext();
+  return useStateStore(poll.state, selector);
+};

package/src/components/Poll/index.ts

@@ -0,0 +1,10 @@
+// components
+export * from './Poll';
+export * from './CreatePollContent';
+export * from './components';
+
+// hooks
+export * from './hooks/usePollState';
+export * from './hooks/usePollStateStore';
+export * from './hooks/usePollAnswersPagination';
+export * from './hooks/usePollOptionVotesPagination';

package/src/components/ProgressControl/ProgressControl.tsx

@@ -1,9 +1,10 @@
 import React, { useEffect } from 'react';
 import { Dimensions, StyleSheet, View } from 'react-native';
-import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import { PanGestureHandler } from 'react-native-gesture-handler';
 import Animated, {
   cancelAnimation,
   runOnJS,
+  useAnimatedGestureHandler,
   useAnimatedStyle,
   useSharedValue,
 } from 'react-native-reanimated';
@@ -49,8 +50,6 @@ export const ProgressControl = React.memo(
       testID,
       width,
     } = props;
-    const state = useSharedValue(0);
-    const translateX = useSharedValue(0);
     const { width: windowWidth } = Dimensions.get('screen');
     const widthInNumbers = width
       ? typeof width === 'string'
@@ -63,26 +62,9 @@ export const ProgressControl = React.memo(
         progressControl: { container, filledColor: filledColorFromTheme, filledStyles, thumb },
       },
     } = useTheme();
-    const pan = Gesture.Pan()
-      .maxPointers(1)
-      .onStart(() => {
-        if (onPlayPause) runOnJS(onPlayPause)(true);
-        cancelAnimation(translateX);
-        state.value = translateX.value;
-      })
-      .onChange((event) => {
-        state.value = translateX.value + event.translationX;
-        if (state.value > widthInNumbers) state.value = widthInNumbers;
-        else if (state.value < 0) state.value = 0;
-      })
-      .onEnd(() => {
-        translateX.value = state.value;
-        const dragFinishLocationInSeconds = (state.value / widthInNumbers) * duration;
-        if (onProgressDrag) runOnJS(onProgressDrag)(dragFinishLocationInSeconds);
-        if (onPlayPause) runOnJS(onPlayPause)(false);
-      })
-      .withTestId(testID);
 
+    const state = useSharedValue(0);
+    const translateX = useSharedValue(0);
     const filledColor = filledColorFromProp || filledColorFromTheme;
 
     useEffect(() => {
@@ -102,16 +84,43 @@ export const ProgressControl = React.memo(
       transform: [{ translateX: state.value }],
     }));
 
+    const onGestureEvent = useAnimatedGestureHandler(
+      {
+        onActive: (event) => {
+          state.value = translateX.value + event.translationX;
+          if (state.value > widthInNumbers) state.value = widthInNumbers;
+          else if (state.value < 0) state.value = 0;
+        },
+        onFinish: () => {
+          translateX.value = state.value;
+          const dragFinishLocationInSeconds = (state.value / widthInNumbers) * duration;
+          if (onProgressDrag) runOnJS(onProgressDrag)(dragFinishLocationInSeconds);
+          if (onPlayPause) runOnJS(onPlayPause)(false);
+        },
+        onStart: () => {
+          if (onPlayPause) runOnJS(onPlayPause)(true);
+          cancelAnimation(translateX);
+          state.value = translateX.value;
+        },
+      },
+      [duration, widthInNumbers],
+    );
+
     return (
       <View
         style={[styles.container, { backgroundColor: grey_dark, width: widthInNumbers }, container]}
       >
         <Animated.View style={[styles.filledStyle, animatedStyles, filledStyles]} />
-        <GestureDetector gesture={pan}>
+
+        <PanGestureHandler
+          maxPointers={1}
+          onGestureEvent={onProgressDrag ? onGestureEvent : undefined}
+          testID={testID}
+        >
           <Animated.View style={[thumbStyles, thumb]}>
-            {onProgressDrag ? <ProgressControlThumb /> : null}
+            {onProgressDrag && <ProgressControlThumb />}
           </Animated.View>
-        </GestureDetector>
+        </PanGestureHandler>
       </View>
     );
   },
@@ -128,6 +137,7 @@ export const ProgressControl = React.memo(
 
 const styles = StyleSheet.create({
   container: {
+    borderRadius: 50,
     height,
   },
   filledStyle: {
@@ -137,15 +147,15 @@ const styles = StyleSheet.create({
     borderRadius: 5,
     borderWidth: 0.2,
     elevation: 6,
-    height: 30,
+    height: 20,
     shadowOffset: {
       height: 3,
       width: 0,
     },
     shadowOpacity: 0.27,
     shadowRadius: 4.65,
-    top: -15,
-    width: 6,
+    top: -11,
+    width: 5,
   },
 });
 ProgressControl.displayName = 'ProgressControl';

package/src/components/ProgressControl/WaveProgressBar.tsx

@@ -1,7 +1,12 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import { Platform, Pressable, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
-import { Gesture, GestureDetector } from 'react-native-gesture-handler';
-import Animated, { runOnJS, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
+import { PanGestureHandler } from 'react-native-gesture-handler';
+import Animated, {
+  runOnJS,
+  useAnimatedGestureHandler,
+  useAnimatedStyle,
+  useSharedValue,
+} from 'react-native-reanimated';
 
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { triggerHaptic } from '../../native';
@@ -63,31 +68,6 @@ export const WaveProgressBar = React.memo(
     } = useTheme();
     const state = useSharedValue(0);
 
-    const pan = Gesture.Pan()
-      .maxPointers(1)
-      .onStart(() => {
-        if (onPlayPause) runOnJS(onPlayPause)(true);
-        state.value = endPosition;
-      })
-      .onChange((event) => {
-        const stage = Math.floor((endPosition + event.translationX) / (WAVEFORM_WIDTH * 2));
-        runOnJS(setCurrentWaveformProgress)(stage);
-        state.value = stage * (WAVEFORM_WIDTH * 2);
-        if (state.value < 0) {
-          state.value = 0;
-        } else if (state.value > amplitudesCount * (WAVEFORM_WIDTH * 2)) {
-          state.value = (amplitudesCount - 1) * (WAVEFORM_WIDTH * 2);
-        } else {
-          runOnJS(triggerHaptic)('impactLight');
-        }
-      })
-      .onEnd(() => {
-        const stage = Math.floor(state.value / (WAVEFORM_WIDTH * 2));
-        runOnJS(setEndPosition)(state.value);
-        if (onProgressDrag) runOnJS(onProgressDrag)(stage);
-        if (onPlayPause) runOnJS(onPlayPause)(false);
-      });
-
     useEffect(() => {
       const stageProgress = Math.floor(
         progress * (showProgressDrag ? amplitudesCount - 1 : amplitudesCount),
@@ -111,6 +91,34 @@ export const WaveProgressBar = React.memo(
       transform: [{ translateX: state.value }],
     }));
 
+    const onGestureEvent = useAnimatedGestureHandler(
+      {
+        onActive: (event) => {
+          const stage = Math.floor((endPosition + event.translationX) / (WAVEFORM_WIDTH * 2));
+          runOnJS(setCurrentWaveformProgress)(stage);
+          state.value = stage * (WAVEFORM_WIDTH * 2);
+          if (state.value < 0) {
+            state.value = 0;
+          } else if (state.value > amplitudesCount * (WAVEFORM_WIDTH * 2)) {
+            state.value = (amplitudesCount - 1) * (WAVEFORM_WIDTH * 2);
+          } else {
+            runOnJS(triggerHaptic)('impactLight');
+          }
+        },
+        onFinish: () => {
+          const stage = Math.floor(state.value / (WAVEFORM_WIDTH * 2));
+          runOnJS(setEndPosition)(state.value);
+          if (onProgressDrag) runOnJS(onProgressDrag)(stage);
+          if (onPlayPause) runOnJS(onPlayPause)(false);
+        },
+        onStart: () => {
+          if (onPlayPause) runOnJS(onPlayPause)(true);
+          state.value = endPosition;
+        },
+      },
+      [amplitudesCount, endPosition],
+    );
+
     return (
       <View style={[styles.container, container]}>
         {resampledWaveformData.map((waveform, index) => (
@@ -128,11 +136,11 @@ export const WaveProgressBar = React.memo(
           />
         ))}
         {showProgressDrag && onProgressDrag && (
-          <GestureDetector gesture={pan}>
+          <PanGestureHandler maxPointers={1} onGestureEvent={onGestureEvent}>
             <Animated.View style={[thumbStyles, thumb]}>
               <ProgressControlThumb />
             </Animated.View>
-          </GestureDetector>
+          </PanGestureHandler>
         )}
       </View>
     );

package/src/components/Reply/Reply.tsx

@@ -8,7 +8,6 @@ import merge from 'lodash/merge';
 
 import type { Attachment } from 'stream-chat';
 
-import { useChatConfigContext } from '../../contexts/chatConfigContext/ChatConfigContext';
 import { useMessageContext } from '../../contexts/messageContext/MessageContext';
 import {
   MessageInputContext,
@@ -143,7 +142,6 @@ const ReplyWithContext = <
     styles: stylesProp = {},
     t,
   } = props;
-  const { resizableCDNHosts } = useChatConfigContext();
 
   const [error, setError] = useState(false);
 
@@ -169,14 +167,14 @@ const ReplyWithContext = <
     },
   } = useTheme();
 
-  const messageText = quotedMessage ? quotedMessage.text : '';
+  const messageText = typeof quotedMessage === 'boolean' ? '' : quotedMessage.text || '';
 
   const emojiOnlyText = useMemo(() => {
     if (!messageText) return false;
     return hasOnlyEmojis(messageText);
   }, [messageText]);
 
-  if (!quotedMessage) return null;
+  if (typeof quotedMessage === 'boolean') return null;
 
   const lastAttachment = quotedMessage.attachments?.slice(-1)[0] as Attachment<StreamChatGenerics>;
   const messageType = lastAttachment && getMessageType(lastAttachment);
@@ -232,7 +230,6 @@ const ReplyWithContext = <
                     (stylesProp.imageAttachment?.height as number) ||
                     (imageAttachment?.height as number) ||
                     styles.imageAttachment.height,
-                  resizableCDNHosts,
                   url: (lastAttachment.image_url ||
                     lastAttachment.thumb_url ||
                     lastAttachment.og_scrape_url) as string,
@@ -265,6 +262,8 @@ const ReplyWithContext = <
               text:
                 quotedMessage.type === 'deleted'
                   ? `_${t('Message deleted')}_`
+                  : quotedMessage.poll
+                  ? `📊 ${quotedMessage.poll.name}`
                   : quotedMessage.text
                   ? quotedMessage.text.length > 170
                     ? `${quotedMessage.text.slice(0, 170)}...`