feat: add error handling for thread search in MessageThreadReplyInChannelButtonIndicator

Author: MartinCupela

src/components/Message/MessageSimple.tsx

@@ -12,7 +12,7 @@ import { MessageText } from './MessageText';
 import { MessageTimestamp as DefaultMessageTimestamp } from './MessageTimestamp';
 import { StreamedMessageText as DefaultStreamedMessageText } from './StreamedMessageText';
 import { isDateSeparatorMessage } from '../MessageList';
-import { MessageIsThreadReplyInChannelButtonIndicator as DefaultMessageIsThreadReplyInChannelButtonIndicator } from './MessageIsThreadReplyInChannelButtonIndicator';
+import { MessageThreadReplyInChannelButtonIndicator as DefaultMessageIsThreadReplyInChannelButtonIndicator } from './MessageThreadReplyInChannelButtonIndicator';
 import {
   areMessageUIPropsEqual,
   isMessageBlocked,

…sThreadReplyInChannelButtonIndicator.tsx …eThreadReplyInChannelButtonIndicator.tsxsrc/components/Message/MessageIsThreadReplyInChannelButtonIndicator.tsx renamed to src/components/Message/MessageThreadReplyInChannelButtonIndicator.tsx src/components/Message/MessageIsThreadReplyInChannelButtonIndicator.tsx renamed to src/components/Message/MessageThreadReplyInChannelButtonIndicator.tsx

@@ -4,11 +4,13 @@ import { formatMessage } from 'stream-chat';
 import {
   useChannelActionContext,
   useChannelStateContext,
+  useChatContext,
   useMessageContext,
   useTranslationContext,
 } from '../../context';
 
-export const MessageIsThreadReplyInChannelButtonIndicator = () => {
+export const MessageThreadReplyInChannelButtonIndicator = () => {
+  const { client } = useChatContext();
   const { t } = useTranslationContext();
   const { channel } = useChannelStateContext();
   const { openThread } = useChannelActionContext();
@@ -20,8 +22,23 @@ export const MessageIsThreadReplyInChannelButtonIndicator = () => {
       .getClient()
       .search({ cid: channel.cid }, { id: message.parent_id })
       .then(({ results }) => {
-        if (!results.length) return;
+        if (!results.length) {
+          throw new Error('Thread has not been found');
+        }
         parentMessageRef.current = formatMessage(results[0].message);
+      })
+      .catch((error: Error) => {
+        client.notifications.addError({
+          message: t<string>('Thread has not been found'),
+          options: {
+            originalError: error,
+            type: 'api:message:search:not-found',
+          },
+          origin: {
+            context: { threadReply: message },
+            emitter: 'MessageThreadReplyInChannelButtonIndicator',
+          },
+        });
       });
 
   useEffect(() => {
@@ -60,6 +77,7 @@ export const MessageIsThreadReplyInChannelButtonIndicator = () => {
           }
           openThread(parentMessageRef.current);
         }}
+        type='button'
       >
         {t<string>('Thread reply')}
       </button>

src/context/ComponentContext.tsx

@@ -124,7 +124,7 @@ export type ComponentContextValue = {
   MessageBlocked?: React.ComponentType;
   /** Custom UI component for a deleted message, defaults to and accepts same props as: [MessageDeleted](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageDeleted.tsx) */
   MessageDeleted?: React.ComponentType<MessageDeletedProps>;
-  /** Custom UI component for an indicator that a message is a thread reply sent to channel list: [MessageIsThreadReplyInChannelButtonIndicator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageIsThreadReplyInChannelButtonIndicator.tsx) */
+  /** Custom UI component for an indicator that a message is a thread reply sent to channel list: [MessageThreadReplyInChannelButtonIndicator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageIsThreadReplyInChannelButtonIndicator.tsx) */
   MessageIsThreadReplyInChannelButtonIndicator?: React.ComponentType;
   MessageListMainPanel?: React.ComponentType<PropsWithChildrenOnly>;
   /** Custom UI component that displays message and connection status notifications in the `MessageList`, defaults to and accepts same props as [DefaultMessageListNotifications](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageList/MessageListNotifications.tsx) */

src/i18n/de.json

@@ -120,6 +120,7 @@
   "This message did not meet our content guidelines": "Diese Nachricht entsprach nicht unseren Inhaltsrichtlinien",
   "This message was deleted...": "Diese Nachricht wurde gelöscht...",
   "Thread": "Thread",
+  "Thread has not been found": "Thread wurde nicht gefunden",
   "Thread reply": "Thread-Antwort",
   "To start recording, allow the camera access in your browser": "Um mit der Aufnahme zu beginnen, erlauben Sie den Zugriff auf die Kamera in Ihrem Browser",
   "To start recording, allow the microphone access in your browser": "Um mit der Aufnahme zu beginnen, erlauben Sie den Zugriff auf das Mikrofon in Ihrem Browser",

src/i18n/en.json

@@ -120,6 +120,7 @@
   "This message did not meet our content guidelines": "This message did not meet our content guidelines",
   "This message was deleted...": "This message was deleted...",
   "Thread": "Thread",
+  "Thread has not been found": "Thread has not been found",
   "Thread reply": "Thread reply",
   "To start recording, allow the camera access in your browser": "To start recording, allow the camera access in your browser",
   "To start recording, allow the microphone access in your browser": "To start recording, allow the microphone access in your browser",

src/i18n/es.json

@@ -122,6 +122,7 @@
   "This message did not meet our content guidelines": "Este mensaje no cumple con nuestras directrices de contenido",
   "This message was deleted...": "Este mensaje fue eliminado...",
   "Thread": "Hilo",
+  "Thread has not been found": "No se ha encontrado el hilo",
   "Thread reply": "Respuesta en hilo",
   "To start recording, allow the camera access in your browser": "Para comenzar a grabar, permita el acceso a la cámara en su navegador",
   "To start recording, allow the microphone access in your browser": "Para comenzar a grabar, permita el acceso al micrófono en su navegador",

src/i18n/fr.json

@@ -122,6 +122,7 @@
   "This message did not meet our content guidelines": "Ce message ne respecte pas nos directives de contenu",
   "This message was deleted...": "Ce message a été supprimé...",
   "Thread": "Fil de discussion",
+  "Thread has not been found": "Le fil de discussion n'a pas été trouvé",
   "Thread reply": "Réponse dans le fil",
   "To start recording, allow the camera access in your browser": "Pour commencer l'enregistrement, autorisez l'accès à la caméra dans votre navigateur",
   "To start recording, allow the microphone access in your browser": "Pour commencer l'enregistrement, autorisez l'accès au microphone dans votre navigateur",

src/i18n/hi.json

@@ -121,6 +121,7 @@
   "This message did not meet our content guidelines": "यह संदेश हमारे सामग्री दिशानिर्देशों के अनुरूप नहीं था",
   "This message was deleted...": "मैसेज हटा दिया गया",
   "Thread": "रिप्लाई थ्रेड",
+  "Thread has not been found": "थ्रेड नहीं मिला",
   "Thread reply": "थ्रेड में उत्तर",
   "To start recording, allow the camera access in your browser": "रिकॉर्डिंग शुरू करने के लिए, अपने ब्राउज़र में कैमरा तक पहुँच दें",
   "To start recording, allow the microphone access in your browser": "रिकॉर्डिंग शुरू करने के लिए, अपने ब्राउज़र में माइक्रोफ़ोन तक पहुँच दें",

src/i18n/it.json

@@ -122,6 +122,7 @@
   "This message did not meet our content guidelines": "Questo messaggio non soddisfa le nostre linee guida sui contenuti",
   "This message was deleted...": "Questo messaggio è stato cancellato...",
   "Thread": "Discussione",
+  "Thread has not been found": "Discussione non trovata",
   "Thread reply": "Risposta nella discussione",
   "To start recording, allow the camera access in your browser": "Per iniziare a registrare, consenti l'accesso alla fotocamera nel tuo browser",
   "To start recording, allow the microphone access in your browser": "Per iniziare a registrare, consenti l'accesso al microfono nel tuo browser",

src/i18n/ja.json

@@ -118,6 +118,7 @@
   "This message did not meet our content guidelines": "このメッセージはコンテンツガイドラインに適合していません",
   "This message was deleted...": "このメッセージは削除されました...",
   "Thread": "スレッド",
+  "Thread has not been found": "スレッドが見つかりませんでした",
   "Thread reply": "スレッドの返信",
   "To start recording, allow the camera access in your browser": "録音を開始するには、ブラウザーでカメラへのアクセスを許可してください",
   "To start recording, allow the microphone access in your browser": "録音を開始するには、ブラウザーでマイクロフォンへのアクセスを許可してください",