stream-chat-react-native-core 5.31.2-beta.3 → 5.32.0-beta.2

package/src/components/MessageOverlay/OverlayReactions.tsx

@@ -1,8 +1,13 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { StyleSheet, Text, useWindowDimensions, View, ViewStyle } from 'react-native';
 import { FlatList } from 'react-native-gesture-handler';
 import Animated, { interpolate, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
-import Svg, { Circle } from 'react-native-svg';
+
+import { ReactionSortBase } from 'stream-chat';
+
+import { useFetchReactions } from './hooks/useFetchReactions';
+
+import { OverlayReactionsItem } from './OverlayReactionsItem';
 
 import type { Alignment } from '../../contexts/messageContext/MessageContext';
 import type { MessageOverlayContextValue } from '../../contexts/messageOverlayContext/MessageOverlayContext';
@@ -12,7 +17,6 @@ import {
   LoveReaction,
   ThumbsDownReaction,
   ThumbsUpReaction,
-  Unknown,
   WutReaction,
 } from '../../icons';
 
@@ -23,21 +27,6 @@ const styles = StyleSheet.create({
   avatarContainer: {
     padding: 8,
   },
-  avatarInnerContainer: {
-    alignSelf: 'center',
-  },
-  avatarName: {
-    flex: 1,
-    fontSize: 12,
-    fontWeight: '700',
-    paddingTop: 6,
-    textAlign: 'center',
-  },
-  avatarNameContainer: {
-    alignItems: 'center',
-    flexDirection: 'row',
-    flexGrow: 1,
-  },
   container: {
     alignItems: 'center',
     borderRadius: 16,
@@ -52,18 +41,6 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     paddingBottom: 12,
   },
-  reactionBubble: {
-    alignItems: 'center',
-    borderRadius: 24,
-    justifyContent: 'center',
-    position: 'absolute',
-  },
-  reactionBubbleBackground: {
-    borderRadius: 24,
-    height: 24,
-    position: 'absolute',
-    width: 24,
-  },
   title: {
     fontSize: 16,
     fontWeight: '700',
@@ -109,58 +86,62 @@ export type Reaction = {
 export type OverlayReactionsProps<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = Pick<MessageOverlayContextValue<StreamChatGenerics>, 'OverlayReactionsAvatar'> & {
-  reactions: Reaction[];
   showScreen: Animated.SharedValue<number>;
   title: string;
   alignment?: Alignment;
+  messageId?: string;
+  reactions?: Reaction[];
   supportedReactions?: ReactionData[];
 };
 
-type ReactionIconProps = Pick<Reaction, 'type'> & {
-  pathFill: string;
-  size: number;
-  supportedReactions: ReactionData[];
-};
-
-const ReactionIcon = ({ pathFill, size, supportedReactions, type }: ReactionIconProps) => {
-  const Icon = supportedReactions.find((reaction) => reaction.type === type)?.Icon || Unknown;
-  return <Icon height={size} pathFill={pathFill} width={size} />;
+const sort: ReactionSortBase = {
+  created_at: -1,
 };
 
 /**
  * OverlayReactions - A high level component which implements all the logic required for message overlay reactions
  */
 export const OverlayReactions = (props: OverlayReactionsProps) => {
+  const [itemHeight, setItemHeight] = React.useState(0);
   const {
     alignment: overlayAlignment,
+    messageId,
     OverlayReactionsAvatar,
-    reactions,
+    reactions: propReactions,
     showScreen,
     supportedReactions = reactionData,
     title,
   } = props;
   const layoutHeight = useSharedValue(0);
   const layoutWidth = useSharedValue(0);
-
-  const [itemHeight, setItemHeight] = React.useState(0);
+  const {
+    loading,
+    loadNextPage,
+    reactions: fetchedReactions,
+  } = useFetchReactions({
+    messageId,
+    sort,
+  });
+
+  const reactions = useMemo(
+    () =>
+      propReactions ||
+      (fetchedReactions.map((reaction) => ({
+        alignment: 'left',
+        id: reaction.user?.id,
+        image: reaction.user?.image,
+        name: reaction.user?.name,
+        type: reaction.type,
+      })) as Reaction[]),
+    [propReactions, fetchedReactions],
+  );
 
   const {
     theme: {
-      colors: { accent_blue, black, grey_gainsboro, white },
+      colors: { black, white },
       overlay: {
         padding: overlayPadding,
-        reactions: {
-          avatarContainer,
-          avatarName,
-          avatarSize,
-          container,
-          flatListContainer,
-          radius,
-          reactionBubble,
-          reactionBubbleBackground,
-          reactionBubbleBorderRadius,
-          title: titleStyle,
-        },
+        reactions: { avatarContainer, avatarSize, container, flatListContainer, title: titleStyle },
       },
     },
   } = useTheme();
@@ -185,100 +166,13 @@ export const OverlayReactions = (props: OverlayReactionsProps) => {
       (avatarSize + (Number(avatarContainer.padding || 0) || styles.avatarContainer.padding) * 2),
   );
 
-  const renderItem = ({ item }: { item: Reaction }) => {
-    const { alignment = 'left', name, type } = item;
-    const x = avatarSize / 2 - (avatarSize / (radius * 4)) * (alignment === 'left' ? 1 : -1);
-    const y = avatarSize - radius;
-
-    const left =
-      alignment === 'left'
-        ? x -
-          (Number(reactionBubbleBackground.width || 0) || styles.reactionBubbleBackground.width) +
-          radius
-        : x - radius;
-    const top =
-      y -
-      radius -
-      (Number(reactionBubbleBackground.height || 0) || styles.reactionBubbleBackground.height);
-
-    return (
-      <View style={[styles.avatarContainer, avatarContainer]}>
-        <View style={styles.avatarInnerContainer}>
-          <OverlayReactionsAvatar reaction={item} size={avatarSize} />
-          <View style={[StyleSheet.absoluteFill]}>
-            <Svg>
-              <Circle
-                cx={x - (radius * 2 - radius / 4) * (alignment === 'left' ? 1 : -1)}
-                cy={y - radius * 2 - radius / 4}
-                fill={alignment === 'left' ? grey_gainsboro : white}
-                r={radius * 2}
-                stroke={alignment === 'left' ? white : grey_gainsboro}
-                strokeWidth={radius / 2}
-              />
-              <Circle
-                cx={x}
-                cy={y}
-                fill={alignment === 'left' ? grey_gainsboro : white}
-                r={radius}
-                stroke={alignment === 'left' ? white : grey_gainsboro}
-                strokeWidth={radius / 2}
-              />
-            </Svg>
-            <View
-              style={[
-                styles.reactionBubbleBackground,
-                {
-                  backgroundColor: alignment === 'left' ? grey_gainsboro : white,
-                  borderColor: alignment === 'left' ? white : grey_gainsboro,
-                  borderWidth: radius / 2,
-                  left,
-                  top,
-                },
-                reactionBubbleBackground,
-              ]}
-            />
-            <View style={[StyleSheet.absoluteFill]}>
-              <Svg>
-                <Circle
-                  cx={x - (radius * 2 - radius / 4) * (alignment === 'left' ? 1 : -1)}
-                  cy={y - radius * 2 - radius / 4}
-                  fill={alignment === 'left' ? grey_gainsboro : white}
-                  r={radius * 2 - radius / 2}
-                />
-              </Svg>
-            </View>
-            <View
-              style={[
-                styles.reactionBubble,
-                {
-                  backgroundColor: alignment === 'left' ? grey_gainsboro : white,
-                  height:
-                    (reactionBubbleBorderRadius || styles.reactionBubble.borderRadius) - radius / 2,
-                  left,
-                  top,
-                  width:
-                    (reactionBubbleBorderRadius || styles.reactionBubble.borderRadius) - radius / 2,
-                },
-                reactionBubble,
-              ]}
-            >
-              <ReactionIcon
-                pathFill={accent_blue}
-                size={(reactionBubbleBorderRadius || styles.reactionBubble.borderRadius) / 2}
-                supportedReactions={supportedReactions}
-                type={type}
-              />
-            </View>
-          </View>
-        </View>
-        <View style={styles.avatarNameContainer}>
-          <Text numberOfLines={2} style={[styles.avatarName, { color: black }, avatarName]}>
-            {name}
-          </Text>
-        </View>
-      </View>
-    );
-  };
+  const renderItem = ({ item }: { item: Reaction }) => (
+    <OverlayReactionsItem
+      OverlayReactionsAvatar={OverlayReactionsAvatar}
+      reaction={item}
+      supportedReactions={supportedReactions}
+    />
+  );
 
   const showScreenStyle = useAnimatedStyle<ViewStyle>(
     () => ({
@@ -316,33 +210,38 @@ export const OverlayReactions = (props: OverlayReactionsProps) => {
         ]}
       >
         <Text style={[styles.title, { color: black }, titleStyle]}>{title}</Text>
-        <FlatList
-          contentContainerStyle={styles.flatListContentContainer}
-          data={filteredReactions}
-          key={numColumns}
-          keyExtractor={({ name }, index) => `${name}_${index}`}
-          numColumns={numColumns}
-          renderItem={renderItem}
-          scrollEnabled={filteredReactions.length / numColumns > 1}
-          style={[
-            styles.flatListContainer,
-            flatListContainer,
-            {
-              // we show the item height plus a little extra to tease for scrolling if there are more than one row
-              maxHeight:
-                itemHeight + (filteredReactions.length / numColumns > 1 ? itemHeight / 4 : 8),
-            },
-          ]}
-        />
+        {!loading && (
+          <FlatList
+            contentContainerStyle={styles.flatListContentContainer}
+            data={filteredReactions}
+            key={numColumns}
+            keyExtractor={({ id, name }, index) => `${name}${id}_${index}`}
+            numColumns={numColumns}
+            onEndReached={loadNextPage}
+            renderItem={renderItem}
+            scrollEnabled={filteredReactions.length / numColumns > 1}
+            style={[
+              styles.flatListContainer,
+              flatListContainer,
+              {
+                // we show the item height plus a little extra to tease for scrolling if there are more than one row
+                maxHeight:
+                  itemHeight + (filteredReactions.length / numColumns > 1 ? itemHeight / 4 : 8),
+              },
+            ]}
+          />
+        )}
         {/* The below view is unseen by the user, we use it to compute the height that the item must be */}
-        <View
-          onLayout={({ nativeEvent: { layout } }) => {
-            setItemHeight(layout.height);
-          }}
-          style={[styles.unseenItemContainer, styles.flatListContentContainer]}
-        >
-          {renderItem({ item: filteredReactions[0] })}
-        </View>
+        {!loading && (
+          <View
+            onLayout={({ nativeEvent: { layout } }) => {
+              setItemHeight(layout.height);
+            }}
+            style={[styles.unseenItemContainer, styles.flatListContentContainer]}
+          >
+            {renderItem({ item: filteredReactions[0] })}
+          </View>
+        )}
       </Animated.View>
     </>
   );

package/src/components/MessageOverlay/OverlayReactionsItem.tsx

@@ -0,0 +1,188 @@
+import React from 'react';
+
+import { StyleSheet, Text, View } from 'react-native';
+import Svg, { Circle } from 'react-native-svg';
+
+import { ReactionResponse } from 'stream-chat';
+
+import { Reaction } from './OverlayReactions';
+
+import { useChatContext } from '../../contexts/chatContext/ChatContext';
+import type { MessageOverlayContextValue } from '../../contexts/messageOverlayContext/MessageOverlayContext';
+import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import { Unknown } from '../../icons';
+
+import type { DefaultStreamChatGenerics } from '../../types/types';
+import { ReactionData } from '../../utils/utils';
+
+export type OverlayReactionsItemProps<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Pick<MessageOverlayContextValue<StreamChatGenerics>, 'OverlayReactionsAvatar'> & {
+  reaction: Reaction;
+  supportedReactions: ReactionData[];
+};
+
+type ReactionIconProps<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Pick<ReactionResponse<StreamChatGenerics>, 'type'> & {
+  pathFill: string;
+  size: number;
+  supportedReactions: ReactionData[];
+};
+
+const ReactionIcon = ({ pathFill, size, supportedReactions, type }: ReactionIconProps) => {
+  const Icon = supportedReactions.find((reaction) => reaction.type === type)?.Icon || Unknown;
+  return <Icon height={size} pathFill={pathFill} width={size} />;
+};
+
+export const OverlayReactionsItem = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>({
+  OverlayReactionsAvatar,
+  reaction,
+  supportedReactions,
+}: OverlayReactionsItemProps<StreamChatGenerics>) => {
+  const { id, name, type } = reaction;
+  const {
+    theme: {
+      colors: { accent_blue, black, grey_gainsboro, white },
+      overlay: {
+        reactions: {
+          avatarContainer,
+          avatarName,
+          avatarSize,
+          radius,
+          reactionBubble,
+          reactionBubbleBackground,
+          reactionBubbleBorderRadius,
+        },
+      },
+    },
+  } = useTheme();
+  const { client } = useChatContext();
+  const alignment = client.userID && client.userID === id ? 'right' : 'left';
+  const x = avatarSize / 2 - (avatarSize / (radius * 4)) * (alignment === 'left' ? 1 : -1);
+  const y = avatarSize - radius;
+
+  const left =
+    alignment === 'left'
+      ? x -
+        (Number(reactionBubbleBackground.width || 0) || styles.reactionBubbleBackground.width) +
+        radius
+      : x - radius;
+  const top =
+    y -
+    radius -
+    (Number(reactionBubbleBackground.height || 0) || styles.reactionBubbleBackground.height);
+
+  return (
+    <View style={[styles.avatarContainer, avatarContainer]}>
+      <View style={styles.avatarInnerContainer}>
+        <OverlayReactionsAvatar reaction={reaction} size={avatarSize} />
+        <View style={[StyleSheet.absoluteFill]}>
+          <Svg>
+            <Circle
+              cx={x - (radius * 2 - radius / 4) * (alignment === 'left' ? 1 : -1)}
+              cy={y - radius * 2 - radius / 4}
+              fill={alignment === 'left' ? grey_gainsboro : white}
+              r={radius * 2}
+              stroke={alignment === 'left' ? white : grey_gainsboro}
+              strokeWidth={radius / 2}
+            />
+            <Circle
+              cx={x}
+              cy={y}
+              fill={alignment === 'left' ? grey_gainsboro : white}
+              r={radius}
+              stroke={alignment === 'left' ? white : grey_gainsboro}
+              strokeWidth={radius / 2}
+            />
+          </Svg>
+          <View
+            style={[
+              styles.reactionBubbleBackground,
+              {
+                backgroundColor: alignment === 'left' ? grey_gainsboro : white,
+                borderColor: alignment === 'left' ? white : grey_gainsboro,
+                borderWidth: radius / 2,
+                left,
+                top,
+              },
+              reactionBubbleBackground,
+            ]}
+          />
+          <View style={[StyleSheet.absoluteFill]}>
+            <Svg>
+              <Circle
+                cx={x - (radius * 2 - radius / 4) * (alignment === 'left' ? 1 : -1)}
+                cy={y - radius * 2 - radius / 4}
+                fill={alignment === 'left' ? grey_gainsboro : white}
+                r={radius * 2 - radius / 2}
+              />
+            </Svg>
+          </View>
+          <View
+            style={[
+              styles.reactionBubble,
+              {
+                backgroundColor: alignment === 'left' ? grey_gainsboro : white,
+                height:
+                  (reactionBubbleBorderRadius || styles.reactionBubble.borderRadius) - radius / 2,
+                left,
+                top,
+                width:
+                  (reactionBubbleBorderRadius || styles.reactionBubble.borderRadius) - radius / 2,
+              },
+              reactionBubble,
+            ]}
+          >
+            <ReactionIcon
+              pathFill={accent_blue}
+              size={(reactionBubbleBorderRadius || styles.reactionBubble.borderRadius) / 2}
+              supportedReactions={supportedReactions}
+              type={type}
+            />
+          </View>
+        </View>
+      </View>
+      <View style={styles.avatarNameContainer}>
+        <Text numberOfLines={2} style={[styles.avatarName, { color: black }, avatarName]}>
+          {name}
+        </Text>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  avatarContainer: {
+    padding: 8,
+  },
+  avatarInnerContainer: {
+    alignSelf: 'center',
+  },
+  avatarName: {
+    flex: 1,
+    fontSize: 12,
+    fontWeight: '700',
+    paddingTop: 6,
+    textAlign: 'center',
+  },
+  avatarNameContainer: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    flexGrow: 1,
+  },
+  reactionBubble: {
+    alignItems: 'center',
+    borderRadius: 24,
+    justifyContent: 'center',
+    position: 'absolute',
+  },
+  reactionBubbleBackground: {
+    borderRadius: 24,
+    height: 24,
+    position: 'absolute',
+    width: 24,
+  },
+});

package/src/components/MessageOverlay/hooks/useFetchReactions.ts

@@ -0,0 +1,85 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+
+import { ReactionResponse, ReactionSort } from 'stream-chat';
+
+import { useChatContext } from '../../../contexts/chatContext/ChatContext';
+import { getReactionsForFilterSort } from '../../../store/apis/getReactionsforFilterSort';
+import { DefaultStreamChatGenerics } from '../../../types/types';
+
+export type UseFetchReactionParams<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = {
+  limit?: number;
+  messageId?: string;
+  reactionType?: string;
+  sort?: ReactionSort<StreamChatGenerics>;
+};
+
+export const useFetchReactions = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>({
+  limit = 25,
+  messageId,
+  reactionType,
+  sort,
+}: UseFetchReactionParams) => {
+  const [reactions, setReactions] = useState<ReactionResponse<StreamChatGenerics>[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [next, setNext] = useState<string | undefined>(undefined);
+
+  const { client, enableOfflineSupport } = useChatContext();
+
+  const sortString = useMemo(() => JSON.stringify(sort), [sort]);
+
+  const fetchReactions = useCallback(async () => {
+    const loadOfflineReactions = () => {
+      if (!messageId) return;
+      const reactionsFromDB = getReactionsForFilterSort({
+        currentMessageId: messageId,
+        filters: reactionType ? { type: reactionType } : {},
+        sort,
+      });
+      if (reactionsFromDB) {
+        setReactions(reactionsFromDB);
+        setLoading(false);
+      }
+    };
+
+    const loadOnlineReactions = async () => {
+      if (!messageId) return;
+      const response = await client.queryReactions(
+        messageId,
+        reactionType ? { type: reactionType } : {},
+        sort,
+        { limit, next },
+      );
+      if (response) {
+        setNext(response.next);
+        setReactions((prevReactions) => [...prevReactions, ...response.reactions]);
+        setLoading(false);
+      }
+    };
+
+    try {
+      if (enableOfflineSupport) {
+        loadOfflineReactions();
+      } else {
+        await loadOnlineReactions();
+      }
+    } catch (error) {
+      console.log('Error fetching reactions: ', error);
+    }
+  }, [client, messageId, reactionType, sortString, next, enableOfflineSupport]);
+
+  const loadNextPage = useCallback(async () => {
+    if (next) {
+      await fetchReactions();
+    }
+  }, [fetchReactions]);
+
+  useEffect(() => {
+    fetchReactions();
+  }, [messageId, reactionType, sortString]);
+
+  return { loading, loadNextPage, reactions };
+};