@linktr.ee/messaging-react 3.6.2-rc-1783311731 → 3.6.2-rc-1783317817

package/src/components/CustomMessage/SentMessageDeliveryStatus.test.tsx

@@ -1,107 +0,0 @@
-import React from 'react'
-import {
-  useChannelStateContext,
-  useChatContext,
-  useMessageContext,
-} from 'stream-chat-react'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-
-import { renderWithProviders, screen, within } from '../../test/utils'
-
-import { SentMessageDeliveryStatus } from './SentMessageDeliveryStatus'
-
-// stream-chat-react's `MessageStatus` owns the outer gating (own message, not
-// error, not in a thread) and only exposes a terminal state once a message is
-// stored — Stream's tested code. What this component owns is the "Delivered"
-// label wired into the terminal slots (sent/delivered/read), its "last own
-// message" gate derived from live channel state, and suppressing the sending
-// spinner. Mock `MessageStatus` to render the slots it was handed, and the
-// context hooks the label reads.
-vi.mock('stream-chat-react', () => ({
-  useMessageContext: vi.fn(),
-  useChannelStateContext: vi.fn(),
-  useChatContext: vi.fn(),
-  MessageStatus: ({
-    MessageSentStatus,
-    MessageDeliveredStatus,
-    MessageReadStatus,
-    MessageSendingStatus,
-  }: Record<string, React.ComponentType>) => (
-    <div>
-      <div data-testid="sent-slot">
-        <MessageSentStatus />
-      </div>
-      <div data-testid="delivered-slot">
-        <MessageDeliveredStatus />
-      </div>
-      <div data-testid="read-slot">
-        <MessageReadStatus />
-      </div>
-      <div data-testid="sending-slot">
-        <MessageSendingStatus />
-      </div>
-    </div>
-  ),
-}))
-
-const mockedUseMessageContext = vi.mocked(useMessageContext)
-const mockedUseChannelStateContext = vi.mocked(useChannelStateContext)
-const mockedUseChatContext = vi.mocked(useChatContext)
-
-// A run where the viewer ('me') sent the first and last messages, with an
-// incoming message in between — the case that broke the memo-based approach.
-const CHANNEL_MESSAGES = [
-  { id: 'own-1', user: { id: 'me' } },
-  { id: 'their-1', user: { id: 'them' } },
-  { id: 'own-2', user: { id: 'me' } },
-]
-
-const TERMINAL_SLOTS = ['sent-slot', 'delivered-slot', 'read-slot'] as const
-
-describe('SentMessageDeliveryStatus', () => {
-  beforeEach(() => {
-    mockedUseChatContext.mockReturnValue({ client: { user: { id: 'me' } } } as never)
-    mockedUseChannelStateContext.mockReturnValue({
-      messages: CHANNEL_MESSAGES,
-    } as never)
-  })
-
-  it('renders "Delivered" in every terminal slot for the last own message', () => {
-    // delivered/read fire ahead of sent in receipt channels, so all three
-    // must show the label — never Stream's default delivered icon / read
-    // avatars.
-    mockedUseMessageContext.mockReturnValue({
-      message: { id: 'own-2' },
-    } as never)
-
-    renderWithProviders(<SentMessageDeliveryStatus />)
-
-    for (const slot of TERMINAL_SLOTS) {
-      expect(
-        within(screen.getByTestId(slot)).getByText('Delivered')
-      ).toBeInTheDocument()
-    }
-  })
-
-  it('renders nothing for an earlier own message even though one is the last own message', () => {
-    mockedUseMessageContext.mockReturnValue({
-      message: { id: 'own-1' },
-    } as never)
-
-    renderWithProviders(<SentMessageDeliveryStatus />)
-
-    for (const slot of TERMINAL_SLOTS) {
-      expect(screen.getByTestId(slot)).toBeEmptyDOMElement()
-    }
-  })
-
-  it('always suppresses the sending spinner', () => {
-    mockedUseMessageContext.mockReturnValue({
-      message: { id: 'own-2' },
-    } as never)
-
-    renderWithProviders(<SentMessageDeliveryStatus />)
-
-    expect(screen.getByTestId('sending-slot')).toBeEmptyDOMElement()
-  })
-})

