chore(demo): show ChannelPreviewOverlay always if not a member

Author: MartinCupela

…ChannelOverlay/PublicChannelOverlay.scss …reviewOverlay/ChannelPreviewOverlay.scssexamples/vite/src/PublicChannelOverlay/PublicChannelOverlay.scss renamed to examples/vite/src/ChannelPreviewOverlay/ChannelPreviewOverlay.scss examples/vite/src/PublicChannelOverlay/PublicChannelOverlay.scss renamed to examples/vite/src/ChannelPreviewOverlay/ChannelPreviewOverlay.scss

@@ -1,4 +1,4 @@
-.app-public-channel-overlay {
+.app-channel-preview-overlay {
   position: absolute;
   inset: 0;
   z-index: 3;
@@ -14,7 +14,7 @@
   }
 }
 
-.app-public-channel-overlay__content {
+.app-channel-preview-overlay__content {
   position: relative;
   display: flex;
   flex-direction: column;
@@ -53,7 +53,7 @@
   }
 }
 
-.app-public-channel-overlay__text {
+.app-channel-preview-overlay__text {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -66,39 +66,22 @@
   }
 }
 
-.app-public-channel-overlay__title {
+.app-channel-preview-overlay__title {
   font: var(--str-chat__font-heading-xs);
   color: var(--str-chat__text-color);
 }
 
-.app-public-channel-overlay__description {
+.app-channel-preview-overlay__description {
   font: var(--str-chat__font-caption-default);
   color: var(--str-chat__text-secondary);
   max-width: 200px;
 }
 
-.app-public-channel-overlay__join-button {
+.app-channel-preview-overlay__join-button {
   width: 106px;
 
   .str-chat__loading-indicator {
     height: 20px;
     width: 20px;
   }
 }
-
-.app-public-channel-composer-banner {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  min-height: 56px;
-  padding: 16px;
-  border-top: 1px solid var(--str-chat__border-color);
-}
-
-.app-public-channel-composer-banner__text {
-  margin: 0;
-  font: var(--str-chat__font-caption-default);
-  color: var(--str-chat__text-secondary);
-  text-align: center;
-}

…cChannelOverlay/PublicChannelOverlay.tsx …PreviewOverlay/ChannelPreviewOverlay.tsxexamples/vite/src/PublicChannelOverlay/PublicChannelOverlay.tsx renamed to examples/vite/src/ChannelPreviewOverlay/ChannelPreviewOverlay.tsx examples/vite/src/PublicChannelOverlay/PublicChannelOverlay.tsx renamed to examples/vite/src/ChannelPreviewOverlay/ChannelPreviewOverlay.tsx

@@ -10,9 +10,9 @@ import {
   useNotificationApi,
 } from 'stream-chat-react';
 
-import './PublicChannelOverlay.scss';
+import './ChannelPreviewOverlay.scss';
 
-export const usePublicChannelState = () => {
+export const useChannelMembershipState = () => {
   const { client } = useChatContext();
   const { channel } = useChannelStateContext();
   const members = useChannelMembersState(channel);
@@ -24,8 +24,8 @@ export const usePublicChannelState = () => {
   return { canJoin, channel, client, isMember };
 };
 
-export const PublicChannelOverlay = () => {
-  const { canJoin, channel, client, isMember } = usePublicChannelState();
+export const ChannelPreviewOverlay = () => {
+  const { canJoin, channel, client, isMember } = useChannelMembershipState();
   const { addNotification } = useNotificationApi();
   const [joining, setJoining] = useState(false);
 
@@ -35,7 +35,7 @@ export const PublicChannelOverlay = () => {
       await channel.addMembers([client.userID!]);
     } catch (error) {
       addNotification({
-        emitter: 'PublicChannelOverlay',
+        emitter: 'ChannelPreviewOverlay',
         incident: {
           domain: 'api',
           entity: 'channel',
@@ -50,45 +50,35 @@ export const PublicChannelOverlay = () => {
     }
   }, [addNotification, channel, client.userID]);
 
-  if (isMember || !canJoin) return null;
+  if (isMember) return null;
 
   return (
-    <div className='app-public-channel-overlay'>
-      <div className='app-public-channel-overlay__content'>
+    <div className='app-channel-preview-overlay'>
+      <div className='app-channel-preview-overlay__content'>
         <IconMessageBubbles />
-        <div className='app-public-channel-overlay__text'>
-          <p className='app-public-channel-overlay__title'>
-            You're previewing this group
+        <div className='app-channel-preview-overlay__text'>
+          <p className='app-channel-preview-overlay__title'>
+            {canJoin ? "You're previewing this group" : 'This is a private group'}
           </p>
-          <p className='app-public-channel-overlay__description'>
-            Join to send messages and follow the conversation
+          <p className='app-channel-preview-overlay__description'>
+            {canJoin
+              ? 'Join to send messages and follow the conversation'
+              : 'It is not possible to join this group'}
           </p>
         </div>
-        <Button
-          appearance='solid'
-          className='app-public-channel-overlay__join-button'
-          disabled={joining}
-          onClick={handleJoin}
-          size='md'
-          variant='primary'
-        >
-          {joining ? <LoadingIndicator /> : 'Join Group'}
-        </Button>
+        {canJoin && (
+          <Button
+            appearance='solid'
+            className='app-channel-preview-overlay__join-button'
+            disabled={joining}
+            onClick={handleJoin}
+            size='md'
+            variant='primary'
+          >
+            {joining ? <LoadingIndicator /> : 'Join Group'}
+          </Button>
+        )}
       </div>
     </div>
   );
 };
-
-export const PublicChannelComposerBanner = () => {
-  const { canJoin, isMember } = usePublicChannelState();
-
-  if (isMember || canJoin) return null;
-
-  return (
-    <div className='app-public-channel-composer-banner'>
-      <p className='app-public-channel-composer-banner__text'>
-        You can only view this conversation
-      </p>
-    </div>
-  );
-};

examples/vite/src/ChatLayout/Panels.tsx

@@ -27,11 +27,7 @@ import { useAppSettingsSelector } from '../AppSettings/state';
 import { DESKTOP_LAYOUT_BREAKPOINT } from './constants.ts';
 import { SidebarResizeHandle, ThreadResizeHandle } from './Resize.tsx';
 import { ReturnToSkipNavigation } from '../AccessibilityNavigation/ReturnToSkipNavigation.tsx';
-import {
-  PublicChannelComposerBanner,
-  PublicChannelOverlay,
-  usePublicChannelState,
-} from '../PublicChannelOverlay/PublicChannelOverlay.tsx';
+import { ChannelPreviewOverlay } from '../ChannelPreviewOverlay/ChannelPreviewOverlay.tsx';
 import { useSidebar } from './SidebarContext.tsx';
 import { ThreadStateSync } from './Sync.tsx';
 
@@ -66,23 +62,6 @@ const ChannelThreadPanel = () => {
   );
 };
 
-const MessageComposerOrBanner = () => {
-  const { canJoin, isMember } = usePublicChannelState();
-
-  if (!isMember && !canJoin) return <PublicChannelComposerBanner />;
-
-  return (
-    <MessageComposer
-      additionalTextareaProps={{
-        id: CHANNEL_MESSAGE_COMPOSER_TEXTAREA_TARGET_ID,
-      }}
-      audioRecordingEnabled
-      maxRows={10}
-      asyncMessagesMultiSendEnabled
-    />
-  );
-};
-
 const ResponsiveChannelPanels = () => {
   const { thread } = useChannelStateContext('ResponsiveChannelPanels');
   const isThreadOpen = !!thread;
@@ -105,8 +84,15 @@ const ResponsiveChannelPanels = () => {
             )}
             <ReturnToSkipNavigation />
             <AIStateIndicator />
-            <MessageComposerOrBanner />
-            <PublicChannelOverlay />
+            <MessageComposer
+              additionalTextareaProps={{
+                id: CHANNEL_MESSAGE_COMPOSER_TEXTAREA_TARGET_ID,
+              }}
+              audioRecordingEnabled
+              maxRows={10}
+              asyncMessagesMultiSendEnabled
+            />
+            <ChannelPreviewOverlay />
           </div>
         </Window>
       </WithDragAndDropUpload>