refactor: channel details cleanup

examples/ExpoMessaging/app/channel/[cid]/details/files.tsx

@@ -19,7 +19,7 @@ export default function ChannelFilesScreen() {
   return (
     <>
       <Stack.Screen options={{ contentStyle: { backgroundColor: semantics.backgroundCoreApp } }} />
-      <ChannelDetailsContextProvider value={{ channel }}>
+      <ChannelDetailsContextProvider channel={channel}>
         <FileAttachmentList />
       </ChannelDetailsContextProvider>
     </>

examples/ExpoMessaging/app/channel/[cid]/details/images.tsx

@@ -19,7 +19,7 @@ export default function ChannelImagesScreen() {
   return (
     <>
       <Stack.Screen options={{ contentStyle: { backgroundColor: semantics.backgroundCoreApp } }} />
-      <ChannelDetailsContextProvider value={{ channel }}>
+      <ChannelDetailsContextProvider channel={channel}>
         <MediaList />
       </ChannelDetailsContextProvider>
     </>

examples/ExpoMessaging/app/channel/[cid]/details/index.tsx

@@ -3,13 +3,17 @@ import React, { useCallback, useContext, useState } from 'react';
 import { Stack, useRouter } from 'expo-router';
 
 import {
-  ChannelAddMembersModal,
   ChannelAllMembersModal,
   ChannelDetails,
+  ChannelDetailsActionsSection,
   ChannelDetailsContextProvider,
+  ChannelDetailsMemberSection,
+  ChannelDetailsNavigationSection,
   ChannelDetailsNavigationSectionType,
   GetChannelDetailsNavigationItems,
-  GetChannelMemberActionItems,
+  ChannelDetailsEditButton,
+  useCanEditChannel,
+  useIsDirectChat,
   WithComponents,
 } from 'stream-chat-expo';
 
@@ -23,13 +27,16 @@ const navigationItems: {
   files: 'files',
 };
 
-const Header = () => {
+const EmptyHeader = () => {
   return null;
 };
 
 export default function ChannelDetailsScreen() {
   const router = useRouter();
   const { channel } = useContext(AppContext);
+  const canEdit = useCanEditChannel(channel);
+  const isDirect = useIsDirectChat(channel);
+  const isEditButtonVisible = canEdit && !isDirect;
 
   const getNavigationItems = useCallback<GetChannelDetailsNavigationItems>(
     ({ defaultItems }) =>
@@ -48,20 +55,33 @@ export default function ChannelDetailsScreen() {
 
   const popToRoot = useCallback(() => router.replace('/'), [router]);
 
-  const [isAddMembersVisible, setAddMembersVisible] = useState(false);
-  const handleAddMembersClose = useCallback(() => setAddMembersVisible(false), []);
-  const handleAddMembersPress = useCallback(() => {
-    setAllMembersVisible(false);
-    setAddMembersVisible(true);
-  }, []);
-
   const [isAllMembersVisible, setAllMembersVisible] = useState(false);
   const handleAllMembersClose = useCallback(() => setAllMembersVisible(false), []);
   const handleAllMembersPress = useCallback(() => setAllMembersVisible(true), []);
 
-  const getChannelMemberActionItems = useCallback<GetChannelMemberActionItems>(
-    ({ defaultItems }) => defaultItems,
-    [],
+  const NavigationSection = useCallback(
+    () => <ChannelDetailsNavigationSection getNavigationItems={getNavigationItems} />,
+    [getNavigationItems],
+  );
+
+  const MemberSection = useCallback(
+    () => <ChannelDetailsMemberSection onViewAllMembersPress={handleAllMembersPress} />,
+    [handleAllMembersPress],
+  );
+
+  const renderHeaderRight = useCallback(
+    () =>
+      channel ? (
+        <ChannelDetailsContextProvider channel={channel}>
+          <ChannelDetailsEditButton style={{ flexShrink: 0, width: 'auto' }} />
+        </ChannelDetailsContextProvider>
+      ) : null,
+    [channel],
+  );
+
+  const ActionsSection = useCallback(
+    () => <ChannelDetailsActionsSection onChannelDismiss={popToRoot} />,
+    [popToRoot],
   );
 
   if (!channel) {
@@ -73,24 +93,21 @@ export default function ChannelDetailsScreen() {
       <Stack.Screen
         options={{
           title: 'Channel details',
+          headerRight: isEditButtonVisible ? renderHeaderRight : undefined,
         }}
       />
-      <WithComponents overrides={{ ChannelDetailsNavHeader: Header }}>
-        <ChannelDetails
-          channel={channel}
-          getChannelMemberActionItems={getChannelMemberActionItems}
-          getNavigationItems={getNavigationItems}
-          onChannelDismiss={popToRoot}
-          onViewAllMembersPress={handleAllMembersPress}
-        />
-      </WithComponents>
-      <ChannelDetailsContextProvider value={{ channel, getChannelMemberActionItems }}>
-        <ChannelAllMembersModal
-          onClose={handleAllMembersClose}
-          visible={isAllMembersVisible}
-          onAddMembersPress={handleAddMembersPress}
-        />
-        <ChannelAddMembersModal onClose={handleAddMembersClose} visible={isAddMembersVisible} />
+      <ChannelDetailsContextProvider channel={channel}>
+        <WithComponents
+          overrides={{
+            ChannelDetailsActionsSection: ActionsSection,
+            ChannelDetailsMemberSection: MemberSection,
+            ChannelDetailsNavHeader: EmptyHeader,
+            ChannelDetailsNavigationSection: NavigationSection,
+          }}
+        >
+          <ChannelDetails />
+          <ChannelAllMembersModal onClose={handleAllMembersClose} visible={isAllMembersVisible} />
+        </WithComponents>
       </ChannelDetailsContextProvider>
     </>
   );

examples/ExpoMessaging/app/channel/[cid]/details/pinned.tsx

@@ -48,7 +48,7 @@ export default function ChannelPinnedMessagesScreen() {
   return (
     <>
       <Stack.Screen options={{ contentStyle: { backgroundColor: semantics.backgroundCoreApp } }} />
-      <ChannelDetailsContextProvider value={{ channel }}>
+      <ChannelDetailsContextProvider channel={channel}>
         <WithComponents overrides={{ PinnedMessageItem: PinnedMessage }}>
           <PinnedMessageList />
         </WithComponents>

examples/SampleApp/src/screens/ChannelDetailsScreen.tsx

@@ -1,16 +1,20 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback } from 'react';
 
-import type { RouteProp } from '@react-navigation/native';
+import { useNavigation, type RouteProp } from '@react-navigation/native';
 import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
 
 import {
   ChannelDetails,
+  ChannelDetailsActionsSection,
+  ChannelDetailsNavigationSection,
   GetChannelDetailsNavigationItems,
   GetChannelMemberActionItems,
-  ChannelAddMembersModal,
-  ChannelAllMembersModal,
   ChannelDetailsContextProvider,
   ChannelDetailsNavigationSectionType,
+  ChannelMemberActionsSheet,
+  WithComponents,
+  ChannelDetailsActionsSectionProps,
+  useChannelDetailsContext,
 } from 'stream-chat-react-native';
 
 import { SendDirectMessage } from '../icons/SendDirectMessage';
@@ -40,12 +44,10 @@ const navigationItems: {
   files: 'ChannelFilesScreen',
 };
 
-export const ChannelDetailsScreen: React.FC<Props> = ({
-  navigation,
-  route: {
-    params: { channel },
-  },
-}) => {
+const ChannelDetailsScreenInner = () => {
+  const navigation = useNavigation<ChannelDetailsScreenNavigationProp>();
+  const { channel, closeModals } = useChannelDetailsContext();
+
   const onBack = useCallback(() => navigation.goBack(), [navigation]);
   const getNavigationItems = useCallback<GetChannelDetailsNavigationItems>(
     ({ defaultItems }) =>
@@ -65,15 +67,13 @@ export const ChannelDetailsScreen: React.FC<Props> = ({
       }),
     [navigation],
   );
-  const [isAddMembersVisible, setAddMembersVisible] = useState(false);
-  const handleAddMembersClose = useCallback(() => setAddMembersVisible(false), []);
-  const handleAddMembersPress = useCallback(() => {
-    setAllMembersVisible(false);
-    setAddMembersVisible(true);
-  }, []);
-  const [isAllMembersVisible, setAllMembersVisible] = useState(false);
-  const handleAllMembersClose = useCallback(() => setAllMembersVisible(false), []);
-  const handleAllMembersPress = useCallback(() => setAllMembersVisible(true), []);
+
+  const ActionsSection = useCallback(
+    (props: ChannelDetailsActionsSectionProps) => (
+      <ChannelDetailsActionsSection {...props} onChannelDismiss={popToRoot} />
+    ),
+    [popToRoot],
+  );
 
   const getChannelMemberActionItems = useCallback<GetChannelMemberActionItems>(
     ({ context, defaultItems }) => {
@@ -85,7 +85,7 @@ export const ChannelDetailsScreen: React.FC<Props> = ({
       return [
         {
           action: () => {
-            setAllMembersVisible(false);
+            closeModals();
             navigation.navigate('NewDirectMessagingScreen', { initialUser: user });
             return Promise.resolve();
           },
@@ -97,28 +97,47 @@ export const ChannelDetailsScreen: React.FC<Props> = ({
         ...defaultItems,
       ];
     },
-    [navigation],
+    [navigation, closeModals],
   );
 
-  return (
-    <>
-      <ChannelDetails
-        channel={channel}
+  const NavigationSection = useCallback(
+    (props: Parameters<typeof ChannelDetailsNavigationSection>[0]) => (
+      <ChannelDetailsNavigationSection {...props} getNavigationItems={getNavigationItems} />
+    ),
+    [getNavigationItems],
+  );
+
+  const MemberActionsSheet = useCallback(
+    (props: Parameters<typeof ChannelMemberActionsSheet>[0]) => (
+      <ChannelMemberActionsSheet
+        {...props}
         getChannelMemberActionItems={getChannelMemberActionItems}
-        getNavigationItems={getNavigationItems}
-        onBack={onBack}
-        onChannelDismiss={popToRoot}
-        // Handler view all members modal so we can close it after navigation is triggered by our custom action
-        onViewAllMembersPress={handleAllMembersPress}
       />
-      <ChannelDetailsContextProvider value={{ channel, getChannelMemberActionItems }}>
-        <ChannelAllMembersModal
-          onClose={handleAllMembersClose}
-          visible={isAllMembersVisible}
-          onAddMembersPress={handleAddMembersPress}
-        />
-        <ChannelAddMembersModal onClose={handleAddMembersClose} visible={isAddMembersVisible} />
-      </ChannelDetailsContextProvider>
-    </>
+    ),
+    [getChannelMemberActionItems],
+  );
+
+  return (
+    <WithComponents
+      overrides={{
+        ChannelDetailsActionsSection: ActionsSection,
+        ChannelDetailsNavigationSection: NavigationSection,
+        ChannelMemberActionsSheet: MemberActionsSheet,
+      }}
+    >
+      <ChannelDetails onBack={onBack} />
+    </WithComponents>
+  );
+};
+
+export const ChannelDetailsScreen: React.FC<Props> = ({
+  route: {
+    params: { channel },
+  },
+}) => {
+  return (
+    <ChannelDetailsContextProvider channel={channel}>
+      <ChannelDetailsScreenInner />
+    </ChannelDetailsContextProvider>
   );
 };

examples/SampleApp/src/screens/ChannelFilesScreen.tsx

@@ -34,7 +34,7 @@ export const ChannelFilesScreen: React.FC<ChannelFilesScreenProps> = ({
   return (
     <View style={[styles.flex]}>
       <ScreenHeader titleText='Files' />
-      <ChannelDetailsContextProvider value={{ channel }}>
+      <ChannelDetailsContextProvider channel={channel}>
         <FileAttachmentList />
       </ChannelDetailsContextProvider>
     </View>

examples/SampleApp/src/screens/ChannelImagesScreen.tsx

@@ -26,7 +26,7 @@ export const ChannelImagesScreen: React.FC<ChannelImagesScreenProps> = ({
   return (
     <View style={[styles.flex]}>
       <ScreenHeader titleText='Photos and Videos' />
-      <ChannelDetailsContextProvider value={{ channel }}>
+      <ChannelDetailsContextProvider channel={channel}>
         <MediaList />
       </ChannelDetailsContextProvider>
     </View>

examples/SampleApp/src/screens/ChannelPinnedMessagesScreen.tsx

@@ -106,7 +106,7 @@ export const ChannelPinnedMessagesScreen: React.FC<ChannelPinnedMessagesScreenPr
   return (
     <View style={[styles.flex]}>
       <ScreenHeader titleText='Pinned Messages' />
-      <ChannelDetailsContextProvider value={{ channel }}>
+      <ChannelDetailsContextProvider channel={channel}>
         <WithComponents overrides={{ PinnedMessageItem: PinnedMessage }}>
           <PinnedMessageList />
         </WithComponents>