@linktr.ee/messaging-react 1.22.2 → 1.22.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "1.22.2",
+  "version": "1.22.3",
   "description": "React messaging components built on messaging-core for web applications",
   "type": "module",
   "main": "dist/index.js",

package/src/components/ChannelList/ChannelListContext.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import type { Channel, LocalMessage } from 'stream-chat'
+
+type ChannelListContextValue = {
+  selectedChannel?: Channel | null
+  onChannelSelect: (channel: Channel) => void
+  debug: boolean
+  renderMessagePreview?: (
+    message: LocalMessage | undefined,
+    defaultPreview?: string
+  ) => React.ReactNode
+}
+
+const ChannelListContext = React.createContext<ChannelListContextValue>({
+  selectedChannel: undefined,
+  onChannelSelect: () => {},
+  debug: false,
+  renderMessagePreview: undefined,
+})
+
+export const ChannelListProvider = ChannelListContext.Provider
+
+export const useChannelListContext = () => React.useContext(ChannelListContext)

package/src/components/ChannelList/CustomChannelPreview.tsx

@@ -1,34 +1,21 @@
 import classNames from 'classnames'
 import React from 'react'
-import { Channel, LocalMessage } from 'stream-chat'
 import { ChannelPreviewUIComponentProps } from 'stream-chat-react'
 
 import { formatRelativeTime } from '../../utils/formatRelativeTime'
 import { Avatar } from '../Avatar'
 import { isChatbotMessage } from '../CustomMessage/MessageTag'
 
-type CustomChannelPreviewProps = ChannelPreviewUIComponentProps & {
-  selectedChannel?: Channel | null
-  onChannelSelect: (channel: Channel) => void
-  debug?: boolean
-  renderMessagePreview?: (
-    message: LocalMessage | undefined,
-    defaultPreview?: string
-  ) => React.ReactNode
-}
+import { useChannelListContext } from './ChannelListContext'
 
 /**
  * Custom channel preview that handles selection
  */
-const CustomChannelPreview = React.memo<CustomChannelPreviewProps>(
-  ({
-    channel,
-    selectedChannel,
-    onChannelSelect,
-    debug = false,
-    unread,
-    renderMessagePreview,
-  }) => {
+const CustomChannelPreview = React.memo<ChannelPreviewUIComponentProps>(
+  ({ channel, unread }) => {
+    const { selectedChannel, onChannelSelect, debug, renderMessagePreview } =
+      useChannelListContext()
+
     const isSelected = selectedChannel?.id === channel?.id
 
     const handleClick = () => {

package/src/components/ChannelList/index.tsx

@@ -1,11 +1,11 @@
 import classNames from 'classnames'
 import React from 'react'
-import type { ChannelPreviewUIComponentProps } from 'stream-chat-react'
 import { ChannelList as StreamChannelList } from 'stream-chat-react'
 
 import { useMessagingContext } from '../../providers/MessagingProvider'
 import type { ChannelListProps } from '../../types'
 
+import { ChannelListProvider } from './ChannelListContext'
 import CustomChannelPreview from './CustomChannelPreview'
 
 /**
@@ -35,19 +35,15 @@ export const ChannelList = React.memo<ChannelListProps>(
       })
     }
 
-    // Memoize Preview component to prevent re-renders
-    const PreviewComponent = React.useMemo(() => {
-      const Preview = (props: ChannelPreviewUIComponentProps) => (
-        <CustomChannelPreview
-          {...props}
-          selectedChannel={selectedChannel}
-          onChannelSelect={onChannelSelect}
-          debug={debug}
-          renderMessagePreview={renderMessagePreview}
-        />
-      )
-      return Preview
-    }, [selectedChannel, onChannelSelect, debug, renderMessagePreview])
+    const contextValue = React.useMemo(
+      () => ({
+        selectedChannel,
+        onChannelSelect,
+        debug,
+        renderMessagePreview,
+      }),
+      [selectedChannel, onChannelSelect, debug, renderMessagePreview]
+    )
 
     return (
       <div
@@ -58,14 +54,16 @@ export const ChannelList = React.memo<ChannelListProps>(
       >
         {/* Channel List */}
         <div className="flex-1 overflow-hidden min-w-0">
-          <StreamChannelList
-            key={JSON.stringify(filters)}
-            filters={filters}
-            sort={{ last_message_at: -1 }}
-            options={{ limit: 30 }}
-            Preview={PreviewComponent}
-            EmptyStateIndicator={customEmptyStateIndicator}
-          />
+          <ChannelListProvider value={contextValue}>
+            <StreamChannelList
+              key={JSON.stringify(filters)}
+              filters={filters}
+              sort={{ last_message_at: -1 }}
+              options={{ limit: 30 }}
+              Preview={CustomChannelPreview}
+              EmptyStateIndicator={customEmptyStateIndicator}
+            />
+          </ChannelListProvider>
         </div>
       </div>
     )