fix: reflect thread prop in Window component (#1919)

Author: MartinCupela

src/components/Window/Window.tsx

@@ -1,4 +1,5 @@
 import React, { PropsWithChildren } from 'react';
+import clsx from 'clsx';
 
 import { StreamMessage, useChannelStateContext } from '../../context/ChannelStateContext';
 
@@ -9,7 +10,7 @@ export type WindowProps<
 > = {
   /** show or hide the window when a thread is active */
   hideOnThread?: boolean;
-  /** optional prop to manually trigger the opening of a thread*/
+  /** optional prop to force addition of class str-chat__main-panel--hideOnThread to the Window root element */
   thread?: StreamMessage<StreamChatGenerics>;
 };
 
@@ -18,15 +19,15 @@ const UnMemoizedWindow = <
 >(
   props: PropsWithChildren<WindowProps<StreamChatGenerics>>,
 ) => {
-  const { children, hideOnThread = false } = props;
+  const { children, hideOnThread = false, thread: propThread } = props;
 
-  const { thread } = useChannelStateContext<StreamChatGenerics>('Window');
+  const { thread: contextThread } = useChannelStateContext<StreamChatGenerics>('Window');
 
   return (
     <div
-      className={`str-chat__main-panel   ${
-        hideOnThread && thread ? 'str-chat__main-panel--hideOnThread' : ''
-      }`}
+      className={clsx('str-chat__main-panel', {
+        'str-chat__main-panel--hideOnThread': hideOnThread && (contextThread || propThread),
+      })}
     >
       {children}
     </div>

src/components/Window/__tests__/Window.test.js

@@ -15,6 +15,7 @@ const renderComponent = ({ channelStateContextMock, children, props }) =>
   );
 
 const thread = generateMessage();
+const HIDE_CLASS_NAME = 'str-chat__main-panel--hideOnThread';
 
 describe('Window', () => {
   it('should render its children if hideOnThread is false and thread is truthy', () => {
@@ -40,4 +41,30 @@ describe('Window', () => {
 
     expect(getByText('bla')).toBeInTheDocument();
   });
+  it.each([
+    ['not add', 'truthy', 'falsy', 'falsy', true, undefined, undefined],
+    ['add', 'truthy', 'truthy', 'falsy', true, thread, undefined],
+    ['add', 'truthy', 'falsy', 'truthy', true, undefined, thread],
+    ['add', 'truthy', 'truthy', 'truthy', true, thread, thread],
+    ['not add', 'falsy', 'falsy', 'falsy', false, undefined, undefined],
+    ['not add', 'falsy', 'truthy', 'falsy', false, thread, undefined],
+    ['not add', 'falsy', 'falsy', 'truthy', false, undefined, thread],
+    ['not add', 'falsy', 'truthy', 'truthy', false, thread, thread],
+  ])(
+    'should %s class str-chat__main-panel--hideOnThread if hideOnThread is %s, prop thread is %s, context thread is %s',
+    (expectation, _, __, ___, hideOnThread, propThread, contextThread) => {
+      const { container } = renderComponent({
+        channelStateContextMock: {
+          thread: contextThread,
+        },
+        children: [<div key='bla'>bla</div>],
+        props: { hideOnThread, thread: propThread },
+      });
+
+      if (expectation === 'add')
+        expect(container.querySelector(`.${HIDE_CLASS_NAME}`)).toBeInTheDocument();
+      if (expectation === 'not add')
+        expect(container.querySelector(`.${HIDE_CLASS_NAME}`)).not.toBeInTheDocument();
+    },
+  );
 });