@linktr.ee/messaging-react 3.3.4 → 3.3.6-rc-1780987607

package/src/components/MessageAttachment/MessageAttachment.test.tsx

@@ -813,55 +813,20 @@ describe('MessageAttachment lazy-loading defaults', () => {
 })
 
 describe('bubbleGroupPositionFromStream', () => {
-  it('returns "single" when not grouped', () => {
-    expect(
-      bubbleGroupPositionFromStream({
-        groupedByUser: false,
-        firstOfGroup: true,
-        endOfGroup: true,
-      })
-    ).toBe('single')
-  })
-
-  it('returns "single" when both first and end are true (run of one)', () => {
-    expect(
-      bubbleGroupPositionFromStream({
-        groupedByUser: true,
-        firstOfGroup: true,
-        endOfGroup: true,
-      })
-    ).toBe('single')
-  })
-
-  it('returns "first" when firstOfGroup is the only flag set', () => {
-    expect(
-      bubbleGroupPositionFromStream({
-        groupedByUser: true,
-        firstOfGroup: true,
-        endOfGroup: false,
-      })
-    ).toBe('first')
-  })
-
-  it('returns "end" when endOfGroup is the only flag set', () => {
-    expect(
-      bubbleGroupPositionFromStream({
-        groupedByUser: true,
-        firstOfGroup: false,
-        endOfGroup: true,
-      })
-    ).toBe('end')
-  })
-
-  it('returns "middle" when grouped but neither first nor end', () => {
-    expect(
-      bubbleGroupPositionFromStream({
-        groupedByUser: true,
-        firstOfGroup: false,
-        endOfGroup: false,
-      })
-    ).toBe('middle')
-  })
+  it.each([
+    { groupedByUser: false, firstOfGroup: true, endOfGroup: true, expected: 'single' },
+    { groupedByUser: true, firstOfGroup: true, endOfGroup: true, expected: 'single' },
+    { groupedByUser: true, firstOfGroup: true, endOfGroup: false, expected: 'first' },
+    { groupedByUser: true, firstOfGroup: false, endOfGroup: true, expected: 'end' },
+    { groupedByUser: true, firstOfGroup: false, endOfGroup: false, expected: 'middle' },
+  ])(
+    'maps groupedByUser=$groupedByUser firstOfGroup=$firstOfGroup endOfGroup=$endOfGroup → $expected',
+    ({ groupedByUser, firstOfGroup, endOfGroup, expected }) => {
+      expect(
+        bubbleGroupPositionFromStream({ groupedByUser, firstOfGroup, endOfGroup })
+      ).toBe(expected)
+    }
+  )
 })
 
 describe('MessageAttachment.Bubble grouping', () => {
@@ -884,41 +849,17 @@ describe('MessageAttachment.Bubble grouping', () => {
     mimeType: 'application/pdf',
   }
 
-  it('serializes groupPosition="single" for a standalone bubble', () => {
-    renderWithProviders(
-      <MessageAttachment.File.Sent {...FILE_PROPS} groupPosition="single" />
-    )
-    expect(
-      screen.getByTestId('file-attachment').getAttribute('data-group-position')
-    ).toBe('single')
-  })
-
-  it('serializes groupPosition="first" for the first bubble in a run', () => {
-    renderWithProviders(
-      <MessageAttachment.File.Sent {...FILE_PROPS} groupPosition="first" />
-    )
-    expect(
-      screen.getByTestId('file-attachment').getAttribute('data-group-position')
-    ).toBe('first')
-  })
-
-  it('serializes groupPosition="middle" for an interior bubble in a run', () => {
-    renderWithProviders(
-      <MessageAttachment.File.Sent {...FILE_PROPS} groupPosition="middle" />
-    )
-    expect(
-      screen.getByTestId('file-attachment').getAttribute('data-group-position')
-    ).toBe('middle')
-  })
-
-  it('serializes groupPosition="end" for the last bubble in a run', () => {
-    renderWithProviders(
-      <MessageAttachment.File.Sent {...FILE_PROPS} groupPosition="end" />
-    )
-    expect(
-      screen.getByTestId('file-attachment').getAttribute('data-group-position')
-    ).toBe('end')
-  })
+  it.each(['single', 'first', 'middle', 'end'] as const)(
+    'serializes groupPosition="%s" on the bubble',
+    (groupPosition) => {
+      renderWithProviders(
+        <MessageAttachment.File.Sent {...FILE_PROPS} groupPosition={groupPosition} />
+      )
+      expect(
+        screen.getByTestId('file-attachment').getAttribute('data-group-position')
+      ).toBe(groupPosition)
+    }
+  )
 
   it('serializes groupPosition on receiver-side bubbles too', () => {
     renderWithProviders(

package/src/components/SearchInput/SearchInput.test.tsx

@@ -17,14 +17,6 @@ describe('SearchInput', () => {
       expect(screen.getByPlaceholderText('Search messages...')).toBeInTheDocument();
     });
 
-    it('renders with search icon', () => {
-      renderWithProviders(
-        <SearchInput searchQuery="" setSearchQuery={vi.fn()} placeholder="Search" />
-      );
-      const searchIcon = document.querySelector('svg');
-      expect(searchIcon).toBeInTheDocument();
-    });
-
     it('displays the current value', () => {
       renderWithProviders(
         <SearchInput searchQuery="test query" setSearchQuery={vi.fn()} placeholder="Search" />

package/src/hooks/useChannelModerationActions.ts

@@ -75,33 +75,46 @@ export const useChannelModerationActions = ({
   logLabel = 'useChannelModerationActions',
 }: UseChannelModerationActionsParams): ChannelModerationActions => {
   const { service, debug } = useMessagingContext()
+  const participantId = participant?.user?.id
+  const willLookup = Boolean(
+    enabled && showBlockParticipant && service && participantId
+  )
+
   const [isParticipantBlocked, setIsParticipantBlocked] = useState(false)
-  const [isCheckingBlockedStatus, setIsCheckingBlockedStatus] =
-    useState(false)
+  // Tracks the participant + service the most recent lookup has completed
+  // for. Keying on both so a service swap (e.g. MessagingProvider rebuilding
+  // its StreamChatService when config/apiKey/debug changes) re-triggers the
+  // loading state for the same participant — otherwise the menu would
+  // briefly show actionable Block/Unblock against the new service with the
+  // old service's blocked result. Computing the flag at render time — rather
+  // than from a useState updated inside useEffect — also closes the brief
+  // window where the menu would render the regular (enabled) Block button
+  // before the effect flipped the disabled placeholder on.
+  const [resolvedFor, setResolvedFor] = useState<{
+    participantId: string
+    service: unknown
+  } | null>(null)
   const [isLeaving, setIsLeaving] = useState(false)
   const [isUpdatingBlockStatus, setIsUpdatingBlockStatus] = useState(false)
 
+  const isCheckingBlockedStatus =
+    willLookup &&
+    (resolvedFor?.participantId !== participantId ||
+      resolvedFor?.service !== service)
+
   // Resolve whether the participant is blocked whenever the participant or
   // surface visibility changes.
   useEffect(() => {
     // When the lookup is skipped (Block action hidden, surface disabled, or no
     // participant), clear any stale blocked state so a previous participant's
     // value can't leak into the next conversation.
-    if (
-      !enabled ||
-      !showBlockParticipant ||
-      !service ||
-      !participant?.user?.id
-    ) {
+    if (!willLookup || !service || !participantId) {
       setIsParticipantBlocked(false)
-      setIsCheckingBlockedStatus(false)
+      setResolvedFor(null)
       return
     }
 
     let cancelled = false
-    const participantId = participant.user.id
-
-    setIsCheckingBlockedStatus(true)
 
     void (async () => {
       try {
@@ -117,7 +130,12 @@ export const useChannelModerationActions = ({
           console.error(`[${logLabel}] Failed to check blocked status:`, error)
         }
       } finally {
-        if (!cancelled) setIsCheckingBlockedStatus(false)
+        // Mark the lookup as resolved regardless of success/failure so a
+        // rejected `getBlockedUsers()` doesn't leave the menu stuck in the
+        // disabled-spinner state. On failure the blocked flag stays at its
+        // default (false), matching the prior behavior — the user can attempt
+        // to block/unblock and the server rejects if the state is wrong.
+        if (!cancelled) setResolvedFor({ participantId, service })
       }
     })()
 
@@ -125,7 +143,7 @@ export const useChannelModerationActions = ({
     return () => {
       cancelled = true
     }
-  }, [enabled, service, participant?.user?.id, showBlockParticipant, logLabel])
+  }, [willLookup, service, participantId, logLabel])
 
   const handleLeaveConversation = async () => {
     if (isLeaving) return

package/src/stories/decorators/storyTime.ts

@@ -0,0 +1,31 @@
+/**
+ * Deterministic clock for Storybook stories.
+ *
+ * Stories that render relative timestamps ("3m ago", "yesterday") must use these
+ * helpers instead of `new Date()` / `Date.now()`, or visual diffs in Chromatic
+ * will drift on every run.
+ *
+ * FROZEN_NOW is the reference instant. Helpers below produce timestamps relative
+ * to it so the rendered output is identical regardless of when the build runs.
+ */
+
+export const FROZEN_NOW = new Date('2026-01-15T12:00:00.000Z')
+
+const MS_PER_SEC = 1000
+const MS_PER_MIN = 60 * MS_PER_SEC
+const MS_PER_HOUR = 60 * MS_PER_MIN
+const MS_PER_DAY = 24 * MS_PER_HOUR
+
+export const now = (): Date => new Date(FROZEN_NOW)
+
+export const secondsAgo = (n: number): Date =>
+  new Date(FROZEN_NOW.getTime() - n * MS_PER_SEC)
+
+export const minutesAgo = (n: number): Date =>
+  new Date(FROZEN_NOW.getTime() - n * MS_PER_MIN)
+
+export const hoursAgo = (n: number): Date =>
+  new Date(FROZEN_NOW.getTime() - n * MS_PER_HOUR)
+
+export const daysAgo = (n: number): Date =>
+  new Date(FROZEN_NOW.getTime() - n * MS_PER_DAY)

package/src/utils/formatRelativeTime.test.ts

@@ -39,12 +39,6 @@ describe('formatRelativeTime', () => {
       const date = new Date('2024-01-15T11:59:30Z') // 30 seconds ago
       expect(formatRelativeTime(date)).toBe('Just now')
     })
-
-    it('should return "Just now" for messages 0 seconds ago', () => {
-      mockDate('2024-01-15T12:00:00Z')
-      const date = new Date('2024-01-15T12:00:00Z')
-      expect(formatRelativeTime(date)).toBe('Just now')
-    })
   })
 
   describe('Today', () => {
@@ -55,13 +49,6 @@ describe('formatRelativeTime', () => {
       // Should be "9:30 AM" format
       expect(result).toMatch(/^\d{1,2}:\d{2} (AM|PM)$/i)
     })
-
-    it('should return time in 12-hour format for messages from late last night (same day)', () => {
-      mockDate('2024-01-15T23:59:00Z')
-      const date = new Date('2024-01-15T00:01:00Z')
-      const result = formatRelativeTime(date)
-      expect(result).toMatch(/^\d{1,2}:\d{2} (AM|PM)$/i)
-    })
   })
 
   describe('Yesterday', () => {
@@ -92,13 +79,7 @@ describe('formatRelativeTime', () => {
       expect(formatRelativeTime(date)).toBe('2d')
     })
 
-    it('should return "3d" for messages 3 days ago', () => {
-      mockDate('2024-01-15T12:00:00Z')
-      const date = new Date('2024-01-12T12:00:00Z')
-      expect(formatRelativeTime(date)).toBe('3d')
-    })
-
-    it('should return "6d" for messages 6 days ago', () => {
+    it('should return "6d" for messages 6 days ago (boundary before weeks)', () => {
       mockDate('2024-01-15T12:00:00Z')
       const date = new Date('2024-01-09T12:00:00Z')
       expect(formatRelativeTime(date)).toBe('6d')
@@ -111,18 +92,6 @@ describe('formatRelativeTime', () => {
       const date = new Date('2024-01-08T12:00:00Z')
       expect(formatRelativeTime(date)).toBe('1w')
     })
-
-    it('should return "2w" for messages 2 weeks ago', () => {
-      mockDate('2024-01-15T12:00:00Z')
-      const date = new Date('2024-01-01T12:00:00Z')
-      expect(formatRelativeTime(date)).toBe('2w')
-    })
-
-    it('should return "3w" for messages 3 weeks ago', () => {
-      mockDate('2024-01-29T12:00:00Z')
-      const date = new Date('2024-01-08T12:00:00Z')
-      expect(formatRelativeTime(date)).toBe('3w')
-    })
   })
 
   describe('Date format', () => {