refactor: remove unused code related to useMessageInputState

Author: MartinCupela

src/components/Attachment/AttachmentContainer.tsx

@@ -3,7 +3,7 @@ import React, { useLayoutEffect, useRef, useState } from 'react';
 import ReactPlayer from 'react-player';
 import clsx from 'clsx';
 import * as linkify from 'linkifyjs';
-import type { Attachment } from 'stream-chat';
+import type { Attachment, LocalAttachment } from 'stream-chat';
 
 import { AttachmentActions as DefaultAttachmentActions } from './AttachmentActions';
 import { Audio as DefaultAudio } from './Audio';
@@ -20,7 +20,6 @@ import type {
 } from './utils';
 import { isGalleryAttachmentType, isSvgAttachment } from './utils';
 import { useChannelStateContext } from '../../context/ChannelStateContext';
-import type { LocalAttachment } from '../MessageInput';
 import type {
   ImageAttachmentConfiguration,
   VideoAttachmentConfiguration,

src/components/Attachment/utils.tsx

@@ -8,8 +8,8 @@ import type {
   VoiceRecordingAttachment,
 } from 'stream-chat';
 
+import type { LocalFileAttachment, LocalVideoAttachment } from 'stream-chat';
 import type { ATTACHMENT_GROUPS_ORDER, AttachmentProps } from './Attachment';
-import type { LocalFileAttachment, LocalVideoAttachment } from '../MessageInput';
 
 export const SUPPORTED_VIDEO_FORMATS = [
   'video/mp4',

src/components/Channel/Channel.tsx

@@ -90,7 +90,6 @@ import {
   getImageAttachmentConfiguration,
   getVideoAttachmentConfiguration,
 } from '../Attachment/attachment-sizing';
-import type { URLEnrichmentConfig } from '../MessageInput/hooks/useLinkPreviews';
 import { useSearchFocusedMessage } from '../../experimental/Search/hooks';
 
 type ChannelPropsForwardedToComponentContext = Pick<
@@ -195,14 +194,6 @@ export type ChannelProps = ChannelPropsForwardedToComponentContext & {
   dragAndDropWindow?: boolean;
   /** Custom UI component to be shown if no active channel is set, defaults to null and skips rendering the Channel component */
   EmptyPlaceholder?: React.ReactElement;
-  /**
-   * A global flag to toggle the URL enrichment and link previews in `MessageInput` components.
-   * By default, the feature is disabled. Can be overridden on Thread, MessageList level through additionalMessageInputProps
-   * or directly on MessageInput level through urlEnrichmentConfig.
-   */
-  enrichURLForPreview?: URLEnrichmentConfig['enrichURLForPreview'];
-  /** Global configuration for link preview generation in all the MessageInput components */
-  enrichURLForPreviewConfig?: Omit<URLEnrichmentConfig, 'enrichURLForPreview'>;
   /** The giphy version to render - check the keys of the [Image Object](https://developers.giphy.com/docs/api/schema#image-object) for possible values. Uses 'fixed_height' by default */
   giphyVersion?: GiphyVersions;
   /** A custom function to provide size configuration for image attachments */
@@ -309,7 +300,6 @@ const ChannelInner = (
     doSendMessageRequest,
     doUpdateMessageRequest,
     dragAndDropWindow = false,
-    enrichURLForPreviewConfig,
     initializeOnMount = true,
     LoadingErrorIndicator = DefaultLoadingErrorIndicator,
     LoadingIndicator = DefaultLoadingIndicator,
@@ -566,7 +556,8 @@ const ChannelInner = (
       }
 
       if (maxNumberOfFiles) {
-        channel.messageComposer.attachmentManager.maxNumberOfFilesPerMessage =
+        // todo: this has to be configured via a template
+        channel.messageComposer.attachmentManager.config.maxNumberOfFilesPerMessage =
           maxNumberOfFiles;
       }
       done = true;
@@ -1166,10 +1157,7 @@ const ChannelInner = (
     channelCapabilitiesArray,
     channelConfig,
     channelUnreadUiState,
-    debounceURLEnrichmentMs: enrichURLForPreviewConfig?.debounceURLEnrichmentMs,
     dragAndDropWindow,
-    enrichURLForPreview: props.enrichURLForPreview,
-    findURLFn: enrichURLForPreviewConfig?.findURLFn,
     giphyVersion: props.giphyVersion || 'fixed_height',
     imageAttachmentSizeHandler:
       props.imageAttachmentSizeHandler || getImageAttachmentConfiguration,
@@ -1178,7 +1166,6 @@ const ChannelInner = (
     multipleUploads,
     mutes,
     notifications,
-    onLinkPreviewDismissed: enrichURLForPreviewConfig?.onLinkPreviewDismissed,
     shouldGenerateVideoThumbnail: props.shouldGenerateVideoThumbnail || true,
     videoAttachmentSizeHandler:
       props.videoAttachmentSizeHandler || getVideoAttachmentConfiguration,
@@ -1213,8 +1200,6 @@ const ChannelInner = (
     [
       channel.cid,
       deleteMessage,
-      enrichURLForPreviewConfig?.findURLFn,
-      enrichURLForPreviewConfig?.onLinkPreviewDismissed,
       loadMore,
       loadMoreNewer,
       markRead,

src/components/Channel/hooks/useCreateChannelStateContext.ts

@@ -16,11 +16,8 @@ export const useCreateChannelStateContext = (
     channelCapabilitiesArray = [],
     channelConfig,
     channelUnreadUiState,
-    debounceURLEnrichmentMs,
     dragAndDropWindow,
-    enrichURLForPreview,
     error,
-    findURLFn,
     giphyVersion,
     hasMore,
     hasMoreNewer,
@@ -36,7 +33,6 @@ export const useCreateChannelStateContext = (
     multipleUploads,
     mutes,
     notifications,
-    onLinkPreviewDismissed,
     pinnedMessages,
     read = {},
     shouldGenerateVideoThumbnail,
@@ -112,11 +108,8 @@ export const useCreateChannelStateContext = (
       channelCapabilities,
       channelConfig,
       channelUnreadUiState,
-      debounceURLEnrichmentMs,
       dragAndDropWindow,
-      enrichURLForPreview,
       error,
-      findURLFn,
       giphyVersion,
       hasMore,
       hasMoreNewer,
@@ -132,7 +125,6 @@ export const useCreateChannelStateContext = (
       multipleUploads,
       mutes,
       notifications,
-      onLinkPreviewDismissed,
       pinnedMessages,
       read,
       shouldGenerateVideoThumbnail,
@@ -151,10 +143,7 @@ export const useCreateChannelStateContext = (
       channel.data?.name, // otherwise ChannelHeader will not be updated
       channelId,
       channelUnreadUiState,
-      debounceURLEnrichmentMs,
-      enrichURLForPreview,
       error,
-      findURLFn,
       hasMore,
       hasMoreNewer,
       highlightedMessageId,
@@ -167,7 +156,6 @@ export const useCreateChannelStateContext = (
       messageDraft,
       messageDraftsEnabled,
       notificationsLength,
-      onLinkPreviewDismissed,
       readUsersLength,
       readUsersLastReads,
       shouldGenerateVideoThumbnail,

src/components/MediaRecorder/AudioRecorder/AudioRecordingInProgress.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { useTimeElapsed } from '../../MessageInput/hooks/useTimeElapsed';
+import { useTimeElapsed } from './hooks/useTimeElapsed';
 import { useMessageInputContext } from '../../../context';
 import { RecordingTimer } from './RecordingTimer';
 

…nts/MessageInput/hooks/useTimeElapsed.ts …er/AudioRecorder/hooks/useTimeElapsed.tssrc/components/MessageInput/hooks/useTimeElapsed.ts renamed to src/components/MediaRecorder/AudioRecorder/hooks/useTimeElapsed.ts src/components/MessageInput/hooks/useTimeElapsed.ts renamed to src/components/MediaRecorder/AudioRecorder/hooks/useTimeElapsed.ts

@@ -9,23 +9,17 @@ import {
   isLocalVoiceRecordingAttachment,
   isScrapedContent,
 } from 'stream-chat';
+import type { UnsupportedAttachmentPreviewProps } from './UnsupportedAttachmentPreview';
 import { UnsupportedAttachmentPreview as DefaultUnknownAttachmentPreview } from './UnsupportedAttachmentPreview';
 import { VoiceRecordingPreview as DefaultVoiceRecordingPreview } from './VoiceRecordingPreview';
 import { FileAttachmentPreview as DefaultFilePreview } from './FileAttachmentPreview';
 import { ImageAttachmentPreview as DefaultImagePreview } from './ImageAttachmentPreview';
 import { useMessageComposer } from '../hooks/messageComposer/useMessageComposer';
-import { useStateStore } from '../../../store';
-
-import type { AttachmentManagerState } from 'stream-chat';
-import type { UnsupportedAttachmentPreviewProps } from './UnsupportedAttachmentPreview';
+import { useAttachmentManagerState } from '../hooks/messageComposer/useAttachmentManagerState';
 import type { VoiceRecordingPreviewProps } from './VoiceRecordingPreview';
 import type { FileAttachmentPreviewProps } from './FileAttachmentPreview';
 import type { ImageAttachmentPreviewProps } from './ImageAttachmentPreview';
 
-const attachmentManagerStateSelector = (state: AttachmentManagerState) => ({
-  attachments: state.attachments,
-});
-
 export type AttachmentPreviewListProps = {
   AudioAttachmentPreview?: ComponentType<FileAttachmentPreviewProps>;
   FileAttachmentPreview?: ComponentType<FileAttachmentPreviewProps>;
@@ -45,10 +39,9 @@ export const AttachmentPreviewList = ({
 }: AttachmentPreviewListProps) => {
   const messageComposer = useMessageComposer();
 
-  const { attachments } = useStateStore(
-    messageComposer.attachmentManager.state,
-    attachmentManagerStateSelector,
-  );
+  const { attachments, isUploadEnabled } = useAttachmentManagerState();
+
+  if (!isUploadEnabled || !attachments.length) return null;
 
   return (
     <div className='str-chat__attachment-preview-list'>

src/components/MessageInput/AttachmentPreviewList/AttachmentPreviewList.tsx

@@ -20,7 +20,7 @@ import {
   useAttachmentSelectorContext,
 } from '../../context/AttachmentSelectorContext';
 
-import { useIsUploadEnabled } from './hooks/messageComposer/useIsUploadEnabled';
+import { useAttachmentManagerState } from './hooks/messageComposer/useAttachmentManagerState';
 
 export const SimpleAttachmentSelector = () => {
   const {
@@ -94,7 +94,7 @@ export const DefaultAttachmentSelectorComponents = {
   File({ closeMenu }: AttachmentSelectorActionProps) {
     const { t } = useTranslationContext();
     const { fileInput } = useAttachmentSelectorContext();
-    const { isUploadEnabled } = useIsUploadEnabled();
+    const { isUploadEnabled } = useAttachmentManagerState();
 
     return (
       <DialogMenuButton

src/components/MessageInput/AttachmentSelector.tsx

@@ -16,7 +16,7 @@ import type { MessageInputProps } from './MessageInput';
 
 import type { UnknownType } from '../../types/types';
 import { useMessageComposer } from './hooks/messageComposer/useMessageComposer';
-import { useIsUploadEnabled } from './hooks/messageComposer/useIsUploadEnabled';
+import { useAttachmentManagerState } from './hooks/messageComposer/useAttachmentManagerState';
 
 // const attachmentManagerStateSelector = <
 //
@@ -29,7 +29,7 @@ const DropzoneInner = ({ children }: PropsWithChildren<UnknownType>) => {
 
   const { cooldownRemaining } = useMessageInputContext('DropzoneProvider');
   const messageComposer = useMessageComposer();
-  const { availableUploadSlots, isUploadEnabled } = useIsUploadEnabled();
+  const { availableUploadSlots, isUploadEnabled } = useAttachmentManagerState();
 
   return (
     <ImageDropzone

src/components/MessageInput/DropzoneProvider.tsx

@@ -1,38 +1,55 @@
 import clsx from 'clsx';
 import React, { useState } from 'react';
-import { useMessageInputContext } from '../../context';
-import type { LinkPreview } from './types';
-import { LinkPreviewState } from './types';
-import { CloseIcon, LinkIcon } from './icons';
+import { LinkPreviewStatus } from 'stream-chat';
+import { useStateStore } from '../../store';
 import { PopperTooltip } from '../Tooltip';
 import { useEnterLeaveHandlers } from '../Tooltip/hooks';
 import { useMessageComposer } from './hooks/messageComposer/useMessageComposer';
-import { useStateStore } from '../../store';
+import { CloseIcon, LinkIcon } from './icons';
 
-import type { MessageComposerState } from 'stream-chat';
+import type {
+  LinkPreview,
+  LinkPreviewsManagerConfig,
+  LinkPreviewsManagerState,
+  MessageComposerState,
+} from 'stream-chat';
 
-export type LinkPreviewListProps = {
-  linkPreviews: LinkPreview[];
-};
+const linkPreviewsManagerStateSelector = (state: LinkPreviewsManagerState) => ({
+  linkPreviews: Array.from(state.previews.values()),
+});
+
+const linkPreviewsManagerConfigStateSelector = (state: LinkPreviewsManagerConfig) => ({
+  linkPreviewsEnabled: state.enabled,
+});
 
 const messageComposerStateSelector = (state: MessageComposerState) => ({
   quotedMessage: state.quotedMessage,
 });
 
-export const LinkPreviewList = ({ linkPreviews }: LinkPreviewListProps) => {
+export const LinkPreviewList = () => {
   const messageComposer = useMessageComposer();
+  const { linkPreviewsManager } = messageComposer;
   const { quotedMessage } = useStateStore(
     messageComposer.state,
     messageComposerStateSelector,
   );
-  const showLinkPreviews = linkPreviews.length > 0 && !quotedMessage;
+  const { linkPreviews } = useStateStore(
+    linkPreviewsManager.state,
+    linkPreviewsManagerStateSelector,
+  );
+  const { linkPreviewsEnabled } = useStateStore(
+    linkPreviewsManager.configState,
+    linkPreviewsManagerConfigStateSelector,
+  );
+  const showLinkPreviews =
+    linkPreviewsEnabled && linkPreviews.length > 0 && !quotedMessage;
 
   if (!showLinkPreviews) return null;
 
   return (
     <div className='str-chat__link-preview-list'>
-      {Array.from(linkPreviews.values()).map((linkPreview) =>
-        linkPreview.state === LinkPreviewState.LOADED ? (
+      {linkPreviews.map((linkPreview) =>
+        linkPreview.status === LinkPreviewStatus.LOADED ? (
           <LinkPreviewCard key={linkPreview.og_scrape_url} linkPreview={linkPreview} />
         ) : null,
       )}
@@ -45,15 +62,14 @@ type LinkPreviewProps = {
 };
 
 const LinkPreviewCard = ({ linkPreview }: LinkPreviewProps) => {
-  const { dismissLinkPreview } = useMessageInputContext();
   const { handleEnter, handleLeave, tooltipVisible } =
     useEnterLeaveHandlers<HTMLDivElement>();
   const [referenceElement, setReferenceElement] = useState<HTMLDivElement | null>(null);
   return (
     <div
       className={clsx('str-chat__link-preview-card', {
         'str-chat__link-preview-card--loading':
-          linkPreview.state === LinkPreviewState.LOADING,
+          linkPreview.status === LinkPreviewStatus.LOADING,
       })}
       data-testid='link-preview-card'
     >
@@ -83,7 +99,7 @@ const LinkPreviewCard = ({ linkPreview }: LinkPreviewProps) => {
       <button
         className='str-chat__link-preview-card__dismiss-button'
         data-testid='link-preview-card-dismiss-btn'
-        onClick={() => dismissLinkPreview(linkPreview)}
+        onClick={linkPreview.dismiss}
       >
         <CloseIcon />
       </button>