refactor: make openThread and closeThread usable outside event listener context (#1923)

Author: MartinCupela

docusaurus/docs/React/components/contexts/channel-action-context.mdx

@@ -146,7 +146,7 @@ The function to execute when @mention is hovered in a `message`, takes a DOM cli
 
 ### openThread
 
-The function to execute when replies count button is clicked, takes the parent message of the `Thread` to be opened and a DOM click event.
+The function to execute when replies count button is clicked, takes the parent message of the `Thread` to be opened and optionally a DOM click event.
 
 | Type     |
 |----------|

docusaurus/docs/React/guides/customization/thread-header.mdx

@@ -27,7 +27,7 @@ export const CustomThreadHeader = ({ closeThread, thread }) => {
         ))}
         <div className='reply-count'>{replyCount} Replies</div>
       </div>
-      <div onClick={(event) => closeThread(event)} className='close-button'>
+      <div onClick={closeThread} className='close-button'>
         <div className='left'>
           <div className='right'></div>
         </div>

src/components/Channel/Channel.tsx

@@ -748,9 +748,9 @@ const ChannelInner = <
 
   const openThread = (
     message: StreamMessage<StreamChatGenerics>,
-    event: React.BaseSyntheticEvent,
+    event?: React.BaseSyntheticEvent,
   ) => {
-    event.preventDefault();
+    event?.preventDefault();
     setQuotedMessage((current) => {
       if (current?.parent_id !== message?.parent_id) {
         return undefined;
@@ -761,8 +761,8 @@ const ChannelInner = <
     dispatch({ channel, message, type: 'openThread' });
   };
 
-  const closeThread = (event: React.BaseSyntheticEvent) => {
-    event.preventDefault();
+  const closeThread = (event?: React.BaseSyntheticEvent) => {
+    event?.preventDefault();
     dispatch({ type: 'closeThread' });
   };
 

src/components/Thread/ThreadHeader.tsx

@@ -15,7 +15,7 @@ export type ThreadHeaderProps<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
 > = {
   /** Callback for closing the thread */
-  closeThread: (event: React.BaseSyntheticEvent) => void;
+  closeThread: (event?: React.BaseSyntheticEvent) => void;
   /** The thread parent message */
   thread: StreamMessage<StreamChatGenerics>;
 };
@@ -46,7 +46,7 @@ export const ThreadHeader = <
         aria-label='Close thread'
         className='str-chat__square-button str-chat__close-thread-button'
         data-testid='close-button'
-        onClick={(event) => closeThread(event)}
+        onClick={closeThread}
       >
         <CloseIcon />
       </button>

src/context/ChannelActionContext.tsx

@@ -43,7 +43,7 @@ export type ChannelActionContextValue<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
 > = {
   addNotification: (text: string, type: 'success' | 'error') => void;
-  closeThread: (event: React.BaseSyntheticEvent) => void;
+  closeThread: (event?: React.BaseSyntheticEvent) => void;
   dispatch: React.Dispatch<ChannelStateReducerAction<StreamChatGenerics>>;
   editMessage: (
     message: UpdatedMessage<StreamChatGenerics>,