stream-chat-react-native-core/src/components/MessageList/hooks/useMessageGroupStyles.ts

The official React Native and Expo components for Stream Chat, a service for building chat applications

import { useMemo } from 'react';

import { LocalMessage } from 'stream-chat';

import { useMessageDateSeparator } from './useMessageDateSeparator';

import { MessagesContextValue } from '../../../contexts/messagesContext/MessagesContext';
import { getGroupStyle } from '../utils/getGroupStyles';

/**
 * Hook to get the group styles for a message
 */
export const useMessageGroupStyles = ({
  noGroupByUser,
  dateSeparatorDate,
  maxTimeBetweenGroupedMessages,
  message,
  previousMessage,
  nextMessage,
  getMessageGroupStyle = getGroupStyle,
}: {
  noGroupByUser?: boolean;
  getMessageGroupStyle: MessagesContextValue['getMessageGroupStyle'];
  dateSeparatorDate?: Date;
  maxTimeBetweenGroupedMessages?: number;
  message: LocalMessage;
  previousMessage?: LocalMessage;
  nextMessage?: LocalMessage;
}) => {
  // This is needed to calculate the group styles for the next message
  const nextMessageDateSeparatorDate = useMessageDateSeparator({
    message: nextMessage,
    previousMessage: message,
  });

  const groupStyles = useMemo(() => {
    if (noGroupByUser) {
      return [];
    }
    return getMessageGroupStyle({
      dateSeparatorDate,
      maxTimeBetweenGroupedMessages,
      message,
      nextMessage,
      nextMessageDateSeparatorDate,
      previousMessage,
    });
  }, [
    noGroupByUser,
    getMessageGroupStyle,
    dateSeparatorDate,
    maxTimeBetweenGroupedMessages,
    message,
    nextMessage,
    nextMessageDateSeparatorDate,
    previousMessage,
  ]);

  return groupStyles;
};