Second pass

Author: arnautov-anton

src/components/Accessibility/hooks/useIncomingMessageAnnouncements.ts

@@ -1,13 +1,13 @@
 import { useCallback, useEffect, useRef } from 'react';
-import type { Channel, Event, MessageResponse } from 'stream-chat';
+import type { Channel, EventPayload, LocalMessage, MessageResponse } from 'stream-chat';
 
 import { useAriaLiveAnnouncer } from '../useAriaLiveAnnouncer';
 import { useTranslationContext } from '../../../context/TranslationContext';
 
 const MESSAGE_ANNOUNCEMENT_THROTTLE_MS = 1000;
 
 const isAnnounceableIncomingMessage = (
-  message: MessageResponse,
+  message: LocalMessage | MessageResponse,
   ownUserId?: string,
 ): boolean => {
   const messageUserId = message.user?.id;
@@ -16,13 +16,15 @@ const isAnnounceableIncomingMessage = (
     return false;
   }
 
+  // TODO: message coming from the event does not have a status
+  const status = (message as LocalMessage).status;
   return (
     message.type !== 'deleted' &&
     message.type !== 'ephemeral' &&
     message.type !== 'error' &&
     message.type !== 'system' &&
-    message.status !== 'failed' &&
-    message.status !== 'sending'
+    status !== 'failed' &&
+    status !== 'sending'
   );
 };
 