package/src/components/CustomMessage/SentMessageDeliveryStatus.tsx

@@ -1,86 +0,0 @@
-import { ChecksIcon } from '@phosphor-icons/react'
-import { useMemo } from 'react'
-import {
-  MessageStatus,
-  useChannelStateContext,
-  useChatContext,
-  useMessageContext,
-} from 'stream-chat-react'
-
-/**
- * "✓✓ Delivered" label, wired into *every* terminal `MessageStatus` state
- * (sent / delivered / read).
- *
- * Two reasons this is more than a static label:
- *
- * 1. `MessageStatus` picks its `delivered`/`read` branches ahead of `sent`
- *    whenever Stream has `deliveredTo`/`readBy`, and — unlike `sent` — those
- *    branches aren't gated to the last own message. So we override all three
- *    terminal slots with this same label (never Stream's default delivered
- *    icon / read avatars — Read is out of scope) and re-apply the "last own
- *    message" gate ourselves.
- *
- * 2. We derive "last own message" from **live channel state**, not the
- *    message context's `lastOwnMessage`. Stream's `Message` is memoised by
- *    `areMessagePropsEqual`, which does not compare `lastOwnMessage`; a
- *    previous own row whose message/grouping props are unchanged (e.g. after
- *    an intervening incoming message) never re-renders, so its context
- *    `lastOwnMessage` goes stale and the old bubble would keep showing
- *    "Delivered" beside the new one. `useChannelStateContext` gets a fresh
- *    `messages` array on every new message and, being a context, re-renders
- *    this leaf straight through the stale `Message`/`MessageStatus` memos —
- *    so the label reliably hops to the newest own message.
- *
- * Rendered inside stream's `.str-chat__message-status` span, which supplies
- * the flex layout; icon and copy are styled via that span in `styles.css`.
- */
-const DeliveredStatus = () => {
-  const { message } = useMessageContext('SentMessageDeliveryStatus')
-  const { messages } = useChannelStateContext('SentMessageDeliveryStatus')
-  const { client } = useChatContext('SentMessageDeliveryStatus')
-
-  const ownUserId = client.user?.id
-  const lastOwnMessageId = useMemo(() => {
-    if (!ownUserId || !messages) return undefined
-    for (let i = messages.length - 1; i >= 0; i -= 1) {
-      if (messages[i].user?.id === ownUserId) return messages[i].id
-    }
-    return undefined
-  }, [messages, ownUserId])
-
-  if (message.id !== lastOwnMessageId) {
-    return null
-  }
-
-  return (
-    <>
-      <ChecksIcon weight="bold" aria-hidden="true" />
-      <span data-testid="sent-message-delivery-status">Delivered</span>
-    </>
-  )
-}
-
-/** Suppresses a MessageStatus slot we don't want to render. */
-const NoStatus = () => null
-
-/**
- * Delivery status beneath the viewer's most recent sent message (MES-1036):
- * a right-aligned "✓✓ Delivered" that appears once Stream confirms the
- * message is stored and updates live.
- *
- * Built on stream-chat-react's `MessageStatus`, which owns the gating we keep
- * — own message, not an error, not inside a thread — and only surfaces a
- * terminal (sending/sent/delivered/read) state once the message is stored.
- * Scope is "Delivered" only: the sending spinner is suppressed and all
- * terminal states render {@link DeliveredStatus}, which supplies the label
- * and the last-own-message gate (see there for why the gate is computed from
- * live channel state rather than the context's `lastOwnMessage`).
- */
-export const SentMessageDeliveryStatus = () => (
-  <MessageStatus
-    MessageSentStatus={DeliveredStatus}
-    MessageDeliveredStatus={DeliveredStatus}
-    MessageReadStatus={DeliveredStatus}
-    MessageSendingStatus={NoStatus}
-  />
-)