Join/Leave button + extended filters

Author: arnautov-anton

examples/vite/src/App.tsx

@@ -67,6 +67,8 @@ import {
 import { ConfigurableMessageActions } from './CustomMessageActions';
 import { SidebarToggle } from './Sidebar/SidebarToggle.tsx';
 
+const PUBLIC_VITE_EXAMPLE_API_KEY = 'xzwhhgtazy6h';
+
 init({ data });
 
 const parseUserIdFromToken = (token: string) => {
@@ -125,7 +127,7 @@ const useUser = () => {
   }, [userId]);
 
   const environment =
-    import.meta.env.VITE_STREAM_API_KEY === 'xzwhhgtazy6h'
+    apiKey === PUBLIC_VITE_EXAMPLE_API_KEY
       ? 'public-shared-chat-redesign'
       : 'shared-chat-redesign';
 
@@ -256,6 +258,7 @@ const App = () => {
       ...(userName && { name: userName }),
     },
   });
+
   const searchController = useMemo(() => {
     if (!chatClient) return undefined;
 
@@ -285,6 +288,14 @@ const App = () => {
           members: { $in: [userId] },
         },
         { type: 'public' },
+        // public example channels
+        {
+          cid: {
+            $in: ['random', 'general', 'music', 'jokes'].map(
+              (channelId) => `messaging:${channelId}`,
+            ),
+          },
+        },
       ],
     }),
     [userId],

examples/vite/src/ChatLayout/Panels.tsx

@@ -1,6 +1,11 @@
 import clsx from 'clsx';
-import type { ChannelFilters, ChannelOptions, ChannelSort } from 'stream-chat';
-import { useEffect, useRef } from 'react';
+import type {
+  ChannelFilters,
+  ChannelMemberResponse,
+  ChannelOptions,
+  ChannelSort,
+} from 'stream-chat';
+import { useCallback, useEffect, useRef } from 'react';
 import {
   AIStateIndicator,
   Channel,
@@ -21,6 +26,8 @@ import {
   useChatContext,
   type ChatViewSelectorEntry,
   useThreadsViewContext,
+  Button,
+  useChannelMembersState,
 } from 'stream-chat-react';
 
 import { useAppSettingsSelector } from '../AppSettings/state';
@@ -86,6 +93,34 @@ const ResponsiveChannelPanels = () => {
   );
 };
 
+const HeaderStartContent = () => {
+  const { client } = useChatContext();
+  const { channel } = useChannelStateContext();
+  const members = useChannelMembersState(channel);
+  const membership = members[client.userID!] as ChannelMemberResponse | undefined;
+
+  const isMember = typeof membership?.channel_role === 'string';
+  const canJoin = channel.data?.own_capabilities?.includes('join-channel');
+
+  const handleClick = useCallback(() => {
+    if (isMember) {
+      channel.removeMembers([client.userID!]).then(() => {
+        channel.watch();
+      });
+    } else {
+      channel.addMembers([client.userID!]);
+    }
+  }, [isMember]);
+
+  if (!canJoin) return null;
+
+  return (
+    <Button onClick={handleClick} variant='secondary' appearance='outline' size='sm'>
+      {isMember ? 'Leave' : 'Join'}
+    </Button>
+  );
+};
+
 export const ChannelsPanels = ({
   filters,
   iconOnly,
@@ -128,6 +163,7 @@ export const ChannelsPanels = ({
             }}
           >
             <ChannelList
+              onRemovedFromChannel={() => {}}
               customActiveChannel={initialChannelId}
               filters={filters}
               options={options}
@@ -137,7 +173,7 @@ export const ChannelsPanels = ({
           </WithComponents>
         </div>
         <SidebarResizeHandle layoutRef={channelsLayoutRef} />
-        <WithComponents overrides={{ TypingIndicator }}>
+        <WithComponents overrides={{ TypingIndicator, HeaderStartContent }}>
           <Channel>
             <ResponsiveChannelPanels />
           </Channel>