@@ -108,7 +110,7 @@ export const useIncomingMessageAnnouncements = ({
       return;
     }
 
-    const handleMessageNew = (event: Event) => {
+    const handleMessageNew = (event: EventPayload<'message.new'>) => {
       const message = event.message;
       if (!message) return;
 

src/components/Attachment/Attachment.tsx

@@ -1,11 +1,11 @@
 import React, { useMemo } from 'react';
-import type { SharedLocationResponse, Attachment as StreamAttachment } from 'stream-chat';
+import type { SharedLocationResponseData, Attachment as StreamAttachment } from 'stream-chat';
 import {
   isAudioAttachment,
   isFileAttachment,
   isImageAttachment,
   isScrapedContent,
-  isSharedLocationResponse,
+  isSharedLocationResponseData,
   isVideoAttachment,
   isVoiceRecordingAttachment,
 } from 'stream-chat';
@@ -29,7 +29,6 @@ import type { AudioProps } from './Audio';
 import type { VoiceRecordingProps } from './VoiceRecording';
 import type { CardProps } from './LinkPreview/Card';
 import type { FileAttachmentProps } from './FileAttachment';
-import type { GalleryItem } from '../Gallery';
 import type { UnsupportedAttachmentProps } from './UnsupportedAttachment';
 import type { ActionHandlerReturnType } from '../Message/hooks/useActionHandler';
 import type { GeolocationProps } from './Geolocation';
@@ -49,7 +48,7 @@ export const ATTACHMENT_GROUPS_ORDER = [
 
 export type AttachmentProps = {
   /** The message attachments to render, see [attachment structure](https://getstream.io/chat/docs/javascript/message_format/?language=javascript) **/
-  attachments: (StreamAttachment | SharedLocationResponse)[];
+  attachments: (StreamAttachment | SharedLocationResponseData)[];
   /**	The handler function to call when an action is performed on an attachment, examples include canceling a \/giphy command or shuffling the results. */
   actionHandler?: ActionHandlerReturnType;
   /**
@@ -120,10 +119,10 @@ const renderGroupedAttachments = ({
   attachments,
   ...rest
 }: AttachmentProps): GroupedRenderedAttachment => {
-  const mediaAttachments: GalleryItem[] = [];
+  const mediaAttachments: StreamAttachment[] = [];
   const containers = attachments.reduce<GroupedRenderedAttachment>(
     (typeMap, attachment) => {
-      if (isSharedLocationResponse(attachment)) {
+      if (isSharedLocationResponseData(attachment)) {
         typeMap.geolocation.push(
           <GeolocationContainer
             {...rest}
@@ -151,7 +150,7 @@ const renderGroupedAttachments = ({
         isImageAttachment(attachment) ||
         isVideoAttachment(attachment, SUPPORTED_VIDEO_FORMATS)
       ) {
-        mediaAttachments.push(attachment as GalleryItem);
+        mediaAttachments.push(attachment);
       } else if (
         isAudioAttachment(attachment) ||
         isVoiceRecordingAttachment(attachment) ||

src/components/Attachment/AttachmentContainer.tsx

@@ -9,13 +9,13 @@ import clsx from 'clsx';
 import type {
   Attachment,
   LocalAttachment,
-  SharedLocationResponse,
+  SharedLocationResponseData,
   VideoAttachment as VideoAttachmentType,
 } from 'stream-chat';
 import {
   isAudioAttachment,
   isFileAttachment,
-  isSharedLocationResponse,
+  isSharedLocationResponseData,
   isVideoAttachment,
   isVoiceRecordingAttachment,
 } from 'stream-chat';
@@ -50,7 +50,7 @@ import { VideoAttachment } from './VideoAttachment';
 import type { AttachmentProps } from './Attachment';
 
 export type AttachmentContainerProps = {
-  attachment: Attachment | GalleryAttachment | SharedLocationResponse;
+  attachment: Attachment | GalleryAttachment | SharedLocationResponseData;
   componentType: AttachmentComponentType;
 };
 export const AttachmentWithinContainer = ({
@@ -61,7 +61,7 @@ export const AttachmentWithinContainer = ({
   const isGAT = isGalleryAttachmentType(attachment);
   let extra = '';
 
-  if (!isGAT && !isSharedLocationResponse(attachment)) {
+  if (!isGAT && !isSharedLocationResponseData(attachment)) {
     extra =
       componentType === 'card' && !attachment?.image_url && !attachment?.thumb_url
         ? 'no-image'

src/components/Attachment/Geolocation.tsx

@@ -2,7 +2,7 @@ import type { ComponentType } from 'react';
 import { useEffect } from 'react';
 import { useRef, useState } from 'react';
 import React from 'react';
-import type { Coords, SharedLocationResponse } from 'stream-chat';
+import type { Coords, SharedLocationResponseData } from 'stream-chat';
 import { useChatContext, useTranslationContext } from '../../context';
 import { ExternalLinkIcon } from './icons';
 import { IconLocation } from '../Icons';
@@ -11,7 +11,7 @@ import { Button } from '../Button';
 export type GeolocationMapProps = Coords;
 
 export type GeolocationProps = {
-  location: SharedLocationResponse;
+  location: SharedLocationResponseData;
   GeolocationAttachmentMapPlaceholder?: ComponentType<GeolocationAttachmentMapPlaceholderProps>;
   GeolocationMap?: ComponentType<GeolocationMapProps>;
 };
@@ -95,7 +95,7 @@ export const Geolocation = ({
 };
 
 export type GeolocationAttachmentMapPlaceholderProps = {
-  location: SharedLocationResponse;
+  location: SharedLocationResponseData;
 };
 
 const DefaultGeolocationAttachmentMapPlaceholder = ({

src/components/Attachment/utils.tsx

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import type { Attachment, SharedLocationResponse } from 'stream-chat';
+import type { Attachment, SharedLocationResponseData } from 'stream-chat';
 import type { ATTACHMENT_GROUPS_ORDER, AttachmentProps } from './Attachment';
 import * as linkify from 'linkifyjs';
 
@@ -44,18 +44,20 @@ export type RenderMediaProps = Omit<AttachmentProps, 'attachments'> & {
 };
 
 export type GeolocationContainerProps = Omit<AttachmentProps, 'attachments'> & {
-  location: SharedLocationResponse;
+  location: SharedLocationResponseData;
 };
 
 // This identity function determines attachment type specific to React.
 // Once made sure other SDKs support the same logic, move to stream-chat-js
 export const isGalleryAttachmentType = (
-  attachment: Attachment | GalleryAttachment,
+  attachment: Attachment | GalleryAttachment | SharedLocationResponseData,
 ): attachment is GalleryAttachment =>
   Array.isArray((attachment as GalleryAttachment).items);
 
-export const isSvgAttachment = (attachment: Attachment) => {
-  const filename = attachment.fallback || '';
+export const isSvgAttachment = (
+  attachment: Attachment | GalleryAttachment | SharedLocationResponseData,
+) => {
+  const filename = (attachment as Attachment).fallback || '';
   return filename.toLowerCase().endsWith('.svg');
 };
 

src/components/Channel/Channel.tsx

@@ -12,10 +12,10 @@ import clsx from 'clsx';
 import debounce from 'lodash.debounce';
 import throttle from 'lodash.throttle';
 import type {
-  ChannelAPIResponse,
   ChannelMemberResponse,
   ChannelQueryOptions,
   ChannelState,
+  ChannelStateResponseFields,
   DeleteMessageOptions,
   Event,
   EventAPIResponse,
@@ -625,7 +625,7 @@ const ChannelInner = (
 
     const oldestID = oldestMessage?.id;
     const perPage = limit;
-    let queryResponse: ChannelAPIResponse;
+    let queryResponse: ChannelStateResponseFields;
 
     try {
       queryResponse = await channel.query({
@@ -659,7 +659,7 @@ const ChannelInner = (
 
     const newestId = newestMessage?.id;
     const perPage = limit;
-    let queryResponse: ChannelAPIResponse;
+    let queryResponse: ChannelStateResponseFields;
 
     try {
       queryResponse = await channel.query({

src/components/Channel/hooks/useEditMessageHandler.ts

@@ -1,30 +1,27 @@
-import type {
-  LocalMessage,
-  MessageResponse,
-  StreamChat,
-  UpdateMessageOptions,
-} from 'stream-chat';
+import type { MessageRequest, StreamChat, UpdateMessageOptions } from 'stream-chat';
 
 import { useChatContext } from '../../../context/ChatContext';
 
 type UpdateHandler = (
   cid: string,
-  updatedMessage: LocalMessage | MessageResponse,
+  updatedMessage: MessageRequest,
   options?: UpdateMessageOptions,
 ) => ReturnType<StreamChat['updateMessage']>;
 
 export const useEditMessageHandler = (doUpdateMessageRequest?: UpdateHandler) => {
   const { channel, client } = useChatContext('useEditMessageHandler');
 
-  return (
-    updatedMessage: LocalMessage | MessageResponse,
-    options?: UpdateMessageOptions,
-  ) => {
+  return (updatedMessage: MessageRequest, options?: UpdateMessageOptions) => {
     if (doUpdateMessageRequest && channel) {
       return Promise.resolve(
         doUpdateMessageRequest(channel.cid, updatedMessage, options),
       );
     }
-    return client.updateMessage(updatedMessage, undefined, options);
+    return client.updateMessage({
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      id: updatedMessage.id!,
+      message: updatedMessage,
+      ...options,
+    });
   };
 };

src/components/Channel/utils.ts

@@ -1,8 +1,8 @@
 import {
-  type APIErrorResponse,
+  type APIError,
   type ChannelState,
-  ErrorFromResponse,
   type MessageResponse,
+  StreamAPIError,
 } from 'stream-chat';
 
 /**
@@ -77,27 +77,27 @@ export const findInMsgSetByDate = (
 };
 /**
  * Compatibility adapter:
- * LocalMessage.error expects ErrorFromResponse<APIErrorResponse>, but some transport failures
+ * LocalMessage.error expects StreamAPIError<APIError>, but some transport failures
  * (for example Axios ERR_NETWORK while offline) do not have an HTTP response payload.
  */
 export const adaptMessageSendErrorToErrorFromResponse = (
   error: unknown,
-): ErrorFromResponse<APIErrorResponse> => {
-  if (error instanceof ErrorFromResponse) {
+): StreamAPIError<APIError> => {
+  if (error instanceof StreamAPIError) {
     return error;
   }
 
   const fallbackMessage = error instanceof Error ? error.message : 'Message send failed';
   let message = fallbackMessage;
   let status = 0;
-  let code: number | null = null;
+  let code: number | undefined = undefined;
 
   if (typeof error === 'object' && error !== null) {
     const maybeAxiosError = error as {
       code?: unknown;
       message?: unknown;
       name?: unknown;
-      response?: ErrorFromResponse<APIErrorResponse>['response'];
+      response?: StreamAPIError<APIError>['response'];
       status?: unknown;
     };
 
@@ -108,8 +108,8 @@ export const adaptMessageSendErrorToErrorFromResponse = (
           : 'Network Error';
       status = maybeAxiosError.response?.status ?? 0;
 
-      return new ErrorFromResponse<APIErrorResponse>(message, {
-        code: null,
+      return new StreamAPIError<APIError>(message, {
+        code: undefined,
         response:
           maybeAxiosError.response ??
           ({
@@ -121,7 +121,7 @@ export const adaptMessageSendErrorToErrorFromResponse = (
               StatusCode: status,
             },
             status,
-          } as ErrorFromResponse<APIErrorResponse>['response']),
+          } as unknown as StreamAPIError<APIError>['response']),
         status,
       });
     }
@@ -147,7 +147,7 @@ export const adaptMessageSendErrorToErrorFromResponse = (
     }
   }
 
-  return new ErrorFromResponse<APIErrorResponse>(message, {
+  return new StreamAPIError<APIError>(message, {
     code,
     response: {
       // Compatibility shim: this is an intentionally incomplete AxiosResponse-like object.
@@ -158,7 +158,7 @@ export const adaptMessageSendErrorToErrorFromResponse = (
         StatusCode: status,
       },
       status,
-    } as ErrorFromResponse<APIErrorResponse>['response'],
+    } as unknown as StreamAPIError<APIError>['response'],
     status,
   });
 };

src/components/ChannelList/ChannelListUI.tsx

@@ -1,6 +1,6 @@
 import React, { useRef } from 'react';
 import type { PropsWithChildren } from 'react';
-import type { APIErrorResponse, Channel, StreamAPIError } from 'stream-chat';
+import type { APIError, Channel, StreamAPIError } from 'stream-chat';
 
 import { LoadingChannels } from '../Loading/LoadingChannels';
 import { NullComponent } from '../UtilityComponents';
@@ -9,7 +9,7 @@ import { useComponentContext, useTranslationContext } from '../../context';
 
 export type ChannelListUIProps = {
   /** Whether the channel query request returned an errored response */
-  error: StreamAPIError<APIErrorResponse> | null;
+  error: StreamAPIError<APIError> | null;
   /** The channels currently loaded in the list, only defined if `sendChannelsToList` on `ChannelList` is true */
   loadedChannels?: Channel[];
   /** Whether the channels are currently loading */

src/components/ChannelList/hooks/usePaginatedChannels.ts

@@ -2,7 +2,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import uniqBy from 'lodash.uniqby';
 
 import type {
-  APIErrorResponse,
+  APIError,
   Channel,
   ChannelFilters,
   ChannelOptions,
@@ -167,7 +167,7 @@ export const usePaginatedChannels = (
       });
 
       if (isFirstPage) {
-        setError(error as StreamAPIError<APIErrorResponse>);
+        setError(error as StreamAPIError<APIError>);
       }
     